Only use duration poly-fill when necessary (#23030)

Author: piitaya

build-scripts/gulp/locale-data.js

@@ -9,7 +9,6 @@ const outDir = join(paths.build_dir, "locale-data");
 
 const INTL_POLYFILLS = {
   "intl-datetimeformat": "DateTimeFormat",
-  "intl-durationFormat": "DurationFormat",
   "intl-displaynames": "DisplayNames",
   "intl-listformat": "ListFormat",
   "intl-numberformat": "NumberFormat",

src/common/datetime/format_duration.ts

@@ -1,4 +1,3 @@
-import { DurationFormat } from "@formatjs/intl-durationformat";
 import type { DurationInput } from "@formatjs/intl-durationformat/src/types";
 import memoizeOne from "memoize-one";
 import type { HaDurationData } from "../../components/ha-duration-input";
@@ -49,7 +48,7 @@ export const formatNumericDuration = (
 
 const formatDurationLongMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "long",
     })
 );
@@ -61,7 +60,7 @@ export const formatDurationLong = (
 
 const formatDigitalDurationMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "digital",
       hoursDisplay: "auto",
     })
@@ -78,39 +77,39 @@ type DurationUnit = (typeof DURATION_UNITS)[number];
 
 const formatDurationDayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "narrow",
       daysDisplay: "always",
     })
 );
 
 const formatDurationHourMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "narrow",
       hoursDisplay: "always",
     })
 );
 
 const formatDurationMinuteMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "narrow",
       minutesDisplay: "always",
     })
 );
 
 const formatDurationSecondMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "narrow",
       secondsDisplay: "always",
     })
 );
 
 const formatDurationMillisecondMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new DurationFormat(locale.language, {
+    new Intl.DurationFormat(locale.language, {
       style: "narrow",
       millisecondsDisplay: "always",
     })

src/types.ts

@@ -1,3 +1,4 @@
+import type { DurationFormatConstructor } from "@formatjs/intl-durationformat/src/types";
 import type {
   Auth,
   Connection,
@@ -22,15 +23,15 @@ import type { Themes } from "./data/ws-themes";
 import type { ExternalMessaging } from "./external_app/external_messaging";
 
 declare global {
-  /* eslint-disable no-var, no-redeclare */
+  /* eslint-disable no-var */
   var __DEV__: boolean;
   var __DEMO__: boolean;
   var __BUILD__: "modern" | "legacy";
   var __VERSION__: string;
   var __STATIC_PATH__: string;
   var __BACKWARDS_COMPAT__: boolean;
   var __SUPERVISOR__: boolean;
-  /* eslint-enable no-var, no-redeclare */
+  /* eslint-enable no-var */
 
   interface Window {
     // Custom panel entry point url
@@ -64,6 +65,12 @@ declare global {
   interface ImportMeta {
     url: string;
   }
+
+  // Intl.DurationFormat is not yet part of the TypeScript standard
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Intl {
+    const DurationFormat: DurationFormatConstructor;
+  }
 }
 
 export interface ValueChangedEvent<T> extends CustomEvent {

test/common/datetime/format_duration.test.ts

@@ -1,5 +1,5 @@
+import "@formatjs/intl-durationformat/polyfill-force";
 import { assert, describe, it } from "vitest";
-
 import { formatDuration } from "../../../src/common/datetime/format_duration";
 import type { FrontendLocaleData } from "../../../src/data/translation";
 import {