Add check that the editor's ESM JS files can be loaded in a browser

.github/workflows/ci.yml

@@ -310,6 +310,13 @@ jobs:
       - name: Editor Distro & ESM Bundle
         run: yarn gulp editor-esm-bundle
 
+      - name: Download Playwright
+        run: yarn playwright-install
+
+      - name: Editor ESM sources check
+        working-directory: ./test/monaco
+        run: yarn run esm-check
+
       - name: Typings validation prep
         run: |
           mkdir typings-test
@@ -322,17 +329,14 @@ jobs:
           echo "import '../out-monaco-editor-core';" > a.ts
           ../node_modules/.bin/tsc --noEmit
 
-      - name: Webpack Editor
+      - name: Package Editor with Webpack
         working-directory: ./test/monaco
-        run: yarn run bundle
+        run: yarn run bundle-webpack
 
       - name: Compile Editor Tests
         working-directory: ./test/monaco
         run: yarn run compile
 
-      - name: Download Playwright
-        run: yarn playwright-install
-
       - name: Run Editor Tests
         timeout-minutes: 5
         working-directory: ./test/monaco

build/gulpfile.editor.js

@@ -197,6 +197,44 @@ const compileEditorESMTask = task.define('compile-editor-esm', () => {
 	}
 });
 
+/**
+ * Go over all .js files in `/out-monaco-editor-core/esm/` and make sure that all imports
+ * use `.js` at the end in order to be ESM compliant.
+ */
+const appendJSToESMImportsTask = task.define('append-js-to-esm-imports', () => {
+	const SRC_DIR = path.join(__dirname, '../out-monaco-editor-core/esm');
+	const files = util.rreddir(SRC_DIR);
+	for (const file of files) {
+		const filePath = path.join(SRC_DIR, file);
+		if (!/\.js$/.test(filePath)) {
+			continue;
+		}
+
+		const contents = fs.readFileSync(filePath).toString();
+		const lines = contents.split(/\r\n|\r|\n/g);
+		const /** @type {string[]} */result = [];
+		for (const line of lines) {
+			if (!/^import/.test(line) && !/^export \* from/.test(line)) {
+				// not an import
+				result.push(line);
+				continue;
+			}
+			if (/^import '[^']+\.css';/.test(line)) {
+				// CSS import
+				result.push(line);
+				continue;
+			}
+			let modifiedLine = (
+				line
+					.replace(/^import(.*)\'([^']+)\'/, `import$1'$2.js'`)
+					.replace(/^export \* from \'([^']+)\'/, `export * from '$1.js'`)
+			);
+			result.push(modifiedLine);
+		}
+		fs.writeFileSync(filePath, result.join('\n'));
+	}
+});
+
 function toExternalDTS(contents) {
 	let lines = contents.split(/\r\n|\r|\n/);
 	let killNextCloseCurlyBrace = false;
@@ -362,7 +400,8 @@ gulp.task('editor-distro',
 			),
 			task.series(
 				createESMSourcesAndResourcesTask,
-				compileEditorESMTask
+				compileEditorESMTask,
+				appendJSToESMImportsTask
 			)
 		),
 		finalEditorResourcesTask
@@ -411,6 +450,7 @@ gulp.task('editor-esm-bundle',
 		extractEditorSrcTask,
 		createESMSourcesAndResourcesTask,
 		compileEditorESMTask,
+		appendJSToESMImportsTask,
 		bundleEditorESMTask,
 	)
 );

src/tsconfig.monaco.json

@@ -8,7 +8,7 @@
 		"moduleResolution": "classic",
 		"removeComments": false,
 		"preserveConstEnums": true,
-		"target": "es6",
+		"target": "es2020",
 		"sourceMap": false,
 		"declaration": true
 	},

src/vs/base/common/marked/marked.js

@@ -8,6 +8,16 @@
  * DO NOT EDIT THIS FILE
  * The code in this file is generated from files in ./src/
  */
+
+// ESM-uncomment-begin
+// let __marked_exports = {};
+// (function() {
+//   function define(deps, factory) {
+//     factory(__marked_exports);
+//   }
+//   define.amd = true;
+// ESM-uncomment-end
+
  (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -2932,3 +2942,8 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 }));
+
+// ESM-uncomment-begin
+// })();
+// export var marked = (__marked_exports || exports);
+// ESM-uncomment-end

test/monaco/.gitignore

@@ -1,3 +1,4 @@
 /dist/**/*.js
 /dist/**/*.ttf
 /out/
+/esm-check/out/

test/monaco/esm-check/esm-check.js

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+const fs = require('fs');
+const path = require('path');
+const util = require('../../../build/lib/util');
+const playwright = require('playwright');
+const yaserver = require('yaserver');
+const http = require('http');
+
+const DEBUG_TESTS = true;
+const SRC_DIR = path.join(__dirname, '../../../out-monaco-editor-core/esm');
+const DST_DIR = path.join(__dirname, './out');
+const PORT = 8562;
+
+run();
+
+async function run() {
+	await extractSourcesWithoutCSS();
+	const server = await startServer();
+
+	const browser = await playwright['chromium'].launch({
+		headless: !DEBUG_TESTS,
+		devtools: DEBUG_TESTS
+		// slowMo: DEBUG_TESTS ? 2000 : 0
+	});
+
+	const page = await browser.newPage({
+		viewport: {
+			width: 800,
+			height: 600
+		}
+	});
+	page.on('pageerror', (e) => {
+		console.error(`[esm-check] A page error occurred:`);
+		console.error(e);
+		process.exit(1);
+	});
+
+	const URL = `http://127.0.0.1:${PORT}/index.html`;
+	console.log(`[esm-check] Navigating to ${URL}`);
+	const response = await page.goto(URL);
+	if (!response) {
+		console.error(`[esm-check] Missing response.`);
+		process.exit(1);
+	}
+	if (response.status() !== 200) {
+		console.error(`[esm-check] Response status ${response.status()} is not 200 .`);
+		process.exit(1);
+	}
+	console.log(`[esm-check] All appears good.`)
+
+	await page.close();
+	await browser.close();
+
+	server.close();
+}
+
+/**
+ * @returns {Promise<http.Server>}
+ */
+async function startServer() {
+	const staticServer = await yaserver.createServer({ rootDir: __dirname });
+	return new Promise((resolve, reject) => {
+		const server = http.createServer((request, response) => {
+			return staticServer.handle(request, response);
+		});
+		server.listen(PORT, '127.0.0.1', () => {
+			resolve(server);
+		});
+	});
+}
+
+async function extractSourcesWithoutCSS() {
+	await util.rimraf(DST_DIR);
+
+	const files = util.rreddir(SRC_DIR);
+	for (const file of files) {
+		const srcFilename = path.join(SRC_DIR, file);
+		if (!/\.js$/.test(srcFilename)) {
+			continue;
+		}
+
+		const dstFilename = path.join(DST_DIR, file);
+
+		let contents = fs.readFileSync(srcFilename).toString();
+		contents = contents.replace(/import '[^']+\.css';/g, '');
+
+		util.ensureDir(path.dirname(dstFilename));
+		fs.writeFileSync(dstFilename, contents);
+	}
+}

test/monaco/esm-check/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+		<script type="module" src="index.js"></script>
+	</body>
+</html>

test/monaco/esm-check/index.js

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as monaco from './out/vs/editor/editor.main.js';
+
+monaco.editor.create(document.getElementById('container'), {
+	value: 'Hello world'
+});

test/monaco/package.json

@@ -6,7 +6,8 @@
   "private": true,
   "scripts": {
     "compile": "node ../../node_modules/typescript/bin/tsc",
-    "bundle": "node ../../node_modules/webpack/bin/webpack --config ./webpack.config.js --bail",
+    "bundle-webpack": "node ../../node_modules/webpack/bin/webpack --config ./webpack.config.js --bail",
+    "esm-check": "node esm-check/esm-check.js",
     "test": "node runner.js"
   },
   "devDependencies": {