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

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

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

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

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

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

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.

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.
 

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';
+export { IsNumber, MaxNumber, MinMaxNumber, MinNumber } 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';
 
 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`);
           }
         },
       },