diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js index 00dcc64a36..c5056cc8b6 100644 --- a/build-scripts/bundle.js +++ b/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", [ diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js index ae15b6f0f4..dbee791d4c 100644 --- a/build-scripts/webpack.js +++ b/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" diff --git a/package.json b/package.json index 577a9bbab0..98a2c0b5a1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "author": "Paulus Schoutsen (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", diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts index 696a765872..df7b993b1d 100644 --- a/src/common/translations/localize.ts +++ b/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) { - import("@formatjs/intl-pluralrules/polyfill-locales"); +if (shouldPolyfill()) { + await import("@formatjs/intl-pluralrules/polyfill-locales"); } /** diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 12ac252e73..72d1d24912 100644 --- a/src/components/ha-sidebar.ts +++ b/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]) { diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template index 2864581ce2..08cc3ce65a 100644 --- a/src/html/_js_base.html.template +++ b/src/html/_js_base.html.template @@ -20,5 +20,4 @@ "content" in document.createElement("template"))) { document.write(" diff --git a/src/html/_preload_roboto.html.template b/src/html/_preload_roboto.html.template index 53431bb914..382beadfc0 100644 --- a/src/html/_preload_roboto.html.template +++ b/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"); diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template index 46bca88dd4..5b6b6aee89 100644 --- a/src/html/authorize.html.template +++ b/src/html/authorize.html.template @@ -44,17 +44,17 @@ <%= renderTemplate('_js_base') %> <%= renderTemplate('_preload_roboto') %> - - - + \ No newline at end of file diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index f4bc333ede..fe22c14392 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -52,17 +52,17 @@ <%= renderTemplate('_js_base') %> <%= renderTemplate('_preload_roboto') %> - - - + \ No newline at end of file diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts index ff88dc0326..c6807b2484 100644 --- a/src/resources/compatibility.ts +++ b/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]); diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts index 847f1102f5..4ed2b560b8 100644 --- a/src/state/themes-mixin.ts +++ b/src/state/themes-mixin.ts @@ -108,7 +108,7 @@ export default >(superClass: T) => ); } const themeColor = - headerColor.trim() || + headerColor?.trim() || (themeMeta.getAttribute("default-content") as string); themeMeta.setAttribute("content", themeColor); } diff --git a/yarn.lock b/yarn.lock index 7de1266153..81abb7fbd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1777,12 +1777,28 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@formatjs/intl-pluralrules@^1.5.8": - version "1.5.8" - resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-1.5.8.tgz#ad8dd9ec669b8dac0e284d51772a65d92efa4ef9" - integrity sha512-OtL/rgKSSGljpxk2lRUC92ZqmzZjabwXO5zbBh2Bj8OM+z4U3H1Q5iK+ZY4k7a6EAoY7hWCr3F4k7EL8tcnQow== +"@formatjs/ecma402-abstract@^1.2.5": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.5.tgz#5a61ac1990ff2df8d1348ab12e186c1ca2a2bd71" + 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"