@tolgee/web 4.9.3-rc.128edeb.0

package/src/TextObserver.ts

@@ -0,0 +1,45 @@
+import type { ObserverInterface, TolgeePlugin } from '@tolgee/core';
+import { GeneralObserver } from './observers/general/GeneralObserver';
+import { setNodeText } from './observers/general/helpers';
+import { TextWrapper } from './observers/text/TextWrapper';
+
+const TextObserverCreator =
+  (): ObserverInterface =>
+  ({ translate, onClick, options }) => {
+    const wrapper = TextWrapper({
+      inputPrefix: options.inputPrefix,
+      inputSuffix: options.inputSuffix,
+      translate,
+    });
+    const { wrap, unwrap, stop, forEachElement, highlight, run } =
+      GeneralObserver(wrapper, options, onClick);
+
+    const retranslate = () => {
+      forEachElement((_, elMeta) => {
+        for (const [node, nodeMeta] of elMeta.nodes.entries()) {
+          if (nodeMeta.keyAttributeOnly) {
+            return;
+          }
+          const result = wrapper.unwrap(nodeMeta.oldTextContent);
+          if (result) {
+            setNodeText(node, result.text);
+          }
+        }
+      });
+    };
+
+    return {
+      wrap,
+      unwrap,
+      stop,
+      run,
+      retranslate,
+      highlight,
+      outputNotFormattable: true,
+    };
+  };
+
+export const TextObserver = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setObserver(TextObserverCreator());
+  return tolgee;
+};

package/src/WebTolgee.ts

@@ -0,0 +1,8 @@
+import { Options, Tolgee as TolgeeCore, TolgeeInstance } from '@tolgee/core';
+import { BrowserExtensionPlugin } from './BrowserExtensionPlugin/BrowserExtensionPlugin';
+
+export const Tolgee = (options?: Partial<Options>): TolgeeInstance => {
+  return TolgeeCore(options).use(BrowserExtensionPlugin());
+};
+
+export { TolgeeCore };

package/src/__test__/browser.extension.test.ts

@@ -0,0 +1,70 @@
+const handshakerUpdate = jest.fn(() => Promise.resolve());
+const Handshaker = jest.fn(() => ({ update: handshakerUpdate }));
+const loadInContextLib = jest.fn(() => Promise.resolve(() => {}));
+
+jest.mock('../tools/extension', () => ({
+  Handshaker,
+}));
+
+import {
+  IN_CONTEXT_EXPORT_NAME,
+  IN_CONTEXT_FILE,
+  IN_CONTEXT_UMD_NAME,
+} from '../BrowserExtensionPlugin/constants';
+
+jest.mock('../BrowserExtensionPlugin/loadInContextLib', () => ({
+  loadInContextLib,
+}));
+
+import { Tolgee } from '@tolgee/core';
+import { BrowserExtensionPlugin } from '../typedIndex';
+import {
+  API_KEY_LOCAL_STORAGE,
+  API_URL_LOCAL_STORAGE,
+} from '../BrowserExtensionPlugin/BrowserExtensionPlugin';
+import fs from 'fs/promises';
+import path from 'path';
+
+describe('compatibility with browser extension', () => {
+  afterEach(() => {
+    sessionStorage.clear();
+  });
+
+  it('sends correct data to extension', async () => {
+    const tolgee = Tolgee({ language: 'en', apiUrl: 'test' });
+    tolgee.use(BrowserExtensionPlugin());
+    await tolgee.run();
+    expect(handshakerUpdate).toBeCalledTimes(1);
+    expect(handshakerUpdate).toBeCalledWith({
+      config: {
+        apiKey: '',
+        apiUrl: 'test',
+      },
+      mode: 'production',
+      uiPresent: true,
+      uiVersion: undefined,
+    });
+  });
+
+  it('loads in-context lib if session storage is set', async () => {
+    sessionStorage.setItem(API_KEY_LOCAL_STORAGE, 'test');
+    sessionStorage.setItem(API_URL_LOCAL_STORAGE, 'test');
+
+    const tolgee = Tolgee({ language: 'en' });
+    tolgee.use(BrowserExtensionPlugin());
+    await tolgee.run();
+
+    expect(loadInContextLib).toBeCalledTimes(1);
+  });
+
+  it('builded module is valid', async () => {
+    // this test works only after build
+    const fileContent = await fs.readFile(
+      path.join(__dirname, `../../dist/${IN_CONTEXT_FILE}`)
+    );
+    expect(fileContent.toString().includes(IN_CONTEXT_UMD_NAME)).toBeTruthy();
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const module = await import(`../../dist/${IN_CONTEXT_FILE}`);
+    expect(typeof module[IN_CONTEXT_EXPORT_NAME]).toEqual('function');
+  });
+});

package/src/__test__/observer.test.ts

@@ -0,0 +1,13 @@
+import { InvisibleObserver } from '../InvisibleObserver';
+import { TextObserver } from '../TextObserver';
+import { testObserver } from './testObserver';
+import { testRetranslate } from './testRetranslate';
+
+describe('invisble observer', () => {
+  testObserver(InvisibleObserver());
+});
+
+describe('text observer', () => {
+  testObserver(TextObserver());
+  testRetranslate(TextObserver());
+});

package/src/__test__/testObserver.ts

@@ -0,0 +1,106 @@
+import {
+  Tolgee,
+  TolgeeInstance,
+  TolgeePlugin,
+  TOLGEE_ATTRIBUTE_NAME,
+  TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE,
+} from '@tolgee/core';
+import { screen, waitFor } from '@testing-library/dom';
+
+export const testObserver = (plugin: TolgeePlugin) => {
+  describe('observer', () => {
+    let tolgee: TolgeeInstance;
+
+    beforeEach(() => {
+      tolgee = Tolgee()
+        .use(plugin)
+        .init({
+          language: 'en',
+          staticData: { en: { hello: 'world' } },
+        });
+      tolgee.run();
+    });
+
+    afterEach(() => {
+      tolgee.stop();
+    });
+
+    it('runs observer', async () => {
+      document.body.innerHTML = `
+      <span data-testid="translation">${tolgee.t({ key: 'hello' })}</span>
+    `;
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('translation')?.textContent).toEqual(
+          'world'
+        );
+      });
+    });
+
+    it('runs observer', async () => {
+      document.body.innerHTML = `
+      <span data-testid="translation">${tolgee.t({ key: 'hello' })}</span>
+    `;
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('translation')?.textContent).toEqual(
+          'world'
+        );
+      });
+    });
+
+    it('ignoring works', async () => {
+      document.body.innerHTML = `
+      <span data-testid="ignoredTranslation" data-tolgee-restricted="true">
+        ${tolgee.t({ key: 'hello' })}
+        <span data-testid="ignoredInside">${tolgee.t({ key: 'hello' })}</span>  
+      </span>
+      <span data-testid="translation">${tolgee.t({ key: 'hello' })}</span>
+    `;
+
+      await waitFor(() => {
+        expect(
+          screen
+            .queryByTestId('translation')
+            ?.getAttribute(TOLGEE_ATTRIBUTE_NAME)
+        ).not.toBeFalsy();
+        expect(
+          screen
+            .queryByTestId('ignoredTranslation')
+            ?.getAttribute(TOLGEE_ATTRIBUTE_NAME)
+        ).toBeFalsy();
+        expect(
+          screen
+            .queryByTestId('ignoredInside')
+            ?.getAttribute(TOLGEE_ATTRIBUTE_NAME)
+        ).toBeFalsy();
+      });
+    });
+
+    it('key only attribute', async () => {
+      document.body.innerHTML = `
+      <span data-testid="translation" ${TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE}="hello">Hello</span>
+    `;
+
+      await waitFor(() => {
+        expect(
+          screen
+            .queryByTestId('translation')
+            ?.getAttribute(TOLGEE_ATTRIBUTE_NAME)
+        ).not.toBeFalsy();
+      });
+
+      screen
+        .queryByTestId('translation')!
+        .removeAttribute(TOLGEE_WRAPPED_ONLY_DATA_ATTRIBUTE);
+
+      await waitFor(() => {
+        expect(
+          screen
+            .queryByTestId('translation')
+            ?.getAttribute(TOLGEE_ATTRIBUTE_NAME)
+        ).toBeFalsy();
+      });
+    });
+  });
+};

package/src/__test__/testRetranslate.ts

@@ -0,0 +1,47 @@
+import { screen, waitFor } from '@testing-library/dom';
+import {
+  Tolgee,
+  TolgeeInstance,
+  TolgeePlugin,
+  TOLGEE_ATTRIBUTE_NAME,
+} from '@tolgee/core';
+
+export const testRetranslate = (plugin: TolgeePlugin) => {
+  describe('retranslate', () => {
+    let tolgee: TolgeeInstance;
+
+    beforeEach(async () => {
+      tolgee = Tolgee()
+        .use(plugin)
+        .init({
+          language: 'en',
+          staticData: { en: { hello: 'world' }, es: { hello: 'mundo' } },
+        });
+      await tolgee.run();
+    });
+
+    afterEach(() => {
+      tolgee.stop();
+    });
+
+    it('change translation on language change', async () => {
+      document.body.innerHTML = `
+      <span data-testid="translation">${tolgee.t({ key: 'hello' })}</span>
+    `;
+
+      await waitFor(() => {
+        const element = screen.queryByTestId('translation');
+        expect(element?.textContent).toEqual('world');
+        expect(element?.getAttribute(TOLGEE_ATTRIBUTE_NAME)).not.toBeFalsy();
+      });
+
+      await tolgee.changeLanguage('es');
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('translation')?.textContent).toEqual(
+          'mundo'
+        );
+      });
+    });
+  });
+};

package/src/constants.ts

@@ -0,0 +1,12 @@
+// needs to be same as in @tolgee/core package
+export const DEVTOOLS_ID = '__tolgee_dev_tools';
+
+export const DEVTOOLS_Z_INDEX = 2147483000;
+
+export const CHROME_EXTENSION_LINK =
+  'https://chrome.google.com/webstore/detail/tolgee-tools/hacnbapajkkfohnonhbmegojnddagfnj';
+
+export const PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY =
+  '__tolgee_preferredLanguages';
+
+export const MAX_LANGUAGES_SELECTED = 5;

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './ContextUi';
+export * from './DevTools';
+export * from './InContextTools';
+export * from './typedIndex';
+export {
+  PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,
+  DEVTOOLS_ID,
+} from './constants';

package/src/observers/general/DomHelper.ts

@@ -0,0 +1,46 @@
+import { ObserverOptions } from '@tolgee/core';
+
+export const DomHelper = (options: ObserverOptions) => {
+  function getParentElement(node: Node): Element | undefined {
+    if (node.parentElement) {
+      return node.parentElement;
+    }
+    if ((node as Attr).ownerElement) {
+      return (node as Attr).ownerElement || undefined;
+    }
+  }
+
+  function getSuitableParent(node: Node): Element {
+    const domParent = getParentElement(node);
+
+    if (domParent === undefined) {
+      // eslint-disable-next-line no-console
+      console.error(node);
+      throw new Error('No suitable parent found for node above.');
+    }
+
+    if (!options.passToParent) {
+      return domParent;
+    }
+
+    if (Array.isArray(options.passToParent)) {
+      const tagNameEquals = (elementTagName: string) =>
+        domParent.tagName.toLowerCase() === elementTagName.toLowerCase();
+      if (options.passToParent.findIndex(tagNameEquals) === -1) {
+        return domParent;
+      }
+    }
+
+    if (typeof options.passToParent === 'function') {
+      if (!options.passToParent(domParent)) {
+        return domParent;
+      }
+    }
+
+    return getSuitableParent(domParent);
+  }
+
+  return Object.freeze({
+    getSuitableParent,
+  });
+};

package/src/observers/general/ElementHighlighter.ts

@@ -0,0 +1,72 @@
+import { ElementMeta, TOLGEE_HIGHLIGHTER_CLASS } from '@tolgee/core';
+import { TolgeeElement } from '../../types';
+
+const HIGHLIGHTER_BASE_STYLE: Partial<CSSStyleDeclaration> = {
+  pointerEvents: 'none',
+  position: 'fixed',
+  boxSizing: 'content-box',
+  zIndex: String(Number.MAX_SAFE_INTEGER),
+  contain: 'layout',
+  display: 'block',
+  borderStyle: 'solid',
+  borderRadius: '4px',
+};
+
+type Props = {
+  highlightColor: string;
+  highlightWidth: number;
+};
+
+export const ElementHighlighter = ({
+  highlightColor,
+  highlightWidth,
+}: Props) => {
+  function initHighlightFunction(
+    element: TolgeeElement,
+    elementMeta: ElementMeta
+  ) {
+    elementMeta.highlight = () => {
+      if (!element.isConnected) {
+        return;
+      }
+      let highlightEl = elementMeta.highlightEl;
+      if (!highlightEl) {
+        highlightEl = document.createElement('div');
+        highlightEl.classList.add(TOLGEE_HIGHLIGHTER_CLASS);
+        Object.entries(HIGHLIGHTER_BASE_STYLE).forEach(([key, value]) => {
+          // @ts-ignore
+          highlightEl!.style[key] = value;
+        });
+        highlightEl.style.borderColor = highlightColor;
+
+        elementMeta.highlightEl = highlightEl;
+        document.body.appendChild(highlightEl);
+      }
+
+      const shape = element.getBoundingClientRect();
+
+      highlightEl.style.borderWidth = highlightWidth + 'px';
+      highlightEl.style.top = shape.top - highlightWidth + 'px';
+      highlightEl.style.left = shape.left - highlightWidth + 'px';
+      highlightEl.style.width = shape.width + 'px';
+      highlightEl.style.height = shape.height + 'px';
+    };
+  }
+
+  function initUnhighlightFunction(
+    element: TolgeeElement,
+    elementMeta: ElementMeta
+  ) {
+    elementMeta.unhighlight = () => {
+      elementMeta.highlightEl?.remove();
+      elementMeta.highlightEl = undefined;
+    };
+  }
+
+  function initHighlighter(element: TolgeeElement, elementMeta: ElementMeta) {
+    initHighlightFunction(element, elementMeta);
+    initUnhighlightFunction(element, elementMeta);
+  }
+
+  return Object.freeze({ initHighlighter });
+};

package/src/observers/general/ElementMeta.ts

@@ -0,0 +1,17 @@
+import type { ElementMeta, KeyAndParams, NodeMeta } from '@tolgee/core';
+
+export function initElementMeta(): ElementMeta {
+  return {
+    nodes: new Map(),
+  };
+}
+
+export function initNodeMeta(
+  oldTextContent: string,
+  keys: KeyAndParams[]
+): NodeMeta {
+  return {
+    oldTextContent,
+    keys,
+  };
+}

package/src/observers/general/ElementRegistry.ts

@@ -0,0 +1,159 @@
+import {
+  FallbackNSTranslation,
+  getFallback,
+  RESTRICTED_ASCENDANT_ATTRIBUTE,
+  TOLGEE_ATTRIBUTE_NAME,
+} from '@tolgee/core';
+import {
+  ElementMeta,
+  KeyWithDefault,
+  NodeMeta,
+  TranslationOnClick,
+  ObserverOptions,
+} from '@tolgee/core';
+import { TolgeeElement } from '../../types';
+
+import { ElementHighlighter } from './ElementHighlighter';
+import { initElementMeta } from './ElementMeta';
+import { ElementStore } from './ElementStore';
+import { compareDescriptors, nodeContains } from './helpers';
+import { MouseEventHandler } from './MouseEventHandler';
+
+export const ElementRegistry = (
+  options: ObserverOptions,
+  onClick: TranslationOnClick
+) => {
+  const elementStore = ElementStore();
+  const elementHighlighter = ElementHighlighter({
+    highlightColor: options.highlightColor,
+    highlightWidth: options.highlightWidth,
+  });
+  const eventHandler = MouseEventHandler({
+    highlightKeys: options.highlightKeys,
+    elementStore,
+    onClick: (event, el) => {
+      const meta = elementStore.get(el)!;
+      onClick(event, {
+        el,
+        meta,
+        keysAndDefaults: getKeysAndDefaults(meta),
+      });
+    },
+  });
+
+  function register(element: Element, node: Node, nodeMeta: NodeMeta) {
+    if (isRestricted(element)) {
+      return;
+    }
+    const tolgeeElement = element as TolgeeElement;
+    let elementMeta = elementStore.get(tolgeeElement);
+    if (!elementMeta) {
+      elementMeta = initElementMeta();
+      elementStore.set(tolgeeElement, elementMeta);
+      tolgeeElement.setAttribute(TOLGEE_ATTRIBUTE_NAME, 'true');
+    }
+    elementMeta.nodes.set(node, nodeMeta);
+    elementHighlighter.initHighlighter(tolgeeElement, elementMeta);
+  }
+
+  function run(mouseHighlight: boolean) {
+    if (mouseHighlight) {
+      eventHandler.run();
+    }
+  }
+
+  function stop() {
+    eventHandler.stop();
+  }
+
+  function isRestricted(element: Element) {
+    const restrictedElements = options.restrictedElements;
+    return (
+      restrictedElements.indexOf(element.tagName.toLowerCase()) !== -1 ||
+      element.closest(`[${RESTRICTED_ASCENDANT_ATTRIBUTE}]`) !== null
+    );
+  }
+
+  function refreshAll() {
+    elementStore.forEachElement((element, meta) => {
+      if (meta.preventClean) {
+        return;
+      }
+      cleanElementInactiveNodes(meta);
+      if (meta.nodes.size === 0) {
+        cleanElement(element, meta);
+      }
+    });
+  }
+
+  function findAll(key?: string, ns?: FallbackNSTranslation) {
+    const result: ElementMeta[] = [];
+    elementStore.forEachElement((_, meta) => {
+      for (const nodeMeta of meta.nodes.values()) {
+        const fits = nodeMeta.keys.find((val) =>
+          compareDescriptors(
+            { key, ns: getFallback(ns) },
+            { key: val.key, ns: getFallback(val.ns) }
+          )
+        );
+        if (fits) {
+          result.push(meta);
+          break;
+        }
+      }
+    });
+    return result;
+  }
+
+  function cleanElementInactiveNodes(meta: ElementMeta) {
+    meta.nodes = new Map(getActiveNodes(meta));
+  }
+
+  function getTargetElement() {
+    return options.targetElement || document.body;
+  }
+
+  function* getActiveNodes(meta: ElementMeta) {
+    for (const [node, nodeMeta] of meta.nodes.entries()) {
+      if (nodeContains(getTargetElement(), node)) {
+        yield [node, nodeMeta] as const;
+      }
+    }
+  }
+
+  function cleanElement(element: TolgeeElement, meta: ElementMeta) {
+    if (meta.highlightEl) {
+      meta.unhighlight?.();
+    }
+    element.removeAttribute(TOLGEE_ATTRIBUTE_NAME);
+    elementStore.remove(element);
+  }
+
+  function getKeyOptions(meta: ElementMeta): KeyWithDefault[] {
+    const nodes = Array.from(meta.nodes.values());
+    return nodes.reduce(
+      (acc, curr) => [
+        ...acc,
+        ...curr.keys.map((k) => ({
+          key: k.key,
+          defaultValue: k.defaultValue,
+          ns: k.ns,
+        })),
+      ],
+      [] as KeyWithDefault[]
+    );
+  }
+
+  function getKeysAndDefaults(meta: ElementMeta): KeyWithDefault[] {
+    return getKeyOptions(meta);
+  }
+
+  return Object.freeze({
+    register,
+    forEachElement: elementStore.forEachElement,
+    findAll,
+    refreshAll,
+    run,
+    stop,
+  });
+};

package/src/observers/general/ElementStore.ts

@@ -0,0 +1,34 @@
+import type { ElementMeta } from '@tolgee/core';
+import { TolgeeElement } from '../../types';
+
+export type RegistredElementsMap = Map<TolgeeElement, ElementMeta>;
+
+export const ElementStore = () => {
+  const registredElements: RegistredElementsMap = new Map();
+
+  function set(el: TolgeeElement, meta: ElementMeta) {
+    registredElements.set(el, meta);
+  }
+
+  function get(el: TolgeeElement | undefined) {
+    return el && registredElements.get(el);
+  }
+
+  function remove(el: TolgeeElement) {
+    return registredElements.delete(el);
+  }
+
+  function forEachElement(
+    callback: (el: TolgeeElement, meta: ElementMeta) => void
+  ) {
+    registredElements.forEach((value, key) => callback(key, value));
+  }
+  return Object.freeze({
+    set,
+    get,
+    remove,
+    forEachElement,
+  });
+};
+
+export type ElementStoreType = ReturnType<typeof ElementStore>;