package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "test": "lerna run test",
     "build": "lerna run build",
+    "i18next": "lerna run i18next",
     "version-patch": "lerna version patch",
     "version-minor": "lerna version minor",
     "version": "lerna version",

packages/app-shell/i18next-scanner.config.js

+module.exports = {
+    input: [
+        'src/*.js',
+    ],
+    output: './',
+    options: {
+        debug: false,
+        removeUnusedKeys: true,
+        func: {list: ['i18n.t', '_i18n.t']},
+        lngs: ['en','de'],
+        resource: {
+            loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
+            savePath: 'src/i18n/{{lng}}/{{ns}}.json'
+        },
+    },
+}

packages/app-shell/package.json

@@ -31,7 +31,8 @@
     "rollup-plugin-copy": "^3.1.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-emit-ejs": "^3.1.0",
-    "rollup-plugin-serve": "^1.0.1"
+    "rollup-plugin-serve": "^1.0.1",
+    "i18next-scanner": "^3.0.0"
   },
   "dependencies": {
     "@dbp-toolkit/auth": "^0.2.2",
@@ -47,6 +48,7 @@
     "universal-router": "^9.0.1"
   },
   "scripts": {
+    "i18next": "i18next-scanner",
     "build": "npm run build-local",
     "build-local": "rollup -c",
     "build-test": "rollup -c --environment BUILD:test",

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');
 }
-
-/**
- * Dummy function to mark strings as i18next keys for i18next-scanner
- *
- * @param {string} key
- * @returns {string} The key param as is
- */
-export function i18nKey(key) {
-    return key;
-}
\ No newline at end of file

packages/app-shell/src/i18n/de/translation.json

@@ -12,10 +12,10 @@
     "hello-world": "Hallo Welt"
   },
   "welcome": {
-      "headline": "Willkommen bei der Applikation '{{appname}}'."
+    "headline": "Willkommen bei der Applikation '{{appname}}'."
   },
   "login": "Einloggen",
   "logout": "Ausloggen",
   "page-not-found": "Die gewünschte Seite wurde nicht gefunden",
   "choose-from-menu": "Bitte wählen Sie eine Aktivität aus dem Menu."
-}
+}
\ No newline at end of file

packages/app-shell/src/i18n/en/translation.json

@@ -12,7 +12,7 @@
     "hello-world": "Hello World"
   },
   "welcome": {
-      "headline": "Welcome to the '{{appname}}' application."
+    "headline": "Welcome to the '{{appname}}' application."
   },
   "login": "Login",
   "logout": "Logout",

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

 import {html, css} from 'lit-element';
 import * as commonStyles from '@dbp-toolkit/common/styles';
-import {createI18nInstance} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
 
-const i18n = createI18nInstance();
-
 export class TUGrazLogo extends AdapterLitElement {
 
     constructor() {
         super();
 
-        this.lang = i18n.language;
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     static get properties() {
@@ -23,7 +22,7 @@ export class TUGrazLogo extends AdapterLitElement {
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
             if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+                this._i18n.changeLanguage(this.lang);
             }
         });
         super.update(changedProperties);
@@ -67,6 +66,7 @@ export class TUGrazLogo extends AdapterLitElement {
     } 
 
     render() {
+        const i18n = this._i18n;
         return html`
             <a href="https://www.tugraz.at" title="TU Graz Home" target="_blank" rel="noopener">
                 <div id="claim">

packages/auth/i18next-scanner.config.js

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

packages/auth/src/auth-keycloak.js

@@ -20,7 +20,6 @@ import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
 export class AuthKeycloak extends AdapterLitElement {
     constructor() {
         super();
-        this.lang = 'de';
         this.forceLogin = false;
         this.loadPerson = false;
         this.token = "";
@@ -33,6 +32,7 @@ export class AuthKeycloak extends AdapterLitElement {
         this._loginStatus = LoginStatus.UNKNOWN;
         this.requestedLoginStatus = LoginStatus.UNKNOWN;
         this._i18n = createInstance();
+        this.lang = this._i18n.language;
 
         // Keycloak config
         this.keycloakUrl = null;

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

@@ -10,11 +10,11 @@ import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
 export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
         this.entryPointUrl = '';
         this.auth = {};
         this.noAuth = false;
         this._i18n = createInstance();
+        this.lang = this._i18n.language;
     }
 
     static get scopedElements() {

packages/auth/src/i18n.js

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

packages/auth/src/login-button.js

@@ -55,8 +55,8 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
 
     constructor() {
         super();
-        this.lang = 'de';
         this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.auth = {};
     }
 

packages/check-in-place-select/src/check-in-place-select.js

@@ -25,7 +25,6 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
     constructor() {
         super();
         Object.assign(CheckInPlaceSelect.prototype, errorUtils.errorMixin);
-        this.lang = 'de';
         this.entryPointUrl = '';
         this.jsonld = null;
         this.$select = null;
@@ -42,6 +41,7 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
         this.showCapacity = false;
         this.auth = {};
         this._i18n = createInstance();
+        this.lang = this._i18n.language;
 
         this._onDocumentClicked = this._onDocumentClicked.bind(this);
     }

packages/check-in-place-select/src/dbp-check-in-place-select-demo.js

@@ -5,11 +5,14 @@ import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 import * as commonStyles from '@dbp-toolkit/common/styles';
 import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
+import {createInstance} from './i18n.js';
+
 
 export class CheckInPlaceSelectDemo extends ScopedElementsMixin(DBPLitElement) {
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.noAuth = false;
     }