From 42c840f9498810a81296c9beb8a4f6bbdbc4fa0b Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Mon, 23 Mar 2020 16:53:42 +0100 Subject: [PATCH] feat: refrain from using dynamic vars inside dynamic import BREAKING: Dynamic variables inside dynamic content are problematic for tools that use static analysis, therefore we have removed it, but you can still add it back on your extension if it works for you. The change may break your extension if you relied on this logic, you can add it back yourself by overriding the static get localizeNamespaces(). Example can be found here: https://github.com/ing-bank/lion/blob/%40lion/localize%400.8.10/packages/localize/stories/50-system-overview.stories.mdx#rendering-with-localizemixin --- packages/calendar/src/LionCalendar.js | 22 +++--- .../src/LionCalendarOverlayFrame.js | 2 +- .../src/LionInputDatepicker.js | 2 +- packages/input-iban/src/validators.js | 75 ++++++++++++++++++- packages/localize/README.md | 2 + packages/localize/docs/message.md | 2 + .../stories/50-system-overview.stories.mdx | 2 + .../src/loadDefaultFeedbackMessages.js | 30 ++++---- 8 files changed, 107 insertions(+), 30 deletions(-) diff --git a/packages/calendar/src/LionCalendar.js b/packages/calendar/src/LionCalendar.js index a3faa67ad..450ba64f6 100644 --- a/packages/calendar/src/LionCalendar.js +++ b/packages/calendar/src/LionCalendar.js @@ -1,20 +1,20 @@ import { html, LitElement } from '@lion/core'; -import { - localize, - getWeekdayNames, - getMonthNames, - normalizeDateTime, - LocalizeMixin, -} from '@lion/localize'; import '@lion/core/src/differentKeyEventNamesShimIE.js'; +import { + getMonthNames, + getWeekdayNames, + localize, + LocalizeMixin, + normalizeDateTime, +} from '@lion/localize'; +import { calendarStyle } from './calendarStyle.js'; +import { createDay } from './utils/createDay.js'; import { createMultipleMonth } from './utils/createMultipleMonth.js'; -import { dayTemplate } from './utils/dayTemplate.js'; import { dataTemplate } from './utils/dataTemplate.js'; +import { dayTemplate } from './utils/dayTemplate.js'; import { getFirstDayNextMonth } from './utils/getFirstDayNextMonth.js'; import { getLastDayPreviousMonth } from './utils/getLastDayPreviousMonth.js'; import { isSameDate } from './utils/isSameDate.js'; -import { calendarStyle } from './calendarStyle.js'; -import { createDay } from './utils/createDay.js'; /** * @customElement lion-calendar @@ -62,7 +62,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) { case 'zh-CN': return import('../translations/zh.js'); default: - return import(`../translations/${locale}.js`); + return import(`../translations/en.js`); } }, }, diff --git a/packages/input-datepicker/src/LionCalendarOverlayFrame.js b/packages/input-datepicker/src/LionCalendarOverlayFrame.js index b5aa4cca7..5bf023f72 100644 --- a/packages/input-datepicker/src/LionCalendarOverlayFrame.js +++ b/packages/input-datepicker/src/LionCalendarOverlayFrame.js @@ -81,7 +81,7 @@ export class LionCalendarOverlayFrame extends LocalizeMixin(LitElement) { case 'zh-CN': return import('@lion/overlays/translations/zh.js'); default: - return import(`@lion/overlays/translations/${locale}.js`); + return import(`@lion/overlays/translations/en.js`); } }, }, diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index 0b56dd755..894dbe6ca 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/packages/input-datepicker/src/LionInputDatepicker.js @@ -138,7 +138,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(OverlayMixin(LionIn case 'zh': return import('../translations/zh.js'); default: - return import(`../translations/${locale}.js`); + return import(`../translations/en.js`); } }, }, diff --git a/packages/input-iban/src/validators.js b/packages/input-iban/src/validators.js index aaf94149c..44488647f 100644 --- a/packages/input-iban/src/validators.js +++ b/packages/input-iban/src/validators.js @@ -11,7 +11,80 @@ const loadTranslations = async () => { } await localize.loadNamespace( { - 'lion-validate+iban': locale => import(`../translations/${locale}.js`), + 'lion-validate+iban': locale => { + switch (locale) { + case 'bg-BG': + return import('../translations/bg-BG.js'); + case 'bg': + return import('../translations/bg.js'); + case 'cs-CZ': + return import('../translations/cs-CZ.js'); + case 'cs': + return import('../translations/cs.js'); + case 'de-DE': + return import('../translations/de-DE.js'); + case 'de': + return import('../translations/de.js'); + case 'en-AU': + return import('../translations/en-AU.js'); + case 'en-GB': + return import('../translations/en-GB.js'); + case 'en-US': + return import('../translations/en-US.js'); + case 'en-PH': + case 'en': + return import('../translations/en.js'); + case 'es-ES': + return import('../translations/es-ES.js'); + case 'es': + return import('../translations/es.js'); + case 'fr-FR': + return import('../translations/fr-FR.js'); + case 'fr-BE': + return import('../translations/fr-BE.js'); + case 'fr': + return import('../translations/fr.js'); + case 'hu-HU': + return import('../translations/hu-HU.js'); + case 'hu': + return import('../translations/hu.js'); + case 'it-IT': + return import('../translations/it-IT.js'); + case 'it': + return import('../translations/it.js'); + case 'nl-BE': + return import('../translations/nl-BE.js'); + case 'nl-NL': + return import('../translations/nl-NL.js'); + case 'nl': + return import('../translations/nl.js'); + case 'pl-PL': + return import('../translations/pl-PL.js'); + case 'pl': + return import('../translations/pl.js'); + case 'ro-RO': + return import('../translations/ro-RO.js'); + case 'ro': + return import('../translations/ro.js'); + case 'ru-RU': + return import('../translations/ru-RU.js'); + case 'ru': + return import('../translations/ru.js'); + case 'sk-SK': + return import('../translations/sk-SK.js'); + case 'sk': + return import('../translations/sk.js'); + case 'uk-UA': + return import('../translations/uk-UA.js'); + case 'uk': + return import('../translations/uk.js'); + case 'zh-CN': + case 'zh': + return import('../translations/zh.js'); + default: + return import(`../translations/en.js`); + } + }, }, { locale: localize.localize }, ); diff --git a/packages/localize/README.md b/packages/localize/README.md index b9e9bc643..8252ff843 100644 --- a/packages/localize/README.md +++ b/packages/localize/README.md @@ -40,6 +40,8 @@ localize.loadNamespace({ }); ``` +> Note: dynamic variables inside dynamic imports may cause problems with tools that do static analysis, and may not work out of the box + Translating messages: ```js diff --git a/packages/localize/docs/message.md b/packages/localize/docs/message.md index a3f247b2a..4a1da1630 100644 --- a/packages/localize/docs/message.md +++ b/packages/localize/docs/message.md @@ -48,6 +48,8 @@ class MyHelloComponent extends LocalizeMixin(LitElement) { } ``` +> Note: dynamic variables inside dynamic imports may cause problems with tools that do static analysis, and may not work out of the box + The `namespace` can be one of two types: an object with an explicit loader function as shown above and just a simple string for which the loader has been preconfigured. > When calling `this.msgLit()`, what comes after `:` may contain dots only if they are intended as a separator for objects. For more details, please check [messageformat](https://messageformat.github.io/messageformat/), which is the underlying library that we use. diff --git a/packages/localize/stories/50-system-overview.stories.mdx b/packages/localize/stories/50-system-overview.stories.mdx index c5773ce51..d09d84f20 100644 --- a/packages/localize/stories/50-system-overview.stories.mdx +++ b/packages/localize/stories/50-system-overview.stories.mdx @@ -109,6 +109,8 @@ localize.loadNamespace({ }); ``` +> Note: dynamic variables inside dynamic imports may cause problems with tools that do static analysis, and may not work out of the box + Usage of dynamic imports is recommended if you want to be able to create smart bundles later on for a certain locale. The module must have a `default` export as shown above to be handled properly. diff --git a/packages/validate/src/loadDefaultFeedbackMessages.js b/packages/validate/src/loadDefaultFeedbackMessages.js index 95c7fe95f..787a31525 100644 --- a/packages/validate/src/loadDefaultFeedbackMessages.js +++ b/packages/validate/src/loadDefaultFeedbackMessages.js @@ -1,25 +1,23 @@ import { localize } from '@lion/localize'; +import { DefaultSuccess } from './resultValidators/DefaultSuccess.js'; +import { + IsDate, + IsDateDisabled, + MaxDate, + MinDate, + MinMaxDate, +} from './validators/DateValidators.js'; +import { IsNumber, MaxNumber, MinMaxNumber, MinNumber } from './validators/NumberValidators.js'; import { Required } from './validators/Required.js'; import { EqualsLength, - MinLength, - MaxLength, - MinMaxLength, IsEmail, + MaxLength, + MinLength, + MinMaxLength, } from './validators/StringValidators.js'; -import { IsNumber, MinNumber, MaxNumber, MinMaxNumber } from './validators/NumberValidators.js'; - -import { - IsDate, - MinDate, - MaxDate, - MinMaxDate, - IsDateDisabled, -} from './validators/DateValidators.js'; -import { DefaultSuccess } from './resultValidators/DefaultSuccess.js'; - -export { IsNumber, MinNumber, MaxNumber, MinMaxNumber } from './validators/NumberValidators.js'; +export { IsNumber, MaxNumber, MinMaxNumber, MinNumber } from './validators/NumberValidators.js'; let loaded = false; @@ -102,7 +100,7 @@ export function loadDefaultFeedbackMessages() { case 'zh': return import('../translations/zh.js'); default: - return import(`../translations/${locale}.js`); + return import(`../translations/en.js`); } }, },