From bd369c638ea582aedb3dcd9d05eb8dcd2158496f Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Tue, 25 Jan 2022 15:19:30 +0100 Subject: [PATCH] Add check that the editor's ESM JS files can be loaded in a browser --- .github/workflows/ci.yml | 14 +++-- build/gulpfile.editor.js | 42 ++++++++++++- src/tsconfig.monaco.json | 2 +- src/vs/base/common/marked/marked.js | 15 +++++ test/monaco/.gitignore | 1 + test/monaco/esm-check/esm-check.js | 96 +++++++++++++++++++++++++++++ test/monaco/esm-check/index.html | 11 ++++ test/monaco/esm-check/index.js | 10 +++ test/monaco/package.json | 3 +- 9 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 test/monaco/esm-check/esm-check.js create mode 100644 test/monaco/esm-check/index.html create mode 100644 test/monaco/esm-check/index.js diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 229a1ddf6dd..21d9f5bb4fb 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/build/gulpfile.editor.js b/build/gulpfile.editor.js index 39b26b2f646..c8308a0d190 100644 --- a/build/gulpfile.editor.js +++ b/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, ) ); diff --git a/src/tsconfig.monaco.json b/src/tsconfig.monaco.json index 5d97fdf7095..c33ae9b65ca 100644 --- a/src/tsconfig.monaco.json +++ b/src/tsconfig.monaco.json @@ -8,7 +8,7 @@ "moduleResolution": "classic", "removeComments": false, "preserveConstEnums": true, - "target": "es6", + "target": "es2020", "sourceMap": false, "declaration": true }, diff --git a/src/vs/base/common/marked/marked.js b/src/vs/base/common/marked/marked.js index ca3e34d18ea..09c308378d4 100644 --- a/src/vs/base/common/marked/marked.js +++ b/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 diff --git a/test/monaco/.gitignore b/test/monaco/.gitignore index 938680a4275..1aaf5ab09e6 100644 --- a/test/monaco/.gitignore +++ b/test/monaco/.gitignore @@ -1,3 +1,4 @@ /dist/**/*.js /dist/**/*.ttf /out/ +/esm-check/out/ diff --git a/test/monaco/esm-check/esm-check.js b/test/monaco/esm-check/esm-check.js new file mode 100644 index 00000000000..d8cb51a87d5 --- /dev/null +++ b/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} + */ +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); + } +} diff --git a/test/monaco/esm-check/index.html b/test/monaco/esm-check/index.html new file mode 100644 index 00000000000..de61d28e7f1 --- /dev/null +++ b/test/monaco/esm-check/index.html @@ -0,0 +1,11 @@ + + + + + + +
+ + + + diff --git a/test/monaco/esm-check/index.js b/test/monaco/esm-check/index.js new file mode 100644 index 00000000000..ccabc2a8bbb --- /dev/null +++ b/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' +}); diff --git a/test/monaco/package.json b/test/monaco/package.json index 3eb25726411..2d48ca1a73f 100644 --- a/test/monaco/package.json +++ b/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": {