Inject Intl polyfills where used

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

@@ -1,4 +1,8 @@
 import defineProvider from "@babel/helper-define-polyfill-provider";
+import { join } from "node:path";
+import paths from "../paths.cjs";
+
+const POLYFILL_DIR = join(paths.polymer_dir, "src/resources/polyfills");
 
 // List of polyfill keys with supported browser targets for the functionality
 const PolyfillSupport = {
@@ -13,6 +17,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,
@@ -34,7 +63,31 @@ const polyfillMap = {
     fetch: { key: "fetch", module: "unfetch/polyfill" },
   },
   instance: {},
-  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
@@ -49,7 +102,9 @@ export default defineProvider(
         if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
           debug(polyfill.desc.key);
           utils.injectGlobalImport(polyfill.desc.module);
+          return true;
         }
+        return false;
       },
     };
   }

build-scripts/bundle.cjs

@@ -147,14 +147,17 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   overrides: [
     {
       // Add plugin to inject various polyfills, excluding the polyfills
-      // themselves to prevent self- injection.
+      // themselves to prevent self-injection.
       plugins: [
         [
           path.join(BABEL_PLUGINS, "custom-polyfill-plugin.js"),
           { method: "usage-global" },
         ],
       ],
-      exclude: /\/node_modules\/(?:unfetch|proxy-polyfill)\//,
+      exclude: [
+        path.join(paths.polymer_dir, "src/resources/polyfills"),
+        /\/node_modules\/(?:@formatjs\/intl-\w+|unfetch|proxy-polyfill)\//,
+      ],
     },
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files

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 { 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,7 +89,7 @@ export const computeLocalize = async <Keys extends string = LocalizeKeys>(
   resources: Resources,
   formats?: FormatsType
 ): Promise<LocalizeFunc<Keys>> => {
-  await import("../../resources/intl-polyfill").then(() =>
+  await import("../../resources/polyfills/intl-polyfill").then(() =>
     polyfillLocaleData(language)
   );
 

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,