piral-translate 1.0.0-pre.2217 → 1.0.0

package/src/actions.test.ts

@@ -1,17 +1,18 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions as ca } from 'piral-core';
 import { createActions } from './actions';
-import { createActions as ca, createListener } from 'piral-core';
 
 describe('Translation Action Module', () => {
   it('selectLanguage changes the current language', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       language: {
         foo: 10,
         loading: false,
         selected: 'fr',
       },
-    });
+    }));
     const localizer = {
       language: 'en',
       languages: ['en'],
@@ -26,7 +27,7 @@ describe('Translation Action Module', () => {
     const actions = createActions(localizer);
     const ctx = ca(state, createListener({}));
     actions.selectLanguage(ctx, 'de');
-    expect(deref(state)).toEqual({
+    expect((state.getState())).toEqual({
       foo: 5,
       language: {
         foo: 10,
@@ -35,4 +36,132 @@ describe('Translation Action Module', () => {
       },
     });
   });
+
+  it('translate', () => {
+    const state: any = create(() => ({
+      foo: 5,
+      language: {
+        foo: 10,
+        loading: false,
+        selected: 'fr',
+      },
+    }));
+    const localizer = {
+      language: 'fr',
+      languages: ['fr'],
+      messages: {
+        fr: {
+          bar: 'bár',
+        },
+      },
+      localizeGlobal(key, variables) {
+        const messages = {
+          fr: {
+            bar: 'bár',
+          },
+        };
+        return messages.fr[key];
+      },
+      localizeLocal() {
+        return '';
+      },
+    };
+    const actions = createActions(localizer);
+    const ctx = ca(state, createListener({}));
+    const result = actions.translate(ctx, 'bar');
+    expect(result).toEqual('bár');
+  });
+
+  it('setTranslations sets translations to the global translations', () => {
+    const state: any = create(() => ({
+      foo: 5,
+      language: {
+        foo: 10,
+        loading: false,
+        selected: 'fr',
+      },
+    }));
+    const localizer = {
+      language: 'de',
+      languages: ['de'],
+      messages: {
+        de: {},
+      },
+      localizeGlobal() {
+        return '';
+      },
+      localizeLocal() {
+        return '';
+      },
+    };
+    const ctx = {
+      emit: jest.fn(),
+      state,
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+      apis: {
+        firstApi: {
+          getTranslations: () => {
+            return localizer.messages;
+          },
+          setTranslations: async (translations) => {
+            localizer.messages = await translations;
+          },
+        },
+      },
+    };
+    const actions = createActions(localizer);
+    const data = {
+      global: {},
+      locals: [{ name: 'firstApi', value: { car: 'Auto', table: 'Tisch' } }],
+    };
+    actions.setTranslations(ctx, 'de', data);
+    expect(localizer.messages).toEqual({
+      de: { car: 'Auto', table: 'Tisch' },
+    });
+  });
+
+  it('getTranslations returns translations', () => {
+    const state: any = create(() => ({
+      foo: 5,
+      language: {
+        foo: 10,
+        loading: false,
+        selected: 'fr',
+      },
+    }));
+    const localizer = {
+      language: 'fr',
+      languages: ['fr'],
+      messages: {
+        fr: {
+          foo: 'bár',
+        },
+      },
+      localizeGlobal() {
+        return '';
+      },
+      localizeLocal() {
+        return '';
+      },
+    };
+    const actions = createActions(localizer);
+    const ctx = {
+      emit: jest.fn(),
+      state,
+      dispatch(update) {
+        state.setState(update(state.getState()));
+      },
+      apis: {
+        firstApi: {
+          getTranslations: () => {
+            return localizer.messages;
+          },
+        },
+      },
+    };
+    const result = actions.getTranslations(ctx, 'fr');
+    expect(result).toEqual({ global: { foo: 'bár' }, locals: [{ name: 'firstApi', value: { foo: 'bár' } }] });
+  });
 });

package/src/components.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
 import { getPiralComponent } from 'piral-core';
-import { LanguagesPickerProps } from './types';
 
-export const PiralLanguagesPicker: React.ComponentType<LanguagesPickerProps> = getPiralComponent('LanguagesPicker');
+export const PiralLanguagesPicker = getPiralComponent('LanguagesPicker');

package/src/create.test.ts

@@ -1,13 +1,16 @@
-import { Atom, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createLocaleApi, setupLocalizer } from './create';
 
 describe('Create Localize API', () => {
-  const state = Atom.of({});
+  const state = create(() => ({}));
   const context: any = {
     defineActions() {},
     state,
+    readState(cb) {
+      return cb(state.getState());
+    },
     dispatch(update) {
-      swap(state, update);
+      state.setState(update(state.getState()));
     },
   };
 
@@ -95,4 +98,120 @@ describe('Create Localize API', () => {
     const result = api.translate('qxz');
     expect(result).toEqual('__fr_qxz__');
   });
+
+  it('getTranslations return the translations', () => {
+    const config = {
+      language: 'fr',
+      messages: {
+        fr: {
+          foo: 'bár',
+          bar: 'bár',
+        },
+      },
+    };
+    const api = (createLocaleApi(setupLocalizer(config))(context) as any)();
+    api.setTranslations({
+      fr: {
+        foo: 'boo',
+      },
+    });
+    const result = api.getTranslations();
+    expect(result).toEqual({ fr: { foo: 'boo' } });
+  });
+
+  it('getCurrentLanguage return the current language', () => {
+    const config = {
+      language: 'fr',
+      messages: {
+        fr: {
+          foo: 'bár',
+          bar: 'bár',
+        },
+      },
+    };
+    const api = (createLocaleApi(setupLocalizer(config))(context) as any)();
+    const result = api.getCurrentLanguage();
+    expect(result).toEqual('fr');
+  });
+
+  it('addTranslations should add new translations if no value exists yet for the combination of language and key', (): void => {
+    const config = {
+      language: 'fr',
+      messages: {
+        fr: {
+          foo: 'fóo',
+          bar: 'bár',
+        },
+      },
+    };
+    const messagesToAdd = {
+      fr: {
+        foo: 'fóo (new)',
+        bar: 'bár (new)',
+        baz: 'báz (new)',
+      },
+    };
+    const api = (createLocaleApi(setupLocalizer(config))(context) as any)();
+    api.addTranslations([
+      messagesToAdd
+    ]);
+    const result = api.translate('baz');
+
+    expect(result).toEqual(messagesToAdd.fr.baz);
+  });
+
+  it('addTranslations should add new translations if overwriting is enabled and a value already exists for the combination of language and key', (): void => {
+    const config = {
+      language: 'fr',
+      messages: {
+        fr: {
+          foo: 'fóo',
+          bar: 'bár',
+        },
+      },
+    };
+    const messagesToAdd = {
+      fr: {
+        foo: 'fóo (new)',
+        bar: 'bár (new)',
+        baz: 'báz (new)',
+      },
+    };
+    const api = (createLocaleApi(setupLocalizer(config))(context) as any)();
+    api.addTranslations([
+      messagesToAdd
+    ]);
+    const result = api.translate('bar');
+
+    expect(result).toEqual(messagesToAdd.fr.bar);
+  });
+
+  it('addTranslations should not add new translations if overwriting is disabled and a value already exists for the combination of language and key', (): void => {
+    const config = {
+      language: 'fr',
+      messages: {
+        fr: {
+          foo: 'fóo',
+          bar: 'bár',
+        },
+      },
+    };
+    const messagesToAdd = {
+      fr: {
+        foo: 'fóo (neu)',
+        bar: 'bár (neu)',
+        baz: 'báz',
+      },
+    };
+    const api = (createLocaleApi(setupLocalizer(config))(context) as any)();
+    api.addTranslations(
+      [
+        messagesToAdd
+      ],
+      false
+    );
+    const result = api.translate('bar');
+
+    expect(result).toEqual(config.messages.fr.bar);
+  });
 });

package/src/create.ts

@@ -1,8 +1,10 @@
+import * as deepmerge from 'deepmerge';
+
 import type { PiralPlugin } from 'piral-core';
 import { createActions } from './actions';
 import { Localizer } from './localize';
 import { DefaultPicker } from './default';
-import { PiletLocaleApi, LocalizationMessages, Localizable } from './types';
+import { PiletLocaleApi, LocalizationMessages, Localizable, PiralSelectLanguageEvent } from './types';
 
 export interface TranslationFallback {
   (key: string, language: string): string;
@@ -56,8 +58,8 @@ export function createLocaleApi(localizer: Localizable = setupLocalizer()): Pira
     context.dispatch((state) => ({
       ...state,
       components: {
-        ...state.components,
         LanguagesPicker: DefaultPicker,
+        ...state.components,
       },
       language: {
         loading: false,
@@ -66,10 +68,37 @@ export function createLocaleApi(localizer: Localizable = setupLocalizer()): Pira
       },
     }));
 
-    return () => {
+    return (api) => {
       let localTranslations: LocalizationMessages = {};
 
       return {
+        addTranslations(messages: LocalizationMessages[], isOverriding: boolean = true) {
+          const messagesToMerge: LocalizationMessages[] = messages;
+
+          if (isOverriding) {
+            messagesToMerge.unshift(localizer.messages);
+          } else {
+            messagesToMerge.push(localizer.messages);
+          }
+
+          this.setTranslations(
+            deepmerge.all(messagesToMerge),
+          );
+        },
+        getCurrentLanguage(cb?: (l: string) => void): any {
+          const selected = context.readState((s) => s.language.selected);
+
+          if (cb) {
+            cb(selected);
+            const handler = (ev: PiralSelectLanguageEvent) => {
+              cb(ev.currentLanguage);
+            };
+            api.on('select-language', handler);
+            return () => api.off('select-language', handler);
+          }
+
+          return selected;
+        },
         setTranslations(messages) {
           localTranslations = messages;
         },

package/src/default.tsx

@@ -1,4 +1,5 @@
+import type { FC } from 'react';
 import { defaultRender } from 'piral-core';
 import { LanguagesPickerProps } from './types';
 
-export const DefaultPicker: React.FC<LanguagesPickerProps> = (props) => defaultRender(undefined);
+export const DefaultPicker: FC<LanguagesPickerProps> = (props) => defaultRender(undefined);

package/src/hooks.ts

@@ -22,7 +22,9 @@ export function useDynamicLanguage(
       },
       (err) => console.error(err),
     );
-    return () => (active = false);
+    return () => {
+      active = false;
+    };
   }, [selected]);
 
   return [selected, setSelected];

package/src/localize.ts

@@ -13,7 +13,7 @@ function defaultFallback(key: string, language: string): string {
   }
 }
 
-function formatMessage<T>(message: string, variables: T): string {
+function formatMessage<T extends object>(message: string, variables: T): string {
   return message.replace(/{{\s*([A-Za-z0-9_.]+)\s*}}/g, (_match: string, p1: string) => {
     return p1 in variables ? variables[p1] || '' : `{{${p1}}}`;
   });
@@ -35,7 +35,7 @@ export class Localizer implements Localizable {
    * @param key The key of the translation snippet.
    * @param variables The optional variables to use.
    */
-  public localizeGlobal<T>(key: string, variables?: T) {
+  public localizeGlobal<T extends object>(key: string, variables?: T) {
     return this.localizeBase(key, variables);
   }
 
@@ -46,7 +46,7 @@ export class Localizer implements Localizable {
    * @param key The key of the translation snippet.
    * @param variables The optional variables to use.
    */
-  public localizeLocal<T>(localMessages: LocalizationMessages, key: string, variables?: T) {
+  public localizeLocal<T extends object>(localMessages: LocalizationMessages, key: string, variables?: T) {
     const message = this.translateMessage(localMessages, key, variables);
 
     if (message === undefined) {
@@ -56,7 +56,7 @@ export class Localizer implements Localizable {
     return message;
   }
 
-  private localizeBase<T>(key: string, variables?: T) {
+  private localizeBase<T extends object>(key: string, variables?: T) {
     const message = this.translateMessage(this.messages, key, variables);
 
     if (message === undefined) {
@@ -66,7 +66,7 @@ export class Localizer implements Localizable {
     return message;
   }
 
-  private translateMessage<T>(messages: LocalizationMessages, key: string, variables?: T) {
+  private translateMessage<T extends object>(messages: LocalizationMessages, key: string, variables?: T) {
     const language = this.language;
     const translations = language && messages[language];
     const translation = translations && translations[key];

package/src/types.ts

@@ -1,5 +1,5 @@
-import type {} from 'piral-core';
-import { ComponentType } from 'react';
+import type { Disposable } from 'piral-core';
+import type { ComponentType } from 'react';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletLocaleApi {}
@@ -108,8 +108,8 @@ export interface Localizable {
   messages: LocalizationMessages;
   language: string;
   languages: Array<string>;
-  localizeGlobal<T>(key: string, variables?: T): string;
-  localizeLocal<T>(localMessages: LocalizationMessages, key: string, variables?: T): string;
+  localizeGlobal<T extends object>(key: string, variables?: T): string;
+  localizeLocal<T extends object>(localMessages: LocalizationMessages, key: string, variables?: T): string;
 }
 
 export interface LocalizationMessages {
@@ -120,13 +120,32 @@ export interface LocalizationMessages {
 }
 
 export interface PiletLocaleApi {
+  /**
+   * Adds a list of translations to the existing translations.
+   *
+   * Internally, setTranslations is used, which means the translations will be exclusively used for
+   * retrieving translations for the pilet.
+   *
+   * @param messagesList The list of messages that extend the existing translations
+   * @param [isOverriding=true] Indicates whether the new translations overwrite the existing translations
+   */
+  addTranslations(messagesList: LocalizationMessages[], isOverriding?: boolean): void;
+  /**
+   * Gets the currently selected language directly.
+   */
+  getCurrentLanguage(): string;
+  /**
+   * Gets the currently selected language in a callback that is also invoked when the
+   * selected language changes. Returns a disposable to stop the notifications.
+   */
+  getCurrentLanguage(cb: (currently: string) => void): Disposable;
   /**
    * Translates the given tag (using the optional variables) into a string using the current language.
    * The used template can contain placeholders in form of `{{variableName}}`.
    * @param tag The tag to translate.
    * @param variables The optional variables to fill into the temnplate.
    */
-  translate<T = Record<string, string>>(tag: string, variables?: T): string;
+  translate<T extends object = Record<string, string>>(tag: string, variables?: T): string;
   /**
    * Provides translations to the application.
    * The translations will be exclusively used for retrieving translations for the pilet.