@tolgee/web 4.9.3-rc.d287ae9.0

package/src/observers/invisible/secret.test.ts

@@ -0,0 +1,61 @@
+jest.disableAutomock();
+
+import {
+  decodeFromText,
+  encodeMessage,
+  INVISIBLE_CHARACTERS,
+  removeSecrets,
+  stringToCodePoints,
+} from './secret';
+
+describe('Invisible encoder/decoder', () => {
+  it('Works with simple text', () => {
+    const message = 'Tolgee' + encodeMessage('secret');
+    expect(decodeFromText(message)).toEqual(['secret']);
+  });
+
+  it('Works with utf-8 text', () => {
+    const message = '💩💩💩' + encodeMessage('💩💩');
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+  });
+
+  it('Works with joiners in text', () => {
+    const message = '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage('💩💩');
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+  });
+
+  it('Removes secrets correctly', () => {
+    const message = '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage('💩💩');
+    const cleanedMessage = removeSecrets(message);
+    expect(cleanedMessage).toEqual('👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦');
+    expect(decodeFromText(cleanedMessage)).toEqual([]);
+  });
+
+  it('works correctly with numbers', () => {
+    [...Array(3)].map((_, i) => {
+      const numbers = [i, i + 10, i + 100, i + 1_000, i + 10_000, i + 100_000];
+      const message =
+        '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage(String.fromCodePoint(...numbers));
+      expect(decodeFromText(message)).toEqual([
+        String.fromCodePoint(...numbers),
+      ]);
+    });
+  });
+
+  it('works with unicode numbers', () => {
+    const message =
+      '👩‍👩‍👦‍👦👩‍👩‍👦‍👦👩‍👩‍👦‍👦' + encodeMessage(String.fromCodePoint(10, 500_000, 1_000_000));
+    const decodedString = decodeFromText(message)[0];
+    expect(stringToCodePoints(decodedString)).toEqual([10, 500_000, 1_000_000]);
+  });
+
+  it('works correctly with multiple non-joiners in row', () => {
+    // valid secret byte is 8 + 1 (non-joiner), so 8 should be ignored
+    const originalMessage = `a${INVISIBLE_CHARACTERS[0].repeat(8)}bcd`;
+    const message = originalMessage + encodeMessage('💩💩');
+    const cleanedMessage = removeSecrets(message);
+    expect(decodeFromText(message)).toEqual(['💩💩']);
+    expect(decodeFromText(cleanedMessage)).toEqual([]);
+    expect(cleanedMessage).toEqual(originalMessage);
+  });
+});

package/src/observers/invisible/secret.ts

@@ -0,0 +1,68 @@
+import { Encoder, Decoder } from './encoderPolyfill';
+
+export const INVISIBLE_CHARACTERS = ['\u200C', '\u200D'];
+
+export const INVISIBLE_REGEX = RegExp(
+  `([${INVISIBLE_CHARACTERS.join('')}]{9})+`,
+  'gu'
+);
+
+const toBytes = (text: string) => {
+  return Array.from(new Encoder().encode(text));
+};
+
+const fromBytes = (bytes: Iterable<number>) => {
+  return new Decoder().decode(new Uint8Array(bytes));
+};
+
+const padToWholeBytes = (binary: string) => {
+  const needsToAdd = 8 - binary.length;
+  return '0'.repeat(needsToAdd) + binary;
+};
+
+export const encodeMessage = (text: string) => {
+  const bytes = toBytes(text).map(Number);
+  const binary = bytes
+    .map((byte) => padToWholeBytes(byte.toString(2)) + '0')
+    .join('');
+
+  const result = Array.from(binary)
+    .map((b) => INVISIBLE_CHARACTERS[Number(b)])
+    .join('');
+
+  return result;
+};
+
+const decodeMessage = (message: string) => {
+  const binary = Array.from(message)
+    .map((character) => {
+      return INVISIBLE_CHARACTERS.indexOf(character);
+    })
+    .map(String)
+    .join('');
+
+  const textBytes = binary.match(/(.{9})/g);
+  const codes = Uint8Array.from(
+    textBytes?.map((byte) => parseInt(byte.slice(0, 8), 2)) || []
+  );
+  return fromBytes(codes);
+};
+
+export const decodeFromText = (text: string) => {
+  const invisibleMessages = text
+    .match(INVISIBLE_REGEX)
+    ?.filter((m) => m.length > 8);
+  return invisibleMessages?.map(decodeMessage) || [];
+};
+
+export const removeSecrets = (text: string) => {
+  return text.replace(INVISIBLE_REGEX, '');
+};
+
+export const stringToCodePoints = (text: string) => {
+  const result: number[] = [];
+  for (const codePoint of text) {
+    result.push(codePoint.codePointAt(0)!);
+  }
+  return result;
+};

package/src/observers/text/TextWrapper.ts

@@ -0,0 +1,258 @@
+import type {
+  KeyAndParams,
+  TranslatePropsInternal,
+  WrapperAttributeXPathGetter,
+  WrapperInterface,
+  WrapperUnwrapFunction,
+  WrapperWrapFunction,
+} from '@tolgee/core';
+import { isCharEscaped } from './helpers';
+
+type Props = {
+  inputPrefix: string;
+  inputSuffix: string;
+  translate: (params: TranslatePropsInternal) => string;
+};
+
+export const TextWrapper = ({
+  inputPrefix,
+  inputSuffix,
+  translate,
+}: Props): WrapperInterface => {
+  function getRawUnWrapRegex(): string {
+    const escapedPrefix = escapeForRegExp(inputPrefix);
+    const escapedSuffix = escapeForRegExp(inputSuffix);
+    return `(\\\\?)(${escapedPrefix}(.*?)${escapedSuffix})`;
+  }
+
+  function parseUnwrapped(unwrappedString: string): KeyAndParams {
+    let escaped = false;
+    let actual = '';
+    let paramName = '';
+    let readingState:
+      | 'KEY'
+      | 'DEFAULT_VALUE'
+      | 'PARAM_NAME'
+      | 'PARAM_VALUE'
+      | 'NAMESPACE' = 'KEY';
+
+    const result = {
+      key: '',
+      ns: undefined as string[] | undefined,
+      params: {},
+      defaultValue: undefined as string | undefined,
+    } as KeyAndParams;
+
+    const addNamespace = (ns: string) => {
+      if (!result.ns) {
+        result.ns = [];
+      }
+      (result.ns as string[]).push(ns);
+    };
+
+    for (const char of unwrappedString) {
+      if (char === '\\' && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (escaped) {
+        escaped = false;
+        actual += char;
+        continue;
+      }
+      if (readingState === 'KEY' && char === ',') {
+        readingState = 'DEFAULT_VALUE';
+        result.key = actual;
+        actual = '';
+        continue;
+      }
+      if (readingState === 'KEY' && char === '|') {
+        readingState = 'NAMESPACE';
+        result.key = actual;
+        actual = '';
+        continue;
+      }
+      if (readingState === 'NAMESPACE' && char === '|') {
+        readingState = 'NAMESPACE';
+        addNamespace(actual);
+        actual = '';
+        continue;
+      }
+      if (readingState === 'NAMESPACE' && char === ',') {
+        readingState = 'DEFAULT_VALUE';
+        addNamespace(actual);
+        actual = '';
+        continue;
+      }
+      if (readingState === 'KEY' && char === ':') {
+        readingState = 'PARAM_NAME';
+        result.key = actual;
+        actual = '';
+        continue;
+      }
+
+      if (readingState === 'DEFAULT_VALUE' && char === ':') {
+        readingState = 'PARAM_NAME';
+        result.defaultValue = actual;
+        actual = '';
+        continue;
+      }
+
+      if (readingState === 'PARAM_NAME' && char === ':') {
+        readingState = 'PARAM_VALUE';
+        paramName = actual;
+        actual = '';
+        continue;
+      }
+
+      if (readingState === 'PARAM_VALUE' && char === ',') {
+        readingState = 'PARAM_NAME';
+        result.params![paramName] = actual;
+        actual = '';
+        continue;
+      }
+      actual += char;
+    }
+
+    if (readingState === 'KEY') {
+      result.key = actual;
+    }
+
+    if (readingState === 'DEFAULT_VALUE') {
+      result.defaultValue = actual;
+    }
+
+    if (readingState === 'PARAM_VALUE') {
+      result.params![paramName] = actual;
+    }
+
+    if (readingState === 'NAMESPACE') {
+      addNamespace(actual);
+    }
+
+    return result;
+  }
+
+  const unwrap: WrapperUnwrapFunction = (text: string) => {
+    const matchRegexp = new RegExp(getRawUnWrapRegex(), 'gs');
+
+    const keysAndParams: KeyAndParams[] = [];
+
+    let matched = false;
+
+    let match;
+    let start = 0;
+    let result = '';
+    while ((match = matchRegexp.exec(text)) !== null) {
+      let pre = match[1] as string;
+      const [fullMatch, _, wrapped, unwrapped] = match as unknown as [
+        string,
+        string,
+        string,
+        string
+      ];
+      const { index, input } = match;
+      result += input.substr(start, index - start);
+      start = index + fullMatch.length;
+      if (pre === '\\') {
+        if (!isCharEscaped(index, text)) {
+          result += wrapped;
+          continue;
+        }
+        pre = '';
+      }
+      const translated = getTranslatedWithMetadata(unwrapped);
+      keysAndParams.push({
+        key: translated.key,
+        params: translated.params,
+        defaultValue: translated.defaultValue,
+      });
+      matched = true;
+      result += pre + translated.translated;
+    }
+
+    result += text.substring(start);
+
+    if (matched) {
+      return { text: result, keys: keysAndParams };
+    }
+
+    return { text: text, keys: [] };
+  };
+
+  const wrap: WrapperWrapFunction = ({
+    key,
+    params,
+    defaultValue,
+    ns,
+  }): string => {
+    let paramString = Object.entries(params || {})
+      .map(
+        ([name, value]) =>
+          `${escapeParam(name)}:${escapeParam(value as string)}`
+      )
+      .join(',');
+    paramString = paramString.length ? `:${paramString}` : '';
+
+    const defaultString =
+      defaultValue !== undefined ? `,${escapeParam(defaultValue)}` : '';
+
+    const nsArray = typeof ns === 'string' ? [ns] : ns;
+
+    const namespaces = nsArray?.length
+      ? `|${nsArray.map((ns) => escapeParam(ns)).join('|')}`
+      : '';
+
+    return `${inputPrefix}${escapeParam(
+      key
+    )}${namespaces}${defaultString}${paramString}${inputSuffix}`;
+  };
+
+  function getTranslatedWithMetadata(text: string) {
+    const { key, params, defaultValue, ns } = parseUnwrapped(text);
+    const translated = translate({
+      key,
+      params,
+      defaultValue,
+      ns,
+      noWrap: true,
+    });
+    return { translated, key, params, defaultValue };
+  }
+
+  const escapeForRegExp = (string: string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  };
+
+  const escapeParam = (param: any) => {
+    if (typeof param === 'string') {
+      return param.replace(/[,:|\\]/gs, '\\$&');
+    }
+    if (typeof param === 'number' || typeof param === 'bigint') {
+      return param.toString();
+    }
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Parameters of type "${typeof param}" are not supported in "text" wrapper mode.`
+    );
+    return param;
+  };
+
+  const getTextXPath = () => {
+    return `./descendant-or-self::text()[contains(., '${inputPrefix}') and contains(., '${inputSuffix}')]`;
+  };
+
+  const getAttributeXPath: WrapperAttributeXPathGetter = ({
+    tag,
+    attribute,
+  }) => {
+    return `descendant-or-self::${tag}/@${attribute}[contains(., '${inputPrefix}') and contains(., '${inputSuffix}')]`;
+  };
+
+  return Object.freeze({
+    wrap,
+    unwrap,
+    getTextXPath,
+    getAttributeXPath,
+  });
+};

package/src/observers/text/helpers.ts

@@ -0,0 +1,56 @@
+export function splitOnNonEscapedDelimiter(
+  string: string,
+  delimiter: string
+): string[] {
+  const result = [];
+  let actual = '';
+  let escaped = false;
+  for (let i = 0; i < string.length; i++) {
+    const char = string[i];
+    if (char === '\\' && !escaped) {
+      escaped = true;
+      continue;
+    }
+    if (escaped) {
+      escaped = false;
+      actual += char;
+      continue;
+    }
+    if (char === delimiter) {
+      result.push(actual);
+      actual = '';
+      continue;
+    }
+    actual += char;
+  }
+  result.push(actual);
+  return result;
+}
+
+export function isCharEscaped(position: number, fullString: string) {
+  let escapeCharsCount = 0;
+  while (position > -1 && fullString[position - 1] === '\\') {
+    escapeCharsCount++;
+    position--;
+  }
+  return escapeCharsCount % 2 == 1;
+}
+
+export function removeEscapes(string: string) {
+  let result = '';
+  let escaped = false;
+  for (let i = 0; i < string.length; i++) {
+    const char = string[i];
+    if (char === '\\' && !escaped) {
+      escaped = true;
+      continue;
+    }
+    if (escaped) {
+      escaped = false;
+      result += char;
+      continue;
+    }
+    result += char;
+  }
+  return result;
+}

package/src/tools/decodeApiKey.test.ts

@@ -0,0 +1,14 @@
+import { getProjectIdFromApiKey } from './decodeApiKey';
+
+const PAK_KEY = 'tgpak_gfpxm4lin4zdazleoq4gm2rumfxgi2lfom2gw4dpguzxc';
+const OLD_KEY = 'ryj4psai6vetel5b27ven6fajf';
+
+describe('get projectId from api key', () => {
+  it('can decode from pak key', () => {
+    expect(getProjectIdFromApiKey(PAK_KEY)).toEqual(1);
+  });
+
+  it("won't fail on legacy code", () => {
+    expect(getProjectIdFromApiKey(OLD_KEY)).toBeUndefined();
+  });
+});

package/src/tools/decodeApiKey.ts

@@ -0,0 +1,74 @@
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+function readChar(char: string) {
+  const idx = alphabet.indexOf(char);
+
+  if (idx === -1) {
+    throw new Error('Invalid character found: ' + char);
+  }
+
+  return idx;
+}
+
+function arrayBufferToString(buffer: any) {
+  const bufView = new Uint8Array(buffer);
+  const length = bufView.length;
+  let result = '';
+  let addition = Math.pow(2, 16) - 1;
+
+  for (let i = 0; i < length; i += addition) {
+    if (i + addition > length) {
+      addition = length - i;
+    }
+    result += String.fromCharCode.apply(
+      null,
+      // @ts-ignore
+      bufView.subarray(i, i + addition)
+    );
+  }
+
+  return result;
+}
+
+function base32Decode(input: string) {
+  input = input.toUpperCase();
+
+  const length = input.length;
+
+  let bits = 0;
+  let value = 0;
+
+  let index = 0;
+  const output = new Uint8Array(((length * 5) / 8) | 0);
+
+  for (let i = 0; i < length; i++) {
+    value = (value << 5) | readChar(input[i]);
+    bits += 5;
+
+    if (bits >= 8) {
+      output[index++] = (value >>> (bits - 8)) & 255;
+      bits -= 8;
+    }
+  }
+
+  return arrayBufferToString(output.buffer);
+}
+
+export function getProjectIdFromApiKey(
+  key: string | undefined
+): number | undefined {
+  if (!key) {
+    return undefined;
+  }
+  try {
+    const [prefix, rest] = key.split('_');
+    if (prefix === 'tgpak') {
+      const [projectId] = base32Decode(rest).split('_');
+      return Number(projectId);
+    }
+  } catch {
+    // eslint-disable-next-line no-console
+    console.warn("Tolgee: Api key can't be parsed");
+  }
+  return undefined;
+}

package/src/tools/extension.test.ts

@@ -0,0 +1,159 @@
+import { sleep } from '../ui/tools/sleep';
+import {
+  detectExtension,
+  Handshaker,
+  sendAndRecieve,
+  takeScreenshot,
+} from './extension';
+
+describe('communicates with extension correctly', () => {
+  let registerListener = jest.fn();
+  let postMessageMock = jest.fn();
+  beforeEach(() => {
+    registerListener = jest.fn();
+    window.addEventListener = jest.fn((_, listener) =>
+      registerListener(listener)
+    );
+    window.removeEventListener = jest.fn();
+
+    postMessageMock = jest.fn();
+    window.postMessage = postMessageMock;
+
+    // @ts-ignore
+    window.setTimeout = jest.fn((callback) =>
+      Promise.resolve().then(() => callback())
+    );
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('sends correct message', async () => {
+    const { promise } = sendAndRecieve({
+      message: 'PING',
+      recievingMessage: ['PONG'],
+      data: 'testData',
+    });
+    registerListener.mock.calls[0][0]({
+      data: { type: 'PONG', data: 'resultData' },
+    });
+    const result = await promise;
+    expect(result).toEqual('resultData');
+    expect(postMessageMock.mock.calls[0][0]).toEqual({
+      type: 'PING',
+      data: 'testData',
+    });
+  });
+
+  it('repeats message correctly', async () => {
+    const { promise } = sendAndRecieve({
+      message: 'PING',
+      recievingMessage: ['PONG'],
+      data: 'testData',
+      attempts: 7,
+    });
+    const result = await promise.catch(() => 'error');
+    expect(postMessageMock).toBeCalledTimes(7);
+    expect(result).toEqual('error');
+  });
+
+  it('cancels repetition', async () => {
+    const { promise, cancel } = sendAndRecieve({
+      message: 'PAT',
+      recievingMessage: ['MAT'],
+      data: 'testData',
+      attempts: 7,
+    });
+    promise.catch(() => 'error');
+    cancel();
+    await sleep(10);
+    expect(postMessageMock).toBeCalledTimes(1);
+  });
+
+  it('ping detects if extension is present', async () => {
+    const promise = detectExtension();
+    expect(postMessageMock.mock.calls[0][0].type).toEqual('TOLGEE_PING');
+    registerListener.mock.calls[0][0]({
+      data: { type: 'TOLGEE_PONG', data: undefined },
+    });
+    const result = await promise;
+    expect(result).toEqual(true);
+    expect(registerListener).toBeCalled();
+    expect(window.removeEventListener).toBeCalled();
+  });
+
+  it('ping timeouts if extension is not present', async () => {
+    const result = await detectExtension();
+    expect(result).toEqual(false);
+    expect(postMessageMock).toBeCalledTimes(2);
+  });
+
+  it('take screenshot works', async () => {
+    const promise = takeScreenshot();
+    registerListener.mock.calls[0][0]({
+      data: { type: 'TOLGEE_SCREENSHOT_TAKEN', data: 'test' },
+    });
+
+    const result = await promise;
+    expect(result).toEqual('test');
+  });
+
+  it('take screenshot throws error', async () => {
+    const result = await takeScreenshot().catch(() => 'error');
+    expect(result).toEqual('error');
+  });
+
+  ['TOLGEE_PLUGIN_READY', 'TOLGEE_PLUGIN_UPDATED'].forEach((event) => {
+    it(`handshaker works with ${event}`, async () => {
+      const handshaker = Handshaker();
+      const promise = handshaker.update({
+        uiPresent: false,
+        mode: 'production',
+        config: {
+          apiUrl: 'test',
+          apiKey: 'test',
+        },
+      });
+      expect(registerListener).toBeCalled();
+
+      registerListener.mock.calls[0][0]({
+        data: { type: event, data: true },
+      });
+
+      const result = await promise;
+
+      expect(result).toEqual(true);
+    });
+  });
+
+  it('handshaker throws error if extension not present', async () => {
+    const handshaker = Handshaker();
+    const promise = handshaker.update({
+      uiPresent: false,
+      mode: 'production',
+      config: {
+        apiUrl: 'test',
+        apiKey: 'test',
+      },
+    });
+
+    const result = await promise.catch(() => 'error');
+    expect(result).toEqual('error');
+  });
+
+  it('handshaker will send only the last message', async () => {
+    const handshaker = Handshaker();
+    handshaker.update('first message' as any);
+    await handshaker.update('second message' as any).catch(() => 'error');
+    expect(
+      postMessageMock.mock.calls.filter(
+        (args) => args[0].data === 'first message'
+      )
+    ).toHaveLength(1);
+    expect(
+      postMessageMock.mock.calls.filter(
+        (args) => args[0].data === 'second message'
+      )
+    ).toHaveLength(4);
+  });
+});