feat: use logger pattern for translator (#145)

* feat: implement factory pattern for translator WIP

* test: remove componentsjs from crypto service test

* fix: eslint error

* chore: remove old translator from dgt-components

* test: fixed tests in dgt-components

* test: update coverage

* chore: remove old i18n exports from index.ts

* chore: add demo for translator

* chore: removed label, refactored getTranslatorFor

* chore: remove console.log

Co-authored-by: Arthur Joppart <[email protected]>

packages/dgt-components/demo/demo.component.ts

@@ -9,6 +9,7 @@ import { FormValidator } from '../lib/components/forms/form-validator';
 import { FormElementComponent } from '../lib/components/forms/form-element.component';
 import { define } from '../lib/util/define';
 import { hydrate } from '../lib/util/hydrate';
+import { getTranslator, getTranslatorFor, MemoryTranslatorFactory, setTranslator, setTranslatorFactory, TRANSLATIONS_LOADED, Translator } from '@digita-ai/dgt-utils';
 
 
 const emailValidator: FormValidator<{ email: string }> = async (context, event) => {
@@ -49,6 +50,8 @@ export class DemoComponent extends RxLitElement {
   // eslint-disable-next-line max-len
   private formActor: Interpreter<FormContext<{ email: string }>, FormStateSchema<{ email: string }>, FormEvent, FormState<{ email: string }>>;
 
+  private translator: Translator;
+
   constructor() {
     super();
 
@@ -65,6 +68,21 @@ export class DemoComponent extends RxLitElement {
     define('checkbox-component', CheckboxComponent);
     define('form-element', hydrate(FormElementComponent)(this.formActor));
 
+    // create single translator
+    setTranslatorFactory(new MemoryTranslatorFactory);
+
+  }
+
+  async connectedCallback(): Promise<void> {
+
+    this.translator = await getTranslatorFor(navigator.language);
+    // set global translator
+    setTranslator(this.translator);
+    // to use in other components:
+    this.translator = getTranslator();
+
+    super.connectedCallback();
+
   }
 
   private onCheckboxClicked = (e: Event) => {
@@ -84,6 +102,8 @@ export class DemoComponent extends RxLitElement {
   render() {
 
     return html`
+    <h1>translator</h1>
+    <p>${this.translator.translate('example-translation')}</p>
     <h1>checkbox component</h1>
     <form>
       <checkbox-component @change="${this.onCheckboxClicked}">I agree</checkbox-component>

packages/dgt-components/demo/public/en-US.json

@@ -0,0 +1,3 @@
+{
+  "example-translation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia arcu vel aliquam interdum. Aliquam bibendum vitae magna id molestie."
+}

packages/dgt-components/lib/components/alerts/alert.component.spec.ts

@@ -1,5 +1,4 @@
 import { ArgumentError } from '@digita-ai/dgt-utils';
-import { MockTranslator } from '../../services/i18n/mock-translator';
 import { Alert } from './alert';
 import { AlertComponent } from './alert.component';
 
@@ -11,6 +10,10 @@ describe('AlertComponent', () => {
 
     component = window.document.createElement('alert-component') as AlertComponent;
 
+    (component.translator as unknown) = {
+      translate: (key: string) => key,
+    };
+
   });
 
   afterEach(() => {
@@ -48,8 +51,6 @@ describe('AlertComponent', () => {
       message: 'foo',
     };
 
-    component.translator = new MockTranslator('en-GB');
-
     window.document.body.appendChild(component);
     await component.updateComplete;
 
@@ -66,8 +67,6 @@ describe('AlertComponent', () => {
       message: 'foo',
     };
 
-    component.translator = new MockTranslator('en-GB');
-
     window.document.body.appendChild(component);
     await component.updateComplete;
 

packages/dgt-components/lib/components/authentication/authenticate.component.ts

@@ -5,12 +5,12 @@ import { from } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Theme, DigitaBlue } from '@digita-ai/dgt-theme';
 import { SolidService } from '@digita-ai/inrupt-solid-service';
+import { Translator } from '@digita-ai/dgt-utils';
 import { Issuer } from '../../models/issuer.model';
 import { ProviderListComponent } from '../provider/provider-list.component';
 import { SeparatorComponent } from '../separator/separator.component';
 import { LoadingComponent } from '../loading/loading.component';
 import { define } from '../../util/define';
-import { Translator } from '../../services/i18n/translator';
 import { WebIdComponent } from './webid.component';
 import { AuthenticateContext, AuthenticateEvent, AuthenticateEvents, authenticateMachine, AuthenticateState, AuthenticateStates, AuthenticateStateSchema, ClickedLoginEvent, SelectedIssuerEvent, WebIdEnteredEvent, WebIdValidator } from './authenticate.machine';
 

packages/dgt-components/lib/components/authentication/webid.component.ts

@@ -4,9 +4,9 @@ import { RxLitElement } from 'rx-lit';
 import { Theme } from '@digita-ai/dgt-theme';
 import { debounce } from 'debounce';
 import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
+import { Translator } from '@digita-ai/dgt-utils';
 import { define } from '../../util/define';
 import { AlertComponent } from '../alerts/alert.component';
-import { Translator } from '../../services/i18n/translator';
 
 export class WebIdComponent extends RxLitElement {
 

packages/dgt-components/lib/components/source/source-list.component.spec.ts

@@ -0,0 +1,26 @@
+import { define } from '../../util/define';
+import { SourceListComponent } from './source-list.component';
+
+describe('SourceListComponent', () => {
+
+  let component: SourceListComponent;
+  const tag = 'source-list-component';
+
+  beforeEach(() => {
+
+    define(tag, SourceListComponent);
+    component = document.createElement(tag) as SourceListComponent;
+
+  });
+
+  it('should instantiate', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    expect(component).toBeTruthy();
+    expect(component).toBeInstanceOf(SourceListComponent);
+
+  });
+
+});

packages/dgt-components/lib/components/source/source.component.spec.ts

@@ -0,0 +1,26 @@
+import { define } from '../../util/define';
+import { SourceComponent } from './source.component';
+
+describe('SourceComponent', () => {
+
+  let component: SourceComponent;
+  const tag = 'source-component';
+
+  beforeEach(() => {
+
+    define(tag, SourceComponent);
+    component = document.createElement(tag) as SourceComponent;
+
+  });
+
+  it('should instantiate', async () => {
+
+    window.document.body.appendChild(component);
+    await component.updateComplete;
+
+    expect(component).toBeTruthy();
+    expect(component).toBeInstanceOf(SourceComponent);
+
+  });
+
+});

packages/dgt-components/lib/index.ts

@@ -41,8 +41,5 @@ export * from './models/purpose.model';
 export * from './models/session.model';
 export * from './models/source.model';
 export * from './models/triple.model';
-export * from './services/i18n/memory-translator';
-export * from './services/i18n/mock-translator';
-export * from './services/i18n/translator';
 export * from './util/define';
 export * from './util/hydrate';

packages/dgt-components/package.json

@@ -92,10 +92,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 72.26,
-        "functions": 71.03,
-        "lines": 84.57,
-        "statements": 84.09
+        "branches": 75,
+        "functions": 72.94,
+        "lines": 89.15,
+        "statements": 88.69
       }
     },
     "coveragePathIgnorePatterns": [

packages/dgt-utils/.componentsignore

@@ -14,5 +14,7 @@
   "ArgumentError",
   "HttpError",
   "HttpClient",
-  "EventObject"
+  "EventObject",
+  "EventTarget",
+  "CustomEvent"
 ]

packages/dgt-utils/lib/i18n/factories/cached-translator-factory.spec.ts

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/dot-notation */
+import fetchMock from 'jest-fetch-mock';
+import { CachedTranslatorFactory } from './cached-translator-factory';
+
+describe('', () => {
+
+  let factory: CachedTranslatorFactory;
+
+  beforeEach(() => {
+
+    factory = new CachedTranslatorFactory();
+
+  });
+
+  it('should create translator with correct language', async () => {
+
+    const translator = await factory.createTranslator('en');
+    expect(translator.getLang()).toEqual('en');
+
+  });
+
+  it('should set translations when creating translator', async () => {
+
+    expect(factory['translations']).toBeUndefined();
+    await factory.createTranslator('en');
+    expect(factory['translations']).toBeTruthy();
+
+  });
+
+  it('should only fetch translations once', async () => {
+
+    fetchMock.resetMocks();
+    fetchMock.mockIf(/.*\.json$/, '{}');
+
+    expect(factory['translations']).toBeUndefined();
+
+    for (let i = 0; i < 10; i++) {
+
+      await factory.createTranslator('en');
+
+    }
+
+    expect(fetchMock.mock.calls.length).toEqual(1);
+
+  });
+
+});

packages/dgt-utils/lib/i18n/factories/cached-translator-factory.ts

@@ -0,0 +1,23 @@
+import { MemoryTranslator } from '../translators/memory-translator';
+import { TranslatorFactory } from '../models/translator-factory';
+
+/**
+ * Creates {@link Translator } instances for the given language tag.
+ */
+export class CachedTranslatorFactory implements TranslatorFactory {
+
+  private translations: { [key: string]: string };
+
+  async createTranslator(language: string): Promise<MemoryTranslator> {
+
+    if (!this.translations) {
+
+      this.translations = await (await fetch(`${window.location.origin}/${language}.json`)).json();
+
+    }
+
+    return new MemoryTranslator(language, this.translations);
+
+  }
+
+}

packages/dgt-utils/lib/i18n/factories/memory-translator-factory.ts

@@ -0,0 +1,15 @@
+import { MemoryTranslator } from '../translators/memory-translator';
+import { TranslatorFactory } from '../models/translator-factory';
+
+/**
+ * Creates {@link Translator } instances for the given language tag.
+ */
+export class MemoryTranslatorFactory implements TranslatorFactory {
+
+  createTranslator(language: string): MemoryTranslator {
+
+    return new MemoryTranslator(language);
+
+  }
+
+}