Add session storage support to improve translation runtime

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

-import {createInstance} from './i18n.js';
+import {createInstance, fetchOverridestoSessionStorage} from './i18n.js';
 import {html, css} from 'lit';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {LanguageSelect} from '@dbp-toolkit/language-select';
@@ -168,6 +168,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         this.metadata = metadata;
         this.routes = routes;
 
+        // fetch translations
+        for(let lng of this._i18n.languages) {
+          fetchOverridestoSessionStorage(this.langDir, lng);
+        }
+
         // Switch to the first route if none is selected
         if (!this.activeView) this.switchComponent(routes[0]);
         else this.switchComponent(this.activeView);

packages/app-shell/src/i18n.js

-import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance, fetchOverridestoSessionStorage} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
@@ -6,3 +6,5 @@ import en from './i18n/en/translation.json';
 export function createInstance() {
     return _createInstance({en: en, de: de}, 'de', 'en');
 }
+
+export {fetchOverridestoSessionStorage}

packages/common/i18next.js

@@ -134,6 +134,16 @@ async function fetchOverridesByLanguage(overrides, lng) {
   return json;
 }
 
+export async function fetchOverridestoSessionStorage(overridesFile, lng) {
+  // use local cache for translation file
+  if (sessionStorage.getItem("translation-overrides-" + lng) === null) {
+    // get translation.json for each lang
+    let response = await fetchOverridesByLanguage(overridesFile, lng);
+    sessionStorage.setItem("translation-overrides-" + lng, JSON.stringify(response));
+
+  }
+}
+
 /**
  * Sets translation overrides for the given i18next instance. Any previously
  * applied overrides will be removed first. So calling this with an empty overrides
@@ -143,7 +153,7 @@ async function fetchOverridesByLanguage(overrides, lng) {
  * @param {HTMLElement} element - The element at which the overrides are targeted
  * @param {string} overridesFile - Path to the translation file containing the overrides
  */
-export async function setOverridesByFile(i18n, element, overridesFile) {
+export async function setOverridesByFile(i18n, element, overridesFile, keyName) {
     // We add a special namespace which gets used with priority and falls back
     // to the original one. This way we an change the overrides at runtime
     // and can even remove them.
@@ -154,18 +164,24 @@ export async function setOverridesByFile(i18n, element, overridesFile) {
     let overrideNamespace = getOverrideNamespace(namespace);
     let hasOverrides = false;
     for (let lng of i18n.languages) {
-        // get translation.json for each lang
-        let response = await fetchOverridesByLanguage(overridesFile, lng);
+
+        await fetchOverridestoSessionStorage(overridesFile, lng);
+
+        let response = JSON.parse(sessionStorage.getItem("translation-overrides-" + lng));
+
         // remove old language
         i18n.removeResourceBundle(lng, overrideNamespace);
         // if no new translation is available, skip
         if (response === undefined || response[tagName] === undefined) return;
         // get new translation
-        let resources = response[tagName];
+        let resource = {};
+        resource[keyName] = response[tagName][keyName];
         hasOverrides = true;
+
         // set new translation
-        i18n.addResourceBundle(lng, overrideNamespace, resources);
-        i18n.setDefaultNamespace(hasOverrides ? overrideNamespace : namespace);
+        i18n.addResourceBundle(lng, overrideNamespace, resource);
     }
+
+    i18n.setDefaultNamespace(hasOverrides ? overrideNamespace : namespace);
     return i18n;
 }

packages/common/src/translation.js

@@ -35,7 +35,6 @@ export class Translation extends DBPLitElement {
 
     connectedCallback() {
       super.connectedCallback();
-
       // init objects with empty string as value for key
       const de = {};
       const en = {};
@@ -44,13 +43,14 @@ export class Translation extends DBPLitElement {
 
       // create i18n instance with given translations
       this._i18n = createInstanceGivenResources(en, de);
-
-      // after init of overrides re-render page
       let local = this;
       if (this.langDir) {
-        setOverridesByFile(this._i18n, this, this.langDir).then(function(response) {
+
+        // after init of overrides re-render page
+        setOverridesByFile(this._i18n, this, this.langDir, this.key).then(function(response) {
             local.requestUpdate();
         });
+
       }
     }
 
@@ -78,12 +78,12 @@ export class Translation extends DBPLitElement {
             return this._i18n.t(this.key);
         })();
 
-        // if translation == "", key was not found
+        // if translation == "" key was not found
         let key = "";
         if (translation != "") {
           key = unsafeHTML("<!-- key: " + this.key + "-->");
         } else {
-          key = unsafeHTML("<!-- key: " + this.key + " not found! -->");
+          key = unsafeHTML("<!-- key \"" + this.key + "\" not found! -->");
         }
 
         // load translation text