Support VS Code For Web

.vscode/launch.json

@@ -11,8 +11,15 @@
       "request": "launch",
       "runtimeExecutable": "${execPath}",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
-      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "${defaultBuildTask}"
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
+    },
+    {
+      "name": "Run Extension (Web)",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentKind=web", "--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
     },
     {
       "name": "Extension Tests",
@@ -23,8 +30,7 @@
         "--extensionDevelopmentPath=${workspaceFolder}",
         "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
       ],
-      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
-      "preLaunchTask": "${defaultBuildTask}"
+      "outFiles": ["${workspaceFolder}/out/test/**/*.js"]
     }
   ]
 }

.vscode/tasks.json

@@ -6,14 +6,6 @@
     {
       "type": "npm",
       "script": "watch",
-      "problemMatcher": {
-        "base": "$tsc-watch",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": "building",
-          "endsPattern": "build finished"
-        }
-      },
       "isBackground": true,
       "presentation": {
         "reveal": "never"

build.mjs

@@ -1,40 +1,37 @@
-const production = process.argv[2] === '--production';
 import esbuild from 'esbuild';
-
+const production = process.argv[2] === '--production';
 const watch = process.argv[2] === '--watch';
-const context = await esbuild
-  .context({
+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/index.ts'],
   bundle: true,
-    outdir: 'dist',
   external: ['vscode'],
-    format: 'cjs',
   sourcemap: !production,
   minify: production,
-    platform: 'node',
   target: 'ES2022',
-    plugins: [
-      {
-        name: 'watch',
-        setup(build) {
-          build.onEnd(() => {
-            if (watch) console.log('build finished');
-          });
-          build.onStart(() => {
-            if (watch) console.log('building');
-          });
-        },
-      },
-    ],
-  })
-  .catch((e) => {
+  format: 'cjs',
+};
+
+try {
+  [desktopContext, browserContext] = await Promise.all([
+    // https://esbuild.github.io/getting-started/#bundling-for-node
+    esbuild.context({ ...baseConfig, outfile: './dist/index.js', platform: 'node' }),
+    // 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 context.watch();
+  await desktopContext.watch();
+  await browserContext.watch();
 } else {
-  context.rebuild();
-  context.dispose();
+  desktopContext.rebuild();
+  browserContext.rebuild();
+  desktopContext.dispose();
+  browserContext.dispose();
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vscode-helix-emulation",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "displayName": "Helix For VS Code",
   "description": "Helix emulation for Visual Studio Code",
   "publisher": "jasew",
@@ -24,6 +24,7 @@
     "Keymaps"
   ],
   "main": "./dist/index.js",
+  "browser": "./dist/browser.js",
   "icon": "docs/img/helixLogo.png",
   "files": [
     "dist"
@@ -32,7 +33,7 @@
     "vscode": "^1.83.1"
   },
   "activationEvents": [
-    "*"
+    "onStartupFinished"
   ],
   "contributes": {
     "commands": [