@tolgee/core 4.7.0 → 4.7.2

package/src/services/DependencyService.ts

@@ -0,0 +1,116 @@
+import { Properties } from '../Properties';
+import { EventService } from './EventService';
+import { ApiHttpService } from './ApiHttpService';
+import { TranslationService } from './TranslationService';
+import { TextService } from './TextService';
+import { MouseEventHandler } from '../highlighter/MouseEventHandler';
+import { TranslationHighlighter } from '../highlighter/TranslationHighlighter';
+import { ElementRegistrar } from './ElementRegistrar';
+import { Observer } from '../Observer';
+import { CoreService } from './CoreService';
+import { TolgeeConfig } from '../TolgeeConfig';
+import { PluginManager } from '../toolsManager/PluginManager';
+import { Messages } from '../toolsManager/Messages';
+import { HighlightFunctionsInitializer } from '../highlighter/HighlightFunctionsInitializer';
+import { ScreenshotService } from './ScreenshotService';
+import { ModuleService } from './ModuleService';
+import { TextWrapper } from '../wrappers/text/TextWrapper';
+import { NodeHelper } from '../helpers/NodeHelper';
+import { AbstractWrapper } from '../wrappers/AbstractWrapper';
+import { InvisibleWrapper } from '../wrappers/invisible/InvisibleWrapper';
+
+export class DependencyService {
+  public properties: Properties = new Properties();
+  public eventService: EventService = new EventService();
+  public apiHttpService: ApiHttpService = new ApiHttpService(this.properties);
+  public mouseEventHandler = new MouseEventHandler(this);
+  public moduleService = new ModuleService();
+  public coreService: CoreService = new CoreService(
+    this.properties,
+    this.apiHttpService
+  );
+  public screenshotService = new ScreenshotService(
+    this.coreService,
+    this.apiHttpService
+  );
+  public translationService: TranslationService = new TranslationService(
+    this.properties,
+    this.coreService,
+    this.apiHttpService,
+    this.eventService
+  );
+  public textService: TextService = new TextService(
+    this.properties,
+    this.translationService,
+    this.moduleService
+  );
+
+  public highlightFunctionInitializer = new HighlightFunctionsInitializer(
+    this.properties
+  );
+
+  public translationHighlighter = new TranslationHighlighter(this);
+
+  public elementRegistrar: ElementRegistrar = new ElementRegistrar(
+    this.properties,
+    this.translationHighlighter,
+    this.eventService
+  );
+
+  public messages: Messages = new Messages();
+
+  public pluginManager: PluginManager = new PluginManager(
+    this.messages,
+    this.properties,
+    this.eventService,
+    this.elementRegistrar,
+    this.translationService
+  );
+
+  constructor() {
+    this.translationHighlighter.pluginManager = this.pluginManager;
+  }
+
+  public wrapper: AbstractWrapper;
+  public observer: Observer;
+
+  init(config: TolgeeConfig) {
+    if (this.properties.config) {
+      throw new Error('Duplicate initialization of config');
+    }
+    this.properties.config = new TolgeeConfig(config);
+    if (this.properties.config.wrapperMode === 'invisible') {
+      this.wrapper = new InvisibleWrapper(
+        this.properties,
+        this.elementRegistrar
+      );
+    } else {
+      this.wrapper = new TextWrapper(
+        this.eventService,
+        this.properties,
+        this.textService,
+        this.elementRegistrar
+      );
+    }
+
+    this.observer = new Observer(
+      this.properties,
+      this.wrapper,
+      this.elementRegistrar
+    );
+    this.translationService.initStatic();
+  }
+
+  run = () => {
+    this.mouseEventHandler.run();
+  };
+
+  stop = () => {
+    this.observer.stopObserving();
+    this.elementRegistrar.cleanAll();
+    this.mouseEventHandler.stop();
+    NodeHelper.unmarkElementAsTargetElement(
+      this.properties.config.targetElement
+    );
+  };
+}

package/src/services/ElementRegistrar.test.ts

@@ -0,0 +1,131 @@
+jest.dontMock('./ElementRegistrar');
+jest.dontMock('./DependencyService');
+
+import '@testing-library/jest-dom/extend-expect';
+import { ElementRegistrar } from './ElementRegistrar';
+import { ElementWithMeta } from '../types';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { TranslationHighlighter } from '../highlighter/TranslationHighlighter';
+import { createElement } from '@testFixtures/createElement';
+import { Properties } from '../Properties';
+import { TOLGEE_ATTRIBUTE_NAME } from '../Constants/Global';
+import { DependencyService } from './DependencyService';
+import { EventEmitterImpl } from './EventEmitter';
+import { EventService } from './EventService';
+
+describe('ElementRegistrar', () => {
+  let elementRegistrar: ElementRegistrar;
+  const mockElementRegisteredEmit = jest.fn();
+
+  beforeEach(async () => {
+    const dependencyStore = new DependencyService();
+    dependencyStore.init({});
+    elementRegistrar = dependencyStore.elementRegistrar;
+    (getMockedInstance(EventService).ELEMENT_REGISTERED as any) = {
+      emit: mockElementRegisteredEmit,
+    } as any as EventEmitterImpl<ElementWithMeta>;
+    getMockedInstance(Properties).config.targetElement = document.body;
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  describe('In development mode', () => {
+    const element = createElement(1, 1);
+
+    beforeEach(async () => {
+      getMockedInstance(Properties).mode = 'development';
+      document.body.append(element);
+      await elementRegistrar.register(element);
+    });
+
+    test('will be registered for highlighting in development mode', () => {
+      expect(getMockedInstance(TranslationHighlighter).listen).toBeCalledWith(
+        element
+      );
+      expect(getMockedInstance(TranslationHighlighter).listen).toBeCalledTimes(
+        1
+      );
+    });
+
+    test('will emit element registered event', () => {
+      expect(mockElementRegisteredEmit).toBeCalledTimes(1);
+      expect(mockElementRegisteredEmit).toBeCalledWith(element);
+    });
+  });
+
+  test('throws error on register element without any node', async () => {
+    const element = createElement(0, 0);
+    getMockedInstance(Properties).mode = 'development';
+    document.body.append(element);
+    elementRegistrar.register(element);
+    expect((elementRegistrar as any).registeredElements).toBeInstanceOf(Set);
+    expect((elementRegistrar as any).registeredElements).not.toContain(element);
+  });
+
+  describe('register, clean & refresh methods', () => {
+    let mockedElements: ElementWithMeta[];
+    beforeEach(() => {
+      mockedElements = [
+        createElement(5, 0),
+        createElement(1, 0),
+        createElement(3, 0),
+      ];
+      document.body.append(...mockedElements);
+      mockedElements.forEach((e) => elementRegistrar.register(e));
+    });
+
+    test('refresh all will remove inactive elements', () => {
+      const node = mockedElements[1]._tolgee.nodes.values().next().value;
+      node.parentElement.removeChild(node);
+      elementRegistrar.refreshAll();
+      expect(mockedElements[1]._tolgee).not.toBeDefined();
+      expect(mockedElements[1]).not.toHaveAttribute(TOLGEE_ATTRIBUTE_NAME);
+    });
+
+    test('refresh all will remove inactive nodes', () => {
+      const node = mockedElements[2]._tolgee.nodes.values().next().value;
+      node.parentElement.removeChild(node);
+      elementRegistrar.refreshAll();
+      expect(mockedElements[2]._tolgee.nodes.size).toEqual(2);
+    });
+
+    test('clean all will clean all elements', () => {
+      elementRegistrar.cleanAll();
+      for (const mockedElement of mockedElements) {
+        expect(mockedElement._tolgee).not.toBeDefined();
+      }
+    });
+
+    test("clean all doesn't clean elements with preventClean", () => {
+      mockedElements[1]._tolgee.preventClean = true;
+      const node = mockedElements[1]._tolgee.nodes.values().next().value;
+      node.parentElement.removeChild(node);
+      elementRegistrar.refreshAll();
+      expect(mockedElements[1]._tolgee).toBeDefined();
+      expect(mockedElements[1]).toHaveAttribute(TOLGEE_ATTRIBUTE_NAME);
+    });
+
+    test("refresh all doesn't delete nodes on elements wih preventClean", () => {
+      mockedElements[1]._tolgee.preventClean = true;
+      const node = mockedElements[1]._tolgee.nodes.values().next().value;
+      node.parentElement.removeChild(node);
+      elementRegistrar.refreshAll();
+      expect(mockedElements[1]._tolgee).toBeDefined();
+    });
+  });
+
+  test('will register attribute node', () => {
+    const inputElement = document.createElement(
+      'input'
+    ) as any as ElementWithMeta;
+    document.body.append(inputElement);
+    inputElement.setAttribute('_tolgee', '');
+    inputElement.setAttribute('placeholder', 'Text');
+    inputElement._tolgee = {
+      nodes: new Set([inputElement.attributes['placeholder']]),
+    };
+    elementRegistrar.register(inputElement);
+  });
+});

package/src/services/ElementRegistrar.ts

@@ -0,0 +1,108 @@
+import { ElementWithMeta } from '../types';
+import { Properties } from '../Properties';
+import { TOLGEE_ATTRIBUTE_NAME } from '../Constants/Global';
+import { TranslationHighlighter } from '../highlighter/TranslationHighlighter';
+import { NodeHelper } from '../helpers/NodeHelper';
+import { EventService } from './EventService';
+import { EventEmitterImpl } from './EventEmitter';
+
+export class ElementRegistrar {
+  private registeredElements: Set<ElementWithMeta> = new Set();
+
+  constructor(
+    private properties: Properties,
+    private translationHighlighter: TranslationHighlighter,
+    private eventService: EventService
+  ) {}
+
+  register(element: ElementWithMeta) {
+    //ignore element with no active nodes
+    if (
+      this.getActiveNodes(element).next().value === undefined &&
+      !element._tolgee.wrappedWithElementOnlyKey
+    ) {
+      return;
+    }
+    if (
+      this.properties.mode === 'development' &&
+      !this.registeredElements.has(element)
+    ) {
+      this.translationHighlighter.listen(element);
+    }
+    this.registeredElements.add(element);
+    (
+      this.eventService.ELEMENT_REGISTERED as EventEmitterImpl<ElementWithMeta>
+    ).emit(element);
+  }
+
+  refreshAll() {
+    for (const element of this.registeredElements) {
+      if (!element._tolgee.preventClean) {
+        this.cleanElementInactiveNodes(element);
+        if (
+          element._tolgee.nodes.size === 0 &&
+          !element._tolgee.wrappedWithElementOnlyKey
+        ) {
+          this.cleanElement(element);
+        }
+      }
+    }
+  }
+
+  cleanAll() {
+    for (const registeredElement of this.registeredElements) {
+      this.cleanElement(registeredElement);
+    }
+  }
+
+  findAllByKey(key: string) {
+    const result: ElementWithMeta[] = [];
+    for (const registeredElement of this.registeredElements) {
+      if (registeredElement._tolgee.wrappedWithElementOnlyKey === key) {
+        result.push(registeredElement);
+        continue;
+      }
+      for (const node of registeredElement._tolgee.nodes) {
+        if (
+          node._tolgee.keys.findIndex(
+            (keyWithParams) => keyWithParams.key === key
+          ) > -1
+        ) {
+          result.push(registeredElement);
+          break;
+        }
+      }
+    }
+    return result;
+  }
+
+  private cleanElementInactiveNodes(element: ElementWithMeta) {
+    if (this.isElementActive(element)) {
+      element._tolgee.nodes = new Set(this.getActiveNodes(element));
+      return;
+    }
+  }
+
+  private cleanElement(element: ElementWithMeta) {
+    if (!element._tolgee.preventClean) {
+      if (element._tolgee.highlightEl) {
+        element._tolgee.unhighlight();
+      }
+      element.removeAttribute(TOLGEE_ATTRIBUTE_NAME);
+      delete element._tolgee;
+      this.registeredElements.delete(element);
+    }
+  }
+
+  private *getActiveNodes(element: ElementWithMeta) {
+    for (const node of element._tolgee.nodes) {
+      if (NodeHelper.nodeContains(this.properties.config.targetElement, node)) {
+        yield node;
+      }
+    }
+  }
+
+  private isElementActive(element: ElementWithMeta) {
+    return this.properties.config.targetElement.contains(element);
+  }
+}

package/src/services/EventEmitter.ts

@@ -0,0 +1,52 @@
+import { Subscription } from './Subscription';
+
+export type CallbackType<T> = (data: T) => Promise<void> | void;
+
+export interface EventEmitter<T> {
+  subscribe(callback: CallbackType<T>): Subscription;
+}
+
+export class EventEmitterImpl<T> {
+  private idCounter = 0;
+  private _subscriptions: Map<number, CallbackType<T>> = new Map<
+    number,
+    CallbackType<T>
+  >();
+
+  private get subscriptions() {
+    return this._subscriptions;
+  }
+
+  public emit(data?: T): Promise<void> | void {
+    const promiseReturns = [];
+    for (const callback of this.subscriptions.values()) {
+      const returned = callback(data);
+      if (typeof returned?.['then'] === 'function') {
+        promiseReturns.push(returned);
+      }
+    }
+
+    if (promiseReturns.length === 0) {
+      return;
+    }
+
+    return new Promise((resolve) =>
+      Promise.all(promiseReturns).then(() => resolve())
+    );
+  }
+
+  public subscribe(callback: CallbackType<T>) {
+    const newId = this.idCounter++;
+    const subscription = new Subscription(() => this.unsubscribe(newId));
+    this.subscriptions.set(newId, callback);
+    return subscription;
+  }
+
+  private unsubscribe(id: number) {
+    const wasPresent = this._subscriptions.delete(id);
+    if (!wasPresent) {
+      // eslint-disable-next-line no-console
+      console.warn('Event to unsubscribe was not found');
+    }
+  }
+}

package/src/services/EventService.ts

@@ -0,0 +1,14 @@
+import { EventEmitter, EventEmitterImpl } from './EventEmitter';
+import { TranslationData } from '../types/DTOs';
+import { ElementWithMeta } from '../types';
+
+export class EventService {
+  public readonly TRANSLATION_CHANGED: EventEmitter<TranslationData> =
+    new EventEmitterImpl<TranslationData>();
+  public readonly LANGUAGE_CHANGED: EventEmitter<string> =
+    new EventEmitterImpl<string>();
+  public readonly LANGUAGE_LOADED: EventEmitter<string> =
+    new EventEmitterImpl<string>();
+  public readonly ELEMENT_REGISTERED: EventEmitter<ElementWithMeta> =
+    new EventEmitterImpl<ElementWithMeta>();
+}

package/src/services/ModuleService.ts

@@ -0,0 +1,14 @@
+import { Formatter, TolgeeModule } from '../types';
+
+export class ModuleService {
+  formatter: Formatter | null = null;
+
+  addModule = (module: TolgeeModule) => {
+    if (module.type === 'formatter') {
+      const instance = new module();
+      this.formatter = instance;
+    } else {
+      throw new Error('Module with unknown type');
+    }
+  };
+}

package/src/services/ScreenshotService.ts

@@ -0,0 +1,31 @@
+import { UploadedImageModel } from '..';
+import { ApiHttpService } from './ApiHttpService';
+import { CoreService } from './CoreService';
+
+export class ScreenshotService {
+  constructor(
+    private coreService: CoreService,
+    private apiHttpService: ApiHttpService
+  ) {}
+
+  async uploadImage(blob: Blob) {
+    const formData = new FormData();
+
+    formData.append('image', blob);
+
+    return this.apiHttpService.postJson('v2/image-upload', undefined, {
+      headers: {},
+      body: formData,
+    }) as Promise<UploadedImageModel>;
+  }
+
+  async deleteImages(ids: number[]) {
+    return this.apiHttpService.post(
+      `v2/image-upload/${ids.join(',')}`,
+      undefined,
+      {
+        method: 'delete',
+      }
+    ) as Promise<Response>;
+  }
+}

package/src/services/Subscription.ts

@@ -0,0 +1,7 @@
+export class Subscription {
+  constructor(private onUnsubscribe: () => void) {}
+
+  unsubscribe() {
+    this.onUnsubscribe();
+  }
+}

package/src/services/TextService.test.ts

@@ -0,0 +1,88 @@
+jest.dontMock('./TextService');
+jest.dontMock('../helpers/TextHelper');
+jest.dontMock('./DependencyService');
+jest.dontMock('./ModuleService');
+jest.dontMock('../modules/IcuFormatter');
+
+import { Properties } from '../Properties';
+import { TextService } from './TextService';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { TranslationService } from './TranslationService';
+import { DependencyService } from './DependencyService';
+import { IcuFormatter } from '../modules/IcuFormatter';
+
+describe('TextService', () => {
+  let mockedTranslationReturn = '';
+  const params = { param1: 'Dummy param 1', param2: 'Dummy param 2' };
+  let expectedTranslated = '';
+  let textService: TextService;
+
+  const getTranslationMock = jest.fn(async () => {
+    return mockedTranslationReturn;
+  });
+
+  const getFromCacheOrCallbackMock = jest.fn(() => {
+    return mockedTranslationReturn;
+  });
+
+  beforeEach(async () => {
+    const depStore = new DependencyService();
+    depStore.moduleService.addModule(IcuFormatter);
+    textService = depStore.textService;
+    mockedTranslationReturn = 'Dummy translated text {param1} {param2}';
+    expectedTranslated = mockedTranslationReturn
+      .replace('{param1}', params.param1)
+      .replace('{param2}', params.param2);
+
+    getMockedInstance(Properties).config = {
+      inputPrefix: '{{',
+      inputSuffix: '}}',
+      restrictedElements: [],
+      tagAttributes: {
+        '*': ['aria-label'],
+      },
+    };
+    getMockedInstance(TranslationService).getTranslation = getTranslationMock;
+
+    getMockedInstance(TranslationService).getFromCacheOrFallback =
+      getFromCacheOrCallbackMock;
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  describe('translation functions', () => {
+    test('it will translate asynchronously correctly', async () => {
+      const translated = await textService.translate(
+        mockedTranslationReturn,
+        params,
+        `en`,
+        true,
+        'Default'
+      );
+      expect(translated).toEqual(expectedTranslated);
+      expect(getTranslationMock).toBeCalledWith(
+        'Dummy translated text {param1} {param2}',
+        'en',
+        'Default'
+      );
+    });
+
+    test('it will translate synchronously correctly', () => {
+      const translated = textService.instant(
+        mockedTranslationReturn,
+        params,
+        'en',
+        true,
+        'Default'
+      );
+      expect(translated).toEqual(expectedTranslated);
+      expect(getFromCacheOrCallbackMock).toBeCalledWith(
+        'Dummy translated text {param1} {param2}',
+        'en',
+        'Default'
+      );
+    });
+  });
+});

package/src/services/TextService.ts

@@ -0,0 +1,82 @@
+import { TranslationTags, TranslationParamsTags } from '../types';
+import { TranslationService } from './TranslationService';
+import { Properties } from '../Properties';
+import { ModuleService } from './ModuleService';
+
+export class TextService {
+  constructor(
+    private properties: Properties,
+    private translationService: TranslationService,
+    private moduleService: ModuleService
+  ) {}
+
+  async translate(
+    key: string,
+    params: TranslationParamsTags<any>,
+    lang = this.properties.currentLanguage,
+    orEmpty?: boolean,
+    defaultValue?: string
+  ) {
+    const translation = await this.translationService.getTranslation(
+      key,
+      lang,
+      defaultValue
+    );
+    return this.formatTranslation(key, translation, params, lang, orEmpty);
+  }
+
+  instant(
+    key: string,
+    params: TranslationParamsTags<any>,
+    lang = this.properties.currentLanguage,
+    orEmpty?: boolean,
+    defaultValue?: string
+  ) {
+    const translation = this.translationService.getFromCacheOrFallback(
+      key,
+      lang,
+      defaultValue
+    );
+
+    return this.formatTranslation(key, translation, params, lang, orEmpty);
+  }
+
+  private formatTranslation(
+    key: string,
+    translation: string | undefined,
+    params: TranslationParamsTags<any> | undefined,
+    lang: string | undefined,
+    orEmpty: boolean | undefined
+  ) {
+    if (translation !== undefined) {
+      return this.format(translation, params, lang);
+    }
+    if (!orEmpty) {
+      return key;
+    }
+    return '';
+  }
+
+  private readonly format = (
+    translation: string,
+    params: TranslationParamsTags<any>,
+    lang: string | undefined
+  ): TranslationTags<any> => {
+    try {
+      // try to format the text
+      let result: TranslationTags<any> = translation;
+      if (this.moduleService.formatter) {
+        result = this.moduleService.formatter.format({
+          translation: result,
+          params,
+          language: lang || this.properties.currentLanguage,
+        });
+      }
+      return result as TranslationTags<any>;
+    } catch (e) {
+      // if string cannot be formatted, throw error
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  };
+}