From 578885bad400b70bcd43864743eae794b8398abd Mon Sep 17 00:00:00 2001 From: Manuel Kocher <manuel.kocher@tugraz.at> Date: Tue, 14 Jun 2022 11:46:19 +0200 Subject: [PATCH] Move translation caching to i18next.js --- packages/common/i18next.js | 38 ++++++++++++++++++++++++++---- packages/common/src/i18n.js | 4 ++-- packages/common/src/translation.js | 31 ++---------------------- 3 files changed, 38 insertions(+), 35 deletions(-) diff --git a/packages/common/i18next.js b/packages/common/i18next.js index d72b9abc..bf7b673c 100644 --- a/packages/common/i18next.js +++ b/packages/common/i18next.js @@ -1,5 +1,31 @@ import i18next from 'i18next'; +// global variable as cache for translations +const translationCache = {}; + +// fetches overrides for given language +async function fetchOverridesByLanguage(overrides, lng) { + let result = await + fetch(overrides + lng +'/translation.json', { + headers: {'Content-Type': 'application/json'}, + }); + let json = await result.json(); + return json; +} + +// handles translation cache promises +async function cacheOverrides(overridesFile, lng) { + // use global var as cache + if (translationCache[lng] === undefined) { + // get translation.json for each lang + let response = fetchOverridesByLanguage(overridesFile, lng); + translationCache[lng] = response; + return response; + } else { + return translationCache[lng]; + } +} + /** * Like Intl.DateTimeFormat().format() but uses the current language as locale. * @@ -135,21 +161,25 @@ export function setOverrides(i18n, element, overrides) { * @param {HTMLElement} element - The element at which the overrides are targeted * @param {object} overrides - The override data as promise */ -export async function setOverridesByPromise(i18n, element, overrides) { +export async function setOverridesByGlobalCache(i18n, element) { // 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. + + // The scoped mixin saves the real tag name under data-tag-name let tagName = ((element.dataset && element.dataset.tagName) || element.tagName).toLowerCase(); let namespace = i18n.options.fallbackNS; let overrideNamespace = getOverrideNamespace(namespace); let hasOverrides = false; + console.log(element.langDir); for (let lng of i18n.languages) { - overrides[lng] = await overrides[lng]; + cacheOverrides(element.langDir, lng); + translationCache[lng] = await translationCache[lng]; i18n.removeResourceBundle(lng, overrideNamespace); - if (overrides[lng] === undefined || overrides[lng][tagName] === undefined) continue; - let resources = overrides[lng][tagName]; + if (translationCache[lng] === undefined || translationCache[lng][tagName] === undefined) continue; + let resources = translationCache[lng][tagName]; hasOverrides = true; i18n.addResourceBundle(lng, overrideNamespace, resources); } diff --git a/packages/common/src/i18n.js b/packages/common/src/i18n.js index 1db56149..ec940db5 100644 --- a/packages/common/src/i18n.js +++ b/packages/common/src/i18n.js @@ -1,4 +1,4 @@ -import {createInstance as _createInstance, setOverridesByPromise} from '../i18next.js'; +import {createInstance as _createInstance, setOverridesByGlobalCache} from '../i18next.js'; import de from './i18n/de/translation.json'; import en from './i18n/en/translation.json'; @@ -11,4 +11,4 @@ export function createInstanceGivenResources(en, de) { return _createInstance({en: en, de: de}, 'de', 'en'); } -export {setOverridesByPromise}; +export {setOverridesByGlobalCache}; diff --git a/packages/common/src/translation.js b/packages/common/src/translation.js index 07bb756e..3c71fdfb 100644 --- a/packages/common/src/translation.js +++ b/packages/common/src/translation.js @@ -1,33 +1,7 @@ import {css, html} from 'lit'; import {unsafeHTML} from 'lit/directives/unsafe-html.js'; import DBPLitElement from '../dbp-lit-element'; -import {createInstanceGivenResources, setOverridesByPromise} from './i18n.js'; - -// global variable as cache for translations -const translationCache = {}; - -// fetches overrides for given language -async function fetchOverridesByLanguage(overrides, lng) { - let result = await - fetch(overrides + lng +'/translation.json', { - headers: {'Content-Type': 'application/json'}, - }); - let json = await result.json(); - return json; -} - -// handles translation cache promises -async function cacheOverrides(overridesFile, lng) { - // use global var as cache - if (translationCache[lng] === undefined) { - // get translation.json for each lang - let response = fetchOverridesByLanguage(overridesFile, lng); - translationCache[lng] = response; - return response; - } else { - return translationCache[lng]; - } -} +import {createInstanceGivenResources, setOverridesByGlobalCache} from './i18n.js'; export class Translation extends DBPLitElement { constructor() { @@ -72,8 +46,7 @@ export class Translation extends DBPLitElement { if (this.langDir) { for(let lng of this._i18n.languages) { - cacheOverrides(this.langDir, lng); - setOverridesByPromise(this._i18n, this, translationCache); + setOverridesByGlobalCache(this._i18n, this); } } } -- GitLab