Adopt esbuild in `monaco-html`

build/utils.js

@@ -6,6 +6,7 @@
 const fs = require('fs');
 const path = require('path');
 const cp = require('child_process');
+const esbuild = require('esbuild');
 
 const REPO_ROOT = path.join(__dirname, '..');
 
@@ -154,6 +155,21 @@ function dts(_source, _destination, namespace) {
 }
 exports.dts = dts;
 
+/**
+ * @param {import('esbuild').BuildOptions} options
+ */
+function build(options) {
+	esbuild.build(options).then((result) => {
+		if (result.errors.length > 0) {
+			console.error(result.errors);
+		}
+		if (result.warnings.length > 0) {
+			console.error(result.warnings);
+		}
+	});
+}
+exports.build = build;
+
 function getGitVersion() {
 	const git = path.join(REPO_ROOT, '.git');
 	const headPath = path.join(git, 'HEAD');

monaco-css/build.js

@@ -3,10 +3,9 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-const esbuild = require('esbuild');
 const alias = require('esbuild-plugin-alias');
 const path = require('path');
-const { removeDir, tsc, dts } = require('../build/utils');
+const { removeDir, tsc, dts, build } = require('../build/utils');
 
 removeDir(`monaco-css/release`);
 removeDir(`monaco-css/out`);
@@ -19,20 +18,6 @@ dts(
 	'monaco.languages.css'
 );
 
-/**
- * @param {import('esbuild').BuildOptions} options
- */
-function build(options) {
-	esbuild.build(options).then((result) => {
-		if (result.errors.length > 0) {
-			console.error(result.errors);
-		}
-		if (result.warnings.length > 0) {
-			console.error(result.warnings);
-		}
-	});
-}
-
 build({
 	entryPoints: ['src/monaco.contribution.ts', 'src/cssMode.ts', 'src/css.worker.ts'],
 	bundle: true,

monaco-editor/test/playground.generated/extending-language-services-semantic-tokens-provider-example.html

@@ -147,6 +147,7 @@ monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
 monaco.editor.defineTheme('myCustomTheme', {
 	base: 'vs',
 	inherit: true,
+	colors: {},
 	rules: [
 		{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
 		{ token: 'keyword', foreground: 'ce63eb' },

monaco-html/build.js

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const alias = require('esbuild-plugin-alias');
+const path = require('path');
+const { removeDir, tsc, dts, build } = require('../build/utils');
+
+removeDir(`monaco-html/release`);
+removeDir(`monaco-html/out`);
+
+tsc(`monaco-html/src/tsconfig.json`);
+
+dts(
+	`monaco-html/out/amd/monaco.contribution.d.ts`,
+	`monaco-html/monaco.d.ts`,
+	'monaco.languages.html'
+);
+
+build({
+	entryPoints: ['src/monaco.contribution.ts', 'src/htmlMode.ts', 'src/html.worker.ts'],
+	bundle: true,
+	target: 'esnext',
+	format: 'esm',
+	define: {
+		AMD: false
+	},
+	external: ['monaco-editor-core', '*/htmlMode'],
+	outdir: 'release/esm/',
+	plugins: [
+		alias({
+			'vscode-nls': path.join(__dirname, 'src/fillers/vscode-nls.ts')
+		})
+	]
+});
+
+/**
+ * @param {'dev'|'min'} type
+ * @param {string} entryPoint
+ * @param {string} banner
+ */
+function buildOneAMD(type, entryPoint, banner) {
+	/** @type {import('esbuild').BuildOptions} */
+	const options = {
+		entryPoints: [entryPoint],
+		bundle: true,
+		target: 'esnext',
+		format: 'iife',
+		define: {
+			AMD: true
+		},
+		external: ['*/htmlMode'],
+		globalName: 'moduleExports',
+		banner: {
+			js: banner
+		},
+		footer: {
+			js: 'return moduleExports;\n});'
+		},
+		outdir: `release/${type}/`,
+		plugins: [
+			alias({
+				'vscode-nls': path.join(__dirname, 'src/fillers/vscode-nls.ts'),
+				'monaco-editor-core': path.join(__dirname, 'src/fillers/monaco-editor-core-amd.ts')
+			})
+		]
+	};
+	if (type === 'min') {
+		options.minify = true;
+	}
+	build(options);
+}
+
+/**
+ * @param {string} entryPoint
+ * @param {string} banner
+ */
+function buildAMD(entryPoint, banner) {
+	buildOneAMD('dev', entryPoint, banner);
+	buildOneAMD('min', entryPoint, banner);
+}
+
+buildAMD(
+	'src/monaco.contribution.ts',
+	'define("vs/language/html/monaco.contribution",["vs/editor/editor.api"],()=>{'
+);
+buildAMD('src/htmlMode.ts', 'define("vs/language/html/htmlMode",["vs/editor/editor.api"],()=>{');
+buildAMD('src/htmlWorker.ts', 'define("vs/language/html/htmlWorker",[],()=>{');

monaco-html/package.json

@@ -1,6 +1,6 @@
 {
 	"scripts": {
 		"watch": "../node_modules/.bin/tsc -p ./src --watch",
-		"prepublishOnly": "node ./scripts/build"
+		"prepublishOnly": "node ./build"
 	}
 }

monaco-html/scripts/build.js

@@ -1,49 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-const esbuild = require('esbuild');
-const alias = require('esbuild-plugin-alias');
-const path = require('path');
-const cp = require('child_process');
-const { removeDir, tsc, dts } = require('../../build/utils');
-
-removeDir(`monaco-html/release`);
-removeDir(`monaco-html/out`);
-
-tsc(`monaco-html/src/tsconfig.json`);
-
-dts(
-	`monaco-html/out/amd/monaco.contribution.d.ts`,
-	`monaco-html/monaco.d.ts`,
-	'monaco.languages.html'
-);
-
-esbuild
-	.build({
-		entryPoints: ['src/htmlMode.ts', 'src/html.worker.ts', 'src/monaco.contribution.ts'],
-		bundle: true,
-		target: 'esnext',
-		format: 'esm',
-		external: ['monaco-editor-core', '*/htmlMode'],
-		outdir: 'release/esm/',
-		plugins: [
-			alias({
-				'vscode-nls': path.join(__dirname, '../src/fillers/vscode-nls.ts')
-			})
-		]
-	})
-	.then((result) => {
-		if (result.errors.length > 0) {
-			console.error(result.errors);
-		}
-		if (result.warnings.length > 0) {
-			console.error(result.warnings);
-		}
-	});
-
-cp.spawnSync(process.execPath, [path.join(__dirname, './bundle.js')], {
-	stdio: 'inherit',
-	stderr: 'inherit'
-});

monaco-html/scripts/bundle.js

@@ -1,79 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-const requirejs = require('requirejs');
-const path = require('path');
-const fs = require('fs');
-const terser = require('terser');
-const { getBundledFileHeader } = require('../../build/utils');
-
-const REPO_ROOT = path.resolve(__dirname, '..', '..');
-
-const BUNDLED_FILE_HEADER = getBundledFileHeader();
-
-bundleOne('monaco.contribution');
-bundleOne('htmlMode', ['vs/language/html/monaco.contribution']);
-bundleOne('htmlWorker');
-
-function bundleOne(moduleId, exclude) {
-	requirejs.optimize(
-		{
-			baseUrl: 'out/amd/',
-			name: 'vs/language/html/' + moduleId,
-			out: 'release/dev/' + moduleId + '.js',
-			exclude: exclude,
-			paths: {
-				'vs/language/html': REPO_ROOT + '/monaco-html/out/amd',
-				'vs/language/html/fillers/monaco-editor-core':
-					REPO_ROOT + '/monaco-html/out/amd/fillers/monaco-editor-core-amd'
-			},
-			optimize: 'none',
-			packages: [
-				{
-					name: 'vscode-html-languageservice',
-					location: path.join(REPO_ROOT, 'node_modules/vscode-html-languageservice/lib/umd'),
-					main: 'htmlLanguageService'
-				},
-				{
-					name: 'vscode-languageserver-types',
-					location: path.join(REPO_ROOT, 'node_modules/vscode-languageserver-types/lib/umd'),
-					main: 'main'
-				},
-				{
-					name: 'vscode-languageserver-textdocument',
-					location: path.join(REPO_ROOT, 'node_modules/vscode-languageserver-textdocument/lib/umd'),
-					main: 'main'
-				},
-				{
-					name: 'vscode-uri',
-					location: path.join(REPO_ROOT, 'node_modules/vscode-uri/lib/umd'),
-					main: 'index'
-				},
-				{
-					name: 'vscode-nls',
-					location: path.join(REPO_ROOT, 'monaco-html/out/amd/fillers'),
-					main: 'vscode-nls'
-				}
-			]
-		},
-		async function (buildResponse) {
-			const devFilePath = path.join(REPO_ROOT, 'monaco-html/release/dev/' + moduleId + '.js');
-			const minFilePath = path.join(REPO_ROOT, 'monaco-html/release/min/' + moduleId + '.js');
-			const fileContents = fs.readFileSync(devFilePath).toString();
-			console.log();
-			console.log(`Minifying ${devFilePath}...`);
-			const result = await terser.minify(fileContents, {
-				output: {
-					comments: 'some'
-				}
-			});
-			console.log(`Done minifying ${devFilePath}.`);
-			try {
-				fs.mkdirSync(path.join(REPO_ROOT, 'monaco-html/release/min'));
-			} catch (err) {}
-			fs.writeFileSync(minFilePath, BUNDLED_FILE_HEADER + result.code);
-		}
-	);
-}

monaco-html/src/fillers/monaco-editor-core-amd.ts

@@ -5,8 +5,4 @@
 
 // Resolves with the global monaco API
 
-declare var define;
+export = (<any>self).monaco;
-
-define([], function () {
-	return (<any>self).monaco;
-});

monaco-html/src/monaco.contribution.ts

@@ -228,8 +228,17 @@ export const razorDefaults = razorLanguageService.defaults;
 
 // --- Registration to monaco editor ---
 
+declare var AMD: any;
+declare var require: any;
+
 function getMode(): Promise<typeof mode> {
-	return import('./htmlMode');
+	if (AMD) {
+		return new Promise((resolve, reject) => {
+			require(['vs/language/html/htmlMode'], resolve, reject);
+		});
+	} else {
+		return import('./htmlMode');
+	}
 }
 
 export interface LanguageServiceRegistration extends IDisposable {