Inject Intl polyfills where used

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/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";

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

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,