Make extension (syntax highlighting for now) work in vscode web

.gitignore

@@ -11,3 +11,4 @@ tsplugin/dist
 document/dist
 tmp/
 *.vsix
+.vscode-test-web

.vscode/launch.json

@@ -1,33 +1,45 @@
 // A launch configuration that launches the extension inside a new window
 {
-    "version": "0.1.0",
-    "configurations": [
-        {
-            "name": "Run test",
-            "type": "shell",
-            "command": "node ./server/test.js",
-            "group": "test",
-            "presentation": {
-                "reveal": "always",
-                "panel": "new"
-            }
-        },
-
-        {
-            "name": "Attach to Server",
-			"type": "node",
-			"request": "attach",
-			"port": 6005,
-            "sourceMaps": true,
-            "protocol": "inspector",
-            "outFiles": ["${workspaceRoot}/server/**/*.js"]
-        },
-        {
-            "name": "Launch Extension",
-            "type": "extensionHost",
-            "request": "launch",
-            "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ]
-        }
-    ]
-}
+  "version": "0.1.0",
+  "configurations": [
+    {
+      "name": "Run Web Extension in VS Code",
+      "type": "pwa-extensionHost",
+      "debugWebWorkerHost": true,
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionDevelopmentKind=web"
+      ],
+      "outFiles": ["${workspaceFolder}/dist/web/**/*.js"],
+      "preLaunchTask": "npm: watch-web"
+    },
+    {
+      "name": "Run test",
+      "type": "shell",
+      "command": "node ./server/test.js",
+      "group": "test",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      }
+    },
+
+    {
+      "name": "Attach to Server",
+      "type": "node",
+      "request": "attach",
+      "port": 6005,
+      "sourceMaps": true,
+      "protocol": "inspector",
+      "outFiles": ["${workspaceRoot}/server/**/*.js"]
+    },
+    {
+      "name": "Launch Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceRoot}"]
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch-web",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": ["$ts-webpack-watch"]
+    }
+  ]
+}

build/node-ipc-fallback.js

@@ -0,0 +1,9 @@
+module.exports = {
+  serve: () => {},
+  server: {
+    on: () => {},
+    start: () => {},
+  },
+  config: {},
+  log: () => {},
+};

build/web-extension.webpack.config.js

@@ -0,0 +1,60 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = /** @type WebpackConfig */ {
+  context: path.dirname(__dirname),
+  mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+  target: 'webworker', // extensions run in a webworker context
+  entry: {
+    extension: './dist/src/index.js', // source of the web extension main file
+//     'test/suite/index': './src/web/test/suite/index.ts' // source of the web extension test runner
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, '../dist/web'),
+    libraryTarget: 'commonjs'
+  },
+  resolve: {
+    mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
+    extensions: ['.ts', '.js'], // support ts-files and js-files
+    alias: {
+      // provides alternate implementation for node module and source files
+    },
+    fallback: {
+      // Webpack 5 no longer polyfills Node.js core modules automatically.
+      // see https://webpack.js.org/configuration/resolve/#resolvefallback
+      // for the list of Node.js core module polyfills.
+      assert: require.resolve('assert'),
+      "path": require.resolve("path-browserify"),
+      "os": require.resolve("os-browserify/browser"),
+      "util": require.resolve("util/"),
+      "node-ipc": require.resolve("./node-ipc-fallback.js"),
+      // "process/browser": require.resolve("process")
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser' // provide a shim for the global `process` variable
+    })
+  ],
+  externals: {
+    vscode: 'commonjs vscode' // ignored because it doesn't exist
+  },
+  performance: {
+    hints: false
+  },
+  devtool: 'nosources-source-map' // create a source map that points to the original source file
+};