Use Babel runtime for helpers and regenerator (33%+ bundle reduction) (#16466)

build-scripts/bundle.cjs

@@ -90,6 +90,8 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     setSpreadProperties: true,
   },
   browserslistEnv: latestBuild ? "modern" : "legacy",
+  // Must be unambiguous because some dependencies are CommonJS only
+  sourceType: "unambiguous",
   presets: [
     [
       "@babel/preset-env",
@@ -112,8 +114,6 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Support  some proposals still in TC39 process
-    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
@@ -131,6 +131,13 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         failOnError: true, // we can turn this off in case of false positives
       },
     ],
+    // Import helpers and regenerator from runtime package
+    [
+      "@babel/plugin-transform-runtime",
+      { version: require("../package.json").dependencies["@babel/runtime"] },
+    ],
+    // Support  some proposals still in TC39 process
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
   ].filter(Boolean),
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
@@ -149,27 +156,27 @@ const publicPath = (latestBuild, root = "") =>
   latestBuild ? `${root}/frontend_latest/` : `${root}/frontend_es5/`;
 
 /*
-BundleConfig {
-  // Object with entrypoints that need to be bundled
-  entry: { [name: string]: pathToFile },
-  // Folder where bundled files need to be written
-  outputPath: string,
-  // absolute url-path where bundled files can be found
-  publicPath: string,
-  // extra definitions that we need to replace in source
-  defineOverlay: {[name: string]: value },
-  // if this is a production build
-  isProdBuild: boolean,
-  // If we're targeting latest browsers
-  latestBuild: boolean,
-  // If we're doing a stats build (create nice chunk names)
-  isStatsBuild: boolean,
-  // If it's just a test build in CI, skip time on source map generation
-  isTestBuild: boolean,
-  // Names of entrypoints that should not be hashed
-  dontHash: Set<string>
-}
-*/
+  BundleConfig {
+    // Object with entrypoints that need to be bundled
+    entry: { [name: string]: pathToFile },
+    // Folder where bundled files need to be written
+    outputPath: string,
+    // absolute url-path where bundled files can be found
+    publicPath: string,
+    // extra definitions that we need to replace in source
+    defineOverlay: {[name: string]: value },
+    // if this is a production build
+    isProdBuild: boolean,
+    // If we're targeting latest browsers
+    latestBuild: boolean,
+    // If we're doing a stats build (create nice chunk names)
+    isStatsBuild: boolean,
+    // If it's just a test build in CI, skip time on source map generation
+    isTestBuild: boolean,
+    // Names of entrypoints that should not be hashed
+    dontHash: Set<string>
+  }
+  */
 
 module.exports.config = {
   app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {

cast/src/media/entrypoint.ts

@@ -1,3 +1,5 @@
+export {}; // for Babel to treat as a module
+
 const castContext = cast.framework.CastReceiverContext.getInstance();
 
 const playerManager = castContext.getPlayerManager();

package.json

@@ -25,6 +25,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
+    "@babel/runtime": "7.21.5",
     "@braintree/sanitize-url": "6.0.2",
     "@codemirror/autocomplete": "6.6.1",
     "@codemirror/commands": "6.2.4",
@@ -125,7 +126,6 @@
     "punycode": "2.3.0",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
-    "regenerator-runtime": "0.13.11",
     "resize-observer-polyfill": "1.5.1",
     "roboto-fontface": "0.10.0",
     "rrule": "2.7.2",
@@ -151,6 +151,7 @@
   "devDependencies": {
     "@babel/core": "7.21.8",
     "@babel/plugin-proposal-decorators": "7.21.0",
+    "@babel/plugin-transform-runtime": "7.21.4",
     "@babel/preset-env": "7.21.5",
     "@babel/preset-typescript": "7.21.5",
     "@koa/cors": "4.0.0",
@@ -163,6 +164,7 @@
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
+    "@types/babel__plugin-transform-runtime": "^7",
     "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "1.0.5",
     "@types/esprima": "4.0.3",

src/resources/array.flat.polyfill.ts

@@ -1,4 +1,7 @@
 /* eslint-disable no-extend-native */
+
+export {}; // for Babel to treat as a module
+
 if (!Array.prototype.flat) {
   Object.defineProperty(Array.prototype, "flat", {
     configurable: true,

src/resources/compatibility.ts

@@ -1,6 +1,5 @@
 // Caution before editing - For latest builds, this module is replaced with emptiness and thus not imported (see build-scripts/bundle.js)
 import "core-js";
-import "regenerator-runtime/runtime";
 import "lit/polyfill-support";
 
 // To use comlink under ES5

src/resources/roboto.js

@@ -1,3 +1,5 @@
+export {}; // for Babel to treat as a module
+
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
 

src/resources/safari-14-attachshadow-patch.ts

@@ -1,4 +1,7 @@
 // https://github.com/home-assistant/frontend/pull/7031
+
+export {}; // for Babel to treat as a module
+
 const isSafari14 = /^((?!chrome|android).)*version\/14\.0\s.*safari/i.test(
   navigator.userAgent
 );

src/util/empty.js

@@ -1 +1,3 @@
 /* empty file that we alias some files to that we don't want to include */
+
+export {}; // for Babel to treat as a module

test/common/entity/state_color.ts

@@ -0,0 +1 @@
+export {}; // for Babel to treat as a module

tsconfig.json

@@ -2,7 +2,12 @@
   "compilerOptions": {
     // Language Options
     "target": "ES2017",
-    "lib": ["ES2017", "DOM", "DOM.Iterable", "WebWorker"],
+    "lib": [
+      "ES2017",
+      "DOM",
+      "DOM.Iterable",
+      "WebWorker"
+    ],
     "experimentalDecorators": true,
     // Modules
     "module": "ESNext",
@@ -21,6 +26,7 @@
     "skipLibCheck": true,
     // Interop with CommonJS and other tools
     "esModuleInterop": true,
+    "isolatedModules": true,
     "plugins": [
       {
         "name": "ts-lit-plugin",
@@ -37,4 +43,4 @@
       }
     ]
   }
-}
+}

yarn.lock

@@ -1110,6 +1110,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-runtime@npm:7.21.4":
+  version: 7.21.4
+  resolution: "@babel/plugin-transform-runtime@npm:7.21.4"
+  dependencies:
+    "@babel/helper-module-imports": ^7.21.4
+    "@babel/helper-plugin-utils": ^7.20.2
+    babel-plugin-polyfill-corejs2: ^0.3.3
+    babel-plugin-polyfill-corejs3: ^0.6.0
+    babel-plugin-polyfill-regenerator: ^0.4.1
+    semver: ^6.3.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7e2e6b0d6f9762fde58738829e4d3b5e13dc88ccc1463e4eee83c8d8f50238eeb8e3699923f5ad4d7edf597515f74d67fbb14eb330225075fc7733b547e22145
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-shorthand-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.18.6"
@@ -1326,7 +1342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:7.21.5, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4":
   version: 7.21.5
   resolution: "@babel/runtime@npm:7.21.5"
   dependencies:
@@ -4000,6 +4016,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__plugin-transform-runtime@npm:^7":
+  version: 7.9.2
+  resolution: "@types/babel__plugin-transform-runtime@npm:7.9.2"
+  checksum: 0eb18bf14b478804d34f96d47b992e53043776b8679e0c110051985a22ec18497e6f2c6d20f5289876c6094ccac2d41fa2f716a150e7512cee0a5c2ae1cf79b3
+  languageName: node
+  linkType: hard
+
 "@types/body-parser@npm:*":
   version: 1.19.2
   resolution: "@types/body-parser@npm:1.19.2"
@@ -9427,8 +9450,10 @@ __metadata:
   dependencies:
     "@babel/core": 7.21.8
     "@babel/plugin-proposal-decorators": 7.21.0
+    "@babel/plugin-transform-runtime": 7.21.4
     "@babel/preset-env": 7.21.5
     "@babel/preset-typescript": 7.21.5
+    "@babel/runtime": 7.21.5
     "@braintree/sanitize-url": 6.0.2
     "@codemirror/autocomplete": 6.6.1
     "@codemirror/commands": 6.2.4
@@ -9505,6 +9530,7 @@ __metadata:
     "@rollup/plugin-node-resolve": 15.0.2
     "@rollup/plugin-replace": 5.0.2
     "@thomasloven/round-slider": 0.6.0
+    "@types/babel__plugin-transform-runtime": ^7
     "@types/chromecast-caf-receiver": 5.0.12
     "@types/chromecast-caf-sender": 1.0.5
     "@types/esprima": 4.0.3
@@ -9598,7 +9624,6 @@ __metadata:
     punycode: 2.3.0
     qr-scanner: 1.4.2
     qrcode: 1.5.3
-    regenerator-runtime: 0.13.11
     resize-observer-polyfill: 1.5.1
     roboto-fontface: 0.10.0
     rollup: 2.79.1
@@ -13370,7 +13395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:0.13.11, regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.3":
+"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.3":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
   checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4