CI for Monaco Editor compile and bundling.

.github/workflows/ci.yml

@@ -110,3 +110,20 @@ jobs:
       name: Run Unit Tests
     - run: ./scripts/test-integration.sh --tfs "Integration Tests"
       name: Run Integration Tests
+
+  monaco:
+    runs-on: macos-latest
+    env:
+      CHILD_CONCURRENCY: "1"
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+    - uses: actions/checkout@v1
+    - 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 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

@@ -310,6 +310,28 @@ gulp.task('editor-distro',
 	)
 );
 
+const bundleEditorESMTask = task.define('editor-esm-bundle-webpack', () => {
+	return standalone.bundleESM();
+});
+
+gulp.task('editor-esm-bundle',
+	task.series(
+		task.parallel(
+			util.rimraf('out-editor-src'),
+			util.rimraf('out-editor-build'),
+			util.rimraf('out-editor-esm'),
+			util.rimraf('out-monaco-editor-core'),
+			util.rimraf('out-editor'),
+			util.rimraf('out-editor-min')
+		),
+		extractEditorSrcTask,
+		createESMSourcesAndResourcesTask,
+		compileEditorESMTask,
+		bundleEditorESMTask,
+		finalEditorResourcesTask
+	)
+);
+
 //#region monaco type checking
 
 function createTscCompileTask(watch) {

build/lib/compilation.js

@@ -44,7 +44,7 @@ function createCompile(src, build, emitError) {
         const input = es.through();
         const output = input
             .pipe(utf8Filter)
-            .pipe(bom())
+            .pipe(bom()) // this is required to preserve BOM in test files that loose it otherwise
             .pipe(utf8Filter.restore)
             .pipe(tsFilter)
             .pipe(util.loadSourcemaps())

build/lib/standalone.js

@@ -5,9 +5,13 @@
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
 const ts = require("typescript");
+const es = require("event-stream");
 const fs = require("fs");
 const path = require("path");
 const tss = require("./treeshaking");
+const gulp = require("gulp");
+const webpack = require("webpack");
+const webpackGulp = require('webpack-stream');
 const REPO_ROOT = path.join(__dirname, '../../');
 const SRC_DIR = path.join(REPO_ROOT, 'src');
 let dirCache = {};
@@ -309,3 +313,23 @@ function transportCSS(module, enqueue, write) {
         return haystack.length >= needle.length && haystack.substr(0, needle.length) === needle;
     }
 }
+function bundleESM() {
+    const result = es.through();
+    const webpackConfigPath = path.join(__dirname, '../../build/monaco/monaco.webpack.config.js');
+    const webpackConfig = Object.assign(Object.assign({}, require(webpackConfigPath)), { mode: 'production' });
+    const webpackDone = (err, stats) => {
+        if (err) {
+            result.emit('error', err);
+        }
+        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'));
+}
+exports.bundleESM = bundleESM;

build/lib/standalone.ts

@@ -4,9 +4,13 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as ts from 'typescript';
+import * as es from 'event-stream';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as tss from './treeshaking';
+import * as gulp from 'gulp';
+import * as webpack from 'webpack';
+const webpackGulp = require('webpack-stream');
 
 const REPO_ROOT = path.join(__dirname, '../../');
 const SRC_DIR = path.join(REPO_ROOT, 'src');
@@ -357,3 +361,30 @@ function transportCSS(module: string, enqueue: (module: string) => void, write:
 		return haystack.length >= needle.length && haystack.substr(0, needle.length) === needle;
 	}
 }
+
+export function bundleESM() {
+	const result = es.through();
+
+	const webpackConfigPath = path.join(__dirname, '../../build/monaco/monaco.webpack.config.js');
+
+	const webpackConfig = {
+		...require(webpackConfigPath),
+		...{ mode: 'production' }
+	};
+
+	const webpackDone = (err: any, stats: any) => {
+		if (err) {
+			result.emit('error', err);
+		}
+		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'));
+}

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,55 @@
+/*---------------------------------------------------------------------------------------------
+ *  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: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+				use: [
+					{
+						loader: 'file-loader',
+						options: {
+							name: '[name].[ext]',
+							outputPath: 'fonts/'
+						}
+					}
+				]
+			}
+		]
+	},
+	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

@@ -83,11 +83,13 @@
     "copy-webpack-plugin": "^4.5.2",
     "coveralls": "^2.11.11",
     "cson-parser": "^1.3.3",
+    "css-loader": "^3.2.0",
     "debounce": "^1.0.0",
     "event-stream": "3.3.4",
     "express": "^4.13.1",
     "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",
@@ -134,6 +136,7 @@
     "rimraf": "^2.2.8",
     "sinon": "^1.17.2",
     "source-map": "^0.4.4",
+    "style-loader": "^1.0.0",
     "ts-loader": "^4.4.2",
     "tslint": "^5.16.0",
     "typescript": "3.7.2",