Merge pull request #3174 from github/koesie10/view-esbuild

Switch view to ESBuild and JSX runtime

Author: koesie10

docs/images/about-vscode-chromium.png

@@ -7,7 +7,7 @@ We should make sure the CodeQL for VS Code extension works with the Node.js vers
 
 ## Checking the version of Node.js supplied by VS Code
 
-You can find this info by seleting "About Visual Studio Code" from the top menu.
+You can find this info by selecting "About Visual Studio Code" from the top menu.
 
 ![about-vscode](images/about-vscode.png)
 

docs/images/electron-chromium-version.png

@@ -24,7 +24,49 @@ Also consider what percentage of our users are using each VS Code version. This
 
 ## How to update the VS Code version
 
-To provide a good experience to users, it is recommented to update the `MIN_VERSION` in `extension.ts` first and release, and then update the `vscode` version in `package.json` and release again. By stagging this update across two releases it gives users on older VS Code versions a chance to upgrade before it silently refuses to upgrade them.
+To provide a good experience to users, it is recommented to update the `MIN_VERSION` in `extension.ts` first and release, and then update the `vscode` version in `package.json` and release again.
+By staggering this update across two releases it gives users on older VS Code versions a chance to upgrade before it silently refuses to upgrade them.
+
+When updating the minimum version in `package.json`, you should also follow the additional steps listed below.
+
+### Updating the Chromium target version
+
+For the webview code, we use [esbuild](https://esbuild.github.io/) to bundle the code. This requires a target version of Chromium to be specified.
+This version should be the same as the version of Chromium that is bundled with the new minimum VS Code version. There are two
+methods to find this version.
+
+#### Using the About Visual Studio Code dialog
+
+Download the new minimum VS Code version from [the previous release versions](https://code.visualstudio.com/docs/supporting/faq#_previous-release-versions). Then,
+select "About Visual Studio Code" from the top menu. This will show the version of Chromium that is bundled with that version of VS Code.
+
+![Chromium version in the About Visual Studio Code dialog](images/about-vscode-chromium.png)
+
+In this case, the `target` would be `chrome114`.
+
+#### Using the VS Code source code
+
+You can find the version of Electron that VS Code uses by looking at its `package.json` file for a specific version
+(for example [the `package.json` for `1.82.0`](https://github.com/microsoft/vscode/blob/1.82.0/package.json#L153)).
+
+![Electron version in the `package.json` file](images/electron-version.png)
+
+Then, you can find the version of Chromium that is bundled with that version of Electron by looking at the
+Chromium version that is shown for that Electron version on [the Electron releases site](https://releases.electronjs.org/releases/stable)
+(for example [the `25.8.0` release](https://releases.electronjs.org/release/v25.8.0)):
+
+![Chromium version in the Electron releases site](images/electron-chromium-version.png)
+
+In this case, the `target` would be `chrome114`.
+
+#### Troubleshooting
+
+In case there's an error when specifying a version of Chromium, you may need to update the version of `caniuse-lite`
+in `package.json` to a newer version. You should be able to do so by running:
+
+```shell
+npx update-browserslist-db@latest
+```
 
 ## VS Code version used in tests
 

docs/images/electron-version.png

@@ -21,7 +21,6 @@ const baseConfig = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:github/react",
     "plugin:github/recommended",
     "plugin:github/typescript",
     "plugin:jest-dom/recommended",
@@ -94,8 +93,10 @@ module.exports = {
       extends: [
         ...baseConfig.extends,
         "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
         "plugin:react-hooks/recommended",
         "plugin:storybook/recommended",
+        "plugin:github/react",
       ],
       rules: {
         ...baseConfig.rules,
@@ -114,7 +115,9 @@ module.exports = {
       extends: [
         ...baseConfig.extends,
         "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
         "plugin:react-hooks/recommended",
+        "plugin:github/react",
       ],
       rules: {
         ...baseConfig.rules,

docs/node-version.md

@@ -8,9 +8,14 @@ import {
   copyWasmFiles,
 } from "./typescript";
 import { compileTextMateGrammar } from "./textmate";
-import { compileView, watchView } from "./webpack";
 import { packageExtension } from "./package";
 import { injectAppInsightsKey } from "./appInsights";
+import {
+  checkViewTypeScript,
+  compileViewEsbuild,
+  watchViewCheckTypeScript,
+  watchViewEsbuild,
+} from "./view";
 
 export const buildWithoutPackage = series(
   cleanOutput,
@@ -19,23 +24,33 @@ export const buildWithoutPackage = series(
     copyWasmFiles,
     checkTypeScript,
     compileTextMateGrammar,
-    compileView,
+    compileViewEsbuild,
+    checkViewTypeScript,
   ),
 );
 
-export const watch = parallel(watchEsbuild, watchCheckTypeScript, watchView);
+export const watch = parallel(
+  // Always build first, so that we don't have to run build manually
+  compileEsbuild,
+  compileViewEsbuild,
+  watchEsbuild,
+  watchCheckTypeScript,
+  watchViewEsbuild,
+  watchViewCheckTypeScript,
+);
 
 export {
   cleanOutput,
   compileTextMateGrammar,
   watchEsbuild,
   watchCheckTypeScript,
-  watchView,
+  watchViewEsbuild,
   compileEsbuild,
   copyWasmFiles,
   checkTypeScript,
   injectAppInsightsKey,
-  compileView,
+  compileViewEsbuild,
+  checkViewTypeScript,
 };
 export default series(
   buildWithoutPackage,

docs/vscode-version.md

@@ -4,7 +4,7 @@ import esbuild from "gulp-esbuild";
 import { createProject, reporter } from "gulp-typescript";
 import del from "del";
 
-function goodReporter(): reporter.Reporter {
+export function goodReporter(): reporter.Reporter {
   return {
     error: (error, typescript) => {
       if (error.tsFile) {
@@ -56,7 +56,7 @@ export function compileEsbuild() {
 }
 
 export function watchEsbuild() {
-  watch("src/**/*.ts", compileEsbuild);
+  watch(["src/**/*.ts", "!src/view/**/*.ts"], compileEsbuild);
 }
 
 export function checkTypeScript() {
@@ -66,7 +66,7 @@ export function checkTypeScript() {
 }
 
 export function watchCheckTypeScript() {
-  watch("src/**/*.ts", checkTypeScript);
+  watch(["src/**/*.ts", "!src/view/**/*.ts"], checkTypeScript);
 }
 
 export function copyWasmFiles() {

extensions/ql-vscode/.eslintrc.js

@@ -0,0 +1,40 @@
+import { dest, src, watch } from "gulp";
+import esbuild from "gulp-esbuild";
+import { createProject } from "gulp-typescript";
+import { goodReporter } from "./typescript";
+
+const tsProject = createProject("src/view/tsconfig.json");
+
+export function compileViewEsbuild() {
+  return src("./src/view/webview.tsx")
+    .pipe(
+      esbuild({
+        outfile: "webview.js",
+        bundle: true,
+        format: "iife",
+        platform: "browser",
+        target: "chrome114", // Electron 25, VS Code 1.85
+        jsx: "automatic",
+        sourcemap: "linked",
+        sourceRoot: "..",
+        loader: {
+          ".ttf": "file",
+        },
+      }),
+    )
+    .pipe(dest("out"));
+}
+
+export function watchViewEsbuild() {
+  watch(["src/view/**/*.{ts,tsx}"], compileViewEsbuild);
+}
+
+export function checkViewTypeScript() {
+  // This doesn't actually output the TypeScript files, it just
+  // runs the TypeScript compiler and reports any errors.
+  return tsProject.src().pipe(tsProject(goodReporter()));
+}
+
+export function watchViewCheckTypeScript() {
+  watch(["src/view/**/*.{ts,tsx}"], checkViewTypeScript);
+}