Use esbuild for building VSCode extensions

Signed-off-by: BoykoAlex <alex.boyko@broadcom.com>

Author: BoykoAlex

vscode-extensions/vscode-bosh/.vscode/tasks.json

@@ -6,18 +6,14 @@
             "script": "watch",
             "problemMatcher": {
                 "owner": "typescript",
-                "pattern":[
-                    {
-                        "regexp": "\\[tsl\\] ERROR",
-                        "file": 1,
-                        "location": 2,
-                        "message": 3
-                    }
-                ],
+                "pattern": {
+                    "regexp": "✘ \\[ERROR\\] (.+)",
+                    "message": 1
+                },
                 "background": {
                     "activeOnStart": true,
-                    "beginsPattern": "\\w+",
-                    "endsPattern": "webpack .* compiled"
+                    "beginsPattern": "\\[watch\\] build started",
+                    "endsPattern": "\\[watch\\] build finished"
                 }
             },
             "isBackground": true,

vscode-extensions/vscode-bosh/.vscodeignore

@@ -23,7 +23,7 @@ build.sh
 
 # Build tooling
 node_modules
-webpack.config.js
+esbuild.js
 
 # Compiler output (old tsc output)
 out/**

vscode-extensions/vscode-bosh/esbuild.js

@@ -0,0 +1,55 @@
+const esbuild = require('esbuild');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+async function main() {
+    const ctx = await esbuild.context({
+        entryPoints: ['lib/Main.ts'],
+        bundle: true,
+        format: 'cjs',
+        minify: production,
+        sourcemap: !production,
+        sourcesContent: false,
+        platform: 'node',
+        outfile: 'dist/extension.js',
+        external: ['vscode'],
+        logLevel: 'silent',
+        plugins: [
+            esbuildProblemMatcherPlugin
+        ]
+    });
+    if (watch) {
+        await ctx.watch();
+    } else {
+        await ctx.rebuild();
+        await ctx.dispose();
+    }
+}
+
+/**
+ * This plugin hooks into the build process to print errors in a format
+ * that the VS Code problem matcher (`$esbuild-watch`) can detect.
+ */
+const esbuildProblemMatcherPlugin = {
+    name: 'esbuild-problem-matcher',
+    setup(build) {
+        build.onStart(() => {
+            console.log('[watch] build started');
+        });
+        build.onEnd(result => {
+            result.errors.forEach(({ text, location }) => {
+                console.error(`✘ [ERROR] ${text}`);
+                if (location) {
+                    console.error(`    ${location.file}:${location.line}:${location.column}:`);
+                }
+            });
+            console.log('[watch] build finished');
+        });
+    }
+};
+
+main().catch(e => {
+    console.error(e);
+    process.exit(1);
+});

vscode-extensions/vscode-bosh/package.json

@@ -134,10 +134,11 @@
   },
   "main": "./dist/extension",
   "scripts": {
-    "vscode:prepublish": "npm run package",
-    "package": "webpack --mode production --devtool hidden-source-map",
-    "compile": "webpack --mode development",
-    "watch": "webpack --mode development --watch",
+    "vscode:prepublish": "npm run check-types && npm run package",
+    "package": "node esbuild.js --production",
+    "check-types": "tsc --noEmit",
+    "compile": "node esbuild.js",
+    "watch": "node esbuild.js --watch",
     "clean": "rm -fr node_modules out dist *.vsix package-lock.json",
     "vsce-package": "vsce package",
     "vsce-pre-release-package": "vsce package --pre-release"
@@ -150,9 +151,7 @@
     "@types/node": "^18.8.0",
     "@types/vscode": "1.75.0",
     "@vscode/vsce": "^2.22.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^4.8.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
+    "esbuild": "^0.25.0",
+    "typescript": "^4.8.0"
   }
 }

vscode-extensions/vscode-bosh/webpack.config.js

@@ -6,18 +6,14 @@
             "script": "watch",
             "problemMatcher": {
                 "owner": "typescript",
-                "pattern":[
-                    {
-                        "regexp": "\\[tsl\\] ERROR",
-                        "file": 1,
-                        "location": 2,
-                        "message": 3
-                    }
-                ],
+                "pattern": {
+                    "regexp": "✘ \\[ERROR\\] (.+)",
+                    "message": 1
+                },
                 "background": {
                     "activeOnStart": true,
-                    "beginsPattern": "\\w+",
-                    "endsPattern": "webpack .* compiled"
+                    "beginsPattern": "\\[watch\\] build started",
+                    "endsPattern": "\\[watch\\] build finished"
                 }
             },
             "isBackground": true,

vscode-extensions/vscode-concourse/.vscode/tasks.json

@@ -23,7 +23,7 @@ build.sh
 
 # Build tooling
 node_modules
-webpack.config.js
+esbuild.js
 
 # Compiler output (old tsc output)
 out/**

vscode-extensions/vscode-concourse/.vscodeignore

@@ -0,0 +1,55 @@
+const esbuild = require('esbuild');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+async function main() {
+    const ctx = await esbuild.context({
+        entryPoints: ['lib/Main.ts'],
+        bundle: true,
+        format: 'cjs',
+        minify: production,
+        sourcemap: !production,
+        sourcesContent: false,
+        platform: 'node',
+        outfile: 'dist/extension.js',
+        external: ['vscode'],
+        logLevel: 'silent',
+        plugins: [
+            esbuildProblemMatcherPlugin
+        ]
+    });
+    if (watch) {
+        await ctx.watch();
+    } else {
+        await ctx.rebuild();
+        await ctx.dispose();
+    }
+}
+
+/**
+ * This plugin hooks into the build process to print errors in a format
+ * that the VS Code problem matcher (`$esbuild-watch`) can detect.
+ */
+const esbuildProblemMatcherPlugin = {
+    name: 'esbuild-problem-matcher',
+    setup(build) {
+        build.onStart(() => {
+            console.log('[watch] build started');
+        });
+        build.onEnd(result => {
+            result.errors.forEach(({ text, location }) => {
+                console.error(`✘ [ERROR] ${text}`);
+                if (location) {
+                    console.error(`    ${location.file}:${location.line}:${location.column}:`);
+                }
+            });
+            console.log('[watch] build finished');
+        });
+    }
+};
+
+main().catch(e => {
+    console.error(e);
+    process.exit(1);
+});

vscode-extensions/vscode-concourse/esbuild.js

@@ -134,10 +134,11 @@
   },
   "main": "./dist/extension",
   "scripts": {
-    "vscode:prepublish": "npm run package",
-    "package": "webpack --mode production --devtool hidden-source-map",
-    "compile": "webpack --mode development",
-    "watch": "webpack --mode development --watch",
+    "vscode:prepublish": "npm run check-types && npm run package",
+    "package": "node esbuild.js --production",
+    "check-types": "tsc --noEmit",
+    "compile": "node esbuild.js",
+    "watch": "node esbuild.js --watch",
     "clean": "rm -fr node_modules out dist *.vsix package-lock.json",
     "vsce-package": "vsce package",
     "vsce-pre-release-package": "vsce package --pre-release"
@@ -150,9 +151,7 @@
     "@types/node": "^18.8.0",
     "@types/vscode": "1.75.0",
     "@vscode/vsce": "^2.22.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^4.8.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
+    "esbuild": "^0.25.0",
+    "typescript": "^4.8.0"
   }
 }