jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-17 06:16:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use valid locale for translation test (#20899)

Browse Source
This commit is contained in:
Steve Repsher 2024-05-29 09:44:56 -04:00 committed by GitHub
parent a629f01300
commit 3eea7dc6cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 372 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build-scripts/gulp/translations.js
View File

@ -19,6 +19,7 @@ const inBackendDir = "translations/backend";
const workDir = "build/translations"; const workDir = "build/translations";
const outDir = join(workDir, "output"); const outDir = join(workDir, "output");
const EN_SRC = join(paths.translations_src, "en.json"); const EN_SRC = join(paths.translations_src, "en.json");
const TEST_LOCALE = "en-x-test";
let mergeBackend = false; let mergeBackend = false;
@ -150,7 +151,7 @@ const createTestTranslation = () =>
: gulp : gulp
.src(EN_SRC) .src(EN_SRC)
.pipe(new CustomJSON(null, testReviver)) .pipe(new CustomJSON(null, testReviver))
.pipe(rename("test.json")) .pipe(rename(`${TEST_LOCALE}.json`))
.pipe(gulp.dest(workDir)); .pipe(gulp.dest(workDir));
/** /**
@ -192,7 +193,7 @@ const createTranslations = async () => {
// each locale, then fragmentizes and flattens the data for final output. // each locale, then fragmentizes and flattens the data for final output.
const translationFiles = await glob([ const translationFiles = await glob([
`${inFrontendDir}/!(en).json`, `${inFrontendDir}/!(en).json`,
...(env.isProdBuild() ? [] : [`${workDir}/test.json`]), ...(env.isProdBuild() ? [] : [`${workDir}/${TEST_LOCALE}.json`]),
]); ]);
const hashStream = new Transform({ const hashStream = new Transform({
objectMode: true, objectMode: true,
@ -254,8 +255,8 @@ const createTranslations = async () => {
const mergeFiles = []; const mergeFiles = [];
for (let i = 1; i <= subtags.length; i++) { for (let i = 1; i <= subtags.length; i++) {
const lang = subtags.slice(0, i).join("-"); const lang = subtags.slice(0, i).join("-");
if (lang === "test") { if (lang === TEST_LOCALE) {
mergeFiles.push(`${workDir}/test.json`); mergeFiles.push(`${workDir}/${TEST_LOCALE}.json`);
} else if (lang !== "en") { } else if (lang !== "en") {
mergeFiles.push(`${inFrontendDir}/${lang}.json`); mergeFiles.push(`${inFrontendDir}/${lang}.json`);
if (mergeBackend) { if (mergeBackend) {
@ -284,7 +285,7 @@ const writeTranslationMetaData = () =>
new CustomJSON((meta) => { new CustomJSON((meta) => {
// Add the test translation in development. // Add the test translation in development.
if (!env.isProdBuild()) { if (!env.isProdBuild()) {
meta.test = { nativeName: "Test" }; meta[TEST_LOCALE] = { nativeName: "Translation Test" };
} }
// Filter out locales without a native name, and add the hashes. // Filter out locales without a native name, and add the hashes.
for (const locale of Object.keys(meta)) { for (const locale of Object.keys(meta)) {

80
gallery/src/pages/date-time/date-time-numeric.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatDateTimeNumeric(
<div class="center"> this.date,
${formatDateTimeNumeric( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatDateTimeNumeric(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTimeNumeric(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatDateTimeNumeric(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTimeNumeric(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/date-time-seconds.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatDateTimeWithSeconds(
<div class="center"> this.date,
${formatDateTimeWithSeconds( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatDateTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatDateTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/date-time-short-year.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatShortDateTimeWithYear(
<div class="center"> this.date,
${formatShortDateTimeWithYear( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatShortDateTimeWithYear(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatShortDateTimeWithYear(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatShortDateTimeWithYear(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatShortDateTimeWithYear(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/date-time-short.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeDateTimeShort extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatShortDateTime(
<div class="center"> this.date,
${formatShortDateTime( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatShortDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatShortDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatShortDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatShortDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/date-time.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeDateTime extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatDateTime(
<div class="center"> this.date,
${formatDateTime( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatDateTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

102
gallery/src/pages/date-time/date.ts
View File

@ -35,59 +35,57 @@ export class DemoDateTimeDate extends LitElement {
<div class="center">Month-Day-Year</div> <div class="center">Month-Day-Year</div>
<div class="center">Year-Month-Day</div> <div class="center">Year-Month-Day</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatDateNumeric(
<div class="center"> date,
${formatDateNumeric( {
date, ...defaultLocale,
{ language: key,
...defaultLocale, date_format: DateFormat.language,
language: key, },
date_format: DateFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.DMY,
},
demoConfig
)}
</div>
<div class="center">
${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.MDY,
},
demoConfig
)}
</div>
<div class="center">
${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.YMD,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.DMY,
},
demoConfig
)}
</div>
<div class="center">
${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.MDY,
},
demoConfig
)}
</div>
<div class="center">
${formatDateNumeric(
date,
{
...defaultLocale,
language: key,
date_format: DateFormat.YMD,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/time-seconds.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeTimeSeconds extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatTimeWithSeconds(
<div class="center"> this.date,
${formatTimeWithSeconds( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTimeWithSeconds(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/time-weekday.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeTimeWeekday extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatTimeWeekday(
<div class="center"> this.date,
${formatTimeWeekday( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatTimeWeekday(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTimeWeekday(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatTimeWeekday(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTimeWeekday(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

80
gallery/src/pages/date-time/time.ts
View File

@ -56,48 +56,46 @@ export class DemoDateTimeTime extends LitElement {
<div class="center">12 Hours</div> <div class="center">12 Hours</div>
<div class="center">24 Hours</div> <div class="center">24 Hours</div>
</div> </div>
${Object.entries(translationMetadata.translations) ${Object.entries(translationMetadata.translations).map(
.filter(([key, _]) => key !== "test") ([key, value]) => html`
.map( <div class="container">
([key, value]) => html` <div>${value.nativeName}</div>
<div class="container"> <div class="center">
<div>${value.nativeName}</div> ${formatTime(
<div class="center"> this.date,
${formatTime( {
this.date, ...defaultLocale,
{ language: key,
...defaultLocale, time_format: TimeFormat.language,
language: key, },
time_format: TimeFormat.language, demoConfig
}, )}
demoConfig
)}
</div>
<div class="center">
${formatTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div> </div>
` <div class="center">
)} ${formatTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.am_pm,
},
demoConfig
)}
</div>
<div class="center">
${formatTime(
this.date,
{
...defaultLocale,
language: key,
time_format: TimeFormat.twenty_four,
},
demoConfig
)}
</div>
</div>
`
)}
</mwc-list> </mwc-list>
`; `;
} }

18
src/common/number/format_number.ts
View File

@ -65,20 +65,10 @@ export const formatNumber = (
localeOptions?.number_format !== NumberFormat.none && localeOptions?.number_format !== NumberFormat.none &&
!Number.isNaN(Number(num)) !Number.isNaN(Number(num))
) { ) {
try { return new Intl.NumberFormat(
return new Intl.NumberFormat( locale,
locale, getDefaultFormatOptions(num, options)
getDefaultFormatOptions(num, options) ).format(Number(num));
).format(Number(num));
} catch (err: any) {
// Don't fail when using "TEST" language
// eslint-disable-next-line no-console
console.error(err);
return new Intl.NumberFormat(
undefined,
getDefaultFormatOptions(num, options)
).format(Number(num));
}
} }
if ( if (