Inject polyfills where used (#18719)

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -0,0 +1,56 @@
+import defineProvider from "@babel/helper-define-polyfill-provider";
+
+// List of polyfill keys with supported browser targets for the functionality
+const PolyfillSupport = {
+  fetch: {
+    android: 42,
+    chrome: 42,
+    edge: 14,
+    firefox: 39,
+    ios: 10.3,
+    opera: 29,
+    opera_mobile: 29,
+    safari: 10.1,
+    samsung: 4.0,
+  },
+  proxy: {
+    android: 49,
+    chrome: 49,
+    edge: 12,
+    firefox: 18,
+    ios: 10.0,
+    opera: 36,
+    opera_mobile: 36,
+    safari: 10.0,
+    samsung: 5.0,
+  },
+};
+
+// Map of global variables and/or instance and static properties to the
+// corresponding polyfill key and actual module to import
+const polyfillMap = {
+  global: {
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    fetch: { key: "fetch", module: "unfetch/polyfill" },
+  },
+  instance: {},
+  static: {},
+};
+
+// Create plugin using the same factory as for CoreJS
+export default defineProvider(
+  ({ createMetaResolver, debug, shouldInjectPolyfill }) => {
+    const resolvePolyfill = createMetaResolver(polyfillMap);
+    return {
+      name: "HA Custom",
+      polyfills: PolyfillSupport,
+      usageGlobal(meta, utils) {
+        const polyfill = resolvePolyfill(meta);
+        if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
+          debug(polyfill.desc.key);
+          utils.injectGlobalImport(polyfill.desc.module);
+        }
+      },
+    };
+  }
+);

build-scripts/bundle.cjs

@@ -31,8 +31,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       require.resolve(
         path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
       ),
-    // This polyfill is loaded in workers to support ES5, filter it out.
-    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(
@@ -91,8 +89,8 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
     [
       "@babel/preset-env",
       {
-        useBuiltIns: latestBuild ? false : "entry",
+        useBuiltIns: latestBuild ? false : "usage",
-        corejs: latestBuild ? false : { version: "3.33", proposals: true },
+        corejs: latestBuild ? false : "3.33",
         bugfixes: true,
         shippedProposals: true,
       },
@@ -110,6 +108,13 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/custom-polyfill-plugin.js"
+      ),
+      { method: "usage-global" },
+    ],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",

package.json

@@ -156,6 +156,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.23.3",
+    "@babel/helper-define-polyfill-provider": "0.4.3",
     "@babel/plugin-proposal-decorators": "7.23.3",
     "@babel/plugin-transform-runtime": "7.23.3",
     "@babel/preset-env": "7.23.3",

src/components/data-table/sort-filter-worker.ts

@@ -1,6 +1,4 @@
-// To use comlink under ES5
 import { expose } from "comlink";
-import "proxy-polyfill";
 import { stringCompare } from "../../common/string/compare";
 import type {
   ClonedDataTableColumnData,

src/entrypoints/app.ts

@@ -1,3 +1,5 @@
+// Compat needs to be first import
+import "../resources/compatibility";
 import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
 import "../layouts/home-assistant";
 

src/entrypoints/core.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import {
   Auth,
   Connection,

src/html/_js_base.html.template

@@ -2,7 +2,6 @@
   function _ls(src, notCustom) {
     var script = document.createElement("script");
     if (notCustom) {
-      script.async = false;
       script.crossOrigin = "use-credentials";
     }
     script.src = src;

src/html/index.html.template

@@ -77,14 +77,11 @@
     <script>
         if (!window.latestJS) {
           window.customPanelJS = "<%= es5CustomPanelJS %>";
-
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              // Although core and app can load in any order, we need to
+              <% for (const entry of es5EntryJS) { %>
-              // force loading core first because it contains polyfills
+                System.import("<%= entry %>");
-              return System.import("<%= es5EntryJS[0] %>").then(function() {
+              <% } %>
-                System.import("<%= es5EntryJS[1] %>");
-              });
             }
           <% } else { %>
             <% for (const entry of es5EntryJS) { %>

src/resources/compatibility.ts

@@ -1,11 +1,6 @@
 // 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 "lit/polyfill-support";
 
-// To use comlink under ES5
-import "proxy-polyfill";
-import "unfetch/polyfill";
-
 import ResizeObserver from "resize-observer-polyfill";
 
 if (!window.ResizeObserver) {

src/resources/markdown-worker.ts

@@ -1,5 +1,3 @@
-// To use comlink under ES5
-import "proxy-polyfill";
 import { expose } from "comlink";
 import { marked, MarkedOptions } from "marked";
 import { filterXSS, getDefaultWhiteList, IWhiteList } from "xss";

yarn.lock

@@ -160,7 +160,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.4.3":
+"@babel/helper-define-polyfill-provider@npm:0.4.3, @babel/helper-define-polyfill-provider@npm:^0.4.3":
   version: 0.4.3
   resolution: "@babel/helper-define-polyfill-provider@npm:0.4.3"
   dependencies:
@@ -9556,6 +9556,7 @@ __metadata:
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
     "@babel/core": "npm:7.23.3"
+    "@babel/helper-define-polyfill-provider": "npm:0.4.3"
     "@babel/plugin-proposal-decorators": "npm:7.23.3"
     "@babel/plugin-transform-runtime": "npm:7.23.3"
     "@babel/preset-env": "npm:7.23.3"