fix(Settings): Make language loader configureable (openscd#1693)

Author: clepski

packages/openscd/src/addons/Layout.ts

@@ -378,7 +378,7 @@ export class OscdLayout extends LitElement {
     `;
   }
 
-  private renderActionItem(me: MenuItem | 'divider'): TemplateResult {
+  protected renderActionItem(me: MenuItem | 'divider'): TemplateResult {
     if(me === 'divider' || !me.actionItem){ return html`` }
 
     return html`

packages/openscd/src/addons/Settings.ts

@@ -7,7 +7,7 @@ import {
   LitElement,
   css,
 } from 'lit-element';
-import { get, registerTranslateConfig, use } from 'lit-translate';
+import { get, registerTranslateConfig, Strings, use } from 'lit-translate';
 
 import '@material/mwc-button';
 import '@material/mwc-dialog';
@@ -32,7 +32,7 @@ import {
   LoadNsdocEvent,
   newLoadNsdocEvent
 } from '@openscd/core/foundation/deprecated/settings.js';
-import { languages, loader } from '../translations/loader.js';
+import { Languages, languages, loader } from '../translations/loader.js';
 
 import '../WizardDivider.js';
 import { WizardDialog } from '../wizard-dialog.js';
@@ -45,6 +45,11 @@ import {
 } from '../foundation/nsd.js';
 import { initializeNsdoc, Nsdoc } from '../foundation/nsdoc.js';
 
+interface LanguageConfig {
+  loader(lang: string): Promise<Strings>;
+  languages: Languages;
+}
+
 export const defaults: Settings = {
   language: 'en',
   theme: 'light',
@@ -84,6 +89,9 @@ export class OscdSettings extends LitElement {
   @property({ type: Boolean })
   nsdUploadButton = true;
 
+  @property({ type: Object })
+  languageConfig: LanguageConfig = { languages, loader };
+
   /**
    * Get the versions of the current OpenSCD NSD files.
    * @returns Current version, revision and release for all current OpenSCD NSD files.
@@ -333,15 +341,12 @@ export class OscdSettings extends LitElement {
     return new DOMParser().parseFromString(text, 'application/xml');
   }
 
-  constructor() {
-    super();
+  connectedCallback(): void {
+    super.connectedCallback();
 
-    registerTranslateConfig({ loader, empty: key => key });
+    registerTranslateConfig({ loader: this.languageConfig.loader, empty: key => key });
     use(this.settings.language);
-  }
 
-  connectedCallback(): void {
-    super.connectedCallback();
     if (this.host) {
       this.host!.addEventListener('oscd-settings', (evt: SettingsUIEvent) => {
         evt.detail.show ? this.settingsUI.show() : this.settingsUI.close();
@@ -365,7 +370,7 @@ export class OscdSettings extends LitElement {
             icon="language"
             label="${get('settings.language')}"
           >
-            ${Object.keys(languages).map(
+            ${Object.keys(this.languageConfig.languages).map(
               lang =>
                 html`<mwc-list-item
                   graphic="icon"

packages/openscd/src/translations/loader.ts

@@ -2,7 +2,17 @@ import { Strings } from 'lit-translate';
 import { de } from './de.js';
 import { en } from './en.js';
 import { Language } from '@openscd/core/foundation/deprecated/settings.js';
-export const languages = { en, de };
+
+export interface TranslationObject {
+  [key: string]: string | TranslationObject;
+}
+
+export interface Languages {
+  de: TranslationObject;
+  en: TranslationObject;
+}
+
+export const languages: Languages = { en, de };
 
 export type Translations = typeof en;
 

packages/plugins/test/integration/editors/__snapshots__/GooseSubscriberMessageBinding.test.snap.js

@@ -659,15 +659,15 @@ snapshots["GOOSE subscriber plugin in Publisher view with a selected GOOSE messa
 
 snapshots["GOOSE subscriber plugin in Subscriber view per default the plugin itsself looks like the latest snapshot"] = 
 `<div>
-  <mwc-formfield label="Publisher | Subscriber">
+  <mwc-formfield label="subscription.goose.view.publisherView">
     <mwc-radio
       id="goosePublisherView"
       name="view"
       value="goose"
     >
     </mwc-radio>
   </mwc-formfield>
-  <mwc-formfield label="Subscriber | Publisher">
+  <mwc-formfield label="subscription.goose.view.subscriberView">
     <mwc-radio
       checked=""
       id="gooseSubscriberView"
@@ -1187,7 +1187,7 @@ snapshots["GOOSE subscriber plugin in Subscriber view with a selected IED for pa
 
 snapshots["in Publisher view per default the plugin itself looks like the latest snapshot"] = 
 `<div>
-  <mwc-formfield label="Publisher | Subscriber">
+  <mwc-formfield label="subscription.goose.view.publisherView">
     <mwc-radio
       checked=""
       id="goosePublisherView"
@@ -1196,7 +1196,7 @@ snapshots["in Publisher view per default the plugin itself looks like the latest
     >
     </mwc-radio>
   </mwc-formfield>
-  <mwc-formfield label="Subscriber | Publisher">
+  <mwc-formfield label="subscription.goose.view.subscriberView">
     <mwc-radio
       id="gooseSubscriberView"
       name="view"

packages/plugins/test/integration/editors/__snapshots__/SMVSubscriberMessageBinding.test.snap.js

@@ -1127,7 +1127,7 @@ snapshots["Sampled Values Plugin in Subscriber view when selecting an IED and su
 
 snapshots["in Publisher view initially the plugin looks like the latest snapshot"] = 
 `<div>
-  <mwc-formfield label="Publisher | Subscriber">
+  <mwc-formfield label="subscription.smv.view.publisherView">
     <mwc-radio
       checked=""
       id="smvPublisherView"
@@ -1136,7 +1136,7 @@ snapshots["in Publisher view initially the plugin looks like the latest snapshot
     >
     </mwc-radio>
   </mwc-formfield>
-  <mwc-formfield label="Subscriber | Publisher">
+  <mwc-formfield label="subscription.smv.view.subscriberView">
     <mwc-radio
       id="smvSubscriberView"
       name="view"