Move simple-browser to use esbuild for webview scripts

build/lib/extensions.js

@@ -353,16 +353,13 @@ function translatePackageJSON(packageJSON, packageNLSPath) {
 }
 exports.translatePackageJSON = translatePackageJSON;
 const extensionsPath = path.join(root, 'extensions');
-// Additional projects to webpack. These typically build code for webviews
-const webpackMediaConfigFiles = [
-    'simple-browser/webpack.config.js',
-];
 // Additional projects to run esbuild on. These typically build code for webviews
 const esbuildMediaScripts = [
     'markdown-language-features/esbuild-notebook.js',
     'markdown-language-features/esbuild-preview.js',
     'markdown-math/esbuild.js',
-    'notebook-renderers/esbuild.js'
+    'notebook-renderers/esbuild.js',
+    'simple-browser/esbuild-preview.js',
 ];
 async function webpackExtensions(taskName, isWatch, webpackConfigLocations) {
     const webpack = require('webpack');
@@ -468,17 +465,9 @@ async function esbuildExtensions(taskName, isWatch, scripts) {
     return Promise.all(tasks);
 }
 async function buildExtensionMedia(isWatch, outputRoot) {
-    return Promise.all([
-        webpackExtensions('webpacking extension media', isWatch, webpackMediaConfigFiles.map(p => {
-            return {
-                configPath: path.join(extensionsPath, p),
-                outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
-            };
-        })),
-        esbuildExtensions('esbuilding extension media', isWatch, esbuildMediaScripts.map(p => ({
-            script: path.join(extensionsPath, p),
-            outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
-        }))),
-    ]);
+    return esbuildExtensions('esbuilding extension media', isWatch, esbuildMediaScripts.map(p => ({
+        script: path.join(extensionsPath, p),
+        outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
+    })));
 }
 exports.buildExtensionMedia = buildExtensionMedia;

build/lib/extensions.ts

@@ -434,17 +434,13 @@ export function translatePackageJSON(packageJSON: string, packageNLSPath: string
 
 const extensionsPath = path.join(root, 'extensions');
 
-// Additional projects to webpack. These typically build code for webviews
-const webpackMediaConfigFiles = [
-	'simple-browser/webpack.config.js',
-];
-
 // Additional projects to run esbuild on. These typically build code for webviews
 const esbuildMediaScripts = [
 	'markdown-language-features/esbuild-notebook.js',
 	'markdown-language-features/esbuild-preview.js',
 	'markdown-math/esbuild.js',
-	'notebook-renderers/esbuild.js'
+	'notebook-renderers/esbuild.js',
+	'simple-browser/esbuild-preview.js',
 ];
 
 export async function webpackExtensions(taskName: string, isWatch: boolean, webpackConfigLocations: { configPath: string; outputRoot?: string }[]) {
@@ -554,16 +550,8 @@ async function esbuildExtensions(taskName: string, isWatch: boolean, scripts: {
 }
 
 export async function buildExtensionMedia(isWatch: boolean, outputRoot?: string) {
-	return Promise.all([
-		webpackExtensions('webpacking extension media', isWatch, webpackMediaConfigFiles.map(p => {
-			return {
-				configPath: path.join(extensionsPath, p),
-				outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
-			};
-		})),
-		esbuildExtensions('esbuilding extension media', isWatch, esbuildMediaScripts.map(p => ({
-			script: path.join(extensionsPath, p),
-			outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
-		}))),
-	]);
+	return esbuildExtensions('esbuilding extension media', isWatch, esbuildMediaScripts.map(p => ({
+		script: path.join(extensionsPath, p),
+		outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
+	})));
 }

extensions/markdown-language-features/yarn.lock

@@ -74,10 +74,10 @@ entities@~2.1.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
   integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
-highlight.js@^10.4.1:
-  version "10.4.1"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.4.1.tgz#d48fbcf4a9971c4361b3f95f302747afe19dbad0"
-  integrity sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg==
+highlight.js@^11.4.0:
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.4.0.tgz#34ceadd49e1596ee5aba3d99346cdfd4845ee05a"
+  integrity sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==
 
 linkify-it@^3.0.1:
   version "3.0.3"

extensions/simple-browser/esbuild-preview.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ *  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');
+const fs = require('fs');
+const esbuild = require('esbuild');
+
+const args = process.argv.slice(2);
+
+const isWatch = args.indexOf('--watch') >= 0;
+
+let outputRoot = __dirname;
+const outputRootIndex = args.indexOf('--outputRoot');
+if (outputRootIndex >= 0) {
+	outputRoot = args[outputRootIndex + 1];
+}
+
+const outDir = path.join(outputRoot, 'media');
+
+fs.copyFileSync(
+	path.join(__dirname, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'),
+	path.join(outDir, 'codicon.css'));
+
+fs.copyFileSync(
+	path.join(__dirname, 'node_modules', 'vscode-codicons', 'dist', 'codicon.ttf'),
+	path.join(outDir, 'codicon.ttf'));
+
+esbuild.build({
+	entryPoints: [
+		path.join(__dirname, 'preview-src', 'index.ts')
+	],
+	bundle: true,
+	minify: true,
+	sourcemap: false,
+	format: 'esm',
+	outdir: outDir,
+	platform: 'browser',
+	target: ['es2020'],
+	incremental: isWatch,
+}).catch(() => process.exit(1));

extensions/simple-browser/package.json

@@ -62,8 +62,7 @@
     "watch": "npm run build-preview && gulp watch-extension:markdown-language-features",
     "vscode:prepublish": "npm run build-ext && npm run build-preview",
     "build-ext": "node ../../node_modules/gulp/bin/gulp.js --gulpfile ../../build/gulpfile.extensions.js compile-extension:markdown-language-features ./tsconfig.json",
-    "build-preview": "npx webpack-cli --mode development",
-    "build-preview-production": "npx webpack-cli --mode production",
+    "build-preview": "node ./esbuild-preview",
     "compile-web": "npx webpack-cli --config extension-browser.webpack.config --mode none",
     "watch-web": "npx webpack-cli --config extension-browser.webpack.config --mode none --watch --info-verbosity verbose"
   },

extensions/simple-browser/webpack.config.js

@@ -1,45 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  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');
-const CopyPlugin = require('copy-webpack-plugin');
-
-module.exports = {
-	context: path.resolve(__dirname),
-	entry: {
-		index: './preview-src/index.ts',
-	},
-	mode: 'production',
-	module: {
-		rules: [
-			{
-				test: /\.tsx?$/,
-				use: 'ts-loader',
-				exclude: /node_modules/
-			}
-		]
-	},
-	resolve: {
-		extensions: ['.tsx', '.ts', '.js']
-	},
-	output: {
-		filename: '[name].js',
-		path: path.resolve(__dirname, 'media')
-	},
-	plugins: [
-		// @ts-ignore
-		new CopyPlugin({
-			patterns: [
-				{
-					from: './node_modules/vscode-codicons/dist/codicon.css',
-					to: 'codicon.css'
-				},
-				{
-					from: './node_modules/vscode-codicons/dist/codicon.ttf',
-					to: 'codicon.ttf'
-				},
-			],
-		}),
-	]
-};