mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-13 12:26:35 +00:00
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
This commit is contained in:
parent
e059ca146b
commit
7748315fc3
@ -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
|
||||
|
@ -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",
|
||||
|
@ -1,8 +1,6 @@
|
||||
import { getWeekStartByLocale } from "weekstart";
|
||||
import { FrontendLocaleData, FirstWeekday } from "../../data/translation";
|
||||
|
||||
import "../../resources/intl-polyfill";
|
||||
|
||||
export const weekdays = [
|
||||
"sunday",
|
||||
"monday",
|
||||
|
@ -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
|
||||
|
@ -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";
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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";
|
||||
|
||||
|
@ -1,5 +1,4 @@
|
||||
import memoizeOne from "memoize-one";
|
||||
import "../../resources/intl-polyfill";
|
||||
|
||||
export const localizeWeekdays = memoizeOne(
|
||||
(language: string, short: boolean): string[] => {
|
||||
|
@ -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(
|
||||
|
@ -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",
|
||||
})
|
||||
);
|
||||
|
@ -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(
|
||||
|
@ -1,5 +1,4 @@
|
||||
import memoizeOne from "memoize-one";
|
||||
import "../../resources/intl-polyfill";
|
||||
import { FrontendLocaleData } from "../../data/translation";
|
||||
|
||||
export const formatListWithAnds = (
|
||||
|
@ -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 = {};
|
||||
|
@ -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,
|
||||
|
@ -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: `${
|
||||
|
@ -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";
|
||||
|
@ -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 {
|
||||
|
@ -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,
|
Loading…
x
Reference in New Issue
Block a user