language-select: Port to new translation overrides API

We need a separate i18next instance per component instance and
call setOverrides() to override the translations.

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',

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() {

packages/language-select/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/language-select/src/language-select.js

 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>
         `;