From 7428731eaca2e829209e931d3f60d487d3add6f1 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 22 Oct 2020 22:43:15 +0200 Subject: [PATCH] Fix ES5 build, fix virtualizer polyfill (#7451) --- build-scripts/bundle.js | 2 -- build-scripts/webpack.js | 12 +++++++++--- package.json | 1 - src/common/translations/localize.ts | 17 ++++++++++++----- src/fake_data/provide_hass.ts | 4 ++-- src/managers/notification-manager.ts | 2 +- src/mixins/lit-localize-lite-mixin.ts | 6 ++++-- src/resources/EventTarget-ponyfill.js | 14 ++++++++++++++ src/state/translations-mixin.ts | 8 ++++---- 9 files changed, 46 insertions(+), 20 deletions(-) create mode 100644 src/resources/EventTarget-ponyfill.js diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js index c5056cc8b6..41f60aa66d 100644 --- a/build-scripts/bundle.js +++ b/build-scripts/bundle.js @@ -55,7 +55,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({ !latestBuild && [ require("@babel/preset-env").default, { - modules: false, useBuiltIns: "entry", corejs: "3.6", }, @@ -71,7 +70,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({ // Only support the syntax, Webpack will handle it. "@babel/plugin-syntax-import-meta", "@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 f82591e9e7..65d4287a34 100644 --- a/build-scripts/webpack.js +++ b/build-scripts/webpack.js @@ -51,9 +51,6 @@ const createWebpackConfig = ({ }), ], }, - experiments: { - topLevelAwait: true, - }, plugins: [ new ManifestPlugin({ // Only include the JS of entrypoints @@ -98,6 +95,15 @@ const createWebpackConfig = ({ new RegExp(bundle.emptyPackages({ latestBuild }).join("|")), path.resolve(paths.polymer_dir, "src/util/empty.js") ), + // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one + new webpack.NormalModuleReplacementPlugin( + new RegExp( + require.resolve( + "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js" + ) + ), + path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js") + ), ], resolve: { extensions: [".ts", ".js", ".json"], diff --git a/package.json b/package.json index 380e52a57d..82ba1c1336 100644 --- a/package.json +++ b/package.json @@ -139,7 +139,6 @@ "@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 df7b993b1d..fa6adc1b52 100644 --- a/src/common/translations/localize.ts +++ b/src/common/translations/localize.ts @@ -13,9 +13,12 @@ export interface FormatsType { time: FormatType; } -if (shouldPolyfill()) { - await import("@formatjs/intl-pluralrules/polyfill-locales"); -} +let polyfillLoaded = !shouldPolyfill(); +const polyfillProm = polyfillLoaded + ? import("@formatjs/intl-pluralrules/polyfill-locales").then(() => { + polyfillLoaded = true; + }) + : undefined; /** * Adapted from Polymer app-localize-behavior. @@ -38,12 +41,16 @@ if (shouldPolyfill()) { * } */ -export const computeLocalize = ( +export const computeLocalize = async ( cache: any, language: string, resources: Resources, formats?: FormatsType -): LocalizeFunc => { +): Promise => { + if (!polyfillLoaded) { + await polyfillProm; + } + // Everytime any of the parameters change, invalidate the strings cache. cache._localizationCache = {}; diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index f070dc7f41..0bc58b1040 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -55,7 +55,7 @@ export const provideHass = ( function updateTranslations(fragment: null | string, language?: string) { const lang = language || getLocalLanguage(); - getTranslation(fragment, lang).then((translation) => { + getTranslation(fragment, lang).then(async (translation) => { const resources = { [lang]: { ...(hass().resources && hass().resources[lang]), @@ -64,7 +64,7 @@ export const provideHass = ( }; hass().updateHass({ resources, - localize: computeLocalize(elements[0], lang, resources), + localize: await computeLocalize(elements[0], lang, resources), }); }); } diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts index 9dcadfb2b2..a2db48db89 100644 --- a/src/managers/notification-manager.ts +++ b/src/managers/notification-manager.ts @@ -33,7 +33,7 @@ class NotificationManager extends LitElement { @internalProperty() private _noCancelOnOutsideClick = false; - @query("ha-toast", true) private _toast!: HaToast; + @query("ha-toast") private _toast!: HaToast; public async showDialog({ message, diff --git a/src/mixins/lit-localize-lite-mixin.ts b/src/mixins/lit-localize-lite-mixin.ts index a43ce610a1..f1d2cf072c 100644 --- a/src/mixins/lit-localize-lite-mixin.ts +++ b/src/mixins/lit-localize-lite-mixin.ts @@ -36,11 +36,13 @@ export const litLocalizeLiteMixin = >( (changedProperties.has("language") || changedProperties.has("resources")) ) { - this.localize = computeLocalize( + computeLocalize( this.constructor.prototype, this.language, this.resources - ); + ).then((localize) => { + this.localize = localize; + }); } } diff --git a/src/resources/EventTarget-ponyfill.js b/src/resources/EventTarget-ponyfill.js new file mode 100644 index 0000000000..730e3f0ad6 --- /dev/null +++ b/src/resources/EventTarget-ponyfill.js @@ -0,0 +1,14 @@ +let ET; +export default async function EventTarget() { + return ET || init(); +} +async function init() { + ET = window.EventTarget; + try { + // eslint-disable-next-line no-new + new ET(); + } catch (_a) { + ET = (await import("event-target-shim")).default.EventTarget; + } + return ET; +} diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index 215752dfa8..16e3abb5ac 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -133,7 +133,7 @@ export default >(superClass: T) => return this.hass!.localize; } - this._updateResources(language, resources); + await this._updateResources(language, resources); return this.hass!.localize; } @@ -187,7 +187,7 @@ export default >(superClass: T) => return this.hass!.localize; } - this._updateResources(language, resources); + await this._updateResources(language, resources); return this.hass!.localize; } @@ -216,7 +216,7 @@ export default >(superClass: T) => } } - private _updateResources(language: string, data: any) { + private async _updateResources(language: string, data: any) { // Update the language in hass, and update the resources with the newly // loaded resources. This merges the new data on top of the old data for // this language, so that the full translation set can be loaded across @@ -229,7 +229,7 @@ export default >(superClass: T) => }; const changes: Partial = { resources }; if (this.hass && language === this.hass.language) { - changes.localize = computeLocalize(this, language, resources); + changes.localize = await computeLocalize(this, language, resources); } this._updateHass(changes); }