@tolgee/core 4.7.0 → 4.7.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@tolgee/core",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "description": "Library providing ability to translate messages directly in context of developed application.",
   "main": "index.js",
-  "module": "./dist/tolgee.esm.js",
+  "module": "./dist/tolgee.esm.mjs",
   "types": "./lib/index.d.ts",
   "repository": {
     "type": "git",
@@ -37,7 +37,8 @@
   "files": [
     "index.js",
     "lib/**/*",
-    "dist/**/*"
+    "dist/**/*",
+    "src/**/*"
   ],
   "devDependencies": {
     "@rollup/plugin-node-resolve": "13.3.0",
@@ -48,7 +49,7 @@
     "@types/intl-messageformat": "^3.0.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.8",
-    "concurrently": "7.1.0",
+    "concurrently": "7.2.2",
     "intl-messageformat": "^9.9.1",
     "jest": "^27.2.4",
     "jest-fetch-mock": "^3.0.3",
@@ -56,16 +57,16 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "7.0.2",
     "ts-jest": "^27.0.5",
-    "tslib": "^2.3.1",
+    "tslib": "^2.4.0",
     "typedoc": "0.22.15",
-    "typedoc-plugin-markdown": "3.12.1",
-    "typescript": "4.6.4"
+    "typedoc-plugin-markdown": "3.13.2",
+    "typescript": "4.7.4"
   },
   "exports": {
     "require": "./dist/tolgee.cjs.js",
-    "import": "./dist/tolgee.esm.js"
+    "import": "./dist/tolgee.esm.mjs"
   },
-  "gitHead": "068b8450eb29e1efd173eaa5537e44504a390ee3",
+  "gitHead": "12ccff7336da87314feac6cdff5ea19c08fe15d7",
   "publishConfig": {
     "access": "public"
   }

package/src/Constants/Global.ts

@@ -0,0 +1,9 @@
+export const RESTRICTED_ASCENDANT_ATTRIBUTE = 'data-tolgee-restricted';
+
+export const TOLGEE_ATTRIBUTE_NAME = '_tolgee';
+export const TOLGEE_TARGET_ATTRIBUTE = '_tolgee-target';
+export const TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE = 'data-tolgee-key-only';
+export const TOLGEE_HIGHLIGHTER_CLASS = '_tolgee-highlighter';
+
+// needs to be same as in @tolgee/ui package
+export const DEVTOOLS_ID = '__tolgee_dev_tools';

package/src/Constants/ModifierKey.ts

@@ -0,0 +1,6 @@
+export enum ModifierKey {
+  Alt,
+  Control,
+  Shift,
+  Meta,
+}

package/src/Errors/ApiHttpError.ts

@@ -0,0 +1,8 @@
+export class ApiHttpError extends Error {
+  constructor(public response: Response, public code?: string) {
+    super('Api http error');
+
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, ApiHttpError.prototype);
+  }
+}

package/src/Observer.test.ts

@@ -0,0 +1,119 @@
+jest.dontMock('./Observer');
+jest.dontMock('./services/DependencyService');
+
+import { DependencyService } from './services/DependencyService';
+import '@testing-library/jest-dom/extend-expect';
+import 'regenerator-runtime/runtime.js';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { Properties } from './Properties';
+import { waitFor } from '@testing-library/dom';
+import { Observer } from './Observer';
+import { ElementRegistrar } from './services/ElementRegistrar';
+import { TextWrapper } from './wrappers/text/TextWrapper';
+
+describe('Observer', () => {
+  let observer: Observer;
+  let properties: Properties;
+
+  beforeEach(async () => {
+    const dependencyService = new DependencyService();
+    dependencyService.init({ wrapperMode: 'text' });
+    dependencyService.run();
+    observer = dependencyService.observer;
+    properties = getMockedInstance(Properties);
+    document.body = document.createElement('body');
+    properties.config.targetElement = document.body;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(observer).toBeInstanceOf(Observer);
+  });
+
+  describe('Tests on document.body', () => {
+    test('Will handle mutation on basic character data', async () => {
+      const text = document.createTextNode('Dummy text node');
+      document.body.append(text);
+      observer.observe();
+      text.textContent = 'Dummy text node modified';
+
+      await waitFor(() => {
+        const onNewNodesMock = getMockedInstance(TextWrapper).handleText;
+        expect(onNewNodesMock).toBeCalledTimes(1);
+        expect(onNewNodesMock).toBeCalledWith(text);
+      });
+    });
+
+    test('Will handle mutation element child list', async () => {
+      const text = document.createTextNode('Dummy text node');
+      observer.observe();
+      document.body.append(text);
+
+      await waitFor(() => {
+        const handleSubtree = getMockedInstance(TextWrapper).handleSubtree;
+
+        expect(handleSubtree).toBeCalledTimes(1);
+        expect(handleSubtree).toBeCalledWith(document.body);
+      });
+    });
+
+    test('Will handle attribute mutation', async () => {
+      const span = document.createElement('span');
+      const attributeName = 'data-attribute';
+      span.setAttribute(attributeName, 'text');
+      document.body.append(span);
+      observer.observe();
+      span.setAttribute(attributeName, 'modified');
+
+      await waitFor(() => {
+        const handleAttributeMock =
+          getMockedInstance(TextWrapper).handleAttribute;
+        expect(handleAttributeMock).toBeCalledTimes(1);
+        expect(handleAttributeMock).toBeCalledWith(span);
+      });
+    });
+
+    test('Will handle subtree mutation', async () => {
+      const div = document.createElement('div');
+      div.innerHTML = "<div><div></div><div id='innerDiv'></div></div>";
+      document.body.append(div);
+      const innerDiv = document.getElementById('innerDiv');
+      observer.observe();
+      innerDiv.textContent = 'This is inner text';
+
+      await waitFor(() => {
+        const handleAttributeMock =
+          getMockedInstance(TextWrapper).handleSubtree;
+
+        expect(handleAttributeMock).toBeCalledTimes(1);
+        expect(handleAttributeMock).toBeCalledWith(innerDiv);
+      });
+    });
+
+    test('will stop observing', async () => {
+      observer.observe();
+      observer.stopObserving();
+
+      document.body.textContent = 'Nothing';
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      const handleSubtree = getMockedInstance(TextWrapper).handleSubtree;
+      expect(handleSubtree).not.toBeCalledTimes(1);
+    });
+  });
+
+  test("Will call registrar's cleanInactive on change", async () => {
+    const text = document.createTextNode('Dummy text node');
+    document.body.append(text);
+    observer.observe();
+    text.textContent = 'Dummy text node modified';
+
+    await waitFor(() => {
+      const refreshAllMock = getMockedInstance(ElementRegistrar).refreshAll;
+      expect(refreshAllMock).toBeCalledTimes(1);
+    });
+  });
+});

package/src/Observer.ts

@@ -0,0 +1,68 @@
+import { Properties } from './Properties';
+import { ElementRegistrar } from './services/ElementRegistrar';
+import { AbstractWrapper } from './wrappers/AbstractWrapper';
+
+export class Observer {
+  constructor(
+    private properties: Properties,
+    private textWrapper: AbstractWrapper,
+    private nodeRegistrar: ElementRegistrar
+  ) {}
+
+  private _observer = undefined;
+  private _observing = false;
+
+  private get observer(): MutationObserver | undefined {
+    if (!this._observer && typeof window !== 'undefined') {
+      this._observer = new MutationObserver(
+        async (mutationsList: MutationRecord[]) => {
+          for (const mutation of mutationsList) {
+            if (!this._observing) {
+              // make sure we don't touch the DOM after disconnect is called
+              return;
+            }
+            if (mutation.type === 'characterData') {
+              await this.textWrapper.handleText(mutation.target as Element);
+              continue;
+            }
+            if (mutation.type === 'childList') {
+              await this.textWrapper.handleSubtree(mutation.target as Element);
+              continue;
+            }
+            if (mutation.type === 'attributes') {
+              await this.textWrapper.handleAttribute(
+                mutation.target as Element
+              );
+            }
+          }
+          this.nodeRegistrar.refreshAll();
+        }
+      );
+    }
+    return this._observer;
+  }
+
+  public observe() {
+    if (!this.observer) {
+      return;
+    }
+    if (this._observing) {
+      return;
+    }
+    this._observing = true;
+    this.observer.observe(this.properties.config.targetElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+  }
+
+  public stopObserving() {
+    if (!this.observer) {
+      return;
+    }
+    this._observing = false;
+    this.observer.disconnect();
+  }
+}

package/src/Properties.test.ts

@@ -0,0 +1,150 @@
+jest.dontMock('./Properties');
+jest.dontMock('./TolgeeConfig');
+
+import '@testing-library/jest-dom/extend-expect';
+import { mocked } from 'ts-jest/utils';
+import { TolgeeConfig } from './TolgeeConfig';
+import { Properties } from './Properties';
+
+describe('Properties', () => {
+  let properties: Properties;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    properties = new Properties();
+  });
+
+  test('can be created', () => {
+    expect(properties).not.toBeNull();
+  });
+
+  describe('preferred languages', () => {
+    test('getter returns from local storage', () => {
+      const dummyReturn = ['dummyLang1'];
+      Storage.prototype.getItem = jest.fn();
+      mocked(localStorage.getItem).mockReturnValueOnce(
+        JSON.stringify(dummyReturn)
+      );
+      expect(properties.preferredLanguages).toEqual(new Set(dummyReturn));
+      expect(localStorage.getItem).toBeCalledWith(
+        '__tolgee_preferredLanguages'
+      );
+    });
+
+    test('setter sets local storage item', () => {
+      const dummySet = ['dummyLang1'];
+      Storage.prototype.setItem = jest.fn();
+      properties.preferredLanguages = new Set(dummySet);
+      expect(localStorage.setItem).toBeCalledWith(
+        '__tolgee_preferredLanguages',
+        JSON.stringify(dummySet)
+      );
+    });
+  });
+
+  describe('current language', () => {
+    test('getter returns from local storage', () => {
+      const dummyReturn = 'cs';
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['cs', 'en'],
+      });
+      Storage.prototype.getItem = jest.fn();
+      mocked(localStorage.getItem).mockReturnValueOnce(dummyReturn);
+      expect(properties.currentLanguage).toEqual(dummyReturn);
+      expect(localStorage.getItem).toBeCalledWith('__tolgee_currentLanguage');
+    });
+
+    test('uses defaultLanguage without localStorage and language detection', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      Storage.prototype.getItem = jest.fn();
+      Storage.prototype.setItem = jest.fn();
+      const defaultLanguage = 'cs';
+      properties.config = new TolgeeConfig({
+        defaultLanguage,
+        enableLanguageStore: false,
+        enableLanguageDetection: false,
+      });
+      expect(properties.currentLanguage).toEqual(defaultLanguage);
+
+      properties.currentLanguage = 'de';
+      expect(properties.currentLanguage).toEqual('de');
+
+      expect(localStorage.setItem).not.toBeCalled();
+      expect(languageGetter).not.toBeCalledWith('__tolgee_currentLanguage');
+      expect(localStorage.getItem).not.toBeCalledWith(
+        '__tolgee_currentLanguage'
+      );
+    });
+
+    test('setter sets local storage item', () => {
+      const dummySet = 'dummyLang1';
+      Storage.prototype.setItem = jest.fn();
+      properties.config = new TolgeeConfig();
+      properties.currentLanguage = dummySet;
+      expect(localStorage.setItem).toBeCalledWith(
+        '__tolgee_currentLanguage',
+        dummySet
+      );
+    });
+
+    test('returns correct lang by navigator', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      languageGetter.mockReturnValue('cs');
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['en', 'cs'],
+      });
+      expect(properties.currentLanguage).toEqual('cs');
+    });
+
+    test('language is stored locally and detected only once', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      languageGetter.mockReturnValue('cs');
+      Storage.prototype.getItem = jest.fn();
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['cs', 'en'],
+      });
+      expect(properties.currentLanguage).toEqual('cs');
+      expect(properties.currentLanguage).toEqual('cs');
+
+      expect(languageGetter).toBeCalledTimes(1);
+    });
+
+    test('available languages derrived from staticData', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      languageGetter.mockReturnValue('cs');
+      properties.config = new TolgeeConfig({ staticData: { en: {}, cs: {} } });
+      expect(properties.currentLanguage).toEqual('cs');
+    });
+
+    test('returns default lang if not available', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      languageGetter.mockReturnValue('cs');
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['en'],
+        defaultLanguage: 'en',
+      });
+      expect(properties.currentLanguage).toEqual('en');
+    });
+
+    test('returns correct language ignoring dialect', () => {
+      const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+      languageGetter.mockReturnValue('en-GB');
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['en-US'],
+        defaultLanguage: 'en-US',
+      });
+      expect(properties.currentLanguage).toEqual('en-US');
+    });
+
+    test('resets current language when missing in availableLanguages', () => {
+      const dummyReturn = 'cs';
+      Storage.prototype.getItem = jest.fn();
+      mocked(localStorage.getItem).mockReturnValueOnce(dummyReturn);
+      properties.config = new TolgeeConfig({
+        availableLanguages: ['en', 'de'],
+        defaultLanguage: 'en',
+      });
+      expect(properties.currentLanguage).toEqual('en');
+    });
+  });
+});

package/src/Properties.ts

@@ -0,0 +1,112 @@
+import { TolgeeConfig } from './TolgeeConfig';
+import { Mode, Scope } from './types';
+
+const PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY = '__tolgee_preferredLanguages';
+const CURRENT_LANGUAGE_LOCAL_STORAGE_KEY = '__tolgee_currentLanguage';
+
+export class Properties {
+  config: TolgeeConfig;
+  scopes?: Scope[];
+  projectId?: number;
+  permittedLanguageIds?: number[];
+  mode?: Mode;
+  _currentLanguage?: string;
+
+  get currentLanguage(): string {
+    if (this.config?.forceLanguage) {
+      return this.config.forceLanguage;
+    }
+
+    if (!this._currentLanguage) {
+      this._currentLanguage = this.getInitialLanguage();
+    }
+
+    return this._currentLanguage;
+  }
+
+  set currentLanguage(language: string) {
+    if (!language) {
+      throw new Error(`Setting invalid language value ${language}`);
+    }
+    this._currentLanguage = language;
+
+    if (
+      this.config?.enableLanguageStore &&
+      typeof localStorage !== 'undefined'
+    ) {
+      localStorage.setItem(CURRENT_LANGUAGE_LOCAL_STORAGE_KEY, language);
+    }
+  }
+
+  get preferredLanguages(): Set<string> {
+    return new Set(
+      JSON.parse(localStorage.getItem(PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY))
+    );
+  }
+
+  set preferredLanguages(languages: Set<string>) {
+    localStorage.setItem(
+      PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,
+      JSON.stringify(Array.from(languages))
+    );
+  }
+
+  private getInitialLanguage() {
+    if (this.config.enableLanguageStore) {
+      const storedLanguage = this.getStoredLanguage();
+      if (storedLanguage) {
+        return storedLanguage;
+      }
+    }
+
+    if (this.config.enableLanguageDetection) {
+      const detectedLanguage = this.getLanguageByNavigator();
+      if (detectedLanguage) {
+        return detectedLanguage;
+      }
+    }
+
+    return this.config.defaultLanguage;
+  }
+
+  private getStoredLanguage() {
+    if (typeof localStorage !== 'undefined') {
+      const storedLanguage = localStorage.getItem(
+        CURRENT_LANGUAGE_LOCAL_STORAGE_KEY
+      );
+
+      if (!this.config.availableLanguages) {
+        return storedLanguage;
+      }
+
+      const isSavedLanguageAvailable =
+        this.config.availableLanguages.indexOf(storedLanguage) > -1;
+
+      if (isSavedLanguageAvailable) {
+        return storedLanguage;
+      }
+    }
+  }
+
+  private getLanguageByNavigator() {
+    if (typeof window !== 'undefined' && this.config.availableLanguages) {
+      const preferred = window.navigator.language;
+      const exactMatch = this.config.availableLanguages.find(
+        (l) => l === preferred
+      );
+      if (exactMatch) {
+        return exactMatch;
+      }
+
+      const getTwoLetters = (fullTag) => fullTag.replace(/^(.+?)(-.*)?$/, '$1');
+
+      const preferredTwoLetter = getTwoLetters(window.navigator.language);
+      const twoLetterMatch = this.config.availableLanguages.find(
+        (l) => getTwoLetters(l) === preferredTwoLetter
+      );
+      if (twoLetterMatch) {
+        return twoLetterMatch;
+      }
+    }
+  }
+}