Merge pull request #1799 from github/koesie10/bundle-extension

Bundle extension files using ESBuild

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,39 @@
-import { series, parallel } from "gulp";
-import { compileTypeScript, watchTypeScript, cleanOutput } from "./typescript";
+import { parallel, series } from "gulp";
+import {
+  compileEsbuild,
+  watchEsbuild,
+  checkTypeScript,
+  watchCheckTypeScript,
+  cleanOutput,
+  copyWasmFiles,
+} 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,
+    copyWasmFiles,
+    checkTypeScript,
     compileTextMateGrammar,
     compileView,
-    copyTestData,
   ),
 );
 
+export const watch = parallel(watchEsbuild, watchCheckTypeScript, watchView);
+
 export {
   cleanOutput,
   compileTextMateGrammar,
-  watchTypeScript,
+  watchEsbuild,
+  watchCheckTypeScript,
   watchView,
-  compileTypeScript,
-  copyTestData,
-  watchTestData,
+  compileEsbuild,
+  copyWasmFiles,
+  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,46 @@ 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",
+        sourceRoot: "..",
+        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);
+}
+
+export function copyWasmFiles() {
+  // We need to copy this file for the source-map package to work. Without this fie, the source-map
+  // package is not able to load the WASM file because we are not including the full node_modules
+  // directory. In version 0.7.4, it is not possible to call SourceMapConsumer.initialize in Node environments
+  // to configure the path to the WASM file. So, source-map will always load the file from `__dirname/mappings.wasm`.
+  // In version 0.8.0, it may be possible to do this properly by calling SourceMapConsumer.initialize by
+  // using the "browser" field in source-map's package.json to load the WASM file from a given file path.
+  return src("node_modules/source-map/lib/mappings.wasm").pipe(dest("out"));
 }

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) {