perf(@angular-devkit/build-angular): use esbuild in esbuild builder to downlevel native async/await

clydin · dgp1130 · commit 8f9cee351e5c · 2022-08-04T11:26:15.000-07:00
esbuild now allows specifying whether individual JavaScript features should be supported in addition
to specifying the target JavaScript version for the output. This capability is now used to provide
the native async/await downleveling that is required by Zone.js when using the experimental esbuild-
based browser application builder. Since esbuild does not yet support downleveling async iteration
or async generators, Babel is still used when either of these syntax features are detected.
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/compiler-plugin.ts
@@ -341,7 +341,7 @@ export function createCompilerPlugin(
               [
                 angularApplicationPreset,
                 {
-                  forceAsyncTransformation: data.includes('async'),
+                  forceAsyncTransformation: /for\s+await\s*\(|async\s+function\s*\*/.test(data),
                   optimize: pluginOptions.advancedOptimizations && {},
                 },
               ],
@@ -388,7 +388,8 @@ export function createCompilerPlugin(
                   linkerPluginCreator,
                 },
                 forceAsyncTransformation:
-                  !/[\\/][_f]?esm2015[\\/]/.test(args.path) && data.includes('async'),
+                  !/[\\/][_f]?esm2015[\\/]/.test(args.path) &&
+                  /for\s+await\s*\(|async\s+function\s*\*/.test(data),
                 optimize: pluginOptions.advancedOptimizations && {
                   looseEnums: angularPackage,
                   pureTopLevel: angularPackage,
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -307,6 +307,18 @@ async function bundleCode(
     entryNames: outputNames.bundles,
     assetNames: outputNames.media,
     target: 'es2020',
+    supported: {
+      // Native async/await is not supported with Zone.js. Disabling support here will cause
+      // esbuild to downlevel async/await to a Zone.js supported form.
+      'async-await': false,
+      // Zone.js also does not support async generators or async iterators. However, esbuild does
+      // not currently support downleveling either of them. Instead babel is used within the JS/TS
+      // loader to perform the downlevel transformation. They are both disabled here to allow
+      // esbuild to handle them in the future if support is ever added.
+      // NOTE: If esbuild adds support in the future, the babel support for these can be disabled.
+      'async-generator': false,
+      'for-await': false,
+    },
     mainFields: ['es2020', 'browser', 'module', 'main'],
     conditions: ['es2020', 'es2015', 'module'],
     resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
