diff --git a/.vscode/launch.json b/.vscode/launch.json index 65ef4a74..9e2def7f 100644 --- a/.vscode/launch.json +++ b/.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" + } ] } diff --git a/package-lock.json b/package-lock.json index ac5cfe7b..77d5eb1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,15 @@ { "name": "vscode-rpgle", - "version": "0.8.0", + "version": "0.8.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "vscode-rpgle", - "version": "0.8.0", + "version": "0.8.2", + "dependencies": { + "path-browserify": "^1.0.1" + }, "devDependencies": { "@types/glob": "^7.1.3", "@types/node": "14.x", @@ -1677,6 +1680,11 @@ "node": ">=6" } }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3785,6 +3793,11 @@ "callsites": "^3.0.0" } }, + "path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==" + }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", diff --git a/package.json b/package.json index 179340f8..16c7c2b6 100644 --- a/package.json +++ b/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" } } diff --git a/src/extension.js b/src/extension.js index defe255e..e83c2f79 100644 --- a/src/extension.js +++ b/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); } diff --git a/webpack.config.js b/webpack.config.js index 0d1deff6..13670f04 100644 --- a/webpack.config.js +++ b/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; \ No newline at end of file +}; \ No newline at end of file