Optimize extension for web usage (#1219)

* Optimize extension for web usage

* Code refactoring

* Remove semver as dependency

* Refactor code

* Code refactoring

* Disable commands which are not available for web

* Update VS Code ignore file

* Update tsconfig

* Update extension activation

.eslintignore

@@ -1 +1 @@
-webpack.config.js
+build/**

.vscode/launch.json

@@ -15,6 +15,18 @@
       "smartStep": true,
       "preLaunchTask": "npm: build"
     },
+    {
+      "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": "Launch Tests",
       "type": "extensionHost",

.vscode/tasks.json

@@ -20,6 +20,13 @@
       "type": "npm",
       "script": "lint",
       "problemMatcher": ["$eslint-stylish"]
+    },
+    {
+      "type": "npm",
+      "script": "watch-web",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
     }
   ]
 }

.vscodeignore

@@ -17,4 +17,4 @@ logo.svg
 node_modules
 package-lock.json
 yarn.lock
-webpack.config.js
+build/**

build/web-extension.webpack.config.js

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+'use strict';
+
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+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: './src/web/extension.ts',
+  },
+  resolve: {
+    mainFields: ['browser', 'module', 'main'],
+    extensions: ['.ts', '.js'], // support ts-files and js-files
+    alias: {},
+    fallback: {
+      assert: require.resolve('assert'),
+      path: false,
+      fs: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ],
+  externals: {
+    vscode: 'commonjs vscode', // ignored because it doesn't exist
+  },
+  performance: {
+    hints: false,
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, '../dist/web'),
+    libraryTarget: 'commonjs',
+  },
+  devtool: 'nosources-source-map',
+};

webpack.config.js → build/webpack.config.js

@@ -4,14 +4,15 @@ const path = require('path');
 
 /** @type {import('webpack').Configuration} */
 const config = {
+  context: path.dirname(__dirname),
   target: 'node',
   node: {
     __dirname: false,
     __filename: false,
   },
   entry: './src/extension.ts',
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, '../dist'),
     filename: 'extension.js',
     libraryTarget: 'commonjs2',
     devtoolModuleFilenameTemplate: '../[resource-path]',

package.json

@@ -44,6 +44,8 @@
     "*"
   ],
   "main": "./dist/extension",
+  "browser": "./dist/web/extension.js",
+  "sideEffects": false,
   "contributes": {
     "iconThemes": [
       {
@@ -56,39 +58,48 @@
     "commands": [
       {
         "command": "material-icon-theme.activateIcons",
-        "title": "%command.activateIcons%"
+        "title": "%command.activateIcons%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.toggleIconPacks",
-        "title": "%command.toggleIconPacks%"
+        "title": "%command.toggleIconPacks%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.changeFolderTheme",
-        "title": "%command.changeFolderTheme%"
+        "title": "%command.changeFolderTheme%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.changeFolderColor",
-        "title": "%command.changeFolderColor%"
+        "title": "%command.changeFolderColor%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.restoreDefaultConfig",
-        "title": "%command.restoreDefaultConfig%"
+        "title": "%command.restoreDefaultConfig%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.toggleExplorerArrows",
-        "title": "%command.toggleExplorerArrows%"
+        "title": "%command.toggleExplorerArrows%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.changeOpacity",
-        "title": "%command.changeOpacity%"
+        "title": "%command.changeOpacity%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.toggleGrayscale",
-        "title": "%command.toggleGrayscale%"
+        "title": "%command.toggleGrayscale%",
+        "enablement": "!isWeb"
       },
       {
         "command": "material-icon-theme.changeSaturation",
-        "title": "%command.changeSaturation%"
+        "title": "%command.changeSaturation%",
+        "enablement": "!isWeb"
       }
     ],
     "configuration": {
@@ -196,9 +207,12 @@
   "scripts": {
     "build": "npm run compile:dev && npm run postcompile",
     "check": "ts-node ./src/scripts/icons/checks",
-    "compile": "webpack --mode production",
-    "compile:dev": "webpack --mode none",
-    "compile:watch": "webpack --mode none --watch",
+    "compile": "webpack --config ./build/webpack.config.js --mode production",
+    "compile:dev": "webpack --config ./build/webpack.config.js --mode none",
+    "compile:watch": "webpack --config ./build/webpack.config.js --mode none --watch",
+    "compile-web": "webpack --config ./build/web-extension.webpack.config.js",
+    "watch-web": "webpack --watch --config ./build/web-extension.webpack.config.js",
+    "package-web": "webpack --mode production --devtool hidden-source-map --config ./build/web-extension.webpack.config.js",
     "contributors": "ts-node ./src/scripts/contributors/index.ts",
     "generateJson": "ts-node ./src/scripts/icons/generateJson.ts",
     "lint": "eslint -c .eslintrc.json --ext .ts ./src/**/*.ts",
@@ -207,19 +221,17 @@
     "preview": "ts-node ./src/scripts/preview",
     "svgo": "svgo -i icons -o icons -q",
     "test": "node ./out/test/runTest.js",
-    "vscode:prepublish": "npm run lint && npm run compile"
+    "vscode:prepublish": "npm run lint && npm run compile && npm run package-web"
   },
   "dependencies": {
-    "lodash.merge": "4.6.2",
-    "semver": "7.3.5"
+    "lodash.merge": "4.6.2"
   },
   "devDependencies": {
     "@types/glob": "^7.1.4",
     "@types/lodash.merge": "^4.6.6",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.4.12",
     "@types/puppeteer": "^5.4.4",
-    "@types/semver": "^7.3.8",
     "@types/vscode": "~1.51.0",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",

src/commands/restoreConfig.ts

@@ -1,14 +1,14 @@
-import * as helpers from './../helpers';
+import { setThemeConfig } from './../helpers';
 
 /** Restore all configurations to default. */
 export const restoreDefaultConfig = () => {
-  helpers.setThemeConfig('activeIconPack', undefined, true);
-  helpers.setThemeConfig('folders.theme', undefined, true);
-  helpers.setThemeConfig('folders.color', undefined, true);
-  helpers.setThemeConfig('hidesExplorerArrows', undefined, true);
-  helpers.setThemeConfig('opacity', undefined, true);
-  helpers.setThemeConfig('saturation', undefined, true);
-  helpers.setThemeConfig('files.associations', undefined, true);
-  helpers.setThemeConfig('folders.associations', undefined, true);
-  helpers.setThemeConfig('languages.associations', undefined, true);
+  setThemeConfig('activeIconPack', undefined, true);
+  setThemeConfig('folders.theme', undefined, true);
+  setThemeConfig('folders.color', undefined, true);
+  setThemeConfig('hidesExplorerArrows', undefined, true);
+  setThemeConfig('opacity', undefined, true);
+  setThemeConfig('saturation', undefined, true);
+  setThemeConfig('files.associations', undefined, true);
+  setThemeConfig('folders.associations', undefined, true);
+  setThemeConfig('languages.associations', undefined, true);
 };