Move compatibility to own entrypoint again

build-scripts/bundle.js

@@ -20,13 +20,7 @@ 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"),
-    // Compatibility not needed for latest builds
-    latestBuild &&
-      // wrapped in require.resolve so it blows up if file no longer exists
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
-      ),
-    // This polyfill is loaded in workers to support ES5, filter it out.
+    // Polyfill only needed for ES5 workers so filter out in latestBuild
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
   ].filter(Boolean);
 
@@ -118,6 +112,7 @@ 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),
@@ -132,6 +127,10 @@ 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,6 +53,7 @@ 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`,
     });
 
@@ -78,6 +79,7 @@ gulp.task("gen-pages-prod", (done) => {
     const content = renderTemplate(page, {
       latestPageJS: latestManifest[`${page}.js`],
 
+      es5Compatibility: es5Manifest["compatibility.js"],
       es5PageJS: es5Manifest[`${page}.js`],
     });
 
@@ -97,6 +99,7 @@ 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",
@@ -120,6 +123,7 @@ 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"],
@@ -206,6 +210,7 @@ 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",
   });
 
@@ -228,6 +233,7 @@ 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,6 +14,32 @@ 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,4 +1,3 @@
-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

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

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200603.2",
+    version="20200603.1",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/entrypoints/authorize.ts

@@ -1,5 +1,3 @@
-// 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,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import {
   Auth,
   Connection,

src/entrypoints/custom-panel.ts

@@ -1,4 +1,3 @@
-import "../resources/compatibility";
 import { PolymerElement } from "@polymer/polymer";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadJS } from "../common/dom/load_resource";
@@ -18,9 +17,12 @@ let es5Loaded: Promise<unknown> | undefined;
 
 window.loadES5Adapter = () => {
   if (!es5Loaded) {
-    es5Loaded = loadJS(
-      `${__STATIC_PATH__}polyfills/custom-elements-es5-adapter.js`
-    ).catch(); // Swallow errors as it raises errors on old browsers.
+    es5Loaded = Promise.all([
+      loadJS(
+        `${__STATIC_PATH__}polyfills/custom-elements-es5-adapter.js`
+      ).catch(),
+      import(/* webpackChunkName: "compat" */ "./compatibility"),
+    ]);
   }
   return es5Loaded;
 };

src/entrypoints/onboarding.ts

@@ -1,5 +1,3 @@
-// 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

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

src/html/index.html.template

@@ -70,13 +70,14 @@
 
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
-              // Although core and app can load in any order, we need to
-              // force loading core first because it contains polyfills
-              return System.import("<%= es5CoreJS %>").then(function() {
+              System.import("<%= es5Compatibility %>").then(function() {
+                return System.import("<%= es5CoreJS %>");
+              }).then(function() {
                 System.import("<%= es5AppJS %>");
               });
             }
           <% } else { %>
+            _ls("<%= es5Compatibility %>");
             _ls("<%= es5CoreJS %>");
             _ls("<%= es5AppJS %>");
           <% } %>

src/html/onboarding.html.template

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

src/panels/developer-tools/state/developer-tools-state.js

@@ -45,6 +45,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
 
         .entities tr {
+          word-break: break-word;
           vertical-align: top;
         }
 
@@ -57,8 +58,6 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         }
         .entities td {
           padding: 4px;
-          min-width: 200px;
-          word-break: break-word;
         }
         .entities ha-svg-icon {
           --mdc-icon-size: 20px;

src/panels/lovelace/cards/hui-glance-card.ts

@@ -66,25 +66,17 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
   private _configEntities?: GlanceConfigEntity[];
 
   public getCardSize(): number {
-    const rowHeight =
-      (this._config!.show_icon ? 1 : 0) +
-        (this._config!.show_name && this._config!.show_state ? 1 : 0) || 1;
-
-    const numRows = Math.ceil(
-      this._configEntities!.length / (this._config!.columns || 5)
+    return (
+      (this._config!.title ? 1 : 0) +
+      Math.max(
+        Math.ceil(this._configEntities!.length / (this._config!.columns || 5)),
+        1
+      )
     );
-
-    return (this._config!.title ? 1 : 0) + rowHeight * numRows;
   }
 
   public setConfig(config: GlanceCardConfig): void {
-    this._config = {
-      show_name: true,
-      show_state: true,
-      show_icon: true,
-      state_color: true,
-      ...config,
-    };
+    this._config = { state_color: true, ...config };
     const entities = processConfigEntities<GlanceConfigEntity>(config.entities);
 
     for (const entity of entities) {
@@ -242,7 +234,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
           hasAction(entityConf.tap_action) ? "0" : undefined
         )}
       >
-        ${this._config!.show_name
+        ${this._config!.show_name !== false
           ? html`
               <div class="name">
                 ${"name" in entityConf
@@ -251,7 +243,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
               </div>
             `
           : ""}
-        ${this._config!.show_icon
+        ${this._config!.show_icon !== false
           ? html`
               <state-badge
                 .hass=${this.hass}
@@ -264,7 +256,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
               ></state-badge>
             `
           : ""}
-        ${this._config!.show_state && entityConf.show_state !== false
+        ${this._config!.show_state !== false && entityConf.show_state !== false
           ? html`
               <div>
                 ${computeDomain(entityConf.entity) === "sensor" &&

src/state/disconnect-toast-mixin.ts

@@ -22,7 +22,6 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       const oldHass = changedProperties.get("hass");
       if (
         !changedProperties.has("hass") ||
-        !this.hass!.config ||
         oldHass?.config?.state === this.hass!.config.state
       ) {
         return;