Use esbuild over webpack

Author: dibarbet

.eslintrc.js

@@ -58,8 +58,8 @@ module.exports = {
         "out/",
         "dist/",
         "wallaby.js",
-        "webpack.config.js",
         ".eslintrc.js",
+        "esbuild.js",
         "**/*.d.ts"
     ],
 };

.vscode/launch.json

@@ -9,7 +9,7 @@
             "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js"],
-            "preLaunchTask": "buildDev"
+            "preLaunchTask": "packageDev"
         },
         {
             "name": "[Roslyn] Run Current File Integration Tests",
@@ -35,7 +35,7 @@
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js", "${workspaceRoot}/out/test/**/*.js"],
             "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
-            "preLaunchTask": "buildDev",
+            "preLaunchTask": "packageDev",
             "internalConsoleOptions": "openOnSessionStart"
         },
         {
@@ -62,7 +62,7 @@
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js", "${workspaceRoot}/out/test/**/*.js"],
             "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
-            "preLaunchTask": "buildDev",
+            "preLaunchTask": "packageDev",
             "internalConsoleOptions": "openOnSessionStart"
         },
         {
@@ -89,7 +89,7 @@
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js", "${workspaceRoot}/out/test/**/*.js"],
             "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
-            "preLaunchTask": "buildTest",
+            "preLaunchTask": "packageDev",
             "internalConsoleOptions": "openOnSessionStart"
         },
         {
@@ -115,7 +115,7 @@
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js", "${workspaceRoot}/out/test/**/*.js"],
             "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
-            "preLaunchTask": "buildTest"
+            "preLaunchTask": "packageDev"
         },
         {
             "name": "[O# LSP] Run Current File Integration Tests",
@@ -140,7 +140,7 @@
             "sourceMaps": true,
             "outFiles": ["${workspaceRoot}/dist/*.js", "${workspaceRoot}/out/test/**/*.js"],
             "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
-            "preLaunchTask": "buildTest"
+            "preLaunchTask": "packageDev"
         },
         {
             "type": "node",
@@ -195,7 +195,7 @@
             "name": "Razor integration tests",
             "preLaunchTask": "build",
             "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
-            "args": ["test:razorintegration"],
+            "args": ["test:integration:razor"],
             "cwd": "${workspaceFolder}"
         }
     ],

.vscode/tasks.json

@@ -28,10 +28,20 @@
             }
         },
         {
-            "label": "buildTest",
+            "label": "package",
             "command": "npm",
             "type": "shell",
-            "args": ["run", "compileTest"],
+            "args": ["run", "package"],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        },
+        {
+            "label": "packageDev",
+            "command": "npm",
+            "type": "shell",
+            "args": ["run", "packageDev"],
             "group": {
                 "kind": "build",
                 "isDefault": true

.vscodeignore

@@ -52,8 +52,7 @@ package.json
 tsconfig.json
 version.json
 wallaby.js
-webpack.config.js
-
+esbuild.js
 !src/razor/language-configuration.json
 !src/razor/syntaxes/*
 

CONTRIBUTING.md

@@ -36,6 +36,7 @@ Follow these steps to build, run, and test the repository:
 #### Building
 
 1. Run `npm install -g vsts-npm-auth`, then run `vsts-npm-auth -config .npmrc` - This command will configure your credentials for the next command.
+   a.  If you have already authenticated before, but the token expired, you may need to run `vsts-npm-auth -config .npmrc -f` instead.
 2. Run `npm i` - This command installs the project dependencies.
 3. Run `npm i -g gulp` - This command installs Gulp globally.
 4. Run `gulp installDependencies` - This command downloads the various dependencies as specified by the version in the [package.json](package.json) file.
@@ -51,7 +52,8 @@ After completing the build steps:
 
 #### Testing
 
-To run all tests, execute `npm run test`.
+To run all unit tests, execute `npm run test:unit`.
+To run all integration tests execute `npm run test:integration`
 
 To debug unit tests locally, press <kbd>F5</kbd> in VS Code with the "Launch Tests" debug configuration selected.
 

azure-pipelines/prereqs.yml

@@ -40,6 +40,3 @@ steps:
     npm ci
     npm i -g gulp
   displayName: 'Install dependencies'
-
-- script: npm run compile
-  displayName: 'Compile'

azure-pipelines/test-matrix.yml

@@ -16,10 +16,14 @@ jobs:
 - job:
   strategy:
     matrix:
-      CSharpTests:
-        npmCommand: test:withoutDevKit
+      UnitTests:
+        npmCommand: test:unit
+      CSharpIntegrationTests:
+        npmCommand: test:integration:csharp
       DevKitTests:
         npmCommand: test:integration:devkit
+      RazorTests:
+        npmCommand: test:integration:razor
   pool: ${{ parameters.pool }}
   ${{ if parameters.containerName }}:
     container: ${{ parameters.containerName }}

azure-pipelines/test-prereqs.yml

@@ -1,8 +1,5 @@
 steps:
 
-- script: npm run vscode:prepublish
-  displayName: 'Prepublish VSIXs'
-
 # We need to download the roslyn language server for the current platform to run integration tests against it.
 - script: gulp installDependencies
   displayName: 'Install Roslyn Language Server'

esbuild.js

@@ -0,0 +1,76 @@
+const esbuild = require("esbuild");
+const fs = require('fs/promises');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+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}`);
+                console.error(`    ${location.file}:${location.line}:${location.column}:`);
+            });
+            console.log('[watch] build finished');
+        });
+    },
+};
+
+/**
+ * Some VSCode libraries include UMD versions that are not esbuild compatible, and also have broken ESM packages.
+ * This plugin replaces the UMD imports with the ESM imports.
+ * See https://github.com/microsoft/vscode/issues/192144
+ */
+const umdEsmLoaderPlugin = {
+    name: 'umdEsmLoaderPlugin',
+
+    setup(build) {
+        build.onLoad({ filter: /(vscode-html-languageservice|jsonc-parser).*lib[\/\\]umd/ }, async (moduleArgs) => {
+            // replace the umd path with the esm path from the package.
+            const newPath = moduleArgs.path.replace(/(.*)lib([\/\\])umd(.*)/, '$1lib$2esm$3');
+            const contents = await fs.readFile(newPath, 'utf8');
+            return { contents: contents };
+        });
+    },
+};
+
+async function main() {
+    const ctx = await esbuild.context({
+        entryPoints: [
+            'src/main.ts'
+        ],
+        bundle: true,
+        format: 'cjs',
+        minify: production,
+        sourcemap: !production,
+        sourcesContent: false,
+        platform: 'node',
+        outfile: 'dist/extension.js',
+        external: ['vscode', 'applicationinsights-native-metrics', '@opentelemetry/tracing'],
+        logLevel: 'info',
+        plugins: [
+            umdEsmLoaderPlugin,
+            /* add to the end of plugins array */
+            esbuildProblemMatcherPlugin,
+        ],
+    });
+    if (watch) {
+        await ctx.watch();
+    } else {
+        await ctx.rebuild();
+        await ctx.dispose();
+    }
+}
+
+main().catch(e => {
+    console.error(e);
+    process.exit(1);
+});