Merge pull request #84636 from microsoft/monaco/ci

CI for Monaco Editor compile and bundling.

.github/workflows/ci.yml

@@ -116,3 +116,29 @@ jobs:
       name: Run Unit Tests (Browser)
     - run: ./scripts/test-integration.sh --tfs "Integration Tests"
       name: Run Integration Tests (Electron)
+
+  monaco:
+    runs-on: ubuntu-latest
+    env:
+      CHILD_CONCURRENCY: "1"
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+    - uses: actions/checkout@v1
+    # TODO: rename azure-pipelines/linux/xvfb.init to github-actions
+    - run: |
+        sudo apt-get update
+        sudo apt-get install -y libxkbfile-dev pkg-config libsecret-1-dev libxss1 dbus xvfb libgtk-3-0 libgbm1
+        sudo cp build/azure-pipelines/linux/xvfb.init /etc/init.d/xvfb
+        sudo chmod +x /etc/init.d/xvfb
+        sudo update-rc.d xvfb defaults
+        sudo service xvfb start
+      name: Setup Build Environment
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 10
+    - run: yarn --frozen-lockfile
+      name: Install Dependencies
+    - run: yarn monaco-compile-check
+      name: Run Monaco Editor Checks
+    - run: yarn gulp editor-esm-bundle
+      name: Editor Distro & ESM Bundle

.gitignore

@@ -11,6 +11,7 @@ out-editor/
 out-editor-src/
 out-editor-build/
 out-editor-esm/
+out-editor-esm-bundle/
 out-editor-min/
 out-monaco-editor-core/
 out-vscode/

build/gulpfile.editor.js

@@ -16,6 +16,8 @@ const cp = require('child_process');
 const compilation = require('./lib/compilation');
 const monacoapi = require('./monaco/api');
 const fs = require('fs');
+const webpack = require('webpack');
+const webpackGulp = require('webpack-stream');
 
 let root = path.dirname(__dirname);
 let sha1 = util.getVersion(root);
@@ -358,6 +360,49 @@ gulp.task('editor-distro',
 	)
 );
 
+const bundleEditorESMTask = task.define('editor-esm-bundle-webpack', () => {
+	const result = es.through();
+
+	const webpackConfigPath = path.join(root, 'build/monaco/monaco.webpack.config.js');
+
+	const webpackConfig = {
+		...require(webpackConfigPath),
+		...{ mode: 'production' }
+	};
+
+	const webpackDone = (err, stats) => {
+		if (err) {
+			result.emit('error', err);
+			return;
+		}
+		const { compilation } = stats;
+		if (compilation.errors.length > 0) {
+			result.emit('error', compilation.errors.join('\n'));
+		}
+		if (compilation.warnings.length > 0) {
+			result.emit('data', compilation.warnings.join('\n'));
+		}
+	};
+
+	return webpackGulp(webpackConfig, webpack, webpackDone)
+		.pipe(gulp.dest('out-editor-esm-bundle'));
+});
+
+gulp.task('editor-esm-bundle',
+	task.series(
+		task.parallel(
+			util.rimraf('out-editor-src'),
+			util.rimraf('out-editor-esm'),
+			util.rimraf('out-monaco-editor-core'),
+			util.rimraf('out-editor-esm-bundle'),
+		),
+		extractEditorSrcTask,
+		createESMSourcesAndResourcesTask,
+		compileEditorESMTask,
+		bundleEditorESMTask,
+	)
+);
+
 gulp.task('monacodts', task.define('monacodts', () => {
 	const result = monacoapi.execute();
 	fs.writeFileSync(result.filePath, result.content);

build/monaco/api.js

@@ -135,11 +135,12 @@ function getMassagedTopLevelDeclarationText(sourceFile, declaration, importName,
                 }
                 else {
                     const memberName = member.name.text;
+                    const memberAccess = (memberName.indexOf('.') >= 0 ? `['${memberName}']` : `.${memberName}`);
                     if (isStatic(member)) {
-                        usage.push(`a = ${staticTypeName}.${memberName};`);
+                        usage.push(`a = ${staticTypeName}${memberAccess};`);
                     }
                     else {
-                        usage.push(`a = (<${instanceTypeName}>b).${memberName};`);
+                        usage.push(`a = (<${instanceTypeName}>b)${memberAccess};`);
                     }
                 }
             }

build/monaco/api.ts

@@ -167,10 +167,11 @@ function getMassagedTopLevelDeclarationText(sourceFile: ts.SourceFile, declarati
 					result = result.replace(memberText, '');
 				} else {
 					const memberName = (<ts.Identifier | ts.StringLiteral>member.name).text;
+					const memberAccess = (memberName.indexOf('.') >= 0 ? `['${memberName}']` : `.${memberName}`);
 					if (isStatic(member)) {
-						usage.push(`a = ${staticTypeName}.${memberName};`);
+						usage.push(`a = ${staticTypeName}${memberAccess};`);
 					} else {
-						usage.push(`a = (<${instanceTypeName}>b).${memberName};`);
+						usage.push(`a = (<${instanceTypeName}>b)${memberAccess};`);
 					}
 				}
 			} catch (err) {

build/monaco/esm.core.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+// Entry file for webpack bunlding.
+
+import * as monaco from 'monaco-editor-core';
+
+self.MonacoEnvironment = {
+	getWorkerUrl: function (moduleId, label) {
+		return './editor.worker.bundle.js';
+	}
+};
+
+monaco.editor.create(document.getElementById('container'), {
+	value: [
+		'var hello = "hello world";'
+	].join('\n'),
+	language: 'javascript'
+});

build/monaco/monaco.webpack.config.js

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const path = require('path');
+
+module.exports = {
+	mode: 'production',
+	entry: {
+		'core': './build/monaco/esm.core.js',
+		'editor.worker': './out-monaco-editor-core/esm/vs/editor/editor.worker.js'
+	},
+	output: {
+		globalObject: 'self',
+		filename: '[name].bundle.js',
+		path: path.resolve(__dirname, 'dist')
+	},
+	module: {
+		rules: [{
+			test: /\.css$/,
+			use: ['style-loader', 'css-loader']
+		}, {
+			test: /\.ttf$/,
+			use: ['file-loader']
+		}]
+	},
+	resolve: {
+		alias: {
+			'monaco-editor-core': path.resolve(__dirname, '../../out-monaco-editor-core/esm/vs/editor/editor.main.js'),
+		}
+	},
+	stats: {
+		all: false,
+		modules: true,
+		maxModules: 0,
+		errors: true,
+		warnings: true,
+		// our additional options
+		moduleTrace: true,
+		errorDetails: true,
+		chunks: true
+	}
+};

package.json

@@ -93,13 +93,15 @@
     "copy-webpack-plugin": "^4.5.2",
     "coveralls": "^2.11.11",
     "cson-parser": "^1.3.3",
+    "css-loader": "^3.2.0",
     "debounce": "^1.0.0",
     "electron": "7.1.11",
     "eslint": "6.8.0",
     "eslint-plugin-jsdoc": "^19.1.0",
     "event-stream": "3.3.4",
     "fancy-log": "^1.3.3",
     "fast-plist": "0.1.2",
+    "file-loader": "^4.2.0",
     "glob": "^5.0.13",
     "gulp": "^4.0.0",
     "gulp-atom-electron": "^1.22.0",
@@ -146,6 +148,7 @@
     "rimraf": "^2.2.8",
     "sinon": "^1.17.2",
     "source-map": "^0.4.4",
+    "style-loader": "^1.0.0",
     "ts-loader": "^4.4.2",
     "typescript": "3.8.2",
     "typescript-formatter": "7.1.0",