fix(@angular/build): support import attributes in JavaScript transformer

clydin · clydin · commit 2dc51d5c9cd1 · 2024-07-02T09:03:46.000-04:00
The babel-based JavaScript transformer currently requires a syntax plugin
to support import attributes. Import attributes are otherwise supported in
application code. However, in production builds the JavaScript transformations
such as the build optimizer passes would fail on code that contain any import
attributes. The inclusion of the babel syntax plugin removes this problem.
Once babel provides built-in support for this syntax feature, the plugin
can be removed.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "@babel/generator": "7.24.7",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
+    "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@babel/plugin-transform-async-generator-functions": "7.24.7",
     "@babel/plugin-transform-async-to-generator": "7.24.7",
     "@babel/plugin-transform-runtime": "7.24.7",
diff --git a/packages/angular/build/BUILD.bazel b/packages/angular/build/BUILD.bazel
@@ -67,6 +67,7 @@ ts_library(
         "@npm//@babel/core",
         "@npm//@babel/helper-annotate-as-pure",
         "@npm//@babel/helper-split-export-declaration",
+        "@npm//@babel/plugin-syntax-import-attributes",
         "@npm//@inquirer/confirm",
         "@npm//@types/babel__core",
         "@npm//@types/less",
diff --git a/packages/angular/build/package.json b/packages/angular/build/package.json
@@ -23,6 +23,7 @@
     "@babel/core": "7.24.7",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
+    "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@inquirer/confirm": "3.1.12",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
diff --git a/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts b/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts
@@ -60,7 +60,9 @@ async function transformWithBabel(
     options.sourcemap &&
     (!!options.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));
 
-  const plugins: PluginItem[] = [];
+  // @ts-expect-error Import attribute syntax plugin does not currently have type definitions
+  const { default: importAttributePlugin } = await import('@babel/plugin-syntax-import-attributes');
+  const plugins: PluginItem[] = [importAttributePlugin];
 
   // Lazy load the linker plugin only when linking is required
   if (shouldLink) {
diff --git a/yarn.lock b/yarn.lock
@@ -399,6 +399,7 @@ __metadata:
     "@babel/core": "npm:7.24.7"
     "@babel/helper-annotate-as-pure": "npm:7.24.7"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
+    "@babel/plugin-syntax-import-attributes": "npm:7.24.7"
     "@inquirer/confirm": "npm:3.1.12"
     "@vitejs/plugin-basic-ssl": "npm:1.1.0"
     ansi-colors: "npm:4.1.3"
@@ -657,6 +658,7 @@ __metadata:
     "@babel/generator": "npm:7.24.7"
     "@babel/helper-annotate-as-pure": "npm:7.24.7"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
+    "@babel/plugin-syntax-import-attributes": "npm:7.24.7"
     "@babel/plugin-transform-async-generator-functions": "npm:7.24.7"
     "@babel/plugin-transform-async-to-generator": "npm:7.24.7"
     "@babel/plugin-transform-runtime": "npm:7.24.7"
@@ -1487,7 +1489,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.24.7":
+"@babel/plugin-syntax-import-attributes@npm:7.24.7, @babel/plugin-syntax-import-attributes@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.7"
   dependencies:
