@lion/ui 0.1.0 → 0.1.2

package/components/input-tel/src/LionInputTel.js

@@ -1,5 +1,5 @@
 import { Unparseable } from '@lion/ui/form-core.js';
-import { LocalizeMixin, localize } from '@lion/ui/localize.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { LionInput } from '@lion/ui/input.js';
 
 import { PhoneUtilManager } from './PhoneUtilManager.js';
@@ -125,7 +125,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
   // @ts-expect-error
   // eslint-disable-next-line class-methods-use-this
   get fieldName() {
-    return localize.msg('lion-input-tel:phoneNumber');
+    return this._localizeManager.msg('lion-input-tel:phoneNumber');
   }
 
   /**
@@ -227,7 +227,7 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
   onLocaleUpdated() {
     super.onLocaleUpdated();
 
-    const localeSplitted = localize.locale.split('-');
+    const localeSplitted = this._localizeManager.locale.split('-');
     /**
      * @protected
      * @type {RegionCode}

package/components/input-tel/test-suites/LionInputTel.suite.js

@@ -9,7 +9,7 @@ import {
 } from '@open-wc/testing';
 import sinon from 'sinon';
 import { mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { Unparseable } from '@lion/ui/form-core.js';
 import { LionInputTel, PhoneNumber, PhoneUtilManager } from '@lion/ui/input-tel.js';
 import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
@@ -23,7 +23,8 @@ const fixture = /** @type {(arg: string | TemplateResult) => Promise<LionInputTe
 const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputTel} */ (_fixtureSync);
 
 const getRegionCodeBasedOnLocale = () => {
-  const localeSplitted = localize.locale.split('-');
+  const localizeManager = getLocalizeManager();
+  const localeSplitted = localizeManager.locale.split('-');
   return /** @type {RegionCode} */ (localeSplitted[localeSplitted.length - 1]).toUpperCase();
 };
 

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -2,7 +2,7 @@ import { html, css } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 
 import { LionInputTel } from '@lion/ui/input-tel.js';
-import { localize } from '@lion/ui/localize.js';
+import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import { getFlagSymbol } from './getFlagSymbol.js';
 
 /**
@@ -80,6 +80,7 @@ export class LionInputTelDropdown extends LionInputTel {
    * @type {TemplateDataForDropdownInputTel}
    */
   get _templateDataDropdown() {
+    const localizeManager = getLocalizeManager();
     const refs = {
       dropdown: {
         ref: this.refs.dropdown,
@@ -91,10 +92,12 @@ export class LionInputTelDropdown extends LionInputTel {
           'model-value-changed': this._onDropdownValueChange,
         },
         labels: {
-          selectCountry: localize.msg('lion-input-tel:selectCountry'),
-          allCountries: this._allCountriesLabel || localize.msg('lion-input-tel:allCountries'),
+          selectCountry: localizeManager.msg('lion-input-tel:selectCountry'),
+          allCountries:
+            this._allCountriesLabel || localizeManager.msg('lion-input-tel:allCountries'),
           preferredCountries:
-            this._preferredCountriesLabel || localize.msg('lion-input-tel:suggestedCountries'),
+            this._preferredCountriesLabel ||
+            localizeManager.msg('lion-input-tel:suggestedCountries'),
         },
       },
     };

package/components/localize/src/LocalizeManager.js

@@ -18,6 +18,7 @@ export class LocalizeManager {
     autoLoadOnLocaleChange = false,
     fallbackLocale = '',
     showKeyAsFallback = false,
+    allowOverridesForExistingNamespaces = false,
   } = {}) {
     /** @private */
     this.__delegationTarget = document.createDocumentFragment();
@@ -28,6 +29,9 @@ export class LocalizeManager {
     /** @protected */
     this._showKeyAsFallback = showKeyAsFallback;
 
+    /** @private */
+    this.__allowOverridesForExistingNamespaces = allowOverridesForExistingNamespaces;
+
     /**
      * @type {Object.<string, Object.<string, Object>>}
      * @private
@@ -199,17 +203,29 @@ export class LocalizeManager {
    * @param {string} locale
    * @param {string} namespace
    * @param {object} data
-   * @throws {Error} Namespace can be added only once, for a given locale
+   * @throws {Error} Namespace can be added only once, for a given locale unless allowOverridesForExistingNamespaces
+   * is set to `true`
    */
   addData(locale, namespace, data) {
-    if (this._isNamespaceInCache(locale, namespace)) {
+    if (
+      !this.__allowOverridesForExistingNamespaces &&
+      this._isNamespaceInCache(locale, namespace)
+    ) {
       throw new Error(
         `Namespace "${namespace}" has been already added for the locale "${locale}".`,
       );
     }
 
     this.__storage[locale] = this.__storage[locale] || {};
-    this.__storage[locale][namespace] = data;
+
+    if (this.__allowOverridesForExistingNamespaces) {
+      this.__storage[locale][namespace] = {
+        ...this.__storage[locale][namespace],
+        ...data,
+      };
+    } else {
+      this.__storage[locale][namespace] = data;
+    }
   }
 
   /**

package/components/localize/src/LocalizeMixin.js

@@ -1,7 +1,7 @@
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { nothing } from 'lit';
 import { until } from 'lit/directives/until.js';
-import { localize } from './singleton.js';
+import { getLocalizeManager } from './getLocalizeManager.js';
 
 /**
  * @typedef {import('lit/directive.js').DirectiveResult} DirectiveResult
@@ -34,6 +34,8 @@ const LocalizeMixinImplementation = superclass =>
     constructor() {
       super();
 
+      this._localizeManager = getLocalizeManager();
+
       /** @private */
       this.__boundLocalizeOnLocaleChanged =
         /** @param {...Object} args */
@@ -74,14 +76,23 @@ const LocalizeMixinImplementation = superclass =>
       if (this.localizeNamespacesLoaded) {
         this.localizeNamespacesLoaded.then(() => this.onLocaleReady());
       }
-      localize.addEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
-      localize.addEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+      this._localizeManager.addEventListener(
+        '__localeChanging',
+        this.__boundLocalizeOnLocaleChanging,
+      );
+      this._localizeManager.addEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
     }
 
     disconnectedCallback() {
       super.disconnectedCallback();
-      localize.removeEventListener('__localeChanging', this.__boundLocalizeOnLocaleChanging);
-      localize.removeEventListener('localeChanged', this.__boundLocalizeOnLocaleChanged);
+      this._localizeManager.removeEventListener(
+        '__localeChanging',
+        this.__boundLocalizeOnLocaleChanging,
+      );
+      this._localizeManager.removeEventListener(
+        'localeChanged',
+        this.__boundLocalizeOnLocaleChanged,
+      );
     }
 
     /**
@@ -93,7 +104,7 @@ const LocalizeMixinImplementation = superclass =>
      */
     msgLit(keys, variables, options) {
       if (this.__localizeMessageSync) {
-        return localize.msg(keys, variables, options);
+        return this._localizeManager.msg(keys, variables, options);
       }
 
       if (!this.localizeNamespacesLoaded) {
@@ -101,7 +112,9 @@ const LocalizeMixinImplementation = superclass =>
       }
 
       return until(
-        this.localizeNamespacesLoaded.then(() => localize.msg(keys, variables, options)),
+        this.localizeNamespacesLoaded.then(() =>
+          this._localizeManager.msg(keys, variables, options),
+        ),
         nothing,
       );
     }
@@ -125,12 +138,14 @@ const LocalizeMixinImplementation = superclass =>
 
     /** @private */
     __localizeStartLoadingNamespaces() {
-      this.localizeNamespacesLoaded = localize.loadNamespaces(this.__getUniqueNamespaces());
+      this.localizeNamespacesLoaded = this._localizeManager.loadNamespaces(
+        this.__getUniqueNamespaces(),
+      );
     }
 
     /**
      * Start loading namespaces on the event that is sent immediately
-     * when localize.locale changes --> 'localeChanging'
+     * when this._localizeManager.locale changes --> 'localeChanging'
      * @private
      */
     __localizeOnLocaleChanging() {

package/components/localize/src/date/formatDate.js

@@ -1,5 +1,5 @@
 import { getLocale } from '../utils/getLocale.js';
-import { localize } from '../singleton.js';
+import { getLocalizeManager } from '../getLocalizeManager.js';
 import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
 
 /** @typedef {import('../../types/LocalizeMixinTypes.js').DatePostProcessor} DatePostProcessor */
@@ -12,6 +12,7 @@ import { normalizeIntlDate } from './utils/normalizeIntlDate.js';
  * @returns {string}
  */
 export function formatDate(date, options) {
+  const localizeManager = getLocalizeManager();
   if (!(date instanceof Date)) {
     return '';
   }
@@ -36,8 +37,8 @@ export function formatDate(date, options) {
     formattedDate = '';
   }
 
-  if (localize.formatDateOptions.postProcessors.size > 0) {
-    Array.from(localize.formatDateOptions.postProcessors).forEach(([locale, fn]) => {
+  if (localizeManager.formatDateOptions.postProcessors.size > 0) {
+    Array.from(localizeManager.formatDateOptions.postProcessors).forEach(([locale, fn]) => {
       if (locale === computedLocale) {
         formattedDate = fn(formattedDate);
       }

package/components/localize/src/date/parseDate.js

@@ -1,5 +1,5 @@
 import { getDateFormatBasedOnLocale } from './getDateFormatBasedOnLocale.js';
-import { localize } from '../singleton.js';
+import { getLocalizeManager } from '../getLocalizeManager.js';
 import { addLeadingZero } from './utils/addLeadingZero.js';
 
 /**
@@ -29,10 +29,12 @@ const memoizedGetDateFormatBasedOnLocale = memoize(getDateFormatBasedOnLocale);
  * @returns {Date | undefined}
  */
 export function parseDate(dateString) {
+  const localizeManager = getLocalizeManager();
+
   const stringToParse = addLeadingZero(dateString);
   let parsedString;
 
-  switch (memoizedGetDateFormatBasedOnLocale(localize.locale)) {
+  switch (memoizedGetDateFormatBasedOnLocale(localizeManager.locale)) {
     case 'day-month-year':
       parsedString = `${stringToParse.slice(6, 10)}/${stringToParse.slice(
         3,
@@ -56,7 +58,7 @@ export function parseDate(dateString) {
   }
 
   const [year, month, day] = parsedString.split('/').map(Number);
-  const parsedDate = new Date(Date.UTC(year, month - 1, day));
+  const parsedDate = new Date(new Date(year, month - 1, day));
 
   // Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
   if (

package/components/localize/src/getLocalizeManager.js

@@ -0,0 +1,74 @@
+// @ts-ignore
+import { singletonManager } from 'singleton-manager';
+import { LocalizeManager } from './LocalizeManager.js';
+
+/**
+ * Side-effect-free alternative for `localize` (the globally shared instance of LocalizeManager).
+ * When this function is imported, no side-effect happened yet, i.e. no global instance was registered yet.
+ * The side effect-free approach generates:
+ * - smaller, optimized bundles
+ * - a predictable loading order, that allows for:
+ *   - deduping strategies when multiple instances of the localizeManager are on a page
+ *   - providing a customized extension of LocalizeManager
+ *
+ * Use it like this:
+ *
+ * ```js
+ * function myFunction() {
+ *   // note that 'localizeManager' is the same as former 'localize'
+ *   const localizeManager = getLocalizeManger();
+ *   // ...
+ * }
+ * ```
+ *
+ * In a class, we advise a shared instance:
+ * ```js
+ * class MyClass {
+ *   constructor() {
+ *     this._localizeManager = getLocalizeManger();
+ *   }
+ *   // ...
+ * }
+ * ```
+ *
+ * Make sure to always call this method inside a function or class (otherwise side effects are created)
+ *
+ * Do you want to register your own LocalizeManager?
+ * Make sure it's registered before anyone called `getLocalizeManager()`
+ *
+ * ```js
+ * import { singletonManager } from 'singleton-manager';
+ * import { getLocalizeManger } from '@lion/ui/localize-no-side-effects.js';
+ *
+ * // First register your own LocalizeManager (for deduping or other reasons)
+ * singletonManager.set('lion/ui::localize::0.x', class MyLocalizeManager extends LocalizeManager {});
+ *
+ * // Now, all your code gets the right instance
+ * function myFuntion() {
+ *   const localizeManager = getLocalizeManager();
+ *   // ...
+ * }
+ *
+ * class myClass() {
+ *   constructor() {
+ *     this._localizeManager = getLocalizeManager();
+ *     // ...
+ *   }
+ * }
+ * ```
+ *
+ * @returns {LocalizeManager}
+ */
+export function getLocalizeManager() {
+  if (singletonManager.has('@lion/ui::localize::0.x')) {
+    return singletonManager.get('@lion/ui::localize::0.x');
+  }
+
+  const localizeManager = new LocalizeManager({
+    autoLoadOnLocaleChange: true,
+    fallbackLocale: 'en-GB',
+  });
+  singletonManager.set('@lion/ui::localize::0.x', localizeManager);
+
+  return localizeManager;
+}

package/components/localize/src/number/formatNumber.js

@@ -1,6 +1,6 @@
 /** @typedef {import('../../types/LocalizeMixinTypes.js').NumberPostProcessor} NumberPostProcessor */
 
-import { localize } from '../singleton.js';
+import { getLocalizeManager } from '../getLocalizeManager.js';
 import { getLocale } from '../utils/getLocale.js';
 import { formatNumberToParts } from './formatNumberToParts.js';
 
@@ -14,12 +14,13 @@ import { formatNumberToParts } from './formatNumberToParts.js';
  * @returns {string}
  */
 export function formatNumber(number, options = /** @type {FormatOptions} */ ({})) {
+  const localizeManager = getLocalizeManager();
   if (number === undefined || number === null) return '';
   const formattedToParts = formatNumberToParts(number, options);
   // If number is not a number
   if (
     formattedToParts === options.returnIfNaN ||
-    formattedToParts === localize.formatNumberOptions.returnIfNaN
+    formattedToParts === localizeManager.formatNumberOptions.returnIfNaN
   ) {
     return /** @type {string} */ (formattedToParts);
   }
@@ -33,8 +34,8 @@ export function formatNumber(number, options = /** @type {FormatOptions} */ ({})
 
   const computedLocale = getLocale(options && options.locale);
 
-  if (localize.formatNumberOptions.postProcessors.size > 0) {
-    Array.from(localize.formatNumberOptions.postProcessors).forEach(([locale, fn]) => {
+  if (localizeManager.formatNumberOptions.postProcessors.size > 0) {
+    Array.from(localizeManager.formatNumberOptions.postProcessors).forEach(([locale, fn]) => {
       if (locale === computedLocale) {
         printNumberOfParts = fn(printNumberOfParts);
       }

package/components/localize/src/number/getCurrencyName.js

@@ -1,4 +1,4 @@
-import { localize } from '../singleton.js';
+import { getLocalizeManager } from '../getLocalizeManager.js';
 import { formatNumberToParts } from './formatNumberToParts.js';
 import { forceCurrencyNameForPHPEnGB } from './utils/normalize-get-currency-name/forceCurrencyNameForPHPEnGB.js';
 
@@ -11,6 +11,7 @@ import { forceCurrencyNameForPHPEnGB } from './utils/normalize-get-currency-name
  * @returns {string} currency name like 'US dollar'
  */
 export function getCurrencyName(currencyIso, options) {
+  const localizeManager = getLocalizeManager();
   const parts = /** @type {FormatNumberPart[]} */ (
     formatNumberToParts(1, {
       ...options,
@@ -23,7 +24,7 @@ export function getCurrencyName(currencyIso, options) {
     .filter(p => p.type === 'currency')
     .map(o => o.value)
     .join(' ');
-  const locale = options?.locale || localize.locale;
+  const locale = options?.locale || localizeManager.locale;
   if (currencyIso === 'PHP' && locale === 'en-GB') {
     currencyName = forceCurrencyNameForPHPEnGB(currencyName);
   }

package/components/localize/src/number/parseNumber.js

@@ -104,7 +104,8 @@ export function parseNumber(value, options) {
   if (!containsNumbers) {
     return undefined;
   }
-  const matchedInput = value.match(/[0-9,.\- ]/g);
+  const valueM = value.replace(/[−]/g, '-'); // U+002D, Hyphen-Minus, -
+  const matchedInput = valueM.match(/[0-9,.\- ]/g);
   if (!matchedInput) {
     return undefined;
   }
@@ -112,7 +113,7 @@ export function parseNumber(value, options) {
   const parseMode = getParseMode(cleanedInput, options);
   switch (parseMode) {
     case 'unparseable': {
-      const cleanedInputMatchStr = cleanedInput.match(/[0-9]/g)?.join('');
+      const cleanedInputMatchStr = cleanedInput.match(/[0-9-]/g)?.join('');
       if (!cleanedInputMatchStr) {
         return NaN;
       }

package/components/localize/src/number/utils/emptyStringWhenNumberNan.js

@@ -1,4 +1,4 @@
-import { localize } from '../../singleton.js';
+import { getLocalizeManager } from '../../getLocalizeManager.js';
 
 /**
  * When number is NaN we should return an empty string or returnIfNaN param
@@ -7,5 +7,6 @@ import { localize } from '../../singleton.js';
  * @returns {string}
  */
 export function emptyStringWhenNumberNan(returnIfNaN) {
-  return returnIfNaN || localize.formatNumberOptions.returnIfNaN;
+  const localizeManager = getLocalizeManager();
+  return returnIfNaN || localizeManager.formatNumberOptions.returnIfNaN;
 }

package/components/localize/src/singleton.js

@@ -1,11 +1,8 @@
-import { singletonManager } from 'singleton-manager';
-import { LocalizeManager } from './LocalizeManager.js';
+import { getLocalizeManager } from './getLocalizeManager.js';
 
-/** @type {LocalizeManager} */
+/**
+ * Use the side-effect-free `const localizeManager = getLocalizeManager()` instead.
+ * @deprecated
+ */
 // eslint-disable-next-line import/no-mutable-exports
-export const localize =
-  /** @type {LocalizeManager} */ (singletonManager.get('@lion/ui::localize::0.x')) ||
-  new LocalizeManager({
-    autoLoadOnLocaleChange: true,
-    fallbackLocale: 'en-GB',
-  });
+export const localize = getLocalizeManager();

package/components/localize/src/utils/getLocale.js

@@ -1,4 +1,4 @@
-import { localize } from '../singleton.js';
+import { getLocalizeManager } from '../getLocalizeManager.js';
 
 /**
  * Gets the locale to use
@@ -7,11 +7,6 @@ import { localize } from '../singleton.js';
  * @returns {string}
  */
 export function getLocale(locale) {
-  if (locale) {
-    return locale;
-  }
-  if (localize && localize.locale) {
-    return localize.locale;
-  }
-  return 'en-GB';
+  const localizeManager = getLocalizeManager();
+  return locale || localizeManager?.locale || 'en-GB';
 }

package/components/localize/test/LocalizeManager.test.js

@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import { fetchMock } from '@bundled-es-modules/fetch-mock';
 import { setupFakeImport, resetFakeImport, fakeImport } from '@lion/ui/localize-test-helpers.js';
 
-import { LocalizeManager } from '@lion/ui/localize.js';
+import { LocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 
 /**
  * @param {LocalizeManager} localizeManagerEl
@@ -155,7 +155,7 @@ describe('LocalizeManager', () => {
       });
     });
 
-    it('prevents mutating existing data for the same locale & namespace', () => {
+    it('prevents mutating existing data for the same locale & namespace when "allowOverridesForExistingNamespaces" option is not given in constructor', () => {
       manager = new LocalizeManager();
       const { storage } = getProtectedMembers(manager);
 
@@ -169,6 +169,23 @@ describe('LocalizeManager', () => {
         'en-GB': { 'lion-hello': { greeting: 'Hi!' } },
       });
     });
+
+    it('allows mutating existing data for the same locale & namespace when "allowOverridesForExistingNamespaces" option is set to "true" in constructor', () => {
+      manager = new LocalizeManager({ allowOverridesForExistingNamespaces: true });
+      const { storage } = getProtectedMembers(manager);
+
+      manager.addData('en-GB', 'lion-hello', { greeting: 'Hi!' });
+
+      expect(storage).to.deep.equal({
+        'en-GB': { 'lion-hello': { greeting: 'Hi!' } },
+      });
+
+      manager.addData('en-GB', 'lion-hello', { greeting: 'Hi!', alternative: 'Hello!' });
+
+      expect(storage).to.deep.equal({
+        'en-GB': { 'lion-hello': { greeting: 'Hi!', alternative: 'Hello!' } },
+      });
+    });
   });
 
   describe('loading via dynamic imports', () => {

package/components/localize/test/LocalizeMixin.test.js

@@ -12,7 +12,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import sinon from 'sinon';
-import { localize, LocalizeMixin } from '@lion/ui/localize.js';
+import { LocalizeMixin, getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
 import {
   fakeImport,
   localizeTearDown,
@@ -26,6 +26,8 @@ import {
  */
 
 describe('LocalizeMixin', () => {
+  const localizeManager = getLocalizeManager();
+
   afterEach(() => {
     resetFakeImport();
     localizeTearDown();
@@ -48,7 +50,7 @@ describe('LocalizeMixin', () => {
 
     setupEmptyFakeImportsFor(['my-element'], ['en-GB']);
 
-    const loadNamespaceSpy = sinon.spy(localize, 'loadNamespace');
+    const loadNamespaceSpy = sinon.spy(localizeManager, 'loadNamespace');
     await fixture(html`<${tag}></${tag}>`);
 
     expect(loadNamespaceSpy.callCount).to.equal(1);
@@ -88,7 +90,7 @@ describe('LocalizeMixin', () => {
 
     setupEmptyFakeImportsFor(['default', 'parent-element', 'child-element'], ['en-GB']);
 
-    const loadNamespaceSpy = sinon.spy(localize, 'loadNamespace');
+    const loadNamespaceSpy = sinon.spy(localizeManager, 'loadNamespace');
 
     await fixture(html`<${tag}></${tag}>`);
     expect(loadNamespaceSpy.callCount).to.equal(3);
@@ -151,7 +153,7 @@ describe('LocalizeMixin', () => {
 
     await el.localizeNamespacesLoaded;
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(onLocaleChangedSpy.callCount).to.equal(0);
 
@@ -159,7 +161,7 @@ describe('LocalizeMixin', () => {
     wrapper.appendChild(el);
 
     // Changing locale will result in onLocaleChanged to be invoked
-    localize.locale = 'ru-RU';
+    localizeManager.locale = 'ru-RU';
     await el.localizeNamespacesLoaded;
     expect(onLocaleChangedSpy.callCount).to.equal(2);
     expect(onLocaleChangedSpy.calledWithExactly('ru-RU', 'nl-NL')).to.be.true;
@@ -183,10 +185,10 @@ describe('LocalizeMixin', () => {
       onLocaleChanged(newLocale, oldLocale) {
         super.onLocaleChanged(newLocale, oldLocale);
 
-        // Can call localize.msg immediately, without having to await localize.loadingComplete
+        // Can call localizeManager.msg immediately, without having to await localizeManager.loadingComplete
         // This is because localeChanged event is fired only after awaiting loading
         // unless the user disables _autoLoadOnLocaleChange property
-        this.foo = localize.msg('my-element:foo');
+        this.foo = localizeManager.msg('my-element:foo');
       }
     }
 
@@ -198,11 +200,11 @@ describe('LocalizeMixin', () => {
     const wrapper = await fixture('<div></div>');
     wrapper.appendChild(el);
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(el.foo).to.equal('bar-nl-NL');
 
-    localize.locale = 'ru-RU';
+    localizeManager.locale = 'ru-RU';
     await el.localizeNamespacesLoaded;
     expect(el.foo).to.equal('bar-ru-RU');
   });
@@ -233,7 +235,7 @@ describe('LocalizeMixin', () => {
     await el.localizeNamespacesLoaded;
     expect(onLocaleUpdatedSpy.callCount).to.equal(1);
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(onLocaleUpdatedSpy.callCount).to.equal(2);
   });
@@ -261,7 +263,7 @@ describe('LocalizeMixin', () => {
 
       async onLocaleUpdated() {
         super.onLocaleUpdated();
-        this.label = localize.msg('my-element:label');
+        this.label = localizeManager.msg('my-element:label');
       }
     }
 
@@ -272,7 +274,7 @@ describe('LocalizeMixin', () => {
     await nextFrame(); // needed as both are added to the micro task que
     expect(el.label).to.equal('one');
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
     expect(el.label).to.equal('two');
   });
@@ -297,7 +299,7 @@ describe('LocalizeMixin', () => {
 
     el.connectedCallback();
 
-    localize.locale = 'nl-NL';
+    localizeManager.locale = 'nl-NL';
     await el.localizeNamespacesLoaded;
 
     // await next frame for requestUpdate to be fired
@@ -325,7 +327,7 @@ describe('LocalizeMixin', () => {
     const tagString = defineCE(MyElement);
     const el = /** @type {MyElement} */ (document.createElement(tagString));
     el.connectedCallback();
-    const lionLocalizeMessageSpy = sinon.spy(localize, 'msg');
+    const lionLocalizeMessageSpy = sinon.spy(localizeManager, 'msg');
 
     const messageDirective = el.msgLit('my-element:greeting');
     expect(lionLocalizeMessageSpy.callCount).to.equal(0);
@@ -442,7 +444,7 @@ describe('LocalizeMixin', () => {
     if (el.shadowRoot) {
       const p = /** @type {HTMLParagraphElement} */ (el.shadowRoot.querySelector('p'));
       expect(p.innerText).to.equal('Hi!');
-      localize.locale = 'en-US';
+      localizeManager.locale = 'en-US';
       expect(p.innerText).to.equal('Hi!');
       await el.localizeNamespacesLoaded;
       await nextFrame(); // needed because msgLit relies on until directive to re-render