Rename lang-files to lang-dir, remove unnecessary attributes

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

@@ -74,8 +74,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
         this.initateOpenMenu = false;
 
         this.auth = {};
-        this.langFiles = '';
-        this.overrideFiles = '';
+        this.langDir = '';
     }
 
     static get scopedElements() {
@@ -273,8 +272,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
             buildTime: {type: String, attribute: 'build-time'},
             env: {type: String},
             auth: {type: Object},
-            langFiles: {type: String, attribute: 'lang-files'},
-            overrideFiles: {type: String, attribute: 'override-files'},
+            langDir: {type: String, attribute: 'lang-dir'},
         };
     }
 

packages/common/dbp-common-demo.js

@@ -302,10 +302,8 @@ html {
                         </dbp-translated>
                     </div>
                     <div class="control" id="dbp-translation-demo">
-                        <p><dbp-translation key="toolkit-showcase" subscribe="lang, lang-files"></dbp-translation></p>
-                        <p><dbp-translation key="toolkit-showcase" subscribe="lang, lang-files, override-files"></dbp-translation></p>
-                        <p><dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-files" unsafe></dbp-translation></p>
-                        <p><dbp-translation key="toolkit-showcase-link" var='{"link1": "https://dbp-demo.tugraz.at/"}' subscribe="lang, lang-files, override-files" unsafe></dbp-translation></p>
+                        <dbp-translation key="toolkit-showcase" subscribe="lang, lang-dir"></dbp-translation>
+                        <dbp-translation key="toolkit-showcase-link" var='{"link1": "https://www.i18next.com/translation-function/interpolation"}' subscribe="lang, lang-dir" unsafe></dbp-translation>
                     </div>
                 </div>
             </section>

packages/common/src/i18n.js

@@ -7,30 +7,8 @@ export function createInstance() {
     return _createInstance({en: en, de: de}, 'de', 'en');
 }
 
-export async function createInstanceAsync(langFile, namespace) {
-    if (namespace == undefined)
-      namespace = 'translation';
-    // check if a path to language files is given
-    if(langFile) {
-
-      // request german lang file asynchronously
-      let result = await
-          fetch(langFile + 'de/' + namespace +'.json', {
-              headers: {'Content-Type': 'application/json'},
-          });
-      const dynDe = await result.json();
-
-      // request english lang file asynchronously
-      result = await
-          fetch(langFile + 'en/' + namespace + '.json', {
-              headers: {'Content-Type': 'application/json'},
-          });
-      const dynEn = await result.json();
-
-      return _createInstance({en: dynEn, de: dynDe}, 'de', 'en', namespace);
-    }
-
-    return _createInstance({en: en, de: de}, 'de', 'en', namespace);
+export function createInstanceGivenResources(en, de) {
+    return _createInstance({en: en, de: de}, 'de', 'en');
 }
 
 export {setOverridesByFile};

packages/common/src/translation.js

 import {css, html} from 'lit';
-import {until} from 'lit/directives/until.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import DBPLitElement from '../dbp-lit-element';
-import {createInstanceAsync, setOverridesByFile} from './i18n.js';
+import {createInstanceGivenResources, setOverridesByFile} from './i18n.js';
 
 export class Translation extends DBPLitElement {
     constructor() {
         super();
         this.key = '';
         this.lang = '';
-        this.langFiles = '';
         this.interpolation = '';
-        this.namespace = '';
-        this.overrideFiles = '';
+        this.langDir = '';
     }
 
     static get properties() {
@@ -20,11 +17,9 @@ export class Translation extends DBPLitElement {
             ...super.properties,
             key: {type: String},
             lang: {type: String},
-            langFiles: {type: String, attribute: 'lang-files'},
             interpolation: {type: Object, attribute: 'var'},
             unsafe: {type: Boolean, attribute: 'unsafe'},
-            namespace: {type: String, attribute: 'ns'},
-            overrideFiles: {type: String, attribute: 'override-files'},
+            langDir: {type: String, attribute: 'lang-dir'},
         };
     }
 
@@ -39,23 +34,22 @@ export class Translation extends DBPLitElement {
 
     connectedCallback() {
       super.connectedCallback();
-      if (this.namespace == '') {
-        this._i18n = createInstanceAsync(this.langFiles);
-      }
-      else {
-        this._i18n = createInstanceAsync(this.langFiles, this.namespace);
-      }
 
-      let local = this;
-      let overrideFiles = this.overrideFiles;
+      // init objects with empty string as value for key
+      const de = {};
+      const en = {};
+      de[this.key] = "";
+      en[this.key] = "";
 
-      if (this.overrideFiles) {
-        this._i18n.then(function(response) {
-          setOverridesByFile(response, local, overrideFiles).then(function(response) {
-              local._i18n = response;
+      // create i18n instance with given translations
+      this._i18n = createInstanceGivenResources(en, de);
+
+      // after init of overrides rerender page
+      let local = this;
+      if (this.langDir) {
+        setOverridesByFile(this._i18n, this, this.langDir).then(function(response) {
             local.requestUpdate();
         });
-        });
       }
     }
 
@@ -64,9 +58,7 @@ export class Translation extends DBPLitElement {
         changedProperties.forEach((oldValue, propName) => {
             switch (propName) {
                 case 'lang':
-                    Promise.resolve(this._i18n).then(function(response) {
-                      response.changeLanguage(lang);
-                    });
+                    this._i18n.changeLanguage(lang);
                     break;
             }
         });
@@ -75,24 +67,19 @@ export class Translation extends DBPLitElement {
     }
 
     render() {
-        // save global key in local variable for async use
-        let key = this.key;
-        let interpolation = this.interpolation;
-        let unsafe = this.unsafe;
-
-        // async request to i18n translation
-        const translation = Promise.resolve(this._i18n).then(function(response){
-          if (interpolation && unsafe)
-            return unsafeHTML(response.t(key, interpolation));
-          else if (interpolation)
-            return response.t(key, interpolation);
+        // request to i18n translation
+        const translation = (() => {
+          if (this.interpolation && this.unsafe)
+            return unsafeHTML(this._i18n.t(this.key, this.interpolation));
+          else if (this.interpolation)
+            return this._i18n.t(this.key, this.interpolation);
           else
-            return response.t(key);
-        });
+            return this._i18n.t(this.key);
+        })();
 
-        // load translation text when available, otherwise display "Loading.."
+        // load translation text
         return html`
-            ${until(translation, html`Loading..`)}
+            ${translation}
         `;
     }
 }

toolkit-showcase/assets/common.metadata.json

@@ -14,5 +14,5 @@
         "de": "Gemeinsame Web Components",
         "en": "Common web components"
     },
-    "subscribe": "lang,entry-point-url,lang-files"
+    "subscribe": "lang,entry-point-url"
 }

toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs

@@ -113,8 +113,7 @@
 <<%= name %>
     provider-root
     lang="de"
-    lang-files="<%= getPrivateUrl('i18n/') %>"
-    override-files="<%= getPrivateUrl('i18n/overrides/') %>"
+    lang-dir="<%= getPrivateUrl('translation-overrides/') %>"
     entry-point-url="<%= entryPointURL %>"
     nextcloud-auth-url="<%= nextcloudWebAppPasswordURL %>"
     nextcloud-web-dav-url="<%= nextcloudWebDavURL %>"

toolkit-showcase/assets/i18n/de/translation.json

-{
-    "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
-    "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden."
-}

toolkit-showcase/assets/i18n/en/translation.json

-{
-    "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
-    "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping."
-}

toolkit-showcase/assets/i18n/overrides/de/translation.json

-{
-    "dbp-translation": {
-      "toolkit-showcase": "Überschriebener i18n toolkit-showcase Text",
-      "toolkit-showcase-link": "Überschriebener i18n toolkit-showcase-link Text mit <a href=\"{{- link1}}\">TestLink</a>"
-    }
-}

toolkit-showcase/assets/i18n/overrides/en/translation.json

-{
-    "dbp-translation": {
-      "toolkit-showcase": "Overriden i18n toolkit-showcase text",
-      "toolkit-showcase-link": "Overriden i18n toolkit-showcase-link text with a <a href=\"{{- link1}}\">test link</a>"
-    }
-}

toolkit-showcase/assets/translation-overrides/de/translation.json

+{
+    "dbp-translation": {
+      "toolkit-showcase": "Dieser Text wird mithilfe von i18n aus einer benutzerdefinierten Sprachdatei gelesen und ins Englische übersetzt wenn man die Sprache auf Englisch stellt.",
+      "toolkit-showcase-link": "Es können sogar links mittels <a href=\"{{- link1}}\">interpolation</a> und escaping dargestellt werden."
+    }
+}

toolkit-showcase/assets/translation-overrides/en/translation.json

+{
+    "dbp-translation": {
+      "toolkit-showcase": "This text will be translated to german using i18n with a user defined language file when the language is changed to german.",
+      "toolkit-showcase-link": "Furthermore its possible to display links through <a href=\"{{- link1}}\">interpolation</a> and escaping."
+    }
+}

toolkit-showcase/rollup.config.js

@@ -168,7 +168,7 @@ Dependencies:
                     {src: 'assets/icon-*.png', dest: 'dist/' + (await getDistPath(pkg.name))},
                     {src: 'assets/apple-*.png', dest: 'dist/' + (await getDistPath(pkg.name))},
                     {src: 'assets/safari-*.svg', dest: 'dist/' + (await getDistPath(pkg.name))},
-                    {src: 'assets/i18n', dest: 'dist/' + (await getDistPath(pkg.name))},
+                    {src: 'assets/translation-overrides', dest: 'dist/' + (await getDistPath(pkg.name))},
                     {
                         src: 'assets/manifest.json',
                         dest: 'dist',

toolkit-showcase/src/dbp-common-demo-activity.js

@@ -13,7 +13,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
         super();
         this.lang = 'en';
         this.entryPointUrl = '';
-        this.langFiles = '';
     }
 
     static get scopedElements() {
@@ -26,7 +25,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
         return {
             ...super.properties,
             lang: {type: String},
-            langFiles: {type: String, attribute: 'lang-files'},
             entryPointUrl: {type: String, attribute: 'entry-point-url'},
         };
     }
@@ -65,7 +63,6 @@ class DbpCommonDemoActivity extends ScopedElementsMixin(AdapterLitElement) {
             <dbp-common-demo
                 id="demo"
                 lang="${this.lang}"
-                lang-files="${this.langFiles}"
                 entry-point-url="${this.entryPointUrl}"></dbp-common-demo>
         `;
     }