auth: port to one i18next instance per component instance

packages/auth/i18next-scanner.config.js

@@ -6,6 +6,7 @@ module.exports = {
     options: {
         debug: false,
         removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
         lngs: ['en','de'],
         resource: {
             loadPath: 'src/i18n/{{lng}}/{{ns}}.json',

packages/auth/src/auth-keycloak.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import JSONLD from '@dbp-toolkit/common/jsonld';
 import  {KeycloakWrapper} from './keycloak.js';
 import {LoginStatus} from './util.js';
@@ -32,6 +32,7 @@ export class AuthKeycloak extends AdapterLitElement {
         this.entryPointUrl = '';
         this._loginStatus = LoginStatus.UNKNOWN;
         this.requestedLoginStatus = LoginStatus.UNKNOWN;
+        this._i18n = createInstance();
 
         // Keycloak config
         this.keycloakUrl = null;
@@ -49,7 +50,7 @@ export class AuthKeycloak extends AdapterLitElement {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case 'lang':
-                    i18n.changeLanguage(this.lang);
+                    this._i18n.changeLanguage(this.lang);
                 break;
                 case 'entryPointUrl':
                     // for preloading the instance

packages/auth/src/dbp-auth-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {AuthKeycloak} from './auth-keycloak.js';
@@ -14,6 +14,7 @@ export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
         this.entryPointUrl = '';
         this.auth = {};
         this.noAuth = false;
+        this._i18n = createInstance();
     }
 
     static get scopedElements() {
@@ -36,7 +37,7 @@ export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 

packages/auth/src/i18n.js

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance, setOverrides} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
+
+export {setOverrides};
\ No newline at end of file

packages/auth/src/i18n/de/translation.json

 {
   "login": "Einloggen",
-  "logout": "Ausloggen",
-  "profile": "Profil"
+  "logout": "Ausloggen"
 }

packages/auth/src/i18n/en/translation.json

 {
   "login": "Login",
-  "logout": "Logout",
-  "profile": "Profile"
+  "logout": "Logout"
 }

packages/auth/src/login-button.js

-import {i18n} 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';
@@ -56,6 +56,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
     constructor() {
         super();
         this.lang = 'de';
+        this._i18n = createInstance();
         this.auth = {};
     }
 
@@ -93,7 +94,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
 
@@ -150,6 +151,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
     }
 
     render() {
+        let i18n = this._i18n;
         if (this.auth['login-status'] === LoginStatus.LOGGING_IN) {
             // try to keep the layout the same to avoid layout shifts
             return html`