From 4e40673b1fa13f9830a90c3da860e78b1d740029 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 1 Jul 2021 16:19:55 +0200
Subject: [PATCH] app-shell: one i18next instance per element
---
packages/app-shell/src/app-shell.js | 22 +++++++++----------
packages/app-shell/src/auth-menu-button.js | 12 +++++-----
.../app-shell/src/dbp-activity-example.js | 10 ++++-----
.../app-shell/src/dbp-app-shell-welcome.js | 10 ++++-----
packages/app-shell/src/i18n.js | 8 +++----
5 files changed, 30 insertions(+), 32 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index bf2bab5e..864ae525 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -1,4 +1,4 @@
-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});
});
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index ce8e9fc1..a122cb82 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -1,4 +1,4 @@
-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"
diff --git a/packages/app-shell/src/dbp-activity-example.js b/packages/app-shell/src/dbp-activity-example.js
index 850a73c2..e126445b 100644
--- a/packages/app-shell/src/dbp-activity-example.js
+++ b/packages/app-shell/src/dbp-activity-example.js
@@ -1,14 +1,13 @@
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>
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index 2397905b..52acdf77 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/packages/app-shell/src/dbp-app-shell-welcome.js
@@ -1,16 +1,15 @@
-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 = [];
diff --git a/packages/app-shell/src/i18n.js b/packages/app-shell/src/i18n.js
index 8124af26..0c6fedc8 100644
--- a/packages/app-shell/src/i18n.js
+++ b/packages/app-shell/src/i18n.js
@@ -1,10 +1,8 @@
-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');
}
--
GitLab