From f79fde713754f87c91fa430e24b0e4fc109c956f Mon Sep 17 00:00:00 2001 From: Rajkeshwar Prasad Date: Thu, 12 Dec 2024 16:56:01 +0100 Subject: [PATCH 1/4] Added utility method to resolve locale supplied and fallback --- .../localize/src/utils/resolveLocaleConfig.js | 20 +++++++++++++++++++ .../localize/test/resolveLocaleConfig.test.js | 19 ++++++++++++++++++ .../localize/test/translations/de-DE.js | 3 +++ .../localize/test/translations/de.js | 3 +++ .../localize/test/translations/en-GB.js | 3 +++ .../localize/test/translations/en.js | 3 +++ 6 files changed, 51 insertions(+) create mode 100644 packages/ui/components/localize/src/utils/resolveLocaleConfig.js create mode 100644 packages/ui/components/localize/test/resolveLocaleConfig.test.js create mode 100644 packages/ui/components/localize/test/translations/de-DE.js create mode 100644 packages/ui/components/localize/test/translations/de.js create mode 100644 packages/ui/components/localize/test/translations/en-GB.js create mode 100644 packages/ui/components/localize/test/translations/en.js diff --git a/packages/ui/components/localize/src/utils/resolveLocaleConfig.js b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js new file mode 100644 index 0000000000..33a5f67e8a --- /dev/null +++ b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js @@ -0,0 +1,20 @@ +/** + * + * @param {string} namespace Namespace for the locale + * @param {any} localeDir Directory of the locale + * @returns Promise + */ +export const resolveLocaleConfig = (namespace, localeDir) => ({ + [namespace]: (locale = 'en') => { + const localePath = (/** @type {string} */ loc) => [localeDir, `${loc}.js`].join('/'); + + const fallbackLocale = localePath(locale.replace(/-\w+/, '')); + + return import(localePath(locale)).catch(reason => { + console.warn(` + Locale ${locale} not found. Reason ${reason}. + Loading fallback locale ${fallbackLocale}`); + return import(fallbackLocale); + }); + }, +}); diff --git a/packages/ui/components/localize/test/resolveLocaleConfig.test.js b/packages/ui/components/localize/test/resolveLocaleConfig.test.js new file mode 100644 index 0000000000..7da094ccff --- /dev/null +++ b/packages/ui/components/localize/test/resolveLocaleConfig.test.js @@ -0,0 +1,19 @@ +import { expect } from '@open-wc/testing'; +import { resolveLocaleConfig } from '../src/utils/resolveLocaleConfig.js'; + +describe('resolveLocaleConfig', () => { + it('works correctly', async () => { + const localePath = new URL('./translations', import.meta.url); + const localeConfig = await resolveLocaleConfig('demo', localePath); + + // When no locale is supplied `en.js` is loaded + expect((await localeConfig.demo()).default.hello).to.equal('en.js loaded'); + + // When `de-DE` locale is supplied `de-DE.js` is loaded + expect((await localeConfig.demo('de-DE')).default.hello).to.equal('de-DE.js loaded'); + + // When `de-AB` locale is supplied and the file does not exists. + // Then everything from - is removed and `de.js` is loaded. Which is equivalent to the default case. + expect((await localeConfig.demo('de-AB')).default.hello).to.equal('de.js loaded'); + }); +}); diff --git a/packages/ui/components/localize/test/translations/de-DE.js b/packages/ui/components/localize/test/translations/de-DE.js new file mode 100644 index 0000000000..7c33fb59d9 --- /dev/null +++ b/packages/ui/components/localize/test/translations/de-DE.js @@ -0,0 +1,3 @@ +export default { + hello: 'de-DE.js loaded', +}; diff --git a/packages/ui/components/localize/test/translations/de.js b/packages/ui/components/localize/test/translations/de.js new file mode 100644 index 0000000000..952302b7a5 --- /dev/null +++ b/packages/ui/components/localize/test/translations/de.js @@ -0,0 +1,3 @@ +export default { + hello: 'de.js loaded', +}; diff --git a/packages/ui/components/localize/test/translations/en-GB.js b/packages/ui/components/localize/test/translations/en-GB.js new file mode 100644 index 0000000000..76a11616c8 --- /dev/null +++ b/packages/ui/components/localize/test/translations/en-GB.js @@ -0,0 +1,3 @@ +export default { + hello: 'en-GB.js loaded', +}; diff --git a/packages/ui/components/localize/test/translations/en.js b/packages/ui/components/localize/test/translations/en.js new file mode 100644 index 0000000000..2dec1bab7b --- /dev/null +++ b/packages/ui/components/localize/test/translations/en.js @@ -0,0 +1,3 @@ +export default { + hello: 'en.js loaded', +}; From 82d05d93fcaf70c217aacc9740595d6c4e08f99c Mon Sep 17 00:00:00 2001 From: Rajkeshwar Prasad Date: Thu, 12 Dec 2024 17:05:12 +0100 Subject: [PATCH 2/4] Added the changeset --- .changeset/lucky-crews-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lucky-crews-drop.md diff --git a/.changeset/lucky-crews-drop.md b/.changeset/lucky-crews-drop.md new file mode 100644 index 0000000000..6b58c30809 --- /dev/null +++ b/.changeset/lucky-crews-drop.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': minor +--- + +Added utility method to resolve locale supplied and fallback From 0c9ea8c5be77954fa69aec10839c59863a5121c0 Mon Sep 17 00:00:00 2001 From: Rajkeshwar Prasad Date: Mon, 16 Dec 2024 17:23:23 +0100 Subject: [PATCH 3/4] fixed eslint --- .../components/calendar/src/LionCalendar.js | 65 +----- .../components/combobox/src/LionCombobox.js | 66 +----- .../form-core/src/localizeNamespaceLoader.js | 75 ------- .../src/validate/LionValidationFeedback.js | 11 +- .../src/LionInputDatepicker.js | 11 +- .../src/localizeNamespaceLoader.js | 188 ------------------ .../input-file/src/LionInputFile.js | 10 +- .../input-file/src/LionSelectedFileList.js | 10 +- .../input-file/src/localizeNamespaceLoader.js | 75 ------- .../input-range/src/LionInputRange.js | 15 +- .../src/localizeNamespaceLoader.js | 75 ------- .../input-stepper/src/LionInputStepper.js | 16 +- .../src/localizeNamespaceLoader.js | 75 ------- .../components/input-tel/src/LionInputTel.js | 11 +- .../input-tel/src/localizeNamespaceLoader.js | 75 ------- .../localize/src/utils/resolveLocaleConfig.js | 49 ++++- .../localize/test/resolveLocaleConfig.test.js | 11 + .../localize/test/translations-2/en.js | 3 + .../pagination/src/LionPagination.js | 51 +---- .../src/LionProgressIndicator.js | 67 +------ .../ui/exports/localize-no-side-effects.js | 1 + 21 files changed, 118 insertions(+), 842 deletions(-) delete mode 100644 packages/ui/components/form-core/src/localizeNamespaceLoader.js delete mode 100644 packages/ui/components/input-datepicker/src/localizeNamespaceLoader.js delete mode 100644 packages/ui/components/input-file/src/localizeNamespaceLoader.js delete mode 100644 packages/ui/components/input-range/src/localizeNamespaceLoader.js delete mode 100644 packages/ui/components/input-stepper/src/localizeNamespaceLoader.js delete mode 100644 packages/ui/components/input-tel/src/localizeNamespaceLoader.js create mode 100644 packages/ui/components/localize/test/translations-2/en.js diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js index a92f818f3c..0b2c539e40 100644 --- a/packages/ui/components/calendar/src/LionCalendar.js +++ b/packages/ui/components/calendar/src/LionCalendar.js @@ -5,6 +5,7 @@ import { getWeekdayNames, LocalizeMixin, normalizeDateTime, + resolveLocaleConfig, } from '@lion/ui/localize-no-side-effects.js'; import { calendarStyle } from './calendarStyle.js'; @@ -39,68 +40,8 @@ function isDisabledDayButton(el) { */ export class LionCalendar extends LocalizeMixin(LitElement) { static get localizeNamespaces() { - return [ - { - 'lion-calendar': /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - case 'bg': - return import('@lion/ui/calendar-translations/bg.js'); - case 'cs-CZ': - case 'cs': - return import('@lion/ui/calendar-translations/cs.js'); - case 'de-AT': - case 'de-DE': - case 'de': - return import('@lion/ui/calendar-translations/de.js'); - case 'en-AU': - case 'en-GB': - case 'en-PH': - case 'en-US': - case 'en': - return import('@lion/ui/calendar-translations/en.js'); - case 'es-ES': - case 'es': - return import('@lion/ui/calendar-translations/es.js'); - case 'fr-FR': - case 'fr-BE': - case 'fr': - return import('@lion/ui/calendar-translations/fr.js'); - case 'hu-HU': - case 'hu': - return import('@lion/ui/calendar-translations/hu.js'); - case 'it-IT': - case 'it': - return import('@lion/ui/calendar-translations/it.js'); - case 'nl-BE': - case 'nl-NL': - case 'nl': - return import('@lion/ui/calendar-translations/nl.js'); - case 'pl-PL': - case 'pl': - return import('@lion/ui/calendar-translations/pl.js'); - case 'ro-RO': - case 'ro': - return import('@lion/ui/calendar-translations/ro.js'); - case 'ru-RU': - case 'ru': - return import('@lion/ui/calendar-translations/ru.js'); - case 'sk-SK': - case 'sk': - return import('@lion/ui/calendar-translations/sk.js'); - case 'uk-UA': - case 'uk': - return import('@lion/ui/calendar-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/calendar-translations/zh.js'); - default: - return import('@lion/ui/calendar-translations/en.js'); - } - }, - }, - ...super.localizeNamespaces, - ]; + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-calendar', localePath), ...super.localizeNamespaces]; } static get properties() { diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js index ce1b74ebfb..6b657e86e9 100644 --- a/packages/ui/components/combobox/src/LionCombobox.js +++ b/packages/ui/components/combobox/src/LionCombobox.js @@ -1,7 +1,7 @@ import { browserDetection } from '@lion/ui/core.js'; import { Unparseable } from '@lion/ui/form-core.js'; import { LionListbox } from '@lion/ui/listbox.js'; -import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; +import { LocalizeMixin, resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js'; import { css, html } from 'lit'; import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js'; @@ -87,68 +87,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi } static get localizeNamespaces() { - return [ - { - 'lion-combobox': /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - case 'bg': - return import('@lion/ui/combobox-translations/bg.js'); - case 'cs-CZ': - case 'cs': - return import('@lion/ui/combobox-translations/cs.js'); - case 'de-AT': - case 'de-DE': - case 'de': - return import('@lion/ui/combobox-translations/de.js'); - case 'en-AU': - case 'en-GB': - case 'en-PH': - case 'en-US': - case 'en': - return import('@lion/ui/combobox-translations/en.js'); - case 'es-ES': - case 'es': - return import('@lion/ui/combobox-translations/es.js'); - case 'fr-FR': - case 'fr-BE': - case 'fr': - return import('@lion/ui/combobox-translations/fr.js'); - case 'hu-HU': - case 'hu': - return import('@lion/ui/combobox-translations/hu.js'); - case 'it-IT': - case 'it': - return import('@lion/ui/combobox-translations/it.js'); - case 'nl-BE': - case 'nl-NL': - case 'nl': - return import('@lion/ui/combobox-translations/nl.js'); - case 'pl-PL': - case 'pl': - return import('@lion/ui/combobox-translations/pl.js'); - case 'ro-RO': - case 'ro': - return import('@lion/ui/combobox-translations/ro.js'); - case 'ru-RU': - case 'ru': - return import('@lion/ui/combobox-translations/ru.js'); - case 'sk-SK': - case 'sk': - return import('@lion/ui/combobox-translations/sk.js'); - case 'uk-UA': - case 'uk': - return import('@lion/ui/combobox-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/combobox-translations/zh.js'); - default: - return import('@lion/ui/combobox-translations/en.js'); - } - }, - }, - ...super.localizeNamespaces, - ]; + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-combobox', localePath), ...super.localizeNamespaces]; } /** diff --git a/packages/ui/components/form-core/src/localizeNamespaceLoader.js b/packages/ui/components/form-core/src/localizeNamespaceLoader.js deleted file mode 100644 index 4ebde40c8e..0000000000 --- a/packages/ui/components/form-core/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/form-core-translations/bg-BG.js'); - case 'bg': - return import('@lion/ui/form-core-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/form-core-translations/cs-CZ.js'); - case 'cs': - return import('@lion/ui/form-core-translations/cs.js'); - case 'de-DE': - return import('@lion/ui/form-core-translations/de-DE.js'); - case 'de': - return import('@lion/ui/form-core-translations/de.js'); - case 'en-AU': - return import('@lion/ui/form-core-translations/en-AU.js'); - case 'en-GB': - return import('@lion/ui/form-core-translations/en-GB.js'); - case 'en-US': - return import('@lion/ui/form-core-translations/en-US.js'); - case 'en-PH': - case 'en': - return import('@lion/ui/form-core-translations/en.js'); - case 'es-ES': - return import('@lion/ui/form-core-translations/es-ES.js'); - case 'es': - return import('@lion/ui/form-core-translations/es.js'); - case 'fr-FR': - return import('@lion/ui/form-core-translations/fr-FR.js'); - case 'fr-BE': - return import('@lion/ui/form-core-translations/fr-BE.js'); - case 'fr': - return import('@lion/ui/form-core-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/form-core-translations/hu-HU.js'); - case 'hu': - return import('@lion/ui/form-core-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/form-core-translations/it-IT.js'); - case 'it': - return import('@lion/ui/form-core-translations/it.js'); - case 'nl-BE': - return import('@lion/ui/form-core-translations/nl-BE.js'); - case 'nl-NL': - return import('@lion/ui/form-core-translations/nl-NL.js'); - case 'nl': - return import('@lion/ui/form-core-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/form-core-translations/pl-PL.js'); - case 'pl': - return import('@lion/ui/form-core-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/form-core-translations/ro-RO.js'); - case 'ro': - return import('@lion/ui/form-core-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/form-core-translations/ru-RU.js'); - case 'ru': - return import('@lion/ui/form-core-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/form-core-translations/sk-SK.js'); - case 'sk': - return import('@lion/ui/form-core-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/form-core-translations/uk-UA.js'); - case 'uk': - return import('@lion/ui/form-core-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/form-core-translations/zh.js'); - default: - return import('@lion/ui/form-core-translations/en.js'); - } -}; diff --git a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js index 9f6b4a4d05..d6043745bf 100644 --- a/packages/ui/components/form-core/src/validate/LionValidationFeedback.js +++ b/packages/ui/components/form-core/src/validate/LionValidationFeedback.js @@ -1,6 +1,5 @@ import { css, html, LitElement } from 'lit'; -import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; -import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js'; +import { LocalizeMixin, resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; /** * @typedef {import('./Validator.js').Validator} Validator @@ -24,10 +23,10 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) { }; } - static localizeNamespaces = [ - { 'lion-form-core': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../../translations', import.meta.url); + return [resolveLocaleConfig('lion-form-core', localePath), ...super.localizeNamespaces]; + } static get styles() { return [ diff --git a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js index d9ac1d6c76..3cbe558c87 100644 --- a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js +++ b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js @@ -11,9 +11,8 @@ import { withModalDialogConfig, ArrowMixin, } from '@lion/ui/overlays.js'; -import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; +import { LocalizeMixin, resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; /** * @typedef {import('../../form-core/src/validate/Validator.js').Validator} Validator @@ -127,7 +126,13 @@ export class LionInputDatepicker extends ScopedElementsMixin( } static get localizeNamespaces() { - return [{ 'lion-input-datepicker': localizeNamespaceLoader }, ...super.localizeNamespaces]; + const datepickerLocalePath = new URL('../translations', import.meta.url); + const overlayLocalePath = new URL('../../overlays/translations', import.meta.url); + + return [ + resolveLocaleConfig('lion-input-datepicker', [overlayLocalePath, datepickerLocalePath]), + ...super.localizeNamespaces, + ]; } /** diff --git a/packages/ui/components/input-datepicker/src/localizeNamespaceLoader.js b/packages/ui/components/input-datepicker/src/localizeNamespaceLoader.js deleted file mode 100644 index 2e2341a0a2..0000000000 --- a/packages/ui/components/input-datepicker/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,188 +0,0 @@ -/** - * @param {Promise<{default:object}>[]} importPromises - */ -async function combineLocalizeImports(importPromises) { - const localizeObjects = await Promise.all(importPromises); - const combinedResult = localizeObjects[0]; - for (const localizeObject of localizeObjects.slice(1)) { - Object.entries(localizeObject.default).forEach(([key, val]) => { - combinedResult.default[key] = val; - }); - } - return combinedResult; -} - -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/bg-BG.js'), - import('@lion/ui/input-datepicker-translations/bg-BG.js'), - ]); - case 'bg': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/bg.js'), - import('@lion/ui/input-datepicker-translations/bg.js'), - ]); - case 'cs-CZ': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/cs-CZ.js'), - import('@lion/ui/input-datepicker-translations/cs-CZ.js'), - ]); - case 'cs': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/cs.js'), - import('@lion/ui/input-datepicker-translations/cs.js'), - ]); - case 'de-DE': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/de-DE.js'), - import('@lion/ui/input-datepicker-translations/de-DE.js'), - ]); - case 'de': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/de.js'), - import('@lion/ui/input-datepicker-translations/de.js'), - ]); - case 'en-AU': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/en-AU.js'), - import('@lion/ui/input-datepicker-translations/en-AU.js'), - ]); - case 'en-GB': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/en-GB.js'), - import('@lion/ui/input-datepicker-translations/en-GB.js'), - ]); - case 'en-US': - return import('@lion/ui/input-datepicker-translations/en-US.js'); - case 'en-PH': - case 'en': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/en.js'), - import('@lion/ui/input-datepicker-translations/en.js'), - ]); - - case 'es-ES': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/es-ES.js'), - import('@lion/ui/input-datepicker-translations/es-ES.js'), - ]); - case 'es': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/es.js'), - import('@lion/ui/input-datepicker-translations/es.js'), - ]); - case 'fr-FR': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/fr-FR.js'), - import('@lion/ui/input-datepicker-translations/fr-FR.js'), - ]); - case 'fr-BE': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/fr-BE.js'), - import('@lion/ui/input-datepicker-translations/fr-BE.js'), - ]); - case 'fr': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/fr.js'), - import('@lion/ui/input-datepicker-translations/fr.js'), - ]); - case 'hu-HU': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/hu-HU.js'), - import('@lion/ui/input-datepicker-translations/hu-HU.js'), - ]); - case 'hu': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/hu.js'), - import('@lion/ui/input-datepicker-translations/hu.js'), - ]); - case 'it-IT': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/it-IT.js'), - import('@lion/ui/input-datepicker-translations/it-IT.js'), - ]); - case 'it': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/it.js'), - import('@lion/ui/input-datepicker-translations/it.js'), - ]); - case 'nl-BE': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/nl-BE.js'), - import('@lion/ui/input-datepicker-translations/nl-BE.js'), - ]); - case 'nl-NL': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/nl-NL.js'), - import('@lion/ui/input-datepicker-translations/nl-NL.js'), - ]); - case 'nl': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/nl.js'), - import('@lion/ui/input-datepicker-translations/nl.js'), - ]); - case 'pl-PL': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/pl-PL.js'), - import('@lion/ui/input-datepicker-translations/pl-PL.js'), - ]); - case 'pl': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/pl.js'), - import('@lion/ui/input-datepicker-translations/pl.js'), - ]); - case 'ro-RO': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/ro-RO.js'), - import('@lion/ui/input-datepicker-translations/ro-RO.js'), - ]); - case 'ro': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/ro.js'), - import('@lion/ui/input-datepicker-translations/ro.js'), - ]); - case 'ru-RU': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/ru-RU.js'), - import('@lion/ui/input-datepicker-translations/ru-RU.js'), - ]); - case 'ru': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/ru.js'), - import('@lion/ui/input-datepicker-translations/ru.js'), - ]); - case 'sk-SK': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/sk-SK.js'), - import('@lion/ui/input-datepicker-translations/sk-SK.js'), - ]); - case 'sk': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/sk.js'), - import('@lion/ui/input-datepicker-translations/sk.js'), - ]); - case 'uk-UA': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/uk-UA.js'), - import('@lion/ui/input-datepicker-translations/uk-UA.js'), - ]); - case 'uk': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/uk.js'), - import('@lion/ui/input-datepicker-translations/uk.js'), - ]); - case 'zh-CN': - case 'zh': - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/zh.js'), - import('@lion/ui/input-datepicker-translations/zh.js'), - ]); - default: - return combineLocalizeImports([ - import('@lion/ui/overlays-translations/en.js'), - import('@lion/ui/input-datepicker-translations/en.js'), - ]); - } -}; diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js index b17a602b71..f97a06ca2c 100644 --- a/packages/ui/components/input-file/src/LionInputFile.js +++ b/packages/ui/components/input-file/src/LionInputFile.js @@ -2,10 +2,10 @@ import { LionField } from '@lion/ui/form-core.js'; import { LocalizeMixin } from '@lion/ui/localize.js'; import { css, html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js'; import { FileHandle, MAX_FILE_SIZE } from './FileHandle.js'; import { LionSelectedFileList } from './LionSelectedFileList.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; import { DuplicateFileNames, IsAcceptedFile } from './validators.js'; /** @@ -53,10 +53,10 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) }; } - static localizeNamespaces = [ - { 'lion-input-file': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-input-file', localePath), ...super.localizeNamespaces]; + } static get validationTypes() { return ['error', 'info']; diff --git a/packages/ui/components/input-file/src/LionSelectedFileList.js b/packages/ui/components/input-file/src/LionSelectedFileList.js index 63d57af918..19cf78d0e8 100644 --- a/packages/ui/components/input-file/src/LionSelectedFileList.js +++ b/packages/ui/components/input-file/src/LionSelectedFileList.js @@ -4,8 +4,8 @@ import { LocalizeMixin } from '@lion/ui/localize.js'; import { css, html, LitElement, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { repeat } from 'lit/directives/repeat.js'; +import { resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; /** * @typedef {import('lit').TemplateResult} TemplateResult @@ -29,10 +29,10 @@ export class LionSelectedFileList extends LocalizeMixin(ScopedElementsMixin(LitE }; } - static localizeNamespaces = [ - { 'lion-input-file': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-input-file', localePath), ...super.localizeNamespaces]; + } constructor() { super(); diff --git a/packages/ui/components/input-file/src/localizeNamespaceLoader.js b/packages/ui/components/input-file/src/localizeNamespaceLoader.js deleted file mode 100644 index e655727648..0000000000 --- a/packages/ui/components/input-file/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/input-file-translations/bg-BG.js'); - case 'bg': - return import('@lion/ui/input-file-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/input-file-translations/cs-CZ.js'); - case 'cs': - return import('@lion/ui/input-file-translations/cs.js'); - case 'de-DE': - return import('@lion/ui/input-file-translations/de-DE.js'); - case 'de': - return import('@lion/ui/input-file-translations/de.js'); - case 'en-AU': - return import('@lion/ui/input-file-translations/en-AU.js'); - case 'en-GB': - return import('@lion/ui/input-file-translations/en-GB.js'); - case 'en-US': - return import('@lion/ui/input-file-translations/en-US.js'); - case 'en-PH': - case 'en': - return import('@lion/ui/input-file-translations/en.js'); - case 'es-ES': - return import('@lion/ui/input-file-translations/es-ES.js'); - case 'es': - return import('@lion/ui/input-file-translations/es.js'); - case 'fr-FR': - return import('@lion/ui/input-file-translations/fr-FR.js'); - case 'fr-BE': - return import('@lion/ui/input-file-translations/fr-BE.js'); - case 'fr': - return import('@lion/ui/input-file-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/input-file-translations/hu-HU.js'); - case 'hu': - return import('@lion/ui/input-file-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/input-file-translations/it-IT.js'); - case 'it': - return import('@lion/ui/input-file-translations/it.js'); - case 'nl-BE': - return import('@lion/ui/input-file-translations/nl-BE.js'); - case 'nl-NL': - return import('@lion/ui/input-file-translations/nl-NL.js'); - case 'nl': - return import('@lion/ui/input-file-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/input-file-translations/pl-PL.js'); - case 'pl': - return import('@lion/ui/input-file-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/input-file-translations/ro-RO.js'); - case 'ro': - return import('@lion/ui/input-file-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/input-file-translations/ru-RU.js'); - case 'ru': - return import('@lion/ui/input-file-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/input-file-translations/sk-SK.js'); - case 'sk': - return import('@lion/ui/input-file-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/input-file-translations/uk-UA.js'); - case 'uk': - return import('@lion/ui/input-file-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/input-file-translations/zh.js'); - default: - return import('@lion/ui/input-file-translations/en.js'); - } -}; diff --git a/packages/ui/components/input-range/src/LionInputRange.js b/packages/ui/components/input-range/src/LionInputRange.js index 359581a468..19259cf59a 100644 --- a/packages/ui/components/input-range/src/LionInputRange.js +++ b/packages/ui/components/input-range/src/LionInputRange.js @@ -1,9 +1,12 @@ /* eslint-disable import/no-extraneous-dependencies */ import { css, html } from 'lit'; -import { LocalizeMixin, formatNumber } from '@lion/ui/localize-no-side-effects.js'; +import { + LocalizeMixin, + formatNumber, + resolveLocaleConfig, +} from '@lion/ui/localize-no-side-effects.js'; import { ScopedStylesController } from '@lion/ui/core.js'; import { LionInput } from '@lion/ui/input.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; /** * @typedef {import('lit').CSSResult} CSSResult @@ -41,10 +44,10 @@ export class LionInputRange extends LocalizeMixin(LionInput) { }; } - static localizeNamespaces = [ - { 'lion-input-range': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-input-range', localePath), ...super.localizeNamespaces]; + } /** * @param {CSSResult} scope diff --git a/packages/ui/components/input-range/src/localizeNamespaceLoader.js b/packages/ui/components/input-range/src/localizeNamespaceLoader.js deleted file mode 100644 index 18846429fb..0000000000 --- a/packages/ui/components/input-range/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/input-range-translations/bg-BG.js'); - case 'bg': - return import('@lion/ui/input-range-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/input-range-translations/cs-CZ.js'); - case 'cs': - return import('@lion/ui/input-range-translations/cs.js'); - case 'de-DE': - return import('@lion/ui/input-range-translations/de-DE.js'); - case 'de': - return import('@lion/ui/input-range-translations/de.js'); - case 'en-AU': - return import('@lion/ui/input-range-translations/en-AU.js'); - case 'en-GB': - return import('@lion/ui/input-range-translations/en-GB.js'); - case 'en-US': - return import('@lion/ui/input-range-translations/en-US.js'); - case 'en-PH': - case 'en': - return import('@lion/ui/input-range-translations/en.js'); - case 'es-ES': - return import('@lion/ui/input-range-translations/es-ES.js'); - case 'es': - return import('@lion/ui/input-range-translations/es.js'); - case 'fr-FR': - return import('@lion/ui/input-range-translations/fr-FR.js'); - case 'fr-BE': - return import('@lion/ui/input-range-translations/fr-BE.js'); - case 'fr': - return import('@lion/ui/input-range-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/input-range-translations/hu-HU.js'); - case 'hu': - return import('@lion/ui/input-range-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/input-range-translations/it-IT.js'); - case 'it': - return import('@lion/ui/input-range-translations/it.js'); - case 'nl-BE': - return import('@lion/ui/input-range-translations/nl-BE.js'); - case 'nl-NL': - return import('@lion/ui/input-range-translations/nl-NL.js'); - case 'nl': - return import('@lion/ui/input-range-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/input-range-translations/pl-PL.js'); - case 'pl': - return import('@lion/ui/input-range-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/input-range-translations/ro-RO.js'); - case 'ro': - return import('@lion/ui/input-range-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/input-range-translations/ru-RU.js'); - case 'ru': - return import('@lion/ui/input-range-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/input-range-translations/sk-SK.js'); - case 'sk': - return import('@lion/ui/input-range-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/input-range-translations/uk-UA.js'); - case 'uk': - return import('@lion/ui/input-range-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/input-range-translations/zh.js'); - default: - return import('@lion/ui/input-range-translations/en.js'); - } -}; diff --git a/packages/ui/components/input-stepper/src/LionInputStepper.js b/packages/ui/components/input-stepper/src/LionInputStepper.js index 8dc50d8647..556bcc3e2f 100644 --- a/packages/ui/components/input-stepper/src/LionInputStepper.js +++ b/packages/ui/components/input-stepper/src/LionInputStepper.js @@ -1,8 +1,12 @@ import { html, css, render } from 'lit'; -import { formatNumber, LocalizeMixin, parseNumber } from '@lion/ui/localize-no-side-effects.js'; +import { + formatNumber, + LocalizeMixin, + parseNumber, + resolveLocaleConfig, +} from '@lion/ui/localize-no-side-effects.js'; import { LionInput } from '@lion/ui/input.js'; import { IsNumber, MinNumber, MaxNumber } from '@lion/ui/form-core.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; /** * @typedef {import('lit').RenderOptions} RenderOptions @@ -43,10 +47,10 @@ export class LionInputStepper extends LocalizeMixin(LionInput) { }; } - static localizeNamespaces = [ - { 'lion-input-stepper': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-input-stepper', localePath), ...super.localizeNamespaces]; + } /** * @returns {number} diff --git a/packages/ui/components/input-stepper/src/localizeNamespaceLoader.js b/packages/ui/components/input-stepper/src/localizeNamespaceLoader.js deleted file mode 100644 index a13295a7a1..0000000000 --- a/packages/ui/components/input-stepper/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/input-stepper-translations/bg-BG.js'); - case 'bg': - return import('@lion/ui/input-stepper-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/input-stepper-translations/cs-CZ.js'); - case 'cs': - return import('@lion/ui/input-stepper-translations/cs.js'); - case 'de-DE': - return import('@lion/ui/input-stepper-translations/de-DE.js'); - case 'de': - return import('@lion/ui/input-stepper-translations/de.js'); - case 'en-AU': - return import('@lion/ui/input-stepper-translations/en-AU.js'); - case 'en-GB': - return import('@lion/ui/input-stepper-translations/en-GB.js'); - case 'en-US': - return import('@lion/ui/input-stepper-translations/en-US.js'); - case 'en-PH': - case 'en': - return import('@lion/ui/input-stepper-translations/en.js'); - case 'es-ES': - return import('@lion/ui/input-stepper-translations/es-ES.js'); - case 'es': - return import('@lion/ui/input-stepper-translations/es.js'); - case 'fr-FR': - return import('@lion/ui/input-stepper-translations/fr-FR.js'); - case 'fr-BE': - return import('@lion/ui/input-stepper-translations/fr-BE.js'); - case 'fr': - return import('@lion/ui/input-stepper-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/input-stepper-translations/hu-HU.js'); - case 'hu': - return import('@lion/ui/input-stepper-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/input-stepper-translations/it-IT.js'); - case 'it': - return import('@lion/ui/input-stepper-translations/it.js'); - case 'nl-BE': - return import('@lion/ui/input-stepper-translations/nl-BE.js'); - case 'nl-NL': - return import('@lion/ui/input-stepper-translations/nl-NL.js'); - case 'nl': - return import('@lion/ui/input-stepper-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/input-stepper-translations/pl-PL.js'); - case 'pl': - return import('@lion/ui/input-stepper-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/input-stepper-translations/ro-RO.js'); - case 'ro': - return import('@lion/ui/input-stepper-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/input-stepper-translations/ru-RU.js'); - case 'ru': - return import('@lion/ui/input-stepper-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/input-stepper-translations/sk-SK.js'); - case 'sk': - return import('@lion/ui/input-stepper-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/input-stepper-translations/uk-UA.js'); - case 'uk': - return import('@lion/ui/input-stepper-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/input-stepper-translations/zh.js'); - default: - return import('@lion/ui/input-stepper-translations/en.js'); - } -}; diff --git a/packages/ui/components/input-tel/src/LionInputTel.js b/packages/ui/components/input-tel/src/LionInputTel.js index 699f602413..04351cc1ac 100644 --- a/packages/ui/components/input-tel/src/LionInputTel.js +++ b/packages/ui/components/input-tel/src/LionInputTel.js @@ -1,5 +1,5 @@ import { Unparseable } from '@lion/ui/form-core.js'; -import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; +import { LocalizeMixin, resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; import { LionInput } from '@lion/ui/input.js'; import { PhoneUtilManager } from './PhoneUtilManager.js'; @@ -7,7 +7,6 @@ import { liveFormatPhoneNumber } from './preprocessors.js'; import { formatPhoneNumber } from './formatters.js'; import { parsePhoneNumber } from './parsers.js'; import { PhoneNumber } from './validators.js'; -import { localizeNamespaceLoader } from './localizeNamespaceLoader.js'; /** * @typedef {import('../types/index.js').RegionCode} RegionCode @@ -30,10 +29,10 @@ export class LionInputTel extends LocalizeMixin(LionInput) { _phoneUtil: { type: Object, state: true }, }; - static localizeNamespaces = [ - { 'lion-input-tel': localizeNamespaceLoader }, - ...super.localizeNamespaces, - ]; + static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-input-tel', localePath), ...super.localizeNamespaces]; + } /** * Currently active region based on: diff --git a/packages/ui/components/input-tel/src/localizeNamespaceLoader.js b/packages/ui/components/input-tel/src/localizeNamespaceLoader.js deleted file mode 100644 index e646261bbf..0000000000 --- a/packages/ui/components/input-tel/src/localizeNamespaceLoader.js +++ /dev/null @@ -1,75 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -export const localizeNamespaceLoader = /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/input-tel-translations/bg-BG.js'); - case 'bg': - return import('@lion/ui/input-tel-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/input-tel-translations/cs-CZ.js'); - case 'cs': - return import('@lion/ui/input-tel-translations/cs.js'); - case 'de-DE': - return import('@lion/ui/input-tel-translations/de-DE.js'); - case 'de': - return import('@lion/ui/input-tel-translations/de.js'); - case 'en-AU': - return import('@lion/ui/input-tel-translations/en-AU.js'); - case 'en-GB': - return import('@lion/ui/input-tel-translations/en-GB.js'); - case 'en-US': - return import('@lion/ui/input-tel-translations/en-US.js'); - case 'en-PH': - case 'en': - return import('@lion/ui/input-tel-translations/en.js'); - case 'es-ES': - return import('@lion/ui/input-tel-translations/es-ES.js'); - case 'es': - return import('@lion/ui/input-tel-translations/es.js'); - case 'fr-FR': - return import('@lion/ui/input-tel-translations/fr-FR.js'); - case 'fr-BE': - return import('@lion/ui/input-tel-translations/fr-BE.js'); - case 'fr': - return import('@lion/ui/input-tel-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/input-tel-translations/hu-HU.js'); - case 'hu': - return import('@lion/ui/input-tel-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/input-tel-translations/it-IT.js'); - case 'it': - return import('@lion/ui/input-tel-translations/it.js'); - case 'nl-BE': - return import('@lion/ui/input-tel-translations/nl-BE.js'); - case 'nl-NL': - return import('@lion/ui/input-tel-translations/nl-NL.js'); - case 'nl': - return import('@lion/ui/input-tel-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/input-tel-translations/pl-PL.js'); - case 'pl': - return import('@lion/ui/input-tel-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/input-tel-translations/ro-RO.js'); - case 'ro': - return import('@lion/ui/input-tel-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/input-tel-translations/ru-RU.js'); - case 'ru': - return import('@lion/ui/input-tel-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/input-tel-translations/sk-SK.js'); - case 'sk': - return import('@lion/ui/input-tel-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/input-tel-translations/uk-UA.js'); - case 'uk': - return import('@lion/ui/input-tel-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/input-tel-translations/zh.js'); - default: - return import('@lion/ui/input-tel-translations/en.js'); - } -}; diff --git a/packages/ui/components/localize/src/utils/resolveLocaleConfig.js b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js index 33a5f67e8a..82bdd18724 100644 --- a/packages/ui/components/localize/src/utils/resolveLocaleConfig.js +++ b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js @@ -1,20 +1,49 @@ /** * * @param {string} namespace Namespace for the locale - * @param {any} localeDir Directory of the locale + * @param {URL | URL[]} localeDir Directory of the locale * @returns Promise */ export const resolveLocaleConfig = (namespace, localeDir) => ({ - [namespace]: (locale = 'en') => { - const localePath = (/** @type {string} */ loc) => [localeDir, `${loc}.js`].join('/'); + [namespace]: async (locale = 'en') => { + const loadLocaleConfig = (/** @type {URL} */ dir) => { + const localePath = (/** @type {string} */ loc) => [dir, `${loc}.js`].join('/'); + const fallbackLocale = localePath(locale.replace(/-\w+/, '')); + const defaultLocale = localePath('en'); - const fallbackLocale = localePath(locale.replace(/-\w+/, '')); + const resolvedModule = import(localePath(locale)).catch(reason => { + console.warn(` + Locale ${locale} not found. Reason ${reason}. + Loading fallback locale ${fallbackLocale}`); + return import(fallbackLocale).catch(() => { + console.warn(` + Fallback locale ${locale} not found. Reason ${reason}. + Loading default locale ${defaultLocale}`); + return import(defaultLocale); + }); + }); - return import(localePath(locale)).catch(reason => { - console.warn(` - Locale ${locale} not found. Reason ${reason}. - Loading fallback locale ${fallbackLocale}`); - return import(fallbackLocale); - }); + return resolvedModule; + }; + + const mergeMultipleConfigs = async (/** @type {URL[]} */ localeDirs) => { + const localizeObjects = localeDirs.map(loadLocaleConfig); + const combinedResult = await localizeObjects[0]; + + for await (const localizeObject of localizeObjects.slice(1)) { + Object.entries(localizeObject.default).forEach(([key, val]) => { + combinedResult.default[key] = val; + }); + } + + return combinedResult; + }; + + const localeConfig = Array.isArray(localeDir) + ? mergeMultipleConfigs(localeDir) + : loadLocaleConfig(localeDir); + + console.log({ localeConfig: await localeConfig }); + return localeConfig; }, }); diff --git a/packages/ui/components/localize/test/resolveLocaleConfig.test.js b/packages/ui/components/localize/test/resolveLocaleConfig.test.js index 7da094ccff..d87ff28f6e 100644 --- a/packages/ui/components/localize/test/resolveLocaleConfig.test.js +++ b/packages/ui/components/localize/test/resolveLocaleConfig.test.js @@ -16,4 +16,15 @@ describe('resolveLocaleConfig', () => { // Then everything from - is removed and `de.js` is loaded. Which is equivalent to the default case. expect((await localeConfig.demo('de-AB')).default.hello).to.equal('de.js loaded'); }); + + it('works correctly with multiple locale imports', async () => { + const localePath = new URL('./translations', import.meta.url); + const localePath2 = new URL('./translations-2', import.meta.url); + + const localeConfig = await resolveLocaleConfig('demo', [localePath, localePath2]); + + // When no locale is supplied `en.js` is loaded + expect((await localeConfig.demo()).default.hello).to.equal('en.js loaded'); + expect((await localeConfig.demo()).default.hi).to.equal('hi en.js loaded'); + }); }); diff --git a/packages/ui/components/localize/test/translations-2/en.js b/packages/ui/components/localize/test/translations-2/en.js new file mode 100644 index 0000000000..0fb80f38f2 --- /dev/null +++ b/packages/ui/components/localize/test/translations-2/en.js @@ -0,0 +1,3 @@ +export default { + hi: 'hi en.js loaded', +}; diff --git a/packages/ui/components/pagination/src/LionPagination.js b/packages/ui/components/pagination/src/LionPagination.js index b20f9d989f..f61b7cf484 100644 --- a/packages/ui/components/pagination/src/LionPagination.js +++ b/packages/ui/components/pagination/src/LionPagination.js @@ -1,6 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies */ import { LitElement, html, css } from 'lit'; -import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; +import { LocalizeMixin, resolveLocaleConfig } from '@lion/ui/localize-no-side-effects.js'; /** * @typedef {import('lit').TemplateResult} TemplateResult @@ -37,53 +37,8 @@ export class LionPagination extends LocalizeMixin(LitElement) { } static get localizeNamespaces() { - return [ - { - 'lion-pagination': /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - return import('@lion/ui/pagination-translations/bg.js'); - case 'cs-CZ': - return import('@lion/ui/pagination-translations/cs.js'); - case 'de-AT': - case 'de-DE': - return import('@lion/ui/pagination-translations/de.js'); - case 'en-AU': - case 'en-GB': - case 'en-PH': - case 'en-US': - return import('@lion/ui/pagination-translations/en.js'); - case 'es-ES': - return import('@lion/ui/pagination-translations/es.js'); - case 'fr-FR': - case 'fr-BE': - return import('@lion/ui/pagination-translations/fr.js'); - case 'hu-HU': - return import('@lion/ui/pagination-translations/hu.js'); - case 'it-IT': - return import('@lion/ui/pagination-translations/it.js'); - case 'nl-BE': - case 'nl-NL': - return import('@lion/ui/pagination-translations/nl.js'); - case 'pl-PL': - return import('@lion/ui/pagination-translations/pl.js'); - case 'ro-RO': - return import('@lion/ui/pagination-translations/ro.js'); - case 'ru-RU': - return import('@lion/ui/pagination-translations/ru.js'); - case 'sk-SK': - return import('@lion/ui/pagination-translations/sk.js'); - case 'uk-UA': - return import('@lion/ui/pagination-translations/uk.js'); - case 'zh-CN': - return import('@lion/ui/pagination-translations/zh.js'); - default: - return import('@lion/ui/pagination-translations/en.js'); - } - }, - }, - ...super.localizeNamespaces, - ]; + const localePath = new URL('../translations', import.meta.url); + return [resolveLocaleConfig('lion-pagination', localePath), ...super.localizeNamespaces]; } static get properties() { diff --git a/packages/ui/components/progress-indicator/src/LionProgressIndicator.js b/packages/ui/components/progress-indicator/src/LionProgressIndicator.js index 59349781ba..983e211e7b 100644 --- a/packages/ui/components/progress-indicator/src/LionProgressIndicator.js +++ b/packages/ui/components/progress-indicator/src/LionProgressIndicator.js @@ -1,6 +1,10 @@ /* eslint-disable import/no-extraneous-dependencies */ import { LitElement, nothing } from 'lit'; -import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-effects.js'; +import { + getLocalizeManager, + LocalizeMixin, + resolveLocaleConfig, +} from '@lion/ui/localize-no-side-effects.js'; /** * @typedef {import('lit').TemplateResult} TemplateResult @@ -23,65 +27,10 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) { } static get localizeNamespaces() { + const localePath = new URL('../translations', import.meta.url); return [ - { - 'lion-progress-indicator': /** @param {string} locale */ locale => { - switch (locale) { - case 'bg-BG': - case 'bg': - return import('@lion/ui/progress-indicator-translations/bg.js'); - case 'cs-CZ': - case 'cs': - return import('@lion/ui/progress-indicator-translations/cs.js'); - case 'de-DE': - case 'de': - return import('@lion/ui/progress-indicator-translations/de.js'); - case 'en-AU': - case 'en-GB': - case 'en-US': - case 'en-PH': - case 'en': - return import('@lion/ui/progress-indicator-translations/en.js'); - case 'es-ES': - case 'es': - return import('@lion/ui/progress-indicator-translations/es.js'); - case 'fr-BE': - case 'fr-FR': - case 'fr': - return import('@lion/ui/progress-indicator-translations/fr.js'); - case 'hu-HU': - case 'hu': - return import('@lion/ui/progress-indicator-translations/hu.js'); - case 'it-IT': - case 'it': - return import('@lion/ui/progress-indicator-translations/it.js'); - case 'nl-BE': - case 'nl-NL': - case 'nl': - return import('@lion/ui/progress-indicator-translations/nl.js'); - case 'pl-PL': - case 'pl': - return import('@lion/ui/progress-indicator-translations/pl.js'); - case 'ro-RO': - case 'ro': - return import('@lion/ui/progress-indicator-translations/ro.js'); - case 'ru-RU': - case 'ru': - return import('@lion/ui/progress-indicator-translations/ru.js'); - case 'sk-SK': - case 'sk': - return import('@lion/ui/progress-indicator-translations/sk.js'); - case 'uk-UA': - case 'uk': - return import('@lion/ui/progress-indicator-translations/uk.js'); - case 'zh-CN': - case 'zh': - return import('@lion/ui/progress-indicator-translations/zh.js'); - default: - return import('@lion/ui/progress-indicator-translations/en.js'); - } - }, - }, + resolveLocaleConfig('lion-progress-indicator', localePath), + ...super.localizeNamespaces, ]; } diff --git a/packages/ui/exports/localize-no-side-effects.js b/packages/ui/exports/localize-no-side-effects.js index 087478b324..efc35b9d35 100644 --- a/packages/ui/exports/localize-no-side-effects.js +++ b/packages/ui/exports/localize-no-side-effects.js @@ -16,5 +16,6 @@ export { getSeparatorsFromNumber } from '../components/localize/src/number/getSe export { normalizeCurrencyLabel } from '../components/localize/src/number/normalizeCurrencyLabel.js'; export { parseNumber } from '../components/localize/src/number/parseNumber.js'; export { getLocale } from '../components/localize/src/utils/getLocale.js'; +export { resolveLocaleConfig } from '../components/localize/src/utils/resolveLocaleConfig.js'; export { getLocalizeManager } from '../components/localize/src/getLocalizeManager.js'; From 6f43a92284ef442739632c8c6d737b8613c75b88 Mon Sep 17 00:00:00 2001 From: Rajkeshwar Prasad Date: Mon, 16 Dec 2024 17:29:48 +0100 Subject: [PATCH 4/4] Removed console.log --- packages/ui/components/localize/src/utils/resolveLocaleConfig.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/components/localize/src/utils/resolveLocaleConfig.js b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js index 82bdd18724..e8fcfba4e6 100644 --- a/packages/ui/components/localize/src/utils/resolveLocaleConfig.js +++ b/packages/ui/components/localize/src/utils/resolveLocaleConfig.js @@ -43,7 +43,6 @@ export const resolveLocaleConfig = (namespace, localeDir) => ({ ? mergeMultipleConfigs(localeDir) : loadLocaleConfig(localeDir); - console.log({ localeConfig: await localeConfig }); return localeConfig; }, });