language-select: add a small demo for how to override translations at runtime

Uses a separate namespace that gets used over the default one, so we can override,
but also remove the overrides again when needed.

This has the problem that all clones have the same store, so this overrides
the translations for all clones and not just the one providing the overrides.

packages/common/i18next.js

@@ -50,19 +50,26 @@ export function humanFileSize(bytes, si = false) {
  * @param {object} languages - Mapping from languages to translation objects
  * @param {string} lng - The default language
  * @param {string} fallback - The fallback language to use for unknown languages or untranslated keys
+ * @param {string} [namespace] - The i18next namespace to load, defaults to 'translation'
  * @returns {i18next.i18n} A new independent i18next instance
  */
-export function createInstance(languages, lng, fallback) {
+export function createInstance(languages, lng, fallback, namespace) {
+    if (namespace === undefined)
+        namespace = 'translation';
+
     var options = {
         lng: lng,
         fallbackLng: fallback,
         debug: false,
+        ns: [namespace + '-override'],
+        defaultNS: namespace + '-override',
+        fallbackNS: [namespace],
         initImmediate: false, // Don't init async
         resources: {},
     };
 
     Object.keys(languages).forEach(function(key) {
-        options['resources'][key] = {translation: languages[key]};
+        options['resources'][key] = {[namespace]: languages[key]};
     });
 
     var i18n = i18next.createInstance();

packages/language-select/src/dbp-language-select-demo.js

@@ -4,13 +4,39 @@ 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';
 
+// This is an example on how to override translations at runtime
+let OVERRIDES = {
+    'de': {
+        'translation': {
+            'demo': 'Überschrieben'
+        }
+    },
+    'en': {
+        'translation': {
+            'demo': 'Overridden'
+        }
+    }
+};
+
+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);
     }
 
     static get properties() {
@@ -19,8 +45,18 @@ class LanguageSelectDisplay extends AdapterLitElement {
         };
     }
 
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            switch (propName) {
+                case 'lang':
+                    this._i18n.changeLanguage(this.lang);
+            }
+        });
+        super.update(changedProperties);
+    }
+
     render() {
-        return html`${this.lang}`;
+        return html`<b>${this.lang}: ${this._i18n.t('demo')}</b>`;
     }
 }
 

packages/language-select/src/i18n/de/translation.json

@@ -2,5 +2,6 @@
   "de": "Deutsch",
   "en": "Englisch",
   "de-action": "Auf Deutsch anzeigen",
-  "en-action": "Auf Englisch anzeigen"
+  "en-action": "Auf Englisch anzeigen",
+  "demo": "Hallo Welt"
 }

packages/language-select/src/i18n/en/translation.json

@@ -2,5 +2,6 @@
   "de": "German",
   "en": "English",
   "de-action": "Switch to German",
-  "en-action": "Switch to English"
+  "en-action": "Switch to English",
+  "demo": "Hello World"
 }