Allow vscode-rpgle to work on web

Signed-off-by: Liam Barry Allan <[email protected]>

.vscode/launch.json

@@ -27,6 +27,17 @@
 			"preLaunchTask": "npm: webpack",
 			"sourceMaps": true
 		},
-
+		{
+			"name": "Run Web Extension in VS Code Web",
+			"type": "extensionHost",
+			"debugWebWorkerHost": true,
+			"request": "launch",
+			"args": [
+			    "--extensionDevelopmentPath=${workspaceFolder}",
+			    "--extensionDevelopmentKind=web"
+			],
+			"outFiles": ["${workspaceFolder}/dist/web.js"],
+			"preLaunchTask": "npm: webpack-web"
+		  }
 	]
 }

package.json

@@ -23,6 +23,7 @@
 		"onLanguage:rpgle"
 	],
 	"main": "./dist/extension.js",
+	"browser": "./dist/web.js",
 	"contributes": {
 		"snippets": [
 			{
@@ -132,20 +133,21 @@
 		"pretest": "npm run lint",
 		"test": "node tests",
 		"package": "vsce package",
-		"vscode:prepublish": "webpack --mode production",
+		"vscode:prepublish": "webpack --mode production && webpack --mode production --env target=web",
 		"webpack": "webpack --mode development",
-		"webpack-dev": "webpack --mode development --watch"
+		"webpack-web": "webpack --mode development --env target=web"
 	},
 	"devDependencies": {
 		"@types/glob": "^7.1.3",
 		"@types/node": "14.x",
 		"@types/vscode": "^1.62.0",
 		"eslint": "^7.27.0",
-		"webpack": "^5.24.3",
-		"webpack-cli": "^4.5.0",
+		"glob": "^7.2.0",
 		"vscode-uri": "^3.0.2",
-		"glob": "^7.2.0"
+		"webpack": "^5.24.3",
+		"webpack-cli": "^4.5.0"
 	},
 	"dependencies": {
+		"path-browserify": "^1.0.1"
 	}
 }

src/extension.js

@@ -1,7 +1,6 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
 const vscode = require(`vscode`);
-const path = require(`path`);
 
 const LinterWorker = require(`./vscode/LinterWorker`);
 const LanguageWorker = require(`./vscode/LanguageWorker`);
@@ -18,24 +17,26 @@ const Output = require(`./output`);
  * @param {vscode.ExtensionContext} context
  */
 function activate(context) {
-
-  // Use the console to output diagnostic information (console.log) and errors (console.error)
-  // This line of code will only be executed once when your extension is activated
-  console.log(`Congratulations, your extension "vscode-rpgle" is now active!`);
-
   Output.init();
 
-  /** @type {LinterWorker} */
-  let linterWorker;
+  const env = process.env.TARGET;
+
+  console.log(`Congratulations, your extension "vscode-rpgle" for ${env} is now active!`);
+  Output.write(`Congratulations, your extension "vscode-rpgle" for ${env} is now active!`);
 
   /** @type {LanguageWorker} */
   let languageWorker;
+  const languageEnabled = (Configuration.get(`rpgleLanguageToolsEnabled`) || env === `web`);
+
+  /** @type {LinterWorker} */
+  let linterWorker;
+  const linterEnabled = (Configuration.get(`rpgleLinterSupportEnabled`) || env === `web`)
 
-  if (Configuration.get(`rpgleLanguageToolsEnabled`)) {
+  if (languageEnabled) {
     languageWorker = new LanguageWorker(context);
   }
 
-  if (Configuration.get(`rpgleLinterSupportEnabled`)) {
+  if (linterEnabled) {
     linterWorker = new LinterWorker(context);
   }
 

webpack.config.js

@@ -3,36 +3,72 @@
 'use strict';
 
 const path = require(`path`);
+const webpack = require(`webpack`);
 
-/**@type {import('webpack').Configuration}*/
-const config = {
-  target: `node`, // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+/**@type {webpack.Configuration}*/
+module.exports = (env) => { 
+  const target = env.target || `desktop`;
 
-  entry: `./src/extension.js`, // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
-  output: {
+  const options = {
+    outname: `extension.js`,
+    target: `node`,
+    mainFields: [],
+    fallback: {}
+  }
+
+  switch (target) {
+  case `web`:
+    options.target = `webworker`;
+    options.outname = `web.js`;
+    options.mainFields = [`browser`, `module`, `main`];
+    options.fallback[`path`] = require.resolve(`path-browserify`);
+    break;
+
+  case `desktop`:
+  default:
+    options.target = `node`;
+    options.outname = `extension.js`;
+    break;
+  }
+
+  console.log(`Target: ${target}`);
+
+  return {
+    target: options.target, // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+
+    entry: {
+      extension: `./src/extension.js`,
+    }, // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+    output: {
     // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
-    path: path.resolve(__dirname, `dist`),
-    filename: `extension.js`,
-    libraryTarget: `commonjs2`,
-    devtoolModuleFilenameTemplate: `../[resource-path]`,
-  },
-  devtool: `source-map`,
-  externals: {
-    vscode: `commonjs vscode` // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
-  },
-  resolve: {
-    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
-    extensions: [`.ts`, `.js`, `.svg`],
-  },
-  module: {
-
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, `node_modules/@bendera/vscode-webview-elements/dist`),
-        type: `asset/source`
-      }
-    ]
+      path: path.resolve(__dirname, `dist`),
+      filename: options.outname,
+      libraryTarget: `commonjs`,
+      devtoolModuleFilenameTemplate: `../[resource-path]`,
+    },
+    devtool: `nosources-source-map`,
+    externals: {
+      vscode: `commonjs vscode` // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    },
+    resolve: {
+      fallback: options.fallback,
+      mainFields: options.mainFields,
+      // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+      extensions: [`.ts`, `.js`, `.svg`],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          include: path.resolve(__dirname, `node_modules/@bendera/vscode-webview-elements/dist`),
+          type: `asset/source`
+        }
+      ]
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        'process.env.TARGET': JSON.stringify(target),
+      })
+    ],
   }
-};
-module.exports = config;
+};