Allow TLA for legacy build and remove static Intl polyfills (#19207)

build-scripts/webpack.cjs

@@ -7,6 +7,9 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
+const {
+  TransformAsyncModulesPlugin,
+} = require("transform-async-modules-webpack-plugin");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -142,17 +145,6 @@ const createWebpackConfig = ({
         ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
-      // See `src/resources/intl-polyfill-legacy.ts` for explanation
-      !latestBuild &&
-        new webpack.NormalModuleReplacementPlugin(
-          new RegExp(
-            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
-          ),
-          path.resolve(
-            paths.polymer_dir,
-            "src/resources/intl-polyfill-legacy.ts"
-          )
-        ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -163,6 +155,8 @@ const createWebpackConfig = ({
           stats: { assets: true, chunks: true, modules: true },
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
+      !latestBuild &&
+        new TransformAsyncModulesPlugin({ browserslistEnv: "legacy" }),
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],

package.json

@@ -235,6 +235,7 @@
     "systemjs": "6.14.3",
     "tar": "6.2.0",
     "terser-webpack-plugin": "5.3.10",
+    "transform-async-modules-webpack-plugin": "1.0.2",
     "ts-lit-plugin": "2.0.1",
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",

src/resources/intl-polyfill-legacy.ts

@@ -1,19 +0,0 @@
-// This module is a simpler version of `intl-polyfill` without top level await, and replaces it for legacy builds.
-// Babel cannot transform TLA, and Webpack uses an async function to support it,
-// so builds with browser targets without async support will be broken.
-
-import "@formatjs/intl-getcanonicallocales/polyfill";
-import "@formatjs/intl-locale/polyfill";
-import "@formatjs/intl-pluralrules/polyfill";
-import "@formatjs/intl-pluralrules/locale-data/en";
-import "@formatjs/intl-numberformat/polyfill";
-import "@formatjs/intl-numberformat/locale-data/en";
-import "@formatjs/intl-relativetimeformat/polyfill";
-import "@formatjs/intl-relativetimeformat/locale-data/en";
-import "@formatjs/intl-datetimeformat/polyfill";
-import "@formatjs/intl-datetimeformat/locale-data/en";
-import "@formatjs/intl-datetimeformat/add-all-tz";
-import "@formatjs/intl-displaynames/polyfill";
-import "@formatjs/intl-displaynames/locale-data/en";
-import "@formatjs/intl-listformat/polyfill";
-import "@formatjs/intl-listformat/locale-data/en";

yarn.lock

@@ -62,7 +62,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.23.7, @babel/core@npm:^7.11.1, @babel/core@npm:^7.12.3":
+"@babel/core@npm:7.23.7, @babel/core@npm:^7.0.0, @babel/core@npm:^7.11.1, @babel/core@npm:^7.12.3":
   version: 7.23.7
   resolution: "@babel/core@npm:7.23.7"
   dependencies:
@@ -1267,7 +1267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.23.7, @babel/preset-env@npm:^7.11.0":
+"@babel/preset-env@npm:7.23.7, @babel/preset-env@npm:^7.0.0, @babel/preset-env@npm:^7.11.0":
   version: 7.23.7
   resolution: "@babel/preset-env@npm:7.23.7"
   dependencies:
@@ -9665,6 +9665,7 @@ __metadata:
     tar: "npm:6.2.0"
     terser-webpack-plugin: "npm:5.3.10"
     tinykeys: "npm:2.1.0"
+    transform-async-modules-webpack-plugin: "npm:1.0.2"
     ts-lit-plugin: "npm:2.0.1"
     tsparticles-engine: "npm:2.12.0"
     tsparticles-preset-links: "npm:2.12.0"
@@ -15201,6 +15202,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"transform-async-modules-webpack-plugin@npm:1.0.2":
+  version: 1.0.2
+  resolution: "transform-async-modules-webpack-plugin@npm:1.0.2"
+  dependencies:
+    "@babel/core": "npm:^7.0.0"
+    "@babel/preset-env": "npm:^7.0.0"
+  peerDependencies:
+    webpack: ^5.0.0
+  checksum: 645df77c31e42f8ae57d86dfa023f67e4a3854f3b0848a9fd28392cb83d91fc05762150b909d01ad570e867b9e16e7e49c88a183d2dc7911d0e0154aaac21d52
+  languageName: node
+  linkType: hard
+
 "ts-api-utils@npm:^1.0.1":
   version: 1.0.3
   resolution: "ts-api-utils@npm:1.0.3"