Bundle extension files using ESBuild

This bundles the extension files using esbuild, as recommended by
VSCode. This reduces the size of the extension from 34MB to less than
5MB.

Gulp will still run TypeScript to check types, but will not use the
TypeScript compiler output in the bundle.

Tests are now run separately, outside of Gulp, so their data doesn't
need to be copied anymore.

See: https://code.visualstudio.com/api/working-with-extensions/bundling-extension

Author: koesie10

extensions/ql-vscode/.vscodeignore

@@ -14,3 +14,4 @@ gulpfile.js/**
 tsconfig.json
 .prettierrc
 vsc-extension-quickstart.md
+node_modules/**

extensions/ql-vscode/gulpfile.ts/appInsights.ts

@@ -13,7 +13,7 @@ export function injectAppInsightsKey() {
   }
 
   // replace the key
-  return src(["out/telemetry.js"])
+  return src(["out/extension.js"])
     .pipe(replace(/REPLACE-APP-INSIGHTS-KEY/, process.env.APP_INSIGHTS_KEY))
     .pipe(dest("out/"));
 }

extensions/ql-vscode/gulpfile.ts/deploy.ts

@@ -22,21 +22,27 @@ const packageFiles = [
   "language-configuration.json",
   "snippets.json",
   "media",
-  "node_modules",
   "out",
   "workspace-databases-schema.json",
 ];
 
+async function copyDirectory(
+  sourcePath: string,
+  destPath: string,
+): Promise<void> {
+  console.log(`copying ${sourcePath} to ${destPath}`);
+  await copy(sourcePath, destPath);
+}
+
 async function copyPackage(
   sourcePath: string,
   destPath: string,
 ): Promise<void> {
-  for (const file of packageFiles) {
-    console.log(
-      `copying ${resolve(sourcePath, file)} to ${resolve(destPath, file)}`,
-    );
-    await copy(resolve(sourcePath, file), resolve(destPath, file));
-  }
+  await Promise.all(
+    packageFiles.map((file) =>
+      copyDirectory(resolve(sourcePath, file), resolve(destPath, file)),
+    ),
+  );
 }
 
 export async function deployPackage(
@@ -88,6 +94,12 @@ export async function deployPackage(
     );
     await copyPackage(sourcePath, distPath);
 
+    // This is necessary for vsce to know the dependencies
+    await copyDirectory(
+      resolve(sourcePath, "node_modules"),
+      resolve(distPath, "node_modules"),
+    );
+
     return {
       distPath,
       name: packageJson.name,

extensions/ql-vscode/gulpfile.ts/index.ts

@@ -1,29 +1,36 @@
-import { series, parallel } from "gulp";
-import { compileTypeScript, watchTypeScript, cleanOutput } from "./typescript";
+import { parallel, series } from "gulp";
+import {
+  compileEsbuild,
+  watchEsbuild,
+  checkTypeScript,
+  watchCheckTypeScript,
+  cleanOutput,
+} from "./typescript";
 import { compileTextMateGrammar } from "./textmate";
-import { copyTestData, watchTestData } from "./tests";
 import { compileView, watchView } from "./webpack";
 import { packageExtension } from "./package";
 import { injectAppInsightsKey } from "./appInsights";
 
 export const buildWithoutPackage = series(
   cleanOutput,
   parallel(
-    compileTypeScript,
+    compileEsbuild,
+    checkTypeScript,
     compileTextMateGrammar,
     compileView,
-    copyTestData,
   ),
 );
 
+export const watch = parallel(watchEsbuild, watchCheckTypeScript, watchView);
+
 export {
   cleanOutput,
   compileTextMateGrammar,
-  watchTypeScript,
+  watchEsbuild,
+  watchCheckTypeScript,
   watchView,
-  compileTypeScript,
-  copyTestData,
-  watchTestData,
+  compileEsbuild,
+  checkTypeScript,
   injectAppInsightsKey,
   compileView,
 };

extensions/ql-vscode/gulpfile.ts/package.ts

@@ -3,7 +3,9 @@ import { deployPackage } from "./deploy";
 import { spawn } from "child-process-promise";
 
 export async function packageExtension(): Promise<void> {
-  const deployedPackage = await deployPackage(resolve("package.json"));
+  const deployedPackage = await deployPackage(
+    resolve(__dirname, "../package.json"),
+  );
   console.log(
     `Packaging extension '${deployedPackage.name}@${deployedPackage.version}'...`,
   );
@@ -16,7 +18,7 @@ export async function packageExtension(): Promise<void> {
       `${deployedPackage.name}-${deployedPackage.version}.vsix`,
     ),
   ];
-  const proc = spawn("./node_modules/.bin/vsce", args, {
+  const proc = spawn(resolve(__dirname, "../node_modules/.bin/vsce"), args, {
     cwd: deployedPackage.distPath,
   });
   proc.childProcess.stdout!.on("data", (data) => {

extensions/ql-vscode/gulpfile.ts/tests.ts

@@ -1,7 +1,7 @@
-import { src, dest } from "gulp";
+import { dest, src } from "gulp";
 import { load } from "js-yaml";
 import { obj } from "through2";
-import * as PluginError from "plugin-error";
+import PluginError from "plugin-error";
 import * as Vinyl from "vinyl";
 
 /**

extensions/ql-vscode/gulpfile.ts/textmate.ts

@@ -1,8 +1,8 @@
 import { gray, red } from "ansi-colors";
-import { dest, watch } from "gulp";
-import { init, write } from "gulp-sourcemaps";
-import * as ts from "gulp-typescript";
-import * as del from "del";
+import { dest, src, watch } from "gulp";
+import esbuild from "gulp-esbuild";
+import ts from "gulp-typescript";
+import del from "del";
 
 function goodReporter(): ts.reporter.Reporter {
   return {
@@ -35,20 +35,35 @@ export function cleanOutput() {
     : Promise.resolve();
 }
 
-export function compileTypeScript() {
-  return tsProject
-    .src()
-    .pipe(init())
-    .pipe(tsProject(goodReporter()))
+export function compileEsbuild() {
+  return src("./src/extension.ts")
     .pipe(
-      write(".", {
-        includeContent: false,
-        sourceRoot: ".",
+      esbuild({
+        outfile: "extension.js",
+        bundle: true,
+        external: ["vscode", "fsevents"],
+        format: "cjs",
+        platform: "node",
+        target: "es2020",
+        sourcemap: "linked",
+        loader: {
+          ".node": "copy",
+        },
       }),
     )
     .pipe(dest("out"));
 }
 
-export function watchTypeScript() {
-  watch("src/**/*.ts", compileTypeScript);
+export function watchEsbuild() {
+  watch("src/**/*.ts", compileEsbuild);
+}
+
+export function checkTypeScript() {
+  // 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 watchCheckTypeScript() {
+  watch("src/**/*.ts", checkTypeScript);
 }

extensions/ql-vscode/gulpfile.ts/typescript.ts

@@ -1,6 +1,6 @@
 import { resolve } from "path";
 import * as webpack from "webpack";
-import * as MiniCssExtractPlugin from "mini-css-extract-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
 export const config: webpack.Configuration = {
   mode: "development",

extensions/ql-vscode/gulpfile.ts/webpack.config.ts

@@ -1,4 +1,4 @@
-import * as webpack from "webpack";
+import webpack from "webpack";
 import { config } from "./webpack.config";
 
 export function compileView(cb: (err?: Error) => void) {