Update esbuild to 0.25.2 and optimize SDK size (#874)

* Update esbuild to 0.25.2 and optimize SDK size

Co-Authored-By: [email protected] <[email protected]>

* Update yarn.lock for esbuild 0.25.2

Co-Authored-By: [email protected] <[email protected]>

* Fix DeepSource JavaScript issues by removing console usage

Co-Authored-By: [email protected] <[email protected]>

* Fix DeepSource JavaScript issues by removing unnecessary catch clauses and unused variables

Co-Authored-By: [email protected] <[email protected]>

* Fix DeepSource JavaScript issues by removing unused variables

Co-Authored-By: [email protected] <[email protected]>

* Fix test failures by conditionally dropping console statements

Co-Authored-By: [email protected] <[email protected]>

* bump esbuild to the latest

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

package.json

@@ -39,7 +39,7 @@
     "brotli-size": "^4.0.0",
     "chalk": "~4.1.2",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.14.13",
+    "esbuild": "0.25.2",
     "eslint": "^9.24.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

scripts/utils/esbuild.ts

@@ -1,18 +1,18 @@
-import { build as esbuild, BuildFailure, BuildResult, Platform, Plugin, Format } from 'esbuild';
+import * as esbuild from 'esbuild';
 import path from 'path';
 import fse from 'fs-extra';
 import gzipSize from 'gzip-size';
 import brotliSize from 'brotli-size';
 import prettyBytes from 'pretty-bytes';
-import chalk from 'chalk';
 import execa from 'execa';
+import chalk from 'chalk';
 import { environment } from './environment';
 import { existsAsync } from './exists-async';
 
 interface ESBuildOptions {
   watch?: boolean;
-  target?: Platform;
-  format?: Format;
+  target?: esbuild.Platform;
+  format?: esbuild.Format;
   output?: string;
   sourcemap?: boolean;
   name?: string;
@@ -22,42 +22,48 @@ interface ESBuildOptions {
 
 export async function build(options: ESBuildOptions) {
   if (options.output) {
-    try {
-      await esbuild({
-        bundle: true,
-        minify: true,
-        watch: options.watch ? { onRebuild: onRebuildFactory(options) } : undefined,
-        legalComments: 'none',
-        platform: options.target ?? 'browser',
-        format: options.format ?? 'cjs',
-        globalName: options.format === 'iife' ? options.name : undefined,
-        entryPoints: [await getEntrypoint(options.format)],
-        sourcemap: options.sourcemap,
-        outfile: options.output,
-        tsconfig: 'node_modules/.temp/tsconfig.build.json',
-        external: options.externals,
-        loader: { '.ts': 'ts', '.tsx': 'tsx' },
-        define: Object.fromEntries(
-          Object.entries(environment).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)]),
-        ),
-        plugins: [...globalsPlugin(options.globals || {})],
-
-        // We need this footer because: https://github.com/evanw/esbuild/issues/1182
-        footer:
-          options.format === 'iife'
-            ? {
-                // This snippet replaces `window.{name}` with
-                // `window.{name}.default`, with any additional named exports
-                // assigned. Finally, it removes `window.{name}.default`.
-                js: `if (${options.name} && ${options.name}.default != null) { ${options.name} = Object.assign(${options.name}.default, ${options.name}); delete ${options.name}.default; }`,
-              }
-            : undefined,
-      });
+    const buildOptions: esbuild.BuildOptions = {
+      bundle: true,
+      minify: true,
+      treeShaking: true,
+      drop: process.env.NODE_ENV === 'production' ? ['debugger', 'console'] : ['debugger'],
+      legalComments: 'none',
+      platform: options.target ?? 'browser',
+      format: options.format ?? 'cjs',
+      globalName: options.format === 'iife' ? options.name : undefined,
+      entryPoints: [await getEntrypoint(options.format)],
+      sourcemap: options.sourcemap,
+      outfile: options.output,
+      tsconfig: 'node_modules/.temp/tsconfig.build.json',
+      external: options.externals,
+      loader: { '.ts': 'ts', '.tsx': 'tsx' },
+      define: Object.fromEntries(
+        Object.entries(environment).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)]),
+      ),
+      plugins: [...globalsPlugin(options.globals || {})],
+
+      mangleProps: /^_/,
+      ignoreAnnotations: false,
+      metafile: true, // Generate metafile for size analysis
+
+      // We need this footer because: https://github.com/evanw/esbuild/issues/1182
+      footer:
+        options.format === 'iife'
+          ? {
+              // This snippet replaces `window.{name}` with
+              // `window.{name}.default`, with any additional named exports
+              // assigned. Finally, it removes `window.{name}.default`.
+              js: `if (${options.name} && ${options.name}.default != null) { ${options.name} = Object.assign(${options.name}.default, ${options.name}); delete ${options.name}.default; }`,
+            }
+          : undefined,
+    };
 
+    if (options.watch) {
+      const ctx = await esbuild.context(buildOptions);
+      await ctx.watch();
+    } else {
+      await esbuild.build(buildOptions);
       await printOutputSizeInfo(options);
-    } catch (e) {
-      console.error(e);
-      throw e;
     }
   }
 }
@@ -75,40 +81,22 @@ async function printOutputSizeInfo(options: ESBuildOptions) {
   }
 }
 
-/**
- * Returns a function that can be used to handle rebuild events from ESBuild.
- */
-function onRebuildFactory(options: ESBuildOptions) {
-  return async (error: BuildFailure | null, result: BuildResult | null) => {
-    if (error) {
-      console.error(error.message);
-    } else {
-      await printOutputSizeInfo(options);
-    }
-  };
-}
-
 /**
  * Emits TypeScript typings for the current package.
  */
 export async function emitTypes(watch?: boolean) {
-  try {
-    if (watch) {
-      await execa('tsc', ['-w', '-p', 'node_modules/.temp/tsconfig.build.json']);
-    } else {
-      await execa('tsc', ['-p', 'node_modules/.temp/tsconfig.build.json']);
-    }
-  } catch (e) {
-    console.error(e);
-    throw e;
+  if (watch) {
+    await execa('tsc', ['-w', '-p', 'node_modules/.temp/tsconfig.build.json']);
+  } else {
+    await execa('tsc', ['-p', 'node_modules/.temp/tsconfig.build.json']);
   }
 }
 
 /**
  * Resolves the entrypoint file for ESBuild,
  * based on the format and target platform.
  */
-async function getEntrypoint(format?: Format) {
+async function getEntrypoint(format?: esbuild.Format) {
   const findEntrypoint = async (indexTarget?: string) => {
     if (format && (await existsAsync(path.resolve(process.cwd(), `./src/index.${indexTarget}.ts`)))) {
       return `src/index.${indexTarget}.ts`;
@@ -172,13 +160,13 @@ export async function createTemporaryTSConfigFile() {
  * Creates a list of plugins to replace
  * externalized packages with a global variable.
  */
-function globalsPlugin(globals: Record<string, string>): Plugin[] {
+function globalsPlugin(globals: Record<string, string>): esbuild.Plugin[] {
   return Object.entries(globals).map(([packageName, globalVar]) => {
     const namespace = `globals-plugin:${packageName}`;
     return {
       name: namespace,
       setup(builder) {
-        builder.onResolve({ filter: new RegExp(`^${packageName}$`) }, (args) => ({
+        builder.onResolve({ filter: new RegExp(`^${packageName}$`) }, args => ({
           path: args.path,
           namespace,
         }));
@@ -200,7 +188,6 @@ export async function getSizeInfo(code: string, filename: string) {
 
   const formatSize = (size: number, type: 'gz' | 'br') => {
     const pretty = raw ? `${size} B` : prettyBytes(size);
-     
     const color = size < 5000 ? chalk.green : size > 40000 ? chalk.red : chalk.yellow;
     return `${color(pretty)}: ${chalk.white(path.basename(filename))}.${type}`;
   };