Fix ES5 build, fix virtualizer polyfill (#7451)

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",
     [

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"],

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",

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<LocalizeFunc> => {
+  if (!polyfillLoaded) {
+    await polyfillProm;
+  }
+
   // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 

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),
       });
     });
   }

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,

src/mixins/lit-localize-lite-mixin.ts

@@ -36,11 +36,13 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
         (changedProperties.has("language") ||
           changedProperties.has("resources"))
       ) {
-        this.localize = computeLocalize(
+        computeLocalize(
           this.constructor.prototype,
           this.language,
           this.resources
-        );
+        ).then((localize) => {
+          this.localize = localize;
+        });
       }
     }
 

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;
+}

src/state/translations-mixin.ts

@@ -133,7 +133,7 @@ export default <T extends Constructor<HassBaseEl>>(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 <T extends Constructor<HassBaseEl>>(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 <T extends Constructor<HassBaseEl>>(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 <T extends Constructor<HassBaseEl>>(superClass: T) =>
       };
       const changes: Partial<HomeAssistant> = { resources };
       if (this.hass && language === this.hass.language) {
-        changes.localize = computeLocalize(this, language, resources);
+        changes.localize = await computeLocalize(this, language, resources);
       }
       this._updateHass(changes);
     }