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
This commit is contained in:
Joren Broekema 2020-03-23 16:53:42 +01:00 committed by Thomas Allmer
parent 498cd346e3
commit 42c840f949
8 changed files with 107 additions and 30 deletions

View file

@ -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`);
}
},
},

View file

@ -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`);
}
},
},

View file

@ -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`);
}
},
},

View file

@ -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 },
);

View file

@ -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

View file

@ -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.

View file

@ -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.

View file

@ -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`);
}
},
},