mirror of
https://github.com/Microsoft/vscode
synced 2024-10-02 17:32:41 +00:00
Add check that the editor's ESM JS files can be loaded in a browser
This commit is contained in:
parent
2a3b916cc0
commit
bd369c638e
14
.github/workflows/ci.yml
vendored
14
.github/workflows/ci.yml
vendored
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
)
|
||||
);
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
"moduleResolution": "classic",
|
||||
"removeComments": false,
|
||||
"preserveConstEnums": true,
|
||||
"target": "es6",
|
||||
"target": "es2020",
|
||||
"sourceMap": false,
|
||||
"declaration": true
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
1
test/monaco/.gitignore
vendored
1
test/monaco/.gitignore
vendored
|
@ -1,3 +1,4 @@
|
|||
/dist/**/*.js
|
||||
/dist/**/*.ttf
|
||||
/out/
|
||||
/esm-check/out/
|
||||
|
|
96
test/monaco/esm-check/esm-check.js
Normal file
96
test/monaco/esm-check/esm-check.js
Normal file
|
@ -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);
|
||||
}
|
||||
}
|
11
test/monaco/esm-check/index.html
Normal file
11
test/monaco/esm-check/index.html
Normal file
|
@ -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>
|
10
test/monaco/esm-check/index.js
Normal file
10
test/monaco/esm-check/index.js
Normal file
|
@ -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'
|
||||
});
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in a new issue