perf(@angular-devkit/build-angular): use esbuild in esbuild builder t…

…o downlevel native async/await 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. (cherry picked from commit 8f9cee3)
angular · Aug 4, 2022 · 38b71bc · 38b71bc
1 parent 344ef77
commit 38b71bc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
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'],