feat: enable web extension

.gitignore

@@ -3,6 +3,7 @@ dist
 node_modules
 .vscode-test/
 *.vsix
+.vscode-test-web
 
 # OSX files
 .DS_Store

.vscode/launch.json

@@ -29,6 +29,18 @@
 				"${workspaceFolder}/out/test/**/*.js"
 			],
 			"preLaunchTask": "${defaultBuildTask}"
-		}
+		},
+		{
+      "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"
+    }
 	]
 }

.vscode/tasks.json

@@ -15,6 +15,13 @@
 				"kind": "build",
 				"isDefault": true
 			}
-		}
+		},
+		{
+      "type": "npm",
+      "script": "watch-web",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": ["$ts-webpack-watch"]
+    }
 	]
 }

package.json

@@ -22,6 +22,7 @@
     "onStartupFinished"
   ],
   "main": "./out/extension.js",
+  "browser": "./dist/web/extension.js",
   "contributes": {
     "languages": [
       {
@@ -54,28 +55,37 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "yarn run compile",
+    "vscode:prepublish": "yarn run compile && npm run package-web",
     "compile": "tsc -p ./",
     "watch": "tsc -watch -p ./",
     "pretest": "yarn run compile && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "node ./out/test/runTest.js",
     "release": "standard-version && git push --follow-tags",
-    "generate": "vsce package --yarn"
+    "generate": "vsce package --yarn",
+    "compile-web": "webpack",
+    "watch-web": "webpack --watch",
+    "package-web": "webpack --mode production --devtool hidden-source-map"
   },
   "devDependencies": {
     "@types/glob": "^8.0.0",
     "@types/mocha": "^9.1.1",
     "@types/node": "18.x",
-    "@types/vscode": "1.71.0",
+    "@types/vscode": "1.42.0",
+    "@types/webpack-env": "^1.18.0",
+    "@vscode/test-web": "^0.0.30",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
     "eslint": "^8.23.1",
     "glob": "^8.0.3",
     "mocha": "^10.0.0",
+    "process": "^0.11.10",
     "standard-version": "^9.5.0",
-    "typescript": "4.6.2",
+    "ts-loader": "^9.3.1",
+    "typescript": "4.8.3",
     "vsce": "^2.11.0",
-    "vscode-test": "^1.6.1"
+    "vscode-test": "^1.6.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   }
 }

src/web/extension.ts

@@ -0,0 +1,9 @@
+import * as vscode from 'vscode';
+
+// this method is called when your extension is activated
+// your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+}
+
+// this method is called when your extension is deactivated
+export function deactivate() {}

webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const webExtensionConfig = {
+  mode: 'none',
+  target: 'webworker',
+  entry: {
+    extension: './src/web/extension.ts',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, './dist/web'),
+    libraryTarget: 'commonjs',
+    devtoolModuleFilenameTemplate: '../../[resource-path]'
+  },
+  resolve: {
+    mainFields: ['browser', 'module', 'main'],
+    extensions: ['.ts', '.js'],
+    fallback: {
+      assert: require.resolve('assert')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser'
+    })
+  ],
+  externals: {
+    vscode: 'commonjs vscode'
+  },
+  performance: {
+    hints: false
+  },
+  devtool: 'nosources-source-map'
+};
+
+module.exports = [webExtensionConfig];