@tolgee/core 4.9.2 → 4.9.3-rc.128edeb.0

package/src/Controller/State/State.ts

@@ -0,0 +1,175 @@
+import {
+  CacheDescriptor,
+  CacheDescriptorInternal,
+  DevCredentials,
+  EventEmitterInstance,
+  FallbackNSTranslation,
+} from '../../types';
+import { decodeCacheKey } from '../Cache/helpers';
+import { getFallbackArray, getFallbackFromStruct, unique } from './helpers';
+import { initObserverOptions, ObserverOptions } from './initObserverOptions';
+import { initState, Options } from './initState';
+
+export const State = (
+  onLanguageChange: EventEmitterInstance<string>,
+  onPendingLanguageChange: EventEmitterInstance<string>,
+  onRunningChange: EventEmitterInstance<boolean>
+) => {
+  let state = initState();
+  let observerOptions = initObserverOptions();
+  let devCredentials: DevCredentials = undefined;
+
+  function init(options?: Partial<Options>) {
+    state = initState(options, state);
+  }
+
+  function isRunning() {
+    return state.isRunning;
+  }
+
+  function setRunning(value: boolean) {
+    if (state.isRunning !== value) {
+      state.isRunning = value;
+      onRunningChange.emit(value);
+    }
+  }
+
+  function isInitialLoading() {
+    return state.isInitialLoading;
+  }
+
+  function setInitialLoading(value: boolean) {
+    state.isInitialLoading = value;
+  }
+
+  function getLanguage() {
+    return state.language || state.initialOptions.language;
+  }
+
+  function setLanguage(language: string) {
+    if (state.language !== language) {
+      state.language = language;
+      onLanguageChange.emit(language);
+    }
+  }
+
+  function getPendingLanguage() {
+    return state.pendingLanguage || getLanguage();
+  }
+
+  function setPendingLanguage(language: string) {
+    if (state.pendingLanguage !== language) {
+      state.pendingLanguage = language;
+      onPendingLanguageChange.emit(language);
+    }
+  }
+
+  function getInitialOptions() {
+    return { ...state.initialOptions, ...devCredentials };
+  }
+
+  function addActiveNs(ns: FallbackNSTranslation) {
+    const namespaces = getFallbackArray(ns);
+    namespaces.forEach((namespace) => {
+      const value = state.activeNamespaces.get(namespace);
+      if (value !== undefined) {
+        state.activeNamespaces.set(namespace, value + 1);
+      } else {
+        state.activeNamespaces.set(namespace, 1);
+      }
+    });
+  }
+
+  function removeActiveNs(ns: FallbackNSTranslation) {
+    const namespaces = getFallbackArray(ns);
+    namespaces.forEach((namespace) => {
+      const value = state.activeNamespaces.get(namespace);
+      if (value !== undefined && value > 1) {
+        state.activeNamespaces.set(namespace, value - 1);
+      } else {
+        state.activeNamespaces.delete(namespace);
+      }
+    });
+  }
+
+  function getRequiredNamespaces() {
+    return unique([
+      ...(state.initialOptions.ns || [state.initialOptions.defaultNs]),
+      ...state.activeNamespaces.keys(),
+    ]);
+  }
+
+  function getFallbackLangs(lang?: string) {
+    const language = lang || getLanguage();
+    if (!language) {
+      return [];
+    }
+    return unique([
+      language,
+      ...getFallbackFromStruct(language, state.initialOptions.fallbackLanguage),
+    ]);
+  }
+
+  function getFallbackNamespaces() {
+    const defaultNs = state.initialOptions.defaultNs;
+    const fallbackNs = state.initialOptions.fallbackNs;
+    const fallbackNamespaces = typeof defaultNs === 'string' ? [defaultNs] : [];
+    return unique([...fallbackNamespaces, ...getFallbackArray(fallbackNs)]);
+  }
+
+  function getAvailableLanguages() {
+    if (state.initialOptions.availableLanguages) {
+      return state.initialOptions.availableLanguages;
+    } else if (state.initialOptions.staticData) {
+      const languagesFromStaticData = Object.keys(
+        state.initialOptions.staticData
+      ).map((key) => decodeCacheKey(key).language);
+      return Array.from(new Set(languagesFromStaticData));
+    }
+  }
+
+  function withDefaultNs(descriptor: CacheDescriptor): CacheDescriptorInternal {
+    return {
+      namespace:
+        descriptor.namespace === undefined
+          ? getInitialOptions().defaultNs
+          : descriptor.namespace,
+      language: descriptor.language,
+    };
+  }
+
+  function overrideCredentials(credentials: DevCredentials) {
+    devCredentials = credentials;
+  }
+
+  function setObserverOptions(options: Partial<ObserverOptions>) {
+    observerOptions = initObserverOptions(options);
+  }
+
+  function getObserverOptions() {
+    return observerOptions;
+  }
+
+  return Object.freeze({
+    init,
+    isRunning,
+    setRunning,
+    isInitialLoading,
+    setInitialLoading,
+    getLanguage,
+    setLanguage,
+    getPendingLanguage,
+    setPendingLanguage,
+    getInitialOptions,
+    addActiveNs,
+    removeActiveNs,
+    getRequiredNamespaces,
+    getFallbackLangs,
+    getFallbackNamespaces,
+    getAvailableLanguages,
+    withDefaultNs,
+    overrideCredentials,
+    setObserverOptions,
+    getObserverOptions,
+  });
+};

package/src/Controller/State/helpers.ts

@@ -0,0 +1,41 @@
+import {
+  FallbackGeneral,
+  FallbackLanguage,
+  FallbackLanguageObject,
+  FallbackLanguageOption,
+} from '../../types';
+
+export function isObject(item: any) {
+  return typeof item === 'object' && !Array.isArray(item) && item !== null;
+}
+
+export function getFallback(value: FallbackGeneral): string[] | undefined {
+  if (typeof value === 'string') {
+    return [value];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return undefined;
+}
+
+export function getFallbackArray(value: FallbackGeneral): string[] {
+  return getFallback(value) || [];
+}
+
+export function getFallbackFromStruct(
+  language: string,
+  fallbackLanguage: FallbackLanguageOption
+) {
+  if (isObject(fallbackLanguage)) {
+    return getFallbackArray(
+      (fallbackLanguage as FallbackLanguageObject)?.[language]
+    );
+  } else {
+    return getFallbackArray(fallbackLanguage as FallbackLanguage);
+  }
+}
+
+export function unique<T>(arr: T[]) {
+  return Array.from(new Set(arr));
+}

package/src/Controller/State/initObserverOptions.ts

@@ -0,0 +1,38 @@
+export type ObserverOptions = {
+  tagAttributes: Record<string, string[]>;
+  highlightKeys: ModifierKey[];
+  highlightColor: string;
+  highlightWidth: number;
+  targetElement?: HTMLElement;
+  restrictedElements: string[];
+  inputPrefix: string;
+  inputSuffix: string;
+  passToParent: (keyof HTMLElementTagNameMap)[] | ((node: Element) => boolean);
+};
+
+export type ModifierKey = 'Alt' | 'Control' | 'Shift' | 'Meta';
+
+const defaultValues: ObserverOptions = {
+  tagAttributes: {
+    textarea: ['placeholder'],
+    input: ['value', 'placeholder'],
+    img: ['alt'],
+    '*': ['aria-label', 'title'],
+  },
+  restrictedElements: ['script', 'style'],
+  highlightKeys: ['Alt'] as ModifierKey[],
+  highlightColor: 'rgb(255, 0, 0)',
+  highlightWidth: 5,
+  inputPrefix: '%-%tolgee:',
+  inputSuffix: '%-%',
+  passToParent: ['option', 'optgroup'],
+};
+
+export const initObserverOptions = (
+  options?: Partial<ObserverOptions>
+): ObserverOptions => {
+  return {
+    ...defaultValues,
+    ...options,
+  };
+};

package/src/Controller/State/initState.ts

@@ -0,0 +1,81 @@
+import {
+  FallbackLanguageOption,
+  FallbackNS,
+  TreeTranslationsData,
+} from '../../types';
+
+export type Options = {
+  /**
+   * Initial language
+   */
+  language?: string;
+  apiUrl?: string;
+  apiKey?: string;
+  projectId?: number;
+  /**
+   * Used when auto detection is not available or is turned off
+   */
+  defaultLanguage?: string;
+  /**
+   * Languages which can be used for language detection
+   * and also limits which values can be stored
+   */
+  availableLanguages?: string[];
+  /**
+   * Language which is used when no translation is available for current one
+   */
+  fallbackLanguage?: FallbackLanguageOption;
+  /**
+   * Namespaces which should be always fetched
+   */
+  ns?: string[];
+  /**
+   * Namespaces to be used to find translation when no explicit namespace set.
+   */
+  fallbackNs?: FallbackNS;
+  /**
+   * Default namespace when no namespace defined (default: '')
+   */
+  defaultNs: string;
+  staticData?: {
+    [key: string]: TreeTranslationsData | (() => Promise<TreeTranslationsData>);
+  };
+};
+
+export type State = {
+  initialOptions: Options;
+  activeNamespaces: Map<string, number>;
+  language: string | undefined;
+  pendingLanguage: string | undefined;
+  isInitialLoading: boolean;
+  isRunning: boolean;
+};
+
+const defaultValues: Options = {
+  defaultNs: '',
+};
+
+export const initState = (
+  options?: Partial<Options>,
+  previousState?: State
+): State => {
+  const initialOptions = {
+    ...defaultValues,
+    ...previousState?.initialOptions,
+    ...options,
+  };
+
+  // remove extra '/' from url end
+  const apiUrl = initialOptions.apiUrl;
+  initialOptions.apiUrl = apiUrl ? apiUrl.replace(/\/+$/, '') : apiUrl;
+
+  return {
+    initialOptions,
+    activeNamespaces:
+      previousState?.activeNamespaces || new Map<string, number>(),
+    language: previousState?.language,
+    pendingLanguage: previousState?.language,
+    isInitialLoading: false,
+    isRunning: false,
+  };
+};

package/src/Controller/ValueObserver.ts

@@ -0,0 +1,26 @@
+export const ValueObserver = <T = any>(
+  initialValue: T,
+  valueGetter: () => T,
+  handler: (value: T) => void
+): ValueObserverInstance<T> => {
+  let previousValue: T = initialValue;
+  function init(value: T) {
+    previousValue = value;
+  }
+  function notify() {
+    const value = valueGetter();
+    if (previousValue !== value) {
+      handler(value);
+    }
+    previousValue = value;
+  }
+  return Object.freeze({
+    init,
+    notify,
+  });
+};
+
+export type ValueObserverInstance<T> = {
+  readonly init: (value: T) => void;
+  readonly notify: () => void;
+};

package/src/FormatSimple/FormatError.ts

@@ -0,0 +1,26 @@
+export const ERROR_PARAM_EMPTY = 0,
+  ERROR_UNEXPECTED_CHAR = 1,
+  ERROR_UNEXPECTED_END = 2;
+
+export type ErrorCode =
+  | typeof ERROR_PARAM_EMPTY
+  | typeof ERROR_UNEXPECTED_CHAR
+  | typeof ERROR_UNEXPECTED_END;
+
+export class FormatError extends Error {
+  public readonly code: ErrorCode;
+  public readonly index: number;
+  constructor(code: ErrorCode, index: number, text: string) {
+    let error: string;
+    if (code === ERROR_PARAM_EMPTY) {
+      error = 'Empty parameter';
+    } else if (code === ERROR_UNEXPECTED_CHAR) {
+      error = 'Unexpected character';
+    } else {
+      error = 'Unexpected end';
+    }
+    super(`Tolgee parser: ${error} at ${index} in "${text}"`);
+    this.code = code;
+    this.index = index;
+  }
+}

package/src/FormatSimple/FormatSimple.ts

@@ -0,0 +1,13 @@
+import { formatter } from './formatter';
+import { FinalFormatterInterface, TolgeePlugin } from '../types';
+
+export function FormatSimpleCreator(): FinalFormatterInterface {
+  return {
+    format: ({ translation, params }) => formatter(translation, params),
+  };
+}
+
+export const FormatSimple = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setFinalFormatter(FormatSimpleCreator());
+  return tolgee;
+};

package/src/FormatSimple/formatParser.ts

@@ -0,0 +1,133 @@
+import {
+  ErrorCode,
+  ERROR_PARAM_EMPTY,
+  ERROR_UNEXPECTED_CHAR,
+  ERROR_UNEXPECTED_END,
+  FormatError,
+} from './FormatError';
+
+function isWhitespace(ch: string) {
+  return /\s/.test(ch);
+}
+
+const STATE_TEXT = 0,
+  STATE_ESCAPE_MAYBE = 1,
+  STATE_ESCAPE = 2,
+  STATE_PARAM = 3,
+  STATE_PARAM_AFTER = 4;
+
+type State =
+  | typeof STATE_TEXT
+  | typeof STATE_ESCAPE_MAYBE
+  | typeof STATE_ESCAPE
+  | typeof STATE_PARAM
+  | typeof STATE_PARAM_AFTER;
+
+const END_STATES = new Set<State>([
+  STATE_ESCAPE,
+  STATE_ESCAPE_MAYBE,
+  STATE_TEXT,
+]);
+const CHAR_ESCAPE = "'";
+const ESCAPABLE = new Set(['{', '}', CHAR_ESCAPE]);
+
+const isAllowedInParam = (char: string) => {
+  return /[0-9a-zA-Z_]/.test(char);
+};
+
+export function formatParser(translation: string) {
+  let state: State = STATE_TEXT;
+  let text = '';
+  let param = '';
+  let ch = '';
+  const texts: string[] = [];
+  const params: string[] = [];
+
+  let i = 0;
+
+  function parsingError(code: ErrorCode): never {
+    throw new FormatError(code, i, translation);
+  }
+
+  const addText = () => {
+    texts.push(text);
+    text = '';
+  };
+
+  const addParamChar = () => {
+    if (!isAllowedInParam(ch)) {
+      parsingError(ERROR_UNEXPECTED_CHAR);
+    }
+    param += ch;
+  };
+
+  const addParam = () => {
+    if (param === '') {
+      parsingError(ERROR_PARAM_EMPTY);
+    }
+    params.push(param);
+    param = '';
+  };
+
+  for (i = 0; i < translation.length; i++) {
+    ch = translation[i];
+    switch (state) {
+      case STATE_TEXT:
+        if (ch === CHAR_ESCAPE) {
+          text += ch;
+          state = STATE_ESCAPE_MAYBE;
+        } else if (ch === '{') {
+          addText();
+          state = STATE_PARAM;
+        } else {
+          text += ch;
+          state = STATE_TEXT;
+        }
+        break;
+
+      case STATE_ESCAPE_MAYBE:
+        if (ESCAPABLE.has(ch)) {
+          text = text.slice(0, -1) + ch;
+          state = STATE_ESCAPE;
+        } else {
+          text += ch;
+          state = STATE_TEXT;
+        }
+        break;
+      case STATE_ESCAPE:
+        if (ch === CHAR_ESCAPE) {
+          state = STATE_TEXT;
+        } else {
+          text += ch;
+          state = STATE_ESCAPE;
+        }
+        break;
+      case STATE_PARAM:
+        if (ch === '}') {
+          addParam();
+          state = STATE_TEXT;
+        } else if (!isWhitespace(ch)) {
+          addParamChar();
+          state = STATE_PARAM;
+        } else if (param !== '') {
+          addParam();
+          state = STATE_PARAM_AFTER;
+        }
+
+        break;
+      case STATE_PARAM_AFTER:
+        if (ch == '}') {
+          state = STATE_TEXT;
+        } else if (isWhitespace(ch)) {
+          state = STATE_PARAM_AFTER;
+        } else {
+          parsingError(ERROR_UNEXPECTED_CHAR);
+        }
+    }
+  }
+  if (!END_STATES.has(state)) {
+    parsingError(ERROR_UNEXPECTED_END);
+  }
+  addText();
+  return [texts, params];
+}