Add esbuild to pack bundler (#810)

Author: alan-fang

cli/build.ts

@@ -1,21 +1,51 @@
 import type {Arguments} from 'yargs';
 import {ConsoleLogger} from '../helpers/logging';
 import type {Logger} from '../api_types';
+import * as esbuild from 'esbuild';
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
 import webpack from 'webpack';
 
 interface BuildArgs {
   manifestFile: string;
+  compiler?: Compiler;
 }
 
-export async function handleBuild({manifestFile}: Arguments<BuildArgs>) {
+enum Compiler {
+  esbuild = 'esbuild',
+  webpack = 'webpack',
+}
+
+export async function handleBuild({manifestFile, compiler}: Arguments<BuildArgs>) {
+  // TODO(alan): surface more helpful error messages when import manifestFile fails.
   const {manifest} = await import(manifestFile);
   const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'coda-packs-'));
 
   const bundleFilename = path.join(tempDir, `bundle-${manifest.id}-${manifest.version}.js`);
-  await compilePackBundleWebpack(bundleFilename, manifestFile, new ConsoleLogger());
+  const logger = new ConsoleLogger();
+
+  switch (compiler) {
+    case Compiler.webpack:
+      await compilePackBundleWebpack(bundleFilename, manifestFile, logger);
+      return;
+    case Compiler.esbuild:
+    default:
+      await compilePackBundleESBuild(bundleFilename, manifestFile);
+      return;
+  }
+}
+
+export async function compilePackBundleESBuild(bundleFilename: string, entrypoint: string) {
+  const options: esbuild.BuildOptions = {
+    bundle: true,
+    entryPoints: [entrypoint],
+    outfile: bundleFilename,
+    platform: 'node',
+    external: ['canvas'],
+    minify: true,
+  };
+  await esbuild.build(options);
 }
 
 async function compilePackBundleWebpack(bundleFilename: string, entrypoint: string, logger: Logger): Promise<any> {

cli/coda.ts

@@ -206,11 +206,17 @@ if (require.main === module) {
       describe: 'Register API token to publish a pack',
       handler: handleRegister,
     })
-    .command({
-      command: 'build [manifestFile]',
-      describe: 'Generate a webpack bundle for your pack',
-      handler: handleBuild,
-    })
+    .command(
+      'build [manifestFile]',
+      'Generate a webpack bundle for your pack',
+      y => {
+        return y.option('compiler', {
+          description: '`esbuild` or `webpack`',
+          required: false,
+        });
+      },
+      handleBuild,
+    )
     .demandCommand()
     .strict()
     .help().argv;

dist/cli/build.d.ts

@@ -1,6 +1,12 @@
 import type { Arguments } from 'yargs';
 interface BuildArgs {
     manifestFile: string;
+    compiler?: Compiler;
 }
-export declare function handleBuild({ manifestFile }: Arguments<BuildArgs>): Promise<void>;
+declare enum Compiler {
+    esbuild = "esbuild",
+    webpack = "webpack"
+}
+export declare function handleBuild({ manifestFile, compiler }: Arguments<BuildArgs>): Promise<void>;
+export declare function compilePackBundleESBuild(bundleFilename: string, entrypoint: string): Promise<void>;
 export {};

dist/cli/build.js

@@ -31,21 +31,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleBuild = void 0;
+exports.compilePackBundleESBuild = exports.handleBuild = void 0;
 const logging_1 = require("../helpers/logging");
+const esbuild = __importStar(require("esbuild"));
 const fs_1 = __importDefault(require("fs"));
 const os_1 = __importDefault(require("os"));
 const path_1 = __importDefault(require("path"));
 const webpack_1 = __importDefault(require("webpack"));
-function handleBuild({ manifestFile }) {
+var Compiler;
+(function (Compiler) {
+    Compiler["esbuild"] = "esbuild";
+    Compiler["webpack"] = "webpack";
+})(Compiler || (Compiler = {}));
+function handleBuild({ manifestFile, compiler }) {
     return __awaiter(this, void 0, void 0, function* () {
+        // TODO(alan): surface more helpful error messages when import manifestFile fails.
         const { manifest } = yield Promise.resolve().then(() => __importStar(require(manifestFile)));
         const tempDir = fs_1.default.mkdtempSync(path_1.default.join(os_1.default.tmpdir(), 'coda-packs-'));
         const bundleFilename = path_1.default.join(tempDir, `bundle-${manifest.id}-${manifest.version}.js`);
-        yield compilePackBundleWebpack(bundleFilename, manifestFile, new logging_1.ConsoleLogger());
+        const logger = new logging_1.ConsoleLogger();
+        switch (compiler) {
+            case Compiler.webpack:
+                yield compilePackBundleWebpack(bundleFilename, manifestFile, logger);
+                return;
+            case Compiler.esbuild:
+            default:
+                yield compilePackBundleESBuild(bundleFilename, manifestFile);
+                return;
+        }
     });
 }
 exports.handleBuild = handleBuild;
+function compilePackBundleESBuild(bundleFilename, entrypoint) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const options = {
+            bundle: true,
+            entryPoints: [entrypoint],
+            outfile: bundleFilename,
+            platform: 'node',
+            external: ['canvas'],
+            minify: true,
+        };
+        yield esbuild.build(options);
+    });
+}
+exports.compilePackBundleESBuild = compilePackBundleESBuild;
 function compilePackBundleWebpack(bundleFilename, entrypoint, logger) {
     return __awaiter(this, void 0, void 0, function* () {
         logger.info(`... Bundle -> ${bundleFilename}`);

dist/cli/coda.js

@@ -211,11 +211,12 @@ if (require.main === module) {
         describe: 'Register API token to publish a pack',
         handler: register_1.handleRegister,
     })
-        .command({
-        command: 'build [manifestFile]',
-        describe: 'Generate a webpack bundle for your pack',
-        handler: build_1.handleBuild,
-    })
+        .command('build [manifestFile]', 'Generate a webpack bundle for your pack', y => {
+        return y.option('compiler', {
+            description: '`esbuild` or `webpack`',
+            required: false,
+        });
+    }, build_1.handleBuild)
         .demandCommand()
         .strict()
         .help().argv;

package.json

@@ -19,6 +19,7 @@
     "@types/sinon": "^9.0.10",
     "client-oauth2": "^4.3.3",
     "clone": "^2.1.2",
+    "esbuild": "^0.8.49",
     "express": "4.17.1",
     "open": "^7.4.1",
     "pascalcase": "^1.0.0",
@@ -37,9 +38,6 @@
   "devDependencies": {
     "@types/chai": "^4.2.15",
     "@types/clone": "^2.1.0",
-    "@typescript-eslint/eslint-plugin": "4.15.1",
-    "@typescript-eslint/experimental-utils": "4.15.1",
-    "@typescript-eslint/parser": "4.15.1",
     "@types/express": "^4.17.11",
     "@types/mocha": "^8.2.0",
     "@types/mock-fs": "^4.13.0",
@@ -54,6 +52,9 @@
     "@types/webpack": "^4.41.26",
     "@types/xml2js": "^0.4.8",
     "@types/yargs": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "4.15.1",
+    "@typescript-eslint/experimental-utils": "4.15.1",
+    "@typescript-eslint/parser": "4.15.1",
     "chai": "^4.3.0",
     "eslint": "7.20.0",
     "eslint-plugin-ban": "^1.5.2",

yarn.lock

@@ -1125,6 +1125,11 @@ es-module-lexer@^0.3.26:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
   integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==
 
+esbuild@^0.8.49:
+  version "0.8.49"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.49.tgz#3d33f71b3966611f822cf4c838115f3fbd16def2"
+  integrity sha512-itiFVYv5UZz4NooO7/Y0bRGVDGz/M/cxKbl6zyNI5pnKaz1mZjvZXAFhhDVz6rGCmcdTKj5oag6rh8DaaSSmfQ==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"