Fix es5 build (#7319)

build-scripts/bundle.js

@@ -54,7 +54,11 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   presets: [
     !latestBuild && [
       require("@babel/preset-env").default,
-      { modules: false, useBuiltIns: "entry", corejs: 3 },
+      {
+        modules: false,
+        useBuiltIns: "entry",
+        corejs: "3.6",
+      },
     ],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
@@ -66,7 +70,8 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     ],
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
-    "@babel/syntax-dynamic-import",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/webpack.js

@@ -29,7 +29,7 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
+          test: /\.m?js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
@@ -53,6 +53,9 @@ const createWebpackConfig = ({
         }),
       ],
     },
+    experiments: {
+      topLevelAwait: true,
+    },
     plugins: [
       new ManifestPlugin({
         // Only include the JS of entrypoints
@@ -108,6 +111,22 @@ const createWebpackConfig = ({
         }
         return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
       },
+      environment: {
+        // The environment supports arrow functions ('() => { ... }').
+        arrowFunction: latestBuild,
+        // The environment supports BigInt as literal (123n).
+        bigIntLiteral: false,
+        // The environment supports const and let for variable declarations.
+        const: latestBuild,
+        // The environment supports destructuring ('{ a, b } = obj').
+        destructuring: latestBuild,
+        // The environment supports an async import() function to import EcmaScript modules.
+        dynamicImport: latestBuild,
+        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+        forOf: latestBuild,
+        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+        module: latestBuild,
+      },
       chunkFilename:
         isProdBuild && !isStatsBuild
           ? "chunk.[chunkhash].js"

package.json

@@ -22,7 +22,8 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@formatjs/intl-pluralrules": "^1.5.8",
+    "@formatjs/intl-getcanonicallocales": "^1.4.6",
+    "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
@@ -138,6 +139,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/plugin-syntax-top-level-await": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-commonjs": "^11.1.0",

src/common/translations/localize.ts

@@ -1,4 +1,5 @@
 import IntlMessageFormat from "intl-messageformat";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
 import { Resources } from "../../types";
 
 export type LocalizeFunc = (key: string, ...args: any[]) => string;
@@ -12,8 +13,8 @@ export interface FormatsType {
   time: FormatType;
 }
 
-if (!Intl.PluralRules) {
+if (shouldPolyfill()) {
-  import("@formatjs/intl-pluralrules/polyfill-locales");
+  await import("@formatjs/intl-pluralrules/polyfill-locales");
 }
 
 /**

src/components/ha-sidebar.ts

@@ -728,6 +728,7 @@ class HaSidebar extends LitElement {
           width: 64px;
         }
         :host([expanded]) {
+          width: 256px;
           width: calc(256px + env(safe-area-inset-left));
         }
         :host([rtl]) {

src/html/_js_base.html.template

@@ -20,5 +20,4 @@
             "content" in document.createElement("template"))) {
         document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
       }
-      var isS101 = /\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(navigator.userAgent);
     </script>

src/html/_preload_roboto.html.template

@@ -8,7 +8,7 @@
           el.type = "font/woff2";
           el.href = src;
           el.crossOrigin = "anonymous";
-          document.head.append(el);
+          document.head.appendChild(el);
         }
         _pf("/static/fonts/roboto/Roboto-Regular.woff2");
         _pf("/static/fonts/roboto/Roboto-Medium.woff2");

src/html/authorize.html.template

@@ -44,17 +44,17 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script type="module" crossorigin="use-credentials">
+    <script crossorigin="use-credentials">
-      import "<%= latestPageJS %>";
+      import("<%= latestPageJS %>");
+      window.latestJS = true;
       window.providersPromise = fetch("/auth/providers", {
         credentials: "same-origin",
       });
     </script>
 
-    <script nomodule>
+    <script>
       (function() {
-        // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!window.latestJS) {
-        if (!isS101) {
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
               System.import("<%= es5PageJS %>");
@@ -66,4 +66,4 @@
       })();
     </script>
   </body>
-</html>
+</html>

src/html/onboarding.html.template

@@ -52,17 +52,17 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script type="module" crossorigin="use-credentials">
+    <script crossorigin="use-credentials">
-      import "<%= latestPageJS %>";
+      import("<%= latestPageJS %>");
+      window.latestJS = true;
       window.stepsPromise = fetch("/api/onboarding", {
         credentials: "same-origin",
       });
     </script>
 
-    <script nomodule>
+    <script>
       (function() {
-        // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
+        if (!window.latestJS) {
-        if (!isS101) {
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
               System.import("<%= es5PageJS %>");
@@ -74,4 +74,4 @@
       })();
     </script>
   </body>
-</html>
+</html>

src/resources/compatibility.ts

@@ -3,3 +3,31 @@ import "regenerator-runtime/runtime";
 import "unfetch/polyfill";
 // To use comlink under ES5
 import "proxy-polyfill";
+// For localize
+import "@formatjs/intl-getcanonicallocales/polyfill";
+
+// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (Object.prototype.hasOwnProperty.call(item, "append")) {
+      return;
+    }
+    Object.defineProperty(item, "append", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append(...argArr) {
+        const docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          const isNode = argItem instanceof Node;
+          docFrag.appendChild(
+            isNode ? argItem : document.createTextNode(String(argItem))
+          );
+        });
+
+        this.appendChild(docFrag);
+      },
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

src/state/themes-mixin.ts

@@ -108,7 +108,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           );
         }
         const themeColor =
-          headerColor.trim() ||
+          headerColor?.trim() ||
           (themeMeta.getAttribute("default-content") as string);
         themeMeta.setAttribute("content", themeColor);
       }

yarn.lock

@@ -1777,12 +1777,28 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@formatjs/intl-pluralrules@^1.5.8":
+"@formatjs/ecma402-abstract@^1.2.5":
-  version "1.5.8"
+  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-1.5.8.tgz#ad8dd9ec669b8dac0e284d51772a65d92efa4ef9"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.5.tgz#5a61ac1990ff2df8d1348ab12e186c1ca2a2bd71"
-  integrity sha512-OtL/rgKSSGljpxk2lRUC92ZqmzZjabwXO5zbBh2Bj8OM+z4U3H1Q5iK+ZY4k7a6EAoY7hWCr3F4k7EL8tcnQow==
+  integrity sha512-k0fqS3LBNOHueAoMdgig8Ni6TchsH+zbzWBzX2gTFm50X9mxHwnuXdCk0XLlCIbvgVVlzcO254Men/mHAheMbg==
   dependencies:
-    "@formatjs/intl-utils" "^2.2.5"
+    tslib "^2.0.1"
+
+"@formatjs/intl-getcanonicallocales@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.4.6.tgz#348a0b8dd87f2b0513a4942a6273c937dd91ead0"
+  integrity sha512-V54a+Ks02vke2CSmuGJ4GCvrdWfN105GSH7oZRoW5QSiwuac+fmxb5Qpu4002HetuRu0rrRTm+NMUTfZ1VB2xw==
+  dependencies:
+    cldr-core "36.0.0"
+    tslib "^2.0.1"
+
+"@formatjs/intl-pluralrules@^3.4.10":
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-3.4.10.tgz#7ed3b03190971f21d482cb0e46791d90783a74d3"
+  integrity sha512-KcZZv38bu0pho9+9pMUOsCAi9/Kayh4+V5QZ/I9ps5OFSQlQaFMP5sX/zHBp41SsT6HxTfrPw5CHWpGrS75NQQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "^1.2.5"
+    tslib "^2.0.1"
 
 "@formatjs/intl-unified-numberformat@^3.3.5":
   version "3.3.5"
@@ -1796,11 +1812,6 @@
   resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.2.4.tgz#fe62a96799d1f7dbe621fd38a4bd2e5a6a16cb0e"
   integrity sha512-83fsJywew0o9wQsW3VuEp33HRiFd0qbQDyFFnwZCwk59eLZ33CtKyJ5ofKMrU2KK6hk1zaIdzisrZeoNfmI3Tw==
 
-"@formatjs/intl-utils@^2.2.5":
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.2.5.tgz#eaafd94df3d102ee13e54e80f992a33868a6b1e8"
-  integrity sha512-p7gcmazKROteL4IECCp03Qrs790fZ8tbemUAjQu0+K0AaAlK49rI1SIFFq3LzDUAqXIshV95JJhRe/yXxkal5g==
-
 "@fullcalendar/common@5.1.0", "@fullcalendar/common@~5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@fullcalendar/common/-/common-5.1.0.tgz#a45e01ebdcf00654f4d45f0457926cf2f5909820"
@@ -5414,6 +5425,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+cldr-core@36.0.0:
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-36.0.0.tgz#1d2148ed6802411845baeeb21432d7bbfde7d4f7"
+  integrity sha512-QLnAjt20rZe38c8h8OJ9jPND+O4o5O8Nw0TK/P3KpNn1cmOhMu0rk6Kc3ap96c5OStQ9gAngs9+Be2sum26NOw==
+
 clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -13896,6 +13912,11 @@ tslib@^2.0.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
   integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
 
+tslib@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"