Inject Intl polyfills where used (#20798)

* Inject Intl polyfills where used

* Replace Intl polyfill in localize method with loading intl-messageformat asynchronously

* Remove spurious feature tests for Intl

build-scripts/babel-plugins/custom-polyfill-plugin.js

@@ -29,6 +29,31 @@ const PolyfillSupport = {
     safari: 10.1,
     samsung: 4.0,
   },
+  "intl-getcanonicallocales": {
+    android: 54,
+    chrome: 54,
+    edge: 16,
+    firefox: 48,
+    ios: 10.3,
+    opera: 41,
+    opera_mobile: 41,
+    safari: 10.1,
+    samsung: 6.0,
+  },
+  "intl-locale": {
+    android: 74,
+    chrome: 74,
+    edge: 79,
+    firefox: 75,
+    ios: 14.0,
+    opera: 62,
+    opera_mobile: 53,
+    safari: 14.0,
+    samsung: 11.0,
+  },
+  "intl-other": {
+    // Not specified (i.e. always try polyfill) since compatibility depends on supported locales
+  },
   proxy: {
     android: 49,
     chrome: 49,
@@ -70,7 +95,31 @@ const polyfillMap = {
       module: "element-internals-polyfill",
     },
   },
-  static: {},
+  static: {
+    Intl: {
+      getCanonicalLocales: {
+        key: "intl-getcanonicallocales",
+        module: join(POLYFILL_DIR, "intl-polyfill.ts"),
+      },
+      Locale: {
+        key: "intl-locale",
+        module: join(POLYFILL_DIR, "intl-polyfill.ts"),
+      },
+      ...Object.fromEntries(
+        [
+          "DateTimeFormat",
+          "DisplayNames",
+          "ListFormat",
+          "NumberFormat",
+          "PluralRules",
+          "RelativeTimeFormat",
+        ].map((obj) => [
+          obj,
+          { key: "intl-other", module: join(POLYFILL_DIR, "intl-polyfill.ts") },
+        ])
+      ),
+    },
+  },
 };
 
 // Create plugin using the same factory as for CoreJS

build-scripts/bundle.cjs

@@ -157,6 +157,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       exclude: [
         path.join(paths.polymer_dir, "src/resources/polyfills"),
         ...[
+          "@formatjs/intl-\\w+",
           "@lit-labs/virtualizer/polyfills",
           "@webcomponents/scoped-custom-element-registry",
           "element-internals-polyfill",

src/common/datetime/first_weekday.ts

@@ -1,8 +1,6 @@
 import { getWeekStartByLocale } from "weekstart";
 import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
 
-import "../../resources/intl-polyfill";
-
 export const weekdays = [
   "sunday",
   "monday",

src/common/datetime/format_date.ts

@@ -1,7 +1,6 @@
 import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { DateFormat, FrontendLocaleData } from "../../data/translation";
-import "../../resources/intl-polyfill";
 import { resolveTimeZone } from "./resolve-time-zone";
 
 // Tuesday, August 10

src/common/datetime/format_date_time.ts

@@ -1,7 +1,6 @@
 import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import "../../resources/intl-polyfill";
 import { formatDateNumeric } from "./format_date";
 import { formatTime } from "./format_time";
 import { resolveTimeZone } from "./resolve-time-zone";

src/common/datetime/format_duration.ts

@@ -1,6 +1,5 @@
 import { HaDurationData } from "../../components/ha-duration-input";
 import { FrontendLocaleData } from "../../data/translation";
-import "../../resources/intl-polyfill";
 
 const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
 

src/common/datetime/format_time.ts

@@ -1,7 +1,6 @@
 import { HassConfig } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import "../../resources/intl-polyfill";
 import { resolveTimeZone } from "./resolve-time-zone";
 import { useAmPm } from "./use_am_pm";
 

src/common/datetime/localize_date.ts

@@ -1,5 +1,4 @@
 import memoizeOne from "memoize-one";
-import "../../resources/intl-polyfill";
 
 export const localizeWeekdays = memoizeOne(
   (language: string, short: boolean): string[] => {

src/common/datetime/relative_time.ts

@@ -1,6 +1,5 @@
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import "../../resources/intl-polyfill";
 import { selectUnit } from "../util/select-unit";
 
 const formatRelTimeMem = memoizeOne(

src/common/language/format_language.ts

@@ -12,11 +12,10 @@ export const formatLanguageCode = (
   }
 };
 
-const formatLanguageCodeMem = memoizeOne((locale: FrontendLocaleData) =>
-  Intl && "DisplayNames" in Intl
-    ? new Intl.DisplayNames(locale.language, {
-        type: "language",
-        fallback: "code",
-      })
-    : undefined
+const formatLanguageCodeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DisplayNames(locale.language, {
+      type: "language",
+      fallback: "code",
+    })
 );

src/common/number/format_number.ts

@@ -63,8 +63,7 @@ export const formatNumber = (
 
   if (
     localeOptions?.number_format !== NumberFormat.none &&
-    !Number.isNaN(Number(num)) &&
-    Intl
+    !Number.isNaN(Number(num))
   ) {
     try {
       return new Intl.NumberFormat(
@@ -85,8 +84,7 @@ export const formatNumber = (
   if (
     !Number.isNaN(Number(num)) &&
     num !== "" &&
-    localeOptions?.number_format === NumberFormat.none &&
-    Intl
+    localeOptions?.number_format === NumberFormat.none
   ) {
     // If NumberFormat is none, use en-US format without grouping.
     return new Intl.NumberFormat(

src/common/string/format-list.ts

@@ -1,5 +1,4 @@
 import memoizeOne from "memoize-one";
-import "../../resources/intl-polyfill";
 import { FrontendLocaleData } from "../../data/translation";
 
 export const formatListWithAnds = (

src/common/translations/localize.ts

@@ -1,6 +1,6 @@
-import IntlMessageFormat from "intl-messageformat";
+import type { IntlMessageFormat } from "intl-messageformat";
 import type { HTMLTemplateResult } from "lit";
-import { polyfillLocaleData } from "../../resources/locale-data-polyfill";
+import { polyfillLocaleData } from "../../resources/polyfills/locale-data-polyfill";
 import { Resources, TranslationDict } from "../../types";
 import { fireEvent } from "../dom/fire_event";
 
@@ -89,9 +89,8 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
   resources: Resources,
   formats?: FormatsType
 ): Promise<LocalizeFunc<Keys>> => {
-  await import("../../resources/intl-polyfill").then(() =>
-    polyfillLocaleData(language)
-  );
+  const { IntlMessageFormat } = await import("intl-messageformat");
+  await polyfillLocaleData(language);
 
   // Every time any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};

src/components/ha-country-picker.ts

@@ -4,7 +4,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import "../resources/intl-polyfill";
 import "./ha-list-item";
 import "./ha-select";
 import type { HaSelect } from "./ha-select";
@@ -282,14 +281,10 @@ export class HaCountryPicker extends LitElement {
   private _getOptions = memoizeOne(
     (language?: string, countries?: string[]) => {
       let options: { label: string; value: string }[] = [];
-      const countryDisplayNames =
-        Intl && "DisplayNames" in Intl
-          ? new Intl.DisplayNames(language, {
-              type: "region",
-              fallback: "code",
-            })
-          : undefined;
-
+      const countryDisplayNames = new Intl.DisplayNames(language, {
+        type: "region",
+        fallback: "code",
+      });
       if (countries) {
         options = countries.map((country) => ({
           value: country,

src/components/ha-currency-picker.ts

@@ -4,7 +4,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
-import "../resources/intl-polyfill";
 import "./ha-list-item";
 import "./ha-select";
 import type { HaSelect } from "./ha-select";
@@ -170,12 +169,9 @@ const CURRENCIES = [
 ];
 
 const curSymbol = (currency: string, locale?: string) =>
-  Intl && "NumberFormat" in Intl
-    ? new Intl.NumberFormat(locale, { style: "currency", currency })
-        .formatToParts(1)
-        .find((x) => x.type === "currency")?.value
-    : currency;
-
+  new Intl.NumberFormat(locale, { style: "currency", currency })
+    .formatToParts(1)
+    .find((x) => x.type === "currency")?.value;
 @customElement("ha-currency-picker")
 export class HaCurrencyPicker extends LitElement {
   @property() public language = "en";
@@ -189,13 +185,10 @@ export class HaCurrencyPicker extends LitElement {
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   private _getOptions = memoizeOne((language?: string) => {
-    const currencyDisplayNames =
-      Intl && "DisplayNames" in Intl
-        ? new Intl.DisplayNames(language, {
-            type: "currency",
-            fallback: "code",
-          })
-        : undefined;
+    const currencyDisplayNames = new Intl.DisplayNames(language, {
+      type: "currency",
+      fallback: "code",
+    });
     const options = CURRENCIES.map((currency) => ({
       value: currency,
       label: `${

src/components/ha-language-picker.ts

@@ -6,7 +6,6 @@ import { stopPropagation } from "../common/dom/stop_propagation";
 import { formatLanguageCode } from "../common/language/format_language";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { FrontendLocaleData } from "../data/translation";
-import "../resources/intl-polyfill";
 import { translationMetadata } from "../resources/translations-metadata";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";

src/data/automation_i18n.ts

@@ -8,7 +8,6 @@ import {
 import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
 import { computeStateName } from "../common/entity/compute_state_name";
-import "../resources/intl-polyfill";
 import type { HomeAssistant } from "../types";
 import { Condition, ForDict, Trigger } from "./automation";
 import {

src/resources/intl-polyfill.ts → src/resources/polyfills/intl-polyfill.ts

@@ -6,7 +6,7 @@ import { shouldPolyfill as shouldPolyfillLocale } from "@formatjs/intl-locale/sh
 import { shouldPolyfill as shouldPolyfillNumberFormat } from "@formatjs/intl-numberformat/should-polyfill";
 import { shouldPolyfill as shouldPolyfillPluralRules } from "@formatjs/intl-pluralrules/should-polyfill";
 import { shouldPolyfill as shouldPolyfillRelativeTimeFormat } from "@formatjs/intl-relativetimeformat/should-polyfill";
-import { getLocalLanguage } from "../util/common-translation";
+import { getLocalLanguage } from "../../util/common-translation";
 import {
   polyfillLocaleData,
   polyfillTimeZoneData,