From 50ed61d55a4b09e568875c17b51aa160939568a2 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 10 Jun 2021 16:03:08 +0200
Subject: [PATCH] language-select: Port to new translation overrides API
We need a separate i18next instance per component instance and
call setOverrides() to override the translations.
---
.../language-select/i18next-scanner.config.js | 1 +
.../src/dbp-language-select-demo.js | 16 +++-------------
packages/language-select/src/i18n.js | 8 ++++++--
packages/language-select/src/language-select.js | 16 +++++++++-------
4 files changed, 19 insertions(+), 22 deletions(-)
diff --git a/packages/language-select/i18next-scanner.config.js b/packages/language-select/i18next-scanner.config.js
index 8c277798..aeb8fdb6 100644
--- a/packages/language-select/i18next-scanner.config.js
+++ b/packages/language-select/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',
diff --git a/packages/language-select/src/dbp-language-select-demo.js b/packages/language-select/src/dbp-language-select-demo.js
index 2bbf7395..cabad2ed 100644
--- a/packages/language-select/src/dbp-language-select-demo.js
+++ b/packages/language-select/src/dbp-language-select-demo.js
@@ -4,7 +4,7 @@ import * as commonUtils from '@dbp-toolkit/common/utils';
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
import {Provider} from "@dbp-toolkit/provider";
-import {i18n} from './i18n.js';
+import {createInstance, setOverrides} from './i18n.js';
// This is an example on how to override translations at runtime
let OVERRIDES = {
@@ -20,23 +20,13 @@ let OVERRIDES = {
}
};
-function applyOverrides(i18n, namespace, overrides) {
- for(let lang of Object.keys(overrides)) {
- let data = overrides[lang][namespace];
- if (data !== undefined) {
- i18n.addResourceBundle(lang, namespace + '-override', data);
- }
- }
-}
-
class LanguageSelectDisplay extends AdapterLitElement {
constructor() {
super();
this.lang = 'de';
- this._i18n = i18n.cloneInstance();
- // FIXME: this overrides the translations for all clones
- applyOverrides(this._i18n, 'translation', OVERRIDES);
+ this._i18n = createInstance();
+ setOverrides(this._i18n, OVERRIDES);
}
static get properties() {
diff --git a/packages/language-select/src/i18n.js b/packages/language-select/src/i18n.js
index 498d9f03..fbc1b032 100644
--- a/packages/language-select/src/i18n.js
+++ b/packages/language-select/src/i18n.js
@@ -1,6 +1,10 @@
-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
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 2ab2f3ca..b5f06f21 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -1,8 +1,9 @@
import {html, css} from 'lit-element';
-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
import * as commonStyles from '@dbp-toolkit/common/styles';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
+
/**
* Emits a dbp-language-changed event where event.detail.lang is the new selected language
*/
@@ -13,11 +14,12 @@ export class LanguageSelect extends AdapterLitElement {
this._lang = 'de';
this.languages = ['de', 'en'];
+ this._i18n = createInstance();
// for the i18next scanner
- i18n.t('de');
- i18n.t('de-action');
- i18n.t('en');
- i18n.t('en-action');
+ this._i18n.t('de');
+ this._i18n.t('de-action');
+ this._i18n.t('en');
+ this._i18n.t('en-action');
}
_getNextLanguage(lang) {
@@ -58,7 +60,7 @@ export class LanguageSelect extends AdapterLitElement {
// Unlike other cases we use the next language for the translations so that
// users not knowing the current language can understand it.
// In case of more than two this doesn't make that much sense, but for now..
- i18n.changeLanguage(this.next);
+ this._i18n.changeLanguage(this.next);
}
}
@@ -106,7 +108,7 @@ export class LanguageSelect extends AdapterLitElement {
}
render() {
- var linkTitle = i18n.t(this.next + '-action');
+ var linkTitle = this._i18n.t(this.next + '-action');
return html`
<a href="#" title="${linkTitle}" @click=${this.onClick}>${this.next.toUpperCase()}</a>
`;
--
GitLab