diff --git a/build-scripts/gulp/locale-data.js b/build-scripts/gulp/locale-data.js index 14ce9bc06a..4cf91711d4 100755 --- a/build-scripts/gulp/locale-data.js +++ b/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", diff --git a/src/common/datetime/format_duration.ts b/src/common/datetime/format_duration.ts index a67d5f82ca..e823df03a3 100644 --- a/src/common/datetime/format_duration.ts +++ b/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,7 +77,7 @@ type DurationUnit = (typeof DURATION_UNITS)[number]; const formatDurationDayMem = memoizeOne( (locale: FrontendLocaleData) => - new DurationFormat(locale.language, { + new Intl.DurationFormat(locale.language, { style: "narrow", daysDisplay: "always", }) @@ -86,7 +85,7 @@ const formatDurationDayMem = memoizeOne( const formatDurationHourMem = memoizeOne( (locale: FrontendLocaleData) => - new DurationFormat(locale.language, { + new Intl.DurationFormat(locale.language, { style: "narrow", hoursDisplay: "always", }) @@ -94,7 +93,7 @@ const formatDurationHourMem = memoizeOne( const formatDurationMinuteMem = memoizeOne( (locale: FrontendLocaleData) => - new DurationFormat(locale.language, { + new Intl.DurationFormat(locale.language, { style: "narrow", minutesDisplay: "always", }) @@ -102,7 +101,7 @@ const formatDurationMinuteMem = memoizeOne( const formatDurationSecondMem = memoizeOne( (locale: FrontendLocaleData) => - new DurationFormat(locale.language, { + new Intl.DurationFormat(locale.language, { style: "narrow", secondsDisplay: "always", }) @@ -110,7 +109,7 @@ const formatDurationSecondMem = memoizeOne( const formatDurationMillisecondMem = memoizeOne( (locale: FrontendLocaleData) => - new DurationFormat(locale.language, { + new Intl.DurationFormat(locale.language, { style: "narrow", millisecondsDisplay: "always", }) diff --git a/src/types.ts b/src/types.ts index 67d5f75838..3d8a78ac50 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,4 @@ +import type { DurationFormatConstructor } from "@formatjs/intl-durationformat/src/types"; import type { Auth, Connection, @@ -22,7 +23,7 @@ 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"; @@ -30,7 +31,7 @@ declare global { 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 extends CustomEvent { diff --git a/test/common/datetime/format_duration.test.ts b/test/common/datetime/format_duration.test.ts index a713dee22c..94ad9e116f 100644 --- a/test/common/datetime/format_duration.test.ts +++ b/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 {