Move website task out of `gulp`

build/prepare-website-branch.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+/** @typedef {import('../build/utils').IFile} IFile */
+
+const path = require('path');
+const cp = require('child_process');
+const { REPO_ROOT } = require('./utils');
+
+cp.execSync('git init', {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+
+const remoteUrl = cp.execSync('git remote get-url origin');
+const committerUserName = cp.execSync("git log --format='%an' -1");
+const committerEmail = cp.execSync("git log --format='%ae' -1");
+
+cp.execSync(`git config user.name ${committerUserName}`, {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+cp.execSync(`git config user.email ${committerEmail}`, {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+
+cp.execSync(`git remote add origin ${remoteUrl}`, {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+cp.execSync('git checkout -b gh-pages', {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+cp.execSync('git add .', {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+cp.execSync('git commit -m "Publish website"', {
+	cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+});
+
+console.log('RUN monaco-editor-website>git push origin gh-pages --force');

build/release.js

@@ -11,17 +11,16 @@
  * @typedef { { name:string; contrib:string; modulePrefix:string; rootPath:string; paths:IPluginPaths } } IPlugin
  * @typedef { { METADATA: {CORE:{paths:ICorePaths}; PLUGINS:IPlugin[];} } } IMetadata
  */
+/** @typedef {import('../build/utils').IFile} IFile */
 
 const glob = require('glob');
 const path = require('path');
 const fs = require('fs');
-const { REPO_ROOT, removeDir, ensureDir } = require('../build/utils');
+const { REPO_ROOT, removeDir, ensureDir, readFiles, writeFiles } = require('../build/utils');
 const ts = require('typescript');
 /**@type { IMetadata } */
 const metadata = require('../metadata.js');
 
-/** @typedef {{ path:string; contents:Buffer;}} IFile */
-
 removeDir(`release`);
 
 // dev folder
@@ -466,42 +465,3 @@ function releaseThirdPartyNotices() {
 
 	writeFiles([tpn], `release`);
 }
-
-/**
- * @param {string} pattern
- * @param {{ base:string; ignore?:string[] }} options
- * @returns {IFile[]}
- */
-function readFiles(pattern, options) {
-	let files = glob.sync(pattern, { cwd: REPO_ROOT, ignore: options.ignore });
-	// remove dirs
-	files = files.filter((file) => {
-		const fullPath = path.join(REPO_ROOT, file);
-		const stats = fs.statSync(fullPath);
-		return stats.isFile();
-	});
-
-	const base = options.base;
-	const baseLength = base === '' ? 0 : base.endsWith('/') ? base.length : base.length + 1;
-	return files.map((file) => {
-		const fullPath = path.join(REPO_ROOT, file);
-		const contents = fs.readFileSync(fullPath);
-		const relativePath = file.substring(baseLength);
-		return {
-			path: relativePath,
-			contents
-		};
-	});
-}
-
-/**
- * @param {IFile[]} files
- * @param {string} dest
- */
-function writeFiles(files, dest) {
-	for (const file of files) {
-		const fullPath = path.join(REPO_ROOT, dest, file.path);
-		ensureDir(path.dirname(fullPath));
-		fs.writeFileSync(fullPath, file.contents);
-	}
-}

build/utils.js

@@ -11,6 +11,7 @@ const cp = require('child_process');
 const esbuild = require('esbuild');
 /** @type {any} */
 const alias = require('esbuild-plugin-alias');
+const glob = require('glob');
 
 const REPO_ROOT = path.join(__dirname, '../');
 exports.REPO_ROOT = REPO_ROOT;
@@ -340,3 +341,46 @@ const bundledFileHeader = (() => {
 	return BUNDLED_FILE_HEADER;
 })();
 exports.bundledFileHeader = bundledFileHeader;
+
+/** @typedef {{ path:string; contents:Buffer;}} IFile */
+
+/**
+ * @param {string} pattern
+ * @param {{ base:string; ignore?:string[]; dot?:boolean; }} options
+ * @returns {IFile[]}
+ */
+function readFiles(pattern, options) {
+	let files = glob.sync(pattern, { cwd: REPO_ROOT, ignore: options.ignore, dot: options.dot });
+	// remove dirs
+	files = files.filter((file) => {
+		const fullPath = path.join(REPO_ROOT, file);
+		const stats = fs.statSync(fullPath);
+		return stats.isFile();
+	});
+
+	const base = options.base;
+	const baseLength = base === '' ? 0 : base.endsWith('/') ? base.length : base.length + 1;
+	return files.map((file) => {
+		const fullPath = path.join(REPO_ROOT, file);
+		const contents = fs.readFileSync(fullPath);
+		const relativePath = file.substring(baseLength);
+		return {
+			path: relativePath,
+			contents
+		};
+	});
+}
+exports.readFiles = readFiles;
+
+/**
+ * @param {IFile[]} files
+ * @param {string} dest
+ */
+function writeFiles(files, dest) {
+	for (const file of files) {
+		const fullPath = path.join(REPO_ROOT, dest, file.path);
+		ensureDir(path.dirname(fullPath));
+		fs.writeFileSync(fullPath, file.contents);
+	}
+}
+exports.writeFiles = writeFiles;

build/website.js

@@ -0,0 +1,126 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+/** @typedef {import('../build/utils').IFile} IFile */
+
+const path = require('path');
+const fs = require('fs');
+const cp = require('child_process');
+const CleanCSS = require('clean-css');
+const { REPO_ROOT, removeDir, readFiles, writeFiles } = require('./utils');
+
+/** @type {string} */
+const MONACO_EDITOR_VERSION = (() => {
+	const packageJsonPath = path.join(REPO_ROOT, 'package.json');
+	const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
+	const version = packageJson.version;
+	if (!/\d+\.\d+\.\d+/.test(version)) {
+		console.log('unrecognized package.json version: ' + version);
+		process.exit(1);
+	}
+	return version;
+})();
+
+removeDir(`../monaco-editor-website`);
+
+generateWebsite();
+
+/**
+ * @param {string} dataPath
+ * @param {string} contents
+ * @param {RegExp} regex
+ * @param {(match:string, fileContents:Buffer)=>string} callback
+ * @returns {string}
+ */
+function replaceWithRelativeResource(dataPath, contents, regex, callback) {
+	return contents.replace(regex, function (_, m0) {
+		const filePath = path.join(REPO_ROOT, 'monaco-editor/website', path.dirname(dataPath), m0);
+		return callback(m0, fs.readFileSync(filePath));
+	});
+}
+
+function generateWebsite() {
+	const files = readFiles('monaco-editor/website/**/*', {
+		base: 'monaco-editor/website',
+		dot: true
+	});
+
+	for (const file of files) {
+		if (!file.contents || !/\.(html)$/.test(file.path) || /new-samples/.test(file.path)) {
+			continue;
+		}
+
+		let contents = file.contents.toString();
+		contents = contents.replace(/\.\.\/\.\.\/release\/dev/g, 'node_modules/monaco-editor/min');
+		// contents = contents.replace(/\.\.\/\.\.\/release\/dev/g, '../monaco-editor/release/dev');
+		contents = contents.replace(/{{version}}/g, MONACO_EDITOR_VERSION);
+		contents = contents.replace(/{{year}}/g, String(new Date().getFullYear()));
+
+		// Preload xhr contents
+		contents = replaceWithRelativeResource(
+			file.path,
+			contents,
+			/<pre data-preload="([^"]+)".*/g,
+			function (m0, fileContents) {
+				return (
+					'<pre data-preload="' +
+					m0 +
+					'" style="display:none">' +
+					fileContents
+						.toString('utf8')
+						.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/>/g, '&gt;') +
+					'</pre>'
+				);
+			}
+		);
+
+		// Inline fork.png
+		contents = replaceWithRelativeResource(
+			file.path,
+			contents,
+			/src="(\.\/fork.png)"/g,
+			function (m0, fileContents) {
+				return 'src="data:image/png;base64,' + fileContents.toString('base64') + '"';
+			}
+		);
+
+		// let allCSS = '';
+		contents = replaceWithRelativeResource(
+			file.path,
+			contents,
+			/<link data-inline="yes-please" href="([^"]+)".*/g,
+			function (m0, fileContents) {
+				const minifiedCSS = new CleanCSS().minify(fileContents.toString('utf8')).styles;
+				return `<style>${minifiedCSS}</style>`;
+			}
+		);
+
+		// Inline javascript
+		contents = replaceWithRelativeResource(
+			file.path,
+			contents,
+			/<script data-inline="yes-please" src="([^"]+)".*/g,
+			function (m0, fileContents) {
+				return '<script>' + fileContents.toString('utf8') + '</script>';
+			}
+		);
+
+		file.contents = Buffer.from(contents.split(/\r\n|\r|\n/).join('\n'));
+	}
+
+	writeFiles(files, `../monaco-editor-website`);
+
+	// temporarily create package.json so that npm install doesn't bark
+	fs.writeFileSync(path.join(REPO_ROOT, '../monaco-editor-website/package.json'), '{}');
+	fs.writeFileSync(path.join(REPO_ROOT, '../monaco-editor-website/.nojekyll'), '');
+	cp.execSync('npm install monaco-editor', {
+		cwd: path.join(REPO_ROOT, '../monaco-editor-website')
+	});
+	fs.unlinkSync(path.join(REPO_ROOT, '../monaco-editor-website/package.json'));
+}

gulpfile.js

@@ -7,247 +7,3 @@ const cp = require('child_process');
 const CleanCSS = require('clean-css');
 const uncss = require('uncss');
 const File = require('vinyl');
-
-/** @type {string} */
-const MONACO_EDITOR_VERSION = (function () {
-	const packageJsonPath = path.join(__dirname, 'package.json');
-	const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
-	const version = packageJson.version;
-	if (!/\d+\.\d+\.\d+/.test(version)) {
-		console.log('unrecognized package.json version: ' + version);
-		process.exit(0);
-	}
-	return version;
-})();
-
-async function _execute(task) {
-	// Always invoke as if it were a callback task
-	return new Promise((resolve, reject) => {
-		if (task.length === 1) {
-			// this is a calback task
-			task((err) => {
-				if (err) {
-					return reject(err);
-				}
-				resolve();
-			});
-			return;
-		}
-		const taskResult = task();
-		if (typeof taskResult === 'undefined') {
-			// this is a sync task
-			resolve();
-			return;
-		}
-		if (typeof taskResult.then === 'function') {
-			// this is a promise returning task
-			taskResult.then(resolve, reject);
-			return;
-		}
-		// this is a stream returning task
-		taskResult.on('end', (_) => resolve());
-		taskResult.on('error', (err) => reject(err));
-	});
-}
-
-function taskSeries(...tasks) {
-	return async () => {
-		for (let i = 0; i < tasks.length; i++) {
-			await _execute(tasks[i]);
-		}
-	};
-}
-
-// --- website
-const cleanWebsiteTask = function (cb) {
-	rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb);
-};
-const buildWebsiteTask = taskSeries(cleanWebsiteTask, function () {
-	/**
-	 * @param {string} dataPath
-	 * @param {string} contents
-	 * @param {RegExp} regex
-	 * @param {(match:string, fileContents:Buffer)=>string} callback
-	 * @returns {string}
-	 */
-	function replaceWithRelativeResource(dataPath, contents, regex, callback) {
-		return contents.replace(regex, function (_, m0) {
-			var filePath = path.join(path.dirname(dataPath), m0);
-			return callback(m0, fs.readFileSync(filePath));
-		});
-	}
-
-	var waiting = 0;
-	var done = false;
-
-	return es
-		.merge(
-			gulp
-				.src(['monaco-editor/website/**/*'], { dot: true })
-				.pipe(
-					es.through(
-						/**
-						 * @param {File} data
-						 */
-						function (data) {
-							if (!data.contents || !/\.(html)$/.test(data.path) || /new-samples/.test(data.path)) {
-								return this.emit('data', data);
-							}
-
-							let contents = data.contents.toString();
-							contents = contents.replace(/\.\.\/release\/dev/g, 'node_modules/monaco-editor/min');
-							contents = contents.replace(/{{version}}/g, MONACO_EDITOR_VERSION);
-							contents = contents.replace(/{{year}}/g, new Date().getFullYear());
-
-							// Preload xhr contents
-							contents = replaceWithRelativeResource(
-								data.path,
-								contents,
-								/<pre data-preload="([^"]+)".*/g,
-								function (m0, fileContents) {
-									return (
-										'<pre data-preload="' +
-										m0 +
-										'" style="display:none">' +
-										fileContents
-											.toString('utf8')
-											.replace(/&/g, '&amp;')
-											.replace(/</g, '&lt;')
-											.replace(/>/g, '&gt;') +
-										'</pre>'
-									);
-								}
-							);
-
-							// Inline fork.png
-							contents = replaceWithRelativeResource(
-								data.path,
-								contents,
-								/src="(\.\/fork.png)"/g,
-								function (m0, fileContents) {
-									return 'src="data:image/png;base64,' + fileContents.toString('base64') + '"';
-								}
-							);
-
-							let allCSS = '';
-							let tmpcontents = replaceWithRelativeResource(
-								data.path,
-								contents,
-								/<link data-inline="yes-please" href="([^"]+)".*/g,
-								function (m0, fileContents) {
-									allCSS += fileContents.toString('utf8');
-									return '';
-								}
-							);
-							tmpcontents = tmpcontents.replace(/<script.*/g, '');
-							tmpcontents = tmpcontents.replace(/<link.*/g, '');
-
-							waiting++;
-							uncss(
-								tmpcontents,
-								{
-									raw: allCSS,
-									ignore: [/\.alert\b/, /\.alert-error\b/, /\.playground-page\b/]
-								},
-								function (err, output) {
-									waiting--;
-
-									if (!err) {
-										output = new CleanCSS().minify(output).styles;
-										let isFirst = true;
-										contents = contents.replace(
-											/<link data-inline="yes-please" href="([^"]+)".*/g,
-											function (_, m0) {
-												if (isFirst) {
-													isFirst = false;
-													return '<style>' + output + '</style>';
-												}
-												return '';
-											}
-										);
-									}
-
-									// Inline javascript
-									contents = replaceWithRelativeResource(
-										data.path,
-										contents,
-										/<script data-inline="yes-please" src="([^"]+)".*/g,
-										function (m0, fileContents) {
-											return '<script>' + fileContents.toString('utf8') + '</script>';
-										}
-									);
-
-									data.contents = Buffer.from(contents.split(/\r\n|\r|\n/).join('\n'));
-									this.emit('data', data);
-
-									if (done && waiting === 0) {
-										this.emit('end');
-									}
-								}.bind(this)
-							);
-						},
-						function () {
-							done = true;
-							if (waiting === 0) {
-								this.emit('end');
-							}
-						}
-					)
-				)
-				.pipe(gulp.dest('../monaco-editor-website'))
-		)
-
-		.pipe(
-			es.through(
-				/**
-				 * @param {File} data
-				 */
-				function (data) {
-					this.emit('data', data);
-				},
-				function () {
-					// temporarily create package.json so that npm install doesn't bark
-					fs.writeFileSync('../monaco-editor-website/package.json', '{}');
-					fs.writeFileSync('../monaco-editor-website/.nojekyll', '');
-					cp.execSync('npm install monaco-editor', {
-						cwd: path.join(__dirname, '../monaco-editor-website')
-					});
-					fs.unlinkSync('../monaco-editor-website/package.json');
-
-					this.emit('end');
-				}
-			)
-		);
-});
-gulp.task('build-website', buildWebsiteTask);
-
-gulp.task('prepare-website-branch', async function () {
-	cp.execSync('git init', {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-
-	let remoteUrl = cp.execSync('git remote get-url origin');
-	let committerUserName = cp.execSync("git log --format='%an' -1");
-	let committerEmail = cp.execSync("git log --format='%ae' -1");
-
-	cp.execSync(`git config user.name ${committerUserName}`, {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-	cp.execSync(`git config user.email ${committerEmail}`, {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-
-	cp.execSync(`git remote add origin ${remoteUrl}`, {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-	cp.execSync('git checkout -b gh-pages', {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-	cp.execSync('git add .', {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-	cp.execSync('git commit -m "Publish website"', {
-		cwd: path.join(__dirname, '../monaco-editor-website')
-	});
-	console.log('RUN monaco-editor-website>git push origin gh-pages --force');
-});

monaco-editor/website/index.html

@@ -14,7 +14,7 @@
 		<link
 			data-name="vs/editor/editor.main"
 			rel="stylesheet"
-			href="../release/dev/vs/editor/editor.main.css"
+			href="../../release/dev/vs/editor/editor.main.css"
 		/>
 	</head>
 
@@ -219,11 +219,11 @@
 		></script>
 
 		<script>
-			var require = { paths: { vs: '../release/dev/vs' } };
+			var require = { paths: { vs: '../../release/dev/vs' } };
 		</script>
-		<script src="../release/dev/vs/loader.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.js"></script>
+		<script src="../../release/dev/vs/loader.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.js"></script>
 		<script data-inline="yes-please" src="./index/index.js"></script>
 	</body>
 </html>

monaco-editor/website/monarch.html

@@ -14,7 +14,7 @@
 		<link
 			data-name="vs/editor/editor.main"
 			rel="stylesheet"
-			href="../release/dev/vs/editor/editor.main.css"
+			href="../../release/dev/vs/editor/editor.main.css"
 		/>
 	</head>
 	<body>
@@ -5067,11 +5067,11 @@ return {
 		></script>
 
 		<script>
-			var require = { paths: { vs: '../release/dev/vs' } };
+			var require = { paths: { vs: '../../release/dev/vs' } };
 		</script>
-		<script src="../release/dev/vs/loader.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.js"></script>
+		<script src="../../release/dev/vs/loader.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.js"></script>
 
 		<script data-inline="yes-please" src="./monarch/monarch.js"></script>
 	</body>

monaco-editor/website/playground.html

@@ -15,7 +15,7 @@
 		<link
 			data-name="vs/editor/editor.main"
 			rel="stylesheet"
-			href="../release/dev/vs/editor/editor.main.css"
+			href="../../release/dev/vs/editor/editor.main.css"
 		/>
 	</head>
 	<body class="playground-page">
@@ -96,11 +96,11 @@
 		></script>
 
 		<script>
-			var require = { paths: { vs: '../release/dev/vs' } };
+			var require = { paths: { vs: '../../release/dev/vs' } };
 		</script>
-		<script src="../release/dev/vs/loader.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.nls.js"></script>
-		<script src="../release/dev/vs/editor/editor.main.js"></script>
+		<script src="../../release/dev/vs/loader.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
+		<script src="../../release/dev/vs/editor/editor.main.js"></script>
 
 		<script data-inline="yes-please" src="./playground/new-samples/all.js"></script>
 		<script data-inline="yes-please" src="./playground/playground.js"></script>

monaco-editor/website/playground/playground-runner.html

@@ -6,7 +6,7 @@
 		<link
 			data-name="vs/editor/editor.main"
 			rel="stylesheet"
-			href="../../release/dev/vs/editor/editor.main.css"
+			href="../../../release/dev/vs/editor/editor.main.css"
 		/>
 
 		<style type="text/css">
@@ -30,11 +30,11 @@
 		</div>
 
 		<script>
-			var require = { paths: { vs: '../../release/dev/vs' } };
+			var require = { paths: { vs: '../../../release/dev/vs' } };
 		</script>
-		<script src="../../release/dev/vs/loader.js"></script>
-		<script src="../../release/dev/vs/editor/editor.main.nls.js"></script>
-		<script src="../../release/dev/vs/editor/editor.main.js"></script>
+		<script src="../../../release/dev/vs/loader.js"></script>
+		<script src="../../../release/dev/vs/editor/editor.main.nls.js"></script>
+		<script src="../../../release/dev/vs/editor/editor.main.js"></script>
 
 		<script type="text/javascript">
 			var receivedCall = null;

package.json

@@ -6,8 +6,7 @@
 	"author": "Microsoft Corporation",
 	"license": "MIT",
 	"scripts": {
-		"build-website": "gulp build-website && npm run typedoc",
-		"gulp": "node ./node_modules/gulp/bin/gulp.js",
+		"build-website": "node ./build/website.js && npm run typedoc",
 		"import-typescript": "node ./build/importTypescript.js",
 		"playwright-install": "node ./node_modules/playwright/install.js",
 		"playwright-install-deps": "playwright install-deps",
@@ -22,7 +21,7 @@
 		"test": "node ./test/unit/all.js",
 		"typedoc": "cd monaco-editor/typedoc && \"../../node_modules/.bin/typedoc\" --options ./typedoc.json",
 		"watch": "tsc -w -p ./src",
-		"website": "gulp build-website && npm run typedoc && gulp prepare-website-branch"
+		"website": "node ./build/website.js && npm run typedoc && node ./build/prepare-website-branch.js"
 	},
 	"typings": "./esm/vs/editor/editor.api.d.ts",
 	"module": "./esm/vs/editor/editor.main.js",
@@ -31,16 +30,13 @@
 		"url": "https://github.com/microsoft/monaco-editor"
 	},
 	"devDependencies": {
-		"@types/event-stream": "^3.3.34",
 		"@types/tape": "^4.13.2",
 		"@typescript/vfs": "^1.3.5",
 		"chai": "^4.3.4",
 		"clean-css": "^5.2.2",
 		"esbuild": "^0.13.13",
 		"esbuild-plugin-alias": "^0.2.1",
-		"event-stream": "4.0.1",
 		"glob": "^7.2.0",
-		"gulp": "^4.0.2",
 		"husky": "^7.0.4",
 		"jsdom": "^18.1.0",
 		"jsonc-parser": "^3.0.0",
@@ -50,13 +46,10 @@
 		"prettier": "^2.4.1",
 		"pretty-quick": "^3.1.1",
 		"requirejs": "^2.3.6",
-		"rimraf": "^3.0.2",
 		"tape": "^5.3.1",
 		"terser": "^5.10.0",
 		"typedoc": "^0.22.9",
 		"typescript": "4.4.4",
-		"uncss": "https://github.com/uncss/uncss.git#d0adf4bb89ef4f82006f8dd5b40d22a94269e50a",
-		"vinyl": "^2.2.1",
 		"vscode-css-languageservice": "^5.1.8",
 		"vscode-html-languageservice": "^4.1.1",
 		"vscode-json-languageservice": "4.1.10",