Major refactor:

- Switch to Yarn v2 (Berry)
- Setup Yarn (v2) workspaces
- Eject webview and upgrade to webpack 5
- Slightly update main webpack config
- Update IDE-related files/settings

.gitattributes

@@ -0,0 +1,2 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.github/workflows/build-extension.yml

@@ -33,13 +33,9 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: 12.x
-    - name: Install VSCE
-      run: |
-        yarn global add vsce
-        echo "$(yarn global bin)" >> $GITHUB_PATH
     - name: Get Yarn cache directory
       id: yarn-cache
-      run: echo "::set-output name=dir::$(yarn cache dir)"
+      run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
     - name: Yarn cache
       uses: actions/cache@v2.1.4
       with:
@@ -47,13 +43,10 @@ jobs:
         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
         restore-keys: |
           ${{ runner.os }}-yarn-
-    - name: Install dependencies in /
+    - name: Install dependencies
-      run: yarn --frozen-lockfile
+      run: yarn --immutable
-    - name: Install dependencies in /webview/
-      working-directory: webview
-      run: yarn --frozen-lockfile
     - name: Build extension
-      run: vsce package -o ${{ steps.utils.outputs.artifact_name }}
+      run: yarn dlx vsce package -o ${{ steps.utils.outputs.artifact_name }} --yarn
     - name: Upload a Build Artifact
       uses: actions/upload-artifact@v2.2.1
       with:

.gitignore

@@ -1,5 +1,18 @@
+
+# Build output
 dist
 util
-node_modules
+
+# Build artifacts 
 *.vsix
 stats.json
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+!.yarn/yarn.lock
+.pnp.*

.vscode/extensions.json

@@ -1,7 +1,8 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=827846
+  // See https://go.microsoft.com/fwlink/?LinkId=827846
-    // for the documentation about the extensions.json format
+  // for the documentation about the extensions.json format
-    "recommendations": [
+  "recommendations": [
-        "eamodio.tsl-problem-matcher"
+    "eamodio.tsl-problem-matcher",
-    ]
+    "arcanis.vscode-zipfs"
+  ]
 }

.vscode/settings.json

@@ -1,11 +1,26 @@
 {
-    "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.tsdk": ".yarn/sdks/typescript/lib",
-    "files.exclude": {
+  "files.exclude": {
-        "*.vsix": true,
+    "*.vsix": true,
-        "**/*.lock": true,
+    "**/*.lock": true,
-        "**/node_modules/": true,
+    "**/node_modules/": true,
-        "dist/": true,
+    "dist/": true,
-        "util/": true,
+    "util/": true,
-        "webview/build/": true
+    "webview/build/": true,
-    }
+    ".yarn/": true,
+    ".yarnrc.yml": true,
+    ".pnp.*": true,
+    "LICENSE.txt": true,
+    "**/.*ignore": true,
+    "**/.gitattributes": true,
+    "**/.eslintcache": true,
+    "**/webpack.config.js": true,
+    "**/tslint.json": true,
+    "**/tsconfig.json": true
+  },
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "typescript.enablePromptUseWorkspaceTsdk": true
 }

.vscode/tasks.json

@@ -32,7 +32,7 @@
         {
             "type": "shell",
             "label": "Extension WebView - Watch",
-            "command": "npm start",
+            "command": "yarn start",
             "options": {
                 "cwd": "./webview"
             },

.yarn/sdks/integrations.yml

@@ -0,0 +1,5 @@
+# This file is automatically generated by @yarnpkg/sdks.
+# Manual changes might be lost!
+
+integrations:
+  - vscode

.yarn/sdks/typescript/bin/tsc

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsc
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsc your application uses
+module.exports = absRequire(`typescript/bin/tsc`);

.yarn/sdks/typescript/bin/tsserver

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/bin/tsserver
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/bin/tsserver your application uses
+module.exports = absRequire(`typescript/bin/tsserver`);

.yarn/sdks/typescript/lib/tsc.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsc.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsc.js your application uses
+module.exports = absRequire(`typescript/lib/tsc.js`);

.yarn/sdks/typescript/lib/tsserver.js

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+const moduleWrapper = tsserver => {
+  if (!process.versions.pnp) {
+    return tsserver;
+  }
+
+  const {isAbsolute} = require(`path`);
+  const pnpApi = require(`pnpapi`);
+
+  const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
+
+  const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
+    return `${locator.name}@${locator.reference}`;
+  }));
+
+  // VSCode sends the zip paths to TS using the "zip://" prefix, that TS
+  // doesn't understand. This layer makes sure to remove the protocol
+  // before forwarding it to TS, and to add it back on all returned paths.
+
+  function toEditorPath(str) {
+    // We add the `zip:` prefix to both `.zip/` paths and virtual paths
+    if (isAbsolute(str) && !str.match(/^\^zip:/) && (str.match(/\.zip\//) || isVirtual(str))) {
+      // We also take the opportunity to turn virtual paths into physical ones;
+      // this makes it much easier to work with workspaces that list peer
+      // dependencies, since otherwise Ctrl+Click would bring us to the virtual
+      // file instances instead of the real ones.
+      //
+      // We only do this to modules owned by the the dependency tree roots.
+      // This avoids breaking the resolution when jumping inside a vendor
+      // with peer dep (otherwise jumping into react-dom would show resolution
+      // errors on react).
+      //
+      const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
+      if (resolved) {
+        const locator = pnpApi.findPackageLocator(resolved);
+        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+          str = resolved;
+        }
+      }
+
+      str = normalize(str);
+
+      if (str.match(/\.zip\//)) {
+        switch (hostInfo) {
+          // Absolute VSCode `Uri.fsPath`s need to start with a slash.
+          // VSCode only adds it automatically for supported schemes,
+          // so we have to do it manually for the `zip` scheme.
+          // The path needs to start with a caret otherwise VSCode doesn't handle the protocol
+          //
+          // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
+          //
+          case `vscode`: {
+            str = `^zip:${str}`;
+          } break;
+
+          // To make "go to definition" work,
+          // We have to resolve the actual file system path from virtual path
+          // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
+          case `coc-nvim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = resolve(`zipfile:${str}`);
+          } break;
+
+          // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server)
+          // We have to resolve the actual file system path from virtual path,
+          // everything else is up to neovim
+          case `neovim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = `zipfile:${str}`;
+          } break;
+
+          default: {
+            str = `zip:${str}`;
+          } break;
+        }
+      }
+    }
+
+    return str;
+  }
+
+  function fromEditorPath(str) {
+    return process.platform === `win32`
+      ? str.replace(/^\^?zip:\//, ``)
+      : str.replace(/^\^?zip:/, ``);
+  }
+
+  // Force enable 'allowLocalPluginLoads'
+  // TypeScript tries to resolve plugins using a path relative to itself
+  // which doesn't work when using the global cache
+  // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238
+  // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but
+  // TypeScript already does local loads and if this code is running the user trusts the workspace
+  // https://github.com/microsoft/vscode/issues/45856
+  const ConfiguredProject = tsserver.server.ConfiguredProject;
+  const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype;
+  ConfiguredProject.prototype.enablePluginsWithOptions = function() {
+    this.projectService.allowLocalPluginLoads = true;
+    return originalEnablePluginsWithOptions.apply(this, arguments);
+  };
+
+  // And here is the point where we hijack the VSCode <-> TS communications
+  // by adding ourselves in the middle. We locate everything that looks
+  // like an absolute path of ours and normalize it.
+
+  const Session = tsserver.server.Session;
+  const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
+  let hostInfo = `unknown`;
+
+  Object.assign(Session.prototype, {
+    onMessage(/** @type {string} */ message) {
+      const parsedMessage = JSON.parse(message)
+
+      if (
+        parsedMessage != null &&
+        typeof parsedMessage === `object` &&
+        parsedMessage.arguments &&
+        typeof parsedMessage.arguments.hostInfo === `string`
+      ) {
+        hostInfo = parsedMessage.arguments.hostInfo;
+      }
+
+      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === `string` ? fromEditorPath(value) : value;
+      }));
+    },
+
+    send(/** @type {any} */ msg) {
+      return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
+        return typeof value === `string` ? toEditorPath(value) : value;
+      })));
+    }
+  });
+
+  return tsserver;
+};
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserver.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsserver.js your application uses
+module.exports = moduleWrapper(absRequire(`typescript/lib/tsserver.js`));

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+const moduleWrapper = tsserver => {
+  if (!process.versions.pnp) {
+    return tsserver;
+  }
+
+  const {isAbsolute} = require(`path`);
+  const pnpApi = require(`pnpapi`);
+
+  const isVirtual = str => str.match(/\/(\$\$virtual|__virtual__)\//);
+  const normalize = str => str.replace(/\\/g, `/`).replace(/^\/?/, `/`);
+
+  const dependencyTreeRoots = new Set(pnpApi.getDependencyTreeRoots().map(locator => {
+    return `${locator.name}@${locator.reference}`;
+  }));
+
+  // VSCode sends the zip paths to TS using the "zip://" prefix, that TS
+  // doesn't understand. This layer makes sure to remove the protocol
+  // before forwarding it to TS, and to add it back on all returned paths.
+
+  function toEditorPath(str) {
+    // We add the `zip:` prefix to both `.zip/` paths and virtual paths
+    if (isAbsolute(str) && !str.match(/^\^zip:/) && (str.match(/\.zip\//) || isVirtual(str))) {
+      // We also take the opportunity to turn virtual paths into physical ones;
+      // this makes it much easier to work with workspaces that list peer
+      // dependencies, since otherwise Ctrl+Click would bring us to the virtual
+      // file instances instead of the real ones.
+      //
+      // We only do this to modules owned by the the dependency tree roots.
+      // This avoids breaking the resolution when jumping inside a vendor
+      // with peer dep (otherwise jumping into react-dom would show resolution
+      // errors on react).
+      //
+      const resolved = isVirtual(str) ? pnpApi.resolveVirtual(str) : str;
+      if (resolved) {
+        const locator = pnpApi.findPackageLocator(resolved);
+        if (locator && dependencyTreeRoots.has(`${locator.name}@${locator.reference}`)) {
+          str = resolved;
+        }
+      }
+
+      str = normalize(str);
+
+      if (str.match(/\.zip\//)) {
+        switch (hostInfo) {
+          // Absolute VSCode `Uri.fsPath`s need to start with a slash.
+          // VSCode only adds it automatically for supported schemes,
+          // so we have to do it manually for the `zip` scheme.
+          // The path needs to start with a caret otherwise VSCode doesn't handle the protocol
+          //
+          // Ref: https://github.com/microsoft/vscode/issues/105014#issuecomment-686760910
+          //
+          case `vscode`: {
+            str = `^zip:${str}`;
+          } break;
+
+          // To make "go to definition" work,
+          // We have to resolve the actual file system path from virtual path
+          // and convert scheme to supported by [vim-rzip](https://github.com/lbrayner/vim-rzip)
+          case `coc-nvim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = resolve(`zipfile:${str}`);
+          } break;
+
+          // Support neovim native LSP and [typescript-language-server](https://github.com/theia-ide/typescript-language-server)
+          // We have to resolve the actual file system path from virtual path,
+          // everything else is up to neovim
+          case `neovim`: {
+            str = normalize(resolved).replace(/\.zip\//, `.zip::`);
+            str = `zipfile:${str}`;
+          } break;
+
+          default: {
+            str = `zip:${str}`;
+          } break;
+        }
+      }
+    }
+
+    return str;
+  }
+
+  function fromEditorPath(str) {
+    return process.platform === `win32`
+      ? str.replace(/^\^?zip:\//, ``)
+      : str.replace(/^\^?zip:/, ``);
+  }
+
+  // Force enable 'allowLocalPluginLoads'
+  // TypeScript tries to resolve plugins using a path relative to itself
+  // which doesn't work when using the global cache
+  // https://github.com/microsoft/TypeScript/blob/1b57a0395e0bff191581c9606aab92832001de62/src/server/project.ts#L2238
+  // VSCode doesn't want to enable 'allowLocalPluginLoads' due to security concerns but
+  // TypeScript already does local loads and if this code is running the user trusts the workspace
+  // https://github.com/microsoft/vscode/issues/45856
+  const ConfiguredProject = tsserver.server.ConfiguredProject;
+  const {enablePluginsWithOptions: originalEnablePluginsWithOptions} = ConfiguredProject.prototype;
+  ConfiguredProject.prototype.enablePluginsWithOptions = function() {
+    this.projectService.allowLocalPluginLoads = true;
+    return originalEnablePluginsWithOptions.apply(this, arguments);
+  };
+
+  // And here is the point where we hijack the VSCode <-> TS communications
+  // by adding ourselves in the middle. We locate everything that looks
+  // like an absolute path of ours and normalize it.
+
+  const Session = tsserver.server.Session;
+  const {onMessage: originalOnMessage, send: originalSend} = Session.prototype;
+  let hostInfo = `unknown`;
+
+  Object.assign(Session.prototype, {
+    onMessage(/** @type {string} */ message) {
+      const parsedMessage = JSON.parse(message)
+
+      if (
+        parsedMessage != null &&
+        typeof parsedMessage === `object` &&
+        parsedMessage.arguments &&
+        typeof parsedMessage.arguments.hostInfo === `string`
+      ) {
+        hostInfo = parsedMessage.arguments.hostInfo;
+      }
+
+      return originalOnMessage.call(this, JSON.stringify(parsedMessage, (key, value) => {
+        return typeof value === `string` ? fromEditorPath(value) : value;
+      }));
+    },
+
+    send(/** @type {any} */ msg) {
+      return originalSend.call(this, JSON.parse(JSON.stringify(msg, (key, value) => {
+        return typeof value === `string` ? toEditorPath(value) : value;
+      })));
+    }
+  });
+
+  return tsserver;
+};
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/tsserverlibrary.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/tsserverlibrary.js your application uses
+module.exports = moduleWrapper(absRequire(`typescript/lib/tsserverlibrary.js`));

.yarn/sdks/typescript/lib/typescript.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire, createRequireFromPath} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require typescript/lib/typescript.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real typescript/lib/typescript.js your application uses
+module.exports = absRequire(`typescript/lib/typescript.js`);

.yarn/sdks/typescript/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "typescript",
+  "version": "4.3.4-sdk",
+  "main": "./lib/typescript.js",
+  "type": "commonjs"
+}

.yarnrc.yml

@@ -0,0 +1,15 @@
+enableGlobalCache: true
+
+lockfileFilename: .yarn/yarn.lock
+
+preferInteractive: true
+
+nodeLinker: pnp
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
+    spec: "@yarnpkg/plugin-version"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.0.1-git-fixed.cjs

package.json

@@ -402,7 +402,7 @@
         }
     },
     "scripts": {
-        "vscode:prepublish": "yarn run build && cd webview && yarn run build",
+        "vscode:prepublish": "yarn workspaces foreach -vip -j 2 run build",
         "build": "webpack --mode production",
         "compile": "webpack --mode development",
         "watch": "webpack --mode development --watch"
@@ -414,12 +414,11 @@
         "@types/vscode": "~1.49.0",
         "@types/webpack": "^4.4.25",
         "@types/winreg": "^1.2.30",
-        "clean-webpack-plugin": "^4.0.0-alpha.0",
         "source-map": "^0.7.3",
         "source-map-support": "^0.5.19",
         "ts-loader": "^9.2.3",
         "typescript": "^4.3.4",
-        "webpack": "^5.40.0",
+        "webpack": "^5.50.0",
         "webpack-cli": "^4.7.2"
     },
     "dependencies": {
@@ -427,9 +426,15 @@
         "jsonc-parser": "^2.0.0",
         "socks": "^2.2.0",
         "ssh2": "^0.8.9",
+        "ssh2-streams": "^0.4.10",
+        "webview": "workspace:*",
         "winreg": "^1.2.4"
     },
     "resolutions": {
         "ssh2-streams": "Timmmm/ssh2-streams#patch-1"
-    }
+    },
+    "workspaces": [
+        "./webview"
+    ],
+    "packageManager": "yarn@3.0.1"
 }

webpack.config.js

@@ -5,16 +5,16 @@
 const { join, resolve, dirname } = require('path');
 const fs = require('fs');
 const webpack = require('webpack');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 /**
  * @template T
- * @param { (cb: (e?: Error, r?: T) => void) => any } func
+ * @param { (cb: (e?: Error | null, r?: T) => void) => any } func
  * @return { Promise<T> }
  */
 function wrap(func) {
     return new Promise((res, rej) => {
         try {
+            // @ts-ignore
             func((e, r) => e ? rej(e) : res(r));
         } catch (e) {
             rej(e);
@@ -27,7 +27,8 @@ class CopyPuttyExecutable {
      * @param {webpack.Compiler} compiler
      */
     apply(compiler) {
-        const path = resolve('./node_modules/ssh2/util/pagent.exe');
+        const path = require.resolve('ssh2/util/pagent.exe');
+        // @ts-ignore
         const target = join(compiler.options.output.path, '../util/pagent.exe');
         compiler.hooks.beforeRun.tapPromise('CopyPuttyExecutable-BeforeRun', () => new Promise((resolve, reject) => {
             fs.exists(path, exists => exists ? resolve() : reject(`Couldn't find executable at: ${path}`));
@@ -67,17 +68,18 @@ const config = {
     output: {
         path: resolve(__dirname, 'dist'),
         filename: 'extension.js',
-        libraryTarget: "commonjs2",
+        libraryTarget: 'commonjs2',
-        devtoolModuleFilenameTemplate: "../[resource-path]",
+        devtoolModuleFilenameTemplate: '../[resource-path]',
+        clean: true,
     },
     devtool: 'source-map',
     performance: {
         hints: 'warning'
     },
     externals: {
-        vscode: "commonjs vscode",
+        vscode: 'commonjs vscode',
-        request: "commonjs request",
+        request: 'commonjs request',
-        'source-map-support/register': "commonjs source-map-support/register",
+        'source-map-support/register': 'commonjs source-map-support/register',
     },
     resolve: {
         extensions: ['.ts', '.js']
@@ -92,7 +94,6 @@ const config = {
         }]
     },
     plugins: [
-        new CleanWebpackPlugin(),
         new CopyPuttyExecutable(),
         new ProblemMatcherReporter(),
     ],
@@ -115,7 +116,15 @@ const config = {
         modulesSpace: 50,
         excludeModules(name, { issuerPath }) {
             if (name.startsWith('external ')) return true;
-            return issuerPath && issuerPath[issuerPath.length - 1].name.startsWith('./node_modules');
+            const issuer = issuerPath && (issuerPath[issuerPath.length - 1].name || '').replace(/\\/g, '/');
+            if (!issuer) return false;
+            if (issuer.startsWith('./.yarn/')) return true;
+            if (issuer.startsWith('../')) {
+                const lower = issuer.toLowerCase();
+                if (lower.includes('/yarn/berry/cache/')) return true;
+                if (lower.includes('/.yarn/berry/cache/')) return true;
+            }
+            return false;
         },
     },
 }

webview/.env

@@ -1,4 +0,0 @@
-WDS_SOCKET_HOST=localhost
-WDS_SOCKET_PORT=3000
-BROWSER=none
-SKIP_PREFLIGHT_CHECK=true

webview/package.json

@@ -2,25 +2,52 @@
   "name": "webview",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
-  },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "webpack serve",
-    "build": "react-scripts build",
+    "build": "webpack --mode production"
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.4",
+    "@babel/core": "^7.15.0",
-    "@types/react": "^16.9.23",
+    "@babel/preset-react": "^7.14.5",
-    "@types/react-dom": "^16.9.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.3",
+    "@types/react": "^17.0.18",
+    "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.7",
-    "react-scripts": "^4.0.1",
+    "@types/ssh2": "^0.5.47",
-    "typescript": "^4.3.4"
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "8.1.0",
+    "babel-preset-react-app": "^10.0.0",
+    "css-loader": "4.3.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "dotenv": "8.2.0",
+    "eslint": "^7.11.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-testing-library": "^3.9.0",
+    "eslint-webpack-plugin": "^3.0.1",
+    "html-webpack-plugin": "^5.3.2",
+    "mini-css-extract-plugin": "0.11.3",
+    "pnp-webpack-plugin": "^1.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.0",
+    "react-refresh": "^0.10.0",
+    "redux": "^4.0.5",
+    "style-loader": "1.3.0",
+    "ts-loader": "^9.2.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.3.4",
+    "url-loader": "4.1.1",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.0.0-rc.0"
   },
   "browserslist": [
     "Electron >= 9.0.0"
@@ -32,7 +59,14 @@
     ],
     "rules": {
       "no-sparse-arrays": 0,
-      "no-sequences": 0
+      "no-sequences": 0,
+      "react/jsx-uses-react": 0,
+      "react/react-in-jsx-scope": 0
     }
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }

webview/public/index.html

@@ -4,32 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' $WEBVIEW_CSPSOURCE; style-src 'unsafe-inline' $WEBVIEW_CSPSOURCE; $WEBVIEW_CSPEXTRA">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <!--<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">-->
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
-    <noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

webview/src/FieldTypes/checkbox.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { FieldBase } from './base';
 
 interface Props {

webview/src/index.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import './index.css';

webview/src/react-app-env.d.ts

@@ -1 +1,44 @@
-/// <reference types="react-scripts" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+  }
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}

webview/src/router.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import ConfigEditor from './ConfigEditor';
 import ConfigLocator from './ConfigLocator';
 import NewConfig from './NewConfig';

webview/tsconfig.json

@@ -9,7 +9,7 @@
     ],
     "sourceMap": true,
     "allowJs": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "rootDir": "src",
     "forceConsistentCasingInFileNames": true,
@@ -26,8 +26,7 @@
     "strict": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    "isolatedModules": true
-    "noEmit": true
   },
   "include": [
     "src",

webview/webpack.config.js

@@ -0,0 +1,172 @@
+
+//@ts-check
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const PnpWebpackPlugin = require(`pnp-webpack-plugin`);
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const ESLintWebpackPlugin = require('eslint-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+require('dotenv').config();
+
+/**
+ * @template T
+ * @param arr {(T | false | undefined)[]}
+ * @returns {T[]}
+ */
+// @ts-ignore
+const truthyArray = arr => arr.filter(Boolean);
+
+/**
+ * @param options {{ mode?: 'development' | 'production'; watch?: boolean; serve?: boolean; env: object }}
+ */
+module.exports = (env, options) => {
+  options = {
+    mode: 'development',
+    ...env.WEBPACK_SERVE && { serve: true },
+    ...options,
+  };
+  console.log('options:', options);
+  const isEnvDevelopment = options.mode === 'development';
+  const isEnvProduction = options.mode === 'production';
+  process.env.NODE_ENV = options.env.NODE_ENV = options.mode;
+
+  // In serve mode, we serve inside VS Code through localhost:3000
+  const publicPath = options.serve ? 'http://localhost:3000/' : '/';
+
+  /** @type {webpack.Configuration & { devServer: any }} */
+  const config = {
+    mode: options.mode,
+    target: 'web',
+    bail: isEnvProduction,
+    devtool: 'source-map',
+    entry: './src/index.tsx',
+    output: {
+      path: isEnvProduction ? path.resolve('./build') : undefined,
+      pathinfo: isEnvDevelopment,
+      filename: 'static/js/[name].bundle.js',
+      chunkFilename: 'static/js/[name].chunk.js',
+      publicPath,
+      devtoolModuleFilenameTemplate(info) {
+        if (isEnvProduction) return path.relative('./src', info.absoluteResourcePath).replace(/\\/g, '/');
+        return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+      },
+      clean: true,
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [new CssMinimizerPlugin(), '...'],
+      splitChunks: { chunks: 'all', name: isEnvDevelopment ? undefined : false },
+      runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` },
+    },
+    resolve: {
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      plugins: [PnpWebpackPlugin]
+    },
+    resolveLoader: {
+      plugins: [
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      rules: [
+        {
+          parser: {
+            requireEnsure: false,
+            strictExportPresence: true,
+          }
+        },
+        {
+          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+          loader: require.resolve('url-loader'),
+          options: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
+        },
+        {
+          test: /\.(mjs|jsx?)$/,
+          include: path.resolve('src'),
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              ['@babel/preset-react', { runtime: 'automatic' }],
+            ],
+            cacheDirectory: true,
+            cacheCompression: false,
+            compact: isEnvProduction,
+          },
+        },
+        {
+          test: /\.(tsx?)$/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                presets: [
+                  ['@babel/preset-react', { runtime: 'automatic' }],
+                ],
+                cacheDirectory: true,
+                cacheCompression: false,
+                compact: isEnvProduction,
+                plugins: [
+                  options.serve && require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
+              },
+            },
+            { loader: 'ts-loader' },
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          sideEffects: true,
+        },
+      ],
+    },
+    plugins: truthyArray([
+      new HtmlWebpackPlugin({ inject: true, template: 'public/index.html', publicPath }),
+      options.serve && new webpack.HotModuleReplacementPlugin(),
+      options.serve && new ReactRefreshWebpackPlugin(),
+      new webpack.DefinePlugin(options.env),
+      isEnvProduction && new MiniCssExtractPlugin({
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      }),
+      // @ts-ignore
+      new ESLintWebpackPlugin({
+        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+        eslintPath: require.resolve('eslint'),
+        failOnError: !isEnvDevelopment,
+        context: path.resolve('src'),
+        cache: true,
+        cacheLocation: '.eslintcache',
+        cwd: __dirname,
+        resolvePluginsRelativeTo: __dirname,
+        baseConfig: {
+          extends: [require.resolve('eslint-config-react-app/base')],
+          rules: {
+            'react/react-in-jsx-scope': 'error',
+          },
+        },
+      }),
+    ]),
+    node: false,
+    performance: false,
+    devServer: {
+      hot: 'only',
+      open: false,
+      host: 'localhost',
+      port: 3000,
+      allowedHosts: 'all',
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+    },
+  };
+  return config;
+};