Addition of an ESBuild sample

Author: jasonwilliams

esbuild-sample/.eslintrc.js

@@ -0,0 +1,15 @@
+/**@type {import('eslint').Linter.Config} */
+// eslint-disable-next-line no-undef
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+	rules: {
+		semi: [2, 'always'],
+		'@typescript-eslint/no-unused-vars': 0,
+		'@typescript-eslint/no-explicit-any': 0,
+		'@typescript-eslint/explicit-module-boundary-types': 0,
+		'@typescript-eslint/no-non-null-assertion': 0,
+	},
+};

esbuild-sample/.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+*.vsix

esbuild-sample/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": ["dbaeumer.vscode-eslint"]
+}

esbuild-sample/.vscode/launch.json

@@ -0,0 +1,27 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Launch Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
+			"preLaunchTask": "npm: build"
+		},
+		{
+			"name": "Launch Web Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": [
+				"--extensionDevelopmentKind=web",
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": ["${workspaceFolder}/dist/**/*.js"],
+			"preLaunchTask": "npm: build"
+		}
+	]
+}

esbuild-sample/.vscodeignore

@@ -0,0 +1,6 @@
+.vscode
+node_modules
+src/**
+package-lock.json
+tsconfig.json
+build.mjs

esbuild-sample/README.md

@@ -0,0 +1,15 @@
+# ESBuild & Extensions
+
+This is an extension that uses [https://esbuild.github.io/]() to bundle and minify its sources. Using ESBuild will help to reduce the install- and startup-time of large extensions because instead of hundreds of files, a single file is produced. It is also much faster than the [Webpack](https://github.com/microsoft/vscode-extension-samples/tree/main/webpack-sample) alternative and should be preferred.
+
+## Configuration
+
+ESBuild is configured in the [`build.mjs`](./build.mjs)-file. Find annotation inside the file itself or refer to the excellent ESBuild documentation: [https://esbuild.github.io/api/](). In short, the config-files defines the entry point of the extension, to use TypeScript, to produce a commonjs-module, and what modules not to bundle.
+
+## Web Extension Support
+
+This ESBuild config is already setup to support both Desktop and Web extensions, it will build both versions in parallel. The package.json then has a "browser" and "main" entry to point to the correct bundles once built.
+
+## Scripts
+
+The `scripts`-section of the [`package.json`](./package.json)-file has entries for ESBuild. Those compile TypeScript and produce the bundle as well as producing a minified production build.

esbuild-sample/build.mjs

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import esbuild from 'esbuild';
+import console from 'node:console';
+import process from 'node:process';
+
+const production = process.argv[2] === '--production';
+const watch = process.argv[2] === '--watch';
+let desktopContext, browserContext;
+
+// This is the base config that will be used by both web and desktop versions of the extension
+const baseConfig = {
+	entryPoints: ['./src/extension.ts'], // the entry point of this extension, 📖 -> https://esbuild.github.io/api/#entry-points
+	bundle: true,
+	external: ['vscode'], // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be packaged, 📖 -> https://esbuild.github.io/api/#external
+	sourcemap: !production,
+	minify: production,
+	format: 'cjs',
+	target: 'ES2022', // VS Code 1.82 onwards will support ES2022, this also overrides tsconfig.json.
+};
+
+// Build both desktop and web versions of the extension in parallel
+// By using .context() instead of .build() we can rebuild in watch mode when the source changes
+try {
+	[desktopContext, browserContext] = await Promise.all([
+		// https://esbuild.github.io/getting-started/#bundling-for-node
+		esbuild.context({
+			...baseConfig,
+			outfile: './dist/extension.js',
+			platform: 'node',
+		}),
+		// If you're building for the browser, you'll need to generate a second bundle which is suitable
+		// https://esbuild.github.io/getting-started/#bundling-for-the-browser
+		esbuild.context({
+			...baseConfig,
+			outfile: './dist/browser.js',
+			platform: 'browser',
+		}),
+	]);
+} catch (e) {
+	console.error(e);
+	process.exit(1);
+}
+
+if (watch) {
+	await desktopContext.watch();
+	await browserContext.watch();
+} else {
+	desktopContext.rebuild();
+	browserContext.rebuild();
+
+	desktopContext.dispose();
+	browserContext.dispose();
+}