Add web support (WIP - Refers #461)

.vscode/launch.json

@@ -13,6 +13,18 @@
             // "skipFiles": ["<node_internals>/**", "**/node_modules/**", "**/app/out/vs/**", "**/extensions/**"],
             "smartStep": true,
             "sourceMaps": true
-		}
+		},
+        {
+            "name": "Run Web Extension in VS Code",
+            "type": "pwa-extensionHost",
+            "debugWebWorkerHost": true,
+            "request": "launch",
+            "args": [
+              "--extensionDevelopmentPath=${workspaceFolder}",
+              "--extensionDevelopmentKind=web"
+            ],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "preLaunchTask": "npm: watch"
+        }
 	]
 }

package.json

@@ -43,7 +43,8 @@
         "onStartupFinished",
         "onView:bookmarksExplorer"
     ],
-    "main": "./dist/extension",
+    "main": "./dist/extension-node.js",
+    "browser": "./dist/extension-web.js",
     "contributes": {
         "viewsContainers": {
             "activitybar": [
@@ -601,6 +602,8 @@
         "lint": "eslint -c package.json --ext .ts src vscode-bookmarks-core vscode-whats-new"
     },
     "dependencies": {
+        "os-browserify": "^0.3.0",
+        "path-browserify": "^1.0.1",
         "vscode-ext-codicons": "^1.0.0",
         "vscode-ext-decoration": "1.1.0",
         "vscode-ext-help-and-feedback-view": "^1.0.1",

src/extension.ts

@@ -40,7 +40,7 @@ export async function activate(context: vscode.ExtensionContext) {
     let activeEditorCountLine: number;
     let timeout: NodeJS.Timer;
 
-    registerWhatsNew();
+    // registerWhatsNew();
 
     context.subscriptions.push(vscode.commands.registerCommand("_bookmarks.openFolderWelcome", () => {
         const openFolderCommand = isWindows ? "workbench.action.files.openFolder" : "workbench.action.files.openFileFolder"

tsconfig.json

@@ -4,7 +4,7 @@
 		"target": "ES2020",
 		"outDir": "out",
 		"lib": [
-            "ES2020"
+            "ES2020", "DOM"
         ],
 		"sourceMap": true,
 		"rootDir": ".",

webpack.config.js

@@ -10,30 +10,21 @@
 
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
+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/
-
-    entry: './src/extension.ts', // 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]",
-    },
+    entry: "./src/extension.ts",
     optimization: {
         minimizer: [new TerserPlugin({
             parallel: true,
-            extractComments: false,
             terserOptions: {
-                ecma: 2020,
+                ecma: 2019,
                 keep_classnames: false,
                 mangle: true,
-                module: true,
-                format: {
-                    comments: false
-                }
+                module: true
             }
         })],
     },
@@ -54,6 +45,35 @@ const config = {
             }]
         }]
     },
+};
+
+const nodeConfig = {
+    ...config,
+    target: "node",
+    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-node.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+}
+
+const webConfig = {
+    ...config,
+    target: "webworker",
+    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-web.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+        fallback: {
+            path: require.resolve('path-browserify'),
+            os: require.resolve('os-browserify/browser')
+        }
+    }
 }
 
-module.exports = config;
+module.exports = [webConfig,  nodeConfig];