@tolgee/core 4.9.2 → 4.9.3-rc.730f576.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;
+};