Rebuild with latest template

.editorconfig

@@ -2,9 +2,5 @@ root = true
 
 [*]
 charset = utf-8
-indent_size = 4
 indent_style = space
 insert_final_newline = true
-
-[*.md]
-indent_size = 2

.github/workflows/ci.yml

@@ -11,29 +11,43 @@ jobs:
     runs-on: windows-latest
     strategy:
       matrix:
-        node-version: ["16", "latest"]
+        node-version: ["20", "latest"]
     steps:
       - uses: actions/checkout@v3
+
       - name: Setup Node.js (${{ matrix.node-version }})
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm run test
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: latest
+          run_install: true
+
+      - run: pnpm install-test
 
   package:
     runs-on: windows-latest
     needs: test
     strategy:
       matrix:
-        node-version: ["16"]
+        node-version: ["20"]
     steps:
       - uses: actions/checkout@v3
+
       - name: Setup Node.js (${{ matrix.node-version }})
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: latest
+          run_install: true
+
       - run: npm install --global vsce
       - run: vsce package
       - uses: actions/upload-artifact@v3

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts = true

.pre-commit-config.yaml

@@ -0,0 +1,15 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-yaml
+      - id: check-added-large-files
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.1.0
+    hooks:
+      - id: prettier

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.vscode/extensions.json

@@ -1,5 +1,9 @@
 {
-    // See http://go.microsoft.com/fwlink/?LinkId=827846
-    // for the documentation about the extensions.json format
-    "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher"]
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "connor4312.esbuild-problem-matchers",
+    "ms-vscode.extension-test-runner"
+  ]
 }

.vscode/launch.json

@@ -3,32 +3,32 @@
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Run Web Extension ",
-            "type": "pwa-extensionHost",
-            "debugWebWorkerHost": true,
-            "request": "launch",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceFolder}",
-                "--extensionDevelopmentKind=web"
-            ],
-            "outFiles": ["${workspaceFolder}/dist/web/**/*.js"],
-            "preLaunchTask": "npm: watch-web"
-        },
-        {
-            "name": "Extension Tests",
-            "type": "extensionHost",
-            "debugWebWorkerHost": true,
-            "request": "launch",
-            "args": [
-                "--extensionDevelopmentPath=${workspaceFolder}",
-                "--extensionDevelopmentKind=web",
-                "--extensionTestsPath=${workspaceFolder}/dist/web/test/suite/index"
-            ],
-            "outFiles": ["${workspaceFolder}/dist/web/**/*.js"],
-            "preLaunchTask": "npm: watch-web"
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Web Extension ",
+      "type": "extensionHost",
+      "debugWebWorkerHost": true,
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionDevelopmentKind=web"
+      ],
+      "outFiles": ["${workspaceFolder}/dist/web/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    },
+    {
+      "name": "Extension Tests",
+      "type": "extensionHost",
+      "debugWebWorkerHost": true,
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}",
+        "--extensionDevelopmentKind=web",
+        "--extensionTestsPath=${workspaceFolder}/dist/web/test/suite/extensionTests"
+      ],
+      "outFiles": ["${workspaceFolder}/dist/web/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.exclude": {
+    "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "dist": true // set this to false to include "dist" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,48 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "watch-web",
+      "dependsOn": ["npm: watch-web:tsc", "npm: watch-web:esbuild"],
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch-web:esbuild",
+      "group": "build",
+      "problemMatcher": "$esbuild-watch",
+      "isBackground": true,
+      "label": "npm: watch-web:esbuild",
+      "presentation": {
+        "group": "watch",
+        "reveal": "never"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch-web:tsc",
+      "group": "build",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "label": "npm: watch-web:tsc",
+      "presentation": {
+        "group": "watch",
+        "reveal": "never"
+      }
+    },
+    {
+      "label": "compile",
+      "type": "npm",
+      "script": "compile-web",
+      "problemMatcher": ["$tsc", "$esbuild"]
+    }
+  ]
+}

.vscodeignore

@@ -3,11 +3,14 @@
 src/**
 out/**
 node_modules/**
+dist/test/**
 .gitignore
 vsc-extension-quickstart.md
 webpack.config.js
+esbuild.js
 .yarnrc
 **/tsconfig.json
-**/.eslintrc.json
+**/eslint.config.mjs
 **/*.map
 **/*.ts
+**/.vscode-test.*

esbuild.js

@@ -0,0 +1,104 @@
+const esbuild = require("esbuild");
+const glob = require("glob");
+const path = require("path");
+const polyfill = require("@esbuild-plugins/node-globals-polyfill");
+
+const production = process.argv.includes("--production");
+const watch = process.argv.includes("--watch");
+
+/**
+ * This plugin hooks into the build process to print errors in a format that the problem matcher in
+ * Visual Studio Code can understand.
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+  name: "esbuild-problem-matcher",
+
+  setup(build) {
+    build.onStart(() => {
+      console.log("[watch] build started");
+    });
+    build.onEnd((result) => {
+      result.errors.forEach(({ text, location }) => {
+        console.error(`✘ [ERROR] ${text}`);
+        console.error(
+          `    ${location.file}:${location.line}:${location.column}:`,
+        );
+      });
+      console.log("[watch] build finished");
+    });
+  },
+};
+
+/**
+ * For web extension, all tests, including the test runner, need to be bundled into
+ * a single module that has a exported `run` function .
+ * This plugin bundles implements a virtual file extensionTests.ts that bundles all these together.
+ * @type {import('esbuild').Plugin}
+ */
+const testBundlePlugin = {
+  name: "testBundlePlugin",
+  setup(build) {
+    build.onResolve({ filter: /[\/\\]extensionTests\.ts$/ }, (args) => {
+      if (args.kind === "entry-point") {
+        return { path: path.resolve(args.path) };
+      }
+    });
+    build.onLoad({ filter: /[\/\\]extensionTests\.ts$/ }, async (args) => {
+      const testsRoot = path.join(__dirname, "src/web/test/suite");
+      const files = await glob.glob("*.test.{ts,tsx}", {
+        cwd: testsRoot,
+        posix: true,
+      });
+      return {
+        contents:
+          `export { run } from './mochaTestRunner.ts';` +
+          files.map((f) => `import('./${f}');`).join(""),
+        watchDirs: files.map((f) => path.dirname(path.resolve(testsRoot, f))),
+        watchFiles: files.map((f) => path.resolve(testsRoot, f)),
+      };
+    });
+  },
+};
+
+async function main() {
+  const ctx = await esbuild.context({
+    entryPoints: [
+      "src/web/extension.ts",
+      "src/web/test/suite/extensionTests.ts",
+    ],
+    bundle: true,
+    format: "cjs",
+    minify: production,
+    sourcemap: !production,
+    sourcesContent: false,
+    platform: "browser",
+    outdir: "dist/web",
+    external: ["vscode"],
+    logLevel: "silent",
+    // Node.js global to browser globalThis
+    define: {
+      global: "globalThis",
+    },
+
+    plugins: [
+      polyfill.NodeGlobalsPolyfillPlugin({
+        process: true,
+        buffer: true,
+      }),
+      testBundlePlugin,
+      esbuildProblemMatcherPlugin /* add to the end of plugins array */,
+    ],
+  });
+  if (watch) {
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

eslint.config.mjs

@@ -0,0 +1,34 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [
+  {
+    files: ["**/*.ts"],
+  },
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: "module",
+    },
+
+    rules: {
+      "@typescript-eslint/naming-convention": [
+        "warn",
+        {
+          selector: "import",
+          format: ["camelCase", "PascalCase"],
+        },
+      ],
+
+      curly: "warn",
+      eqeqeq: "warn",
+      "no-throw-literal": "warn",
+      semi: "warn",
+    },
+  },
+];