Integrate compatibility into other entrypoints (#6029)

build-scripts/bundle.js

@@ -20,7 +20,10 @@ module.exports.emptyPackages = ({ latestBuild }) =>
     // Loads stuff from a CDN
     require.resolve("@polymer/font-roboto/roboto.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-roboto.js"),
-    // Polyfill only needed for ES5 workers so filter out in latestBuild
+    // Compatibility not needed for latest builds
+    latestBuild &&
+      path.resolve(paths.polymer_dir, "src/entrypoints/compatibility.ts"),
+    // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
   ].filter(Boolean);
 
@@ -112,7 +115,6 @@ module.exports.config = {
         authorize: "./src/entrypoints/authorize.ts",
         onboarding: "./src/entrypoints/onboarding.ts",
         core: "./src/entrypoints/core.ts",
-        compatibility: "./src/entrypoints/compatibility.ts",
         "custom-panel": "./src/entrypoints/custom-panel.ts",
       },
       outputPath: outputPath(paths.app_output_root, latestBuild),
@@ -127,10 +129,6 @@ module.exports.config = {
     return {
       entry: {
         main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
-        compatibility: path.resolve(
-          paths.polymer_dir,
-          "src/entrypoints/compatibility.ts"
-        ),
       },
       outputPath: outputPath(paths.demo_output_root, latestBuild),
       publicPath: publicPath(latestBuild),

build-scripts/gulp/entry-html.js

@@ -53,7 +53,6 @@ gulp.task("gen-pages-dev", (done) => {
     const content = renderTemplate(page, {
       latestPageJS: `/frontend_latest/${page}.js`,
 
-      es5Compatibility: "/frontend_es5/compatibility.js",
       es5PageJS: `/frontend_es5/${page}.js`,
     });
 
@@ -79,7 +78,6 @@ gulp.task("gen-pages-prod", (done) => {
     const content = renderTemplate(page, {
       latestPageJS: latestManifest[`${page}.js`],
 
-      es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
     });
 
@@ -99,7 +97,6 @@ gulp.task("gen-index-app-dev", (done) => {
     latestCoreJS: "/frontend_latest/core.js",
     latestCustomPanelJS: "/frontend_latest/custom-panel.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",
     es5CustomPanelJS: "/frontend_es5/custom-panel.js",
@@ -123,7 +120,6 @@ gulp.task("gen-index-app-prod", (done) => {
     latestCoreJS: latestManifest["core.js"],
     latestCustomPanelJS: latestManifest["custom-panel.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5AppJS: es5Manifest["app.js"],
     es5CoreJS: es5Manifest["core.js"],
     es5CustomPanelJS: es5Manifest["custom-panel.js"],
@@ -210,7 +206,6 @@ gulp.task("gen-index-demo-dev", (done) => {
   const content = renderDemoTemplate("index", {
     latestDemoJS: "/frontend_latest/main.js",
 
-    es5Compatibility: "/frontend_es5/compatibility.js",
     es5DemoJS: "/frontend_es5/main.js",
   });
 
@@ -233,7 +228,6 @@ gulp.task("gen-index-demo-prod", (done) => {
   const content = renderDemoTemplate("index", {
     latestDemoJS: latestManifest["main.js"],
 
-    es5Compatibility: es5Manifest["compatibility.js"],
     es5DemoJS: es5Manifest["main.js"],
   });
   const minified = minifyHtml(content);

build-scripts/rollup-plugins/ignore-plugin.js

@@ -14,32 +14,6 @@ module.exports = function (userOptions = {}) {
 
   return {
     name: "ignore",
-    resolveId(importee, importer) {
-      // Only use ignore to intercept imports that we don't control
-      // inside node_module dependencies.
-      if (
-        importee.endsWith("commonjsHelpers.js") ||
-        importee.endsWith("rollupPluginBabelHelpers.js") ||
-        importee.endsWith("?commonjs-proxy") ||
-        !importer ||
-        !importer.includes("/node_modules/")
-      ) {
-        return null;
-      }
-      let fullPath;
-      try {
-        fullPath = importee.startsWith(".")
-          ? path.resolve(importee, importer)
-          : require.resolve(importee);
-      } catch (err) {
-        console.error("Error in ignore plugin", { importee, importer }, err);
-        throw err;
-      }
-
-      return files.some((toIgnorePath) => fullPath.startsWith(toIgnorePath))
-        ? fullPath
-        : null;
-    },
 
     load(id) {
       return files.some((toIgnorePath) => id.startsWith(toIgnorePath))

demo/src/ha-demo.ts

@@ -1,3 +1,4 @@
+import "../../src/resources/compatibility";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import {

demo/src/html/index.html.template

@@ -106,12 +106,9 @@
           _ls("/static/polyfills/custom-elements-es5-adapter.js");
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5Compatibility %>").then(function() {
-                System.import("<%= es5DemoJS %>");
-              });
+              System.import("<%= es5DemoJS %>");
             };
           <% } else { %>
-            _ls("<%= es5Compatibility %>");
             _ls("<%= es5DemoJS %>");
           <% } %>
         }

src/entrypoints/authorize.ts

@@ -1,3 +1,5 @@
+// Compat needs to be first import
+import "../resources/compatibility";
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "../auth/ha-authorize";

src/entrypoints/core.ts

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

src/entrypoints/custom-panel.ts

@@ -21,7 +21,7 @@ window.loadES5Adapter = () => {
       loadJS(
         `${__STATIC_PATH__}polyfills/custom-elements-es5-adapter.js`
       ).catch(),
-      import(/* webpackChunkName: "compat" */ "./compatibility"),
+      import(/* webpackChunkName: "compat" */ "../resources/compatibility"),
     ]);
   }
   return es5Loaded;

src/entrypoints/onboarding.ts

@@ -1,3 +1,5 @@
+// Compat needs to be first import
+import "../resources/compatibility";
 import "../onboarding/ha-onboarding";
 import "../resources/ha-style";
 import "../resources/roboto";

src/html/authorize.html.template

@@ -61,12 +61,9 @@
           _ls("/static/polyfills/custom-elements-es5-adapter.js");
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5Compatibility %>").then(function() {
-                System.import("<%= es5PageJS %>");
-              });
+              System.import("<%= es5PageJS %>");
             }
           <% } else { %>
-            _ls("<%= es5Compatibility %>");
             _ls("<%= es5PageJS %>");
           <% } %>
         }

src/html/index.html.template

@@ -81,14 +81,11 @@
 
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5Compatibility %>").then(function() {
-                return System.import("<%= es5CoreJS %>");
-              }).then(function() {
+              return System.import("<%= es5CoreJS %>").then(function() {
                 System.import("<%= es5AppJS %>");
               });
             }
           <% } else { %>
-            _ls("<%= es5Compatibility %>");
             _ls("<%= es5CoreJS %>");
             _ls("<%= es5AppJS %>");
           <% } %>

src/html/onboarding.html.template

@@ -63,12 +63,9 @@
           _ls("/static/polyfills/custom-elements-es5-adapter.js");
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5Compatibility %>").then(function() {
-                System.import("<%= es5PageJS %>");
-              });
+              System.import("<%= es5PageJS %>");
             }
           <% } else { %>
-            _ls("<%= es5Compatibility %>");
             _ls("<%= es5PageJS %>");
           <% } %>
         }