Merge pull request #141429 from microsoft/alex/editor-esm-check

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

.github/workflows/ci.yml

@@ -289,6 +289,9 @@ jobs:
           ELECTRON_SKIP_BINARY_DOWNLOAD: 1
         run: yarn --frozen-lockfile --network-timeout 180000
 
+      - name: Download Playwright
+        run: yarn playwright-install
+
       - name: Run Hygiene Checks
         run: yarn gulp hygiene
 
@@ -310,6 +313,10 @@ jobs:
       - name: Editor Distro & ESM Bundle
         run: yarn gulp editor-esm-bundle
 
+      - 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/vs/base/common/marked/marked.js

@@ -10,13 +10,13 @@
  */
 
 // ESM-uncomment-begin
- // let __marked_exports;
- // (function() {
- //   function define(factory) {
- //     __marked_exports = factory();
- //   }
- //   define.amd = true;
- // ESM-uncomment-end
+// 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) :
@@ -2946,13 +2946,4 @@
 // ESM-uncomment-begin
 // })();
 // export var marked = (__marked_exports || exports);
-// export var Parser = (__marked_exports || exports).Parser;
-// export var parser = (__marked_exports || exports).parser;
-// export var Renderer = (__marked_exports || exports).Renderer;
-// export var TextRenderer = (__marked_exports || exports).TextRenderer;
-// export var Lexer = (__marked_exports || exports).Lexer;
-// export var lexer = (__marked_exports || exports).lexer;
-// export var Tokenizer = (__marked_exports || exports).Tokenizer;
-// export var Slugger = (__marked_exports || exports).Slugger;
-// export var parse = (__marked_exports || exports).parse;
-// ESM-uncomment-end
+// 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/test');
+const yaserver = require('yaserver');
+const http = require('http');
+
+const DEBUG_TESTS = false;
+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": {