app-shell: one i18next instance per element

packages/app-shell/src/app-shell.js

-import {createI18nInstance} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {html, css} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {LanguageSelect} from '@dbp-toolkit/language-select';
@@ -15,18 +15,16 @@ import {appWelcomeMeta} from './dbp-app-shell-welcome.js';
 import {MatomoElement} from "@dbp-toolkit/matomo/src/matomo";
 import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 
-
-const i18n = createI18nInstance();
-
 /**
  * In case the application gets updated future dynamic imports might fail.
  * This sends a notification suggesting the user to reload the page.
  *
- * uage: importNotify(import('<path>'));
+ * usage: importNotify(import('<path>'));
  *
+ * @param i18n
  * @param {Promise} promise
  */
-const importNotify = async (promise) => {
+const importNotify = async (i18n, promise) => {
     try {
         return await promise;
     } catch (error) {
@@ -43,7 +41,6 @@ const importNotify = async (promise) => {
 export class AppShell extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = i18n.language;
         this.activeView = '';
         this.entryPointUrl = '';
         this.subtitle = '';
@@ -62,6 +59,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         this.buildTime = '';
         this._loginStatus = 'unknown';
         this._roles = [];
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
 
         this.matomoUrl = '';
         this.matomoSiteId = -1;
@@ -271,7 +270,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
      */
     updateLangIfChanged(lang) {
         // in case the language is unknown, fall back to the default
-        if (!i18n.languages.includes(lang)) {
+        if (!this._i18n.languages.includes(lang)) {
             lang = this.lang;
         }
         if (this.lang !== lang) {
@@ -287,10 +286,9 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case 'lang':
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     // For screen readers
                     document.documentElement.setAttribute("lang", this.lang);
-                    i18n.changeLanguage(this.lang);
 
                     this.router.update();
                     this.subtitle = this.activeMetaDataText("short_name");
@@ -420,7 +418,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             return;
         }
 
-        importNotify(import(metadata.module_src)).then(() => {
+        importNotify(this._i18n, import(metadata.module_src)).then(() => {
             updateFunc();
         }).catch((e) => {
             console.error(`Error loading ${ metadata.element }`);
@@ -836,6 +834,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
     }
 
     render() {
+        let i18n = this._i18n;
+
         const getSelectClasses = (name => {
             return classMap({selected: this.activeView === name});
         });

packages/app-shell/src/auth-menu-button.js

-import {createI18nInstance} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {html, css} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
@@ -7,14 +7,12 @@ import {Icon} from '@dbp-toolkit/common';
 import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
 import {LoginStatus} from "@dbp-toolkit/auth/src/util";
 
-
-const i18n = createI18nInstance();
-
 export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.showImage = false;
         this.auth = {};
 
@@ -82,7 +80,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 
@@ -246,6 +244,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     renderLoggedIn() {
+        const i18n = this._i18n;
         const person = this.auth.person;
         const imageURL = (this.showImage && person && person.image) ? person.image : null;
 
@@ -270,6 +269,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     renderLoggedOut() {
+        const i18n = this._i18n;
         let loginSVG = `
         <svg
            viewBox="0 0 100 100"

packages/app-shell/src/dbp-activity-example.js

 import {html , LitElement} from 'lit-element';
-import {createI18nInstance} from './i18n.js';
+import {createInstance} from './i18n.js';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 
-const i18n = createI18nInstance();
-
 class ActivityExample extends LitElement {
 
     constructor() {
         super();
-        this.lang = i18n.language;
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     static get properties() {
@@ -21,7 +20,7 @@ class ActivityExample extends LitElement {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case "lang":
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                     break;
             }
         });
@@ -30,6 +29,7 @@ class ActivityExample extends LitElement {
     }
 
     render() {
+        const i18n = this._i18n;
         return html`
             <h3>${i18n.t('activity-example.hello-world')}</h3>
             <ul>${(Array.from(Array(100).keys())).map(i => html`<li>${i18n.t('activity-example.hello-world') + ' ' + i}</li>`)}</ul>

packages/app-shell/src/dbp-app-shell-welcome.js

-import {createI18nInstance} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html, LitElement} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 
-const i18n = createI18nInstance();
-
 class AppShellWelcome extends ScopedElementsMixin(LitElement) {
 
     constructor() {
         super();
-        this.lang = i18n.language;
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
 
         this._onVisibilityChanged = this._onVisibilityChanged.bind(this);
     }
@@ -28,7 +27,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 
@@ -75,6 +74,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
     }
 
     render() {
+        const i18n = this._i18n;
         const app = AppShellWelcome._app;
         let itemTemplates = [];
 

packages/app-shell/src/i18n.js

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-const i18n = createInstance({en: en, de: de}, 'de', 'en');
-
-export function createI18nInstance () {
-    return i18n.cloneInstance();
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
 }