@tolgee/core 5.10.2 → 5.11.0

package/lib/Controller/Cache/Cache.d.ts

@@ -1,8 +1,8 @@
-import { CacheDescriptor, CacheDescriptorInternal, CacheDescriptorWithKey, NsFallback, TranslationsFlat, TranslationValue, TreeTranslationsData, BackendGetRecord, BackendGetDevRecord } from '../../types';
+import { CacheDescriptor, CacheDescriptorInternal, CacheDescriptorWithKey, NsFallback, TranslationsFlat, TranslationValue, TreeTranslationsData, BackendGetRecordInternal } from '../../types';
 import { EventEmitterInstance } from '../Events/EventEmitter';
 import { TolgeeStaticData } from '../State/initState';
 import { ValueObserverInstance } from '../ValueObserver';
-export declare function Cache(onCacheChange: EventEmitterInstance<CacheDescriptorWithKey>, backendGetRecord: BackendGetRecord, backendGetDevRecord: BackendGetDevRecord, withDefaultNs: (descriptor: CacheDescriptor) => CacheDescriptorInternal, isInitialLoading: () => boolean, fetchingObserver: ValueObserverInstance<boolean>, loadingObserver: ValueObserverInstance<boolean>): Readonly<{
+export declare function Cache(onCacheChange: EventEmitterInstance<CacheDescriptorWithKey>, backendGetRecord: BackendGetRecordInternal, backendGetDevRecord: BackendGetRecordInternal, withDefaultNs: (descriptor: CacheDescriptor) => CacheDescriptorInternal, isInitialLoading: () => boolean, fetchingObserver: ValueObserverInstance<boolean>, loadingObserver: ValueObserverInstance<boolean>): Readonly<{
     addStaticData(data: TolgeeStaticData | undefined): void;
     invalidate(): void;
     addRecord(descriptor: CacheDescriptorInternal, data: TreeTranslationsData): void;

package/lib/Controller/Controller.d.ts

@@ -1,4 +1,4 @@
-import { CacheDescriptor, NsFallback, TolgeeOptions, TFnType, KeyAndNamespacesInternal } from '../types';
+import { CacheDescriptor, NsFallback, TolgeeOptions, TFnType, KeyAndNamespacesInternal, TranslationDescriptor } from '../types';
 declare type StateServiceProps = {
     options?: Partial<TolgeeOptions>;
 };
@@ -36,8 +36,8 @@ export declare function Controller({ options }: StateServiceProps): Readonly<{
     getInitialLanguage: () => string | Promise<string | undefined> | Promise<string | Promise<string | undefined> | undefined> | undefined;
     setStoredLanguage: (language: string) => void;
     getDevBackend: () => import("../types").BackendDevMiddleware | undefined;
-    getBackendRecord: import("../types").BackendGetRecord;
-    getBackendDevRecord: import("../types").BackendGetRecord;
+    getBackendRecord: import("../types").BackendGetRecordInternal;
+    getBackendDevRecord: import("../types").BackendGetRecordInternal;
     getLanguageDetector: () => import("../types").LanguageDetectorMiddleware | undefined;
     retranslate: () => void;
     highlight: import("../types").HighlightInterface;
@@ -76,6 +76,7 @@ export declare function Controller({ options }: StateServiceProps): Readonly<{
         observerType: "invisible" | "text";
         observerOptions: import("./State/observerOptions").ObserverOptionsInternal;
         onFormatError: import("../types").OnFormatError;
+        fetch: import("../types").FetchFn;
     };
     removeActiveNs: (ns: NsFallback) => void;
     getRequiredNamespaces: () => string[];
@@ -93,6 +94,7 @@ export declare function Controller({ options }: StateServiceProps): Readonly<{
     onRunningChange: import("./Events/EventEmitter").EventEmitterInstance<boolean>;
     onCacheChange: import("./Events/EventEmitter").EventEmitterInstance<import("../types").CacheDescriptorWithKey>;
     onUpdate: import("./Events/EventEmitterSelective").EventEmitterSelectiveInstance;
+    onPermanentChange: import("./Events/EventEmitter").EventEmitterInstance<TranslationDescriptor>;
     setEmitterActive: (active: boolean) => void;
     on: import("../types").TolgeeOn<keyof import("../types").EventType>;
 }>;

package/lib/Controller/Events/Events.d.ts

@@ -1,4 +1,4 @@
-import { CacheDescriptorWithKey, TolgeeOn } from '../../types';
+import { CacheDescriptorWithKey, TolgeeOn, TranslationDescriptor } from '../../types';
 export declare function Events(getFallbackNs: () => string[], getDefaultNs: () => string): Readonly<{
     onPendingLanguageChange: import("./EventEmitter").EventEmitterInstance<string>;
     onLanguageChange: import("./EventEmitter").EventEmitterInstance<string>;
@@ -8,6 +8,7 @@ export declare function Events(getFallbackNs: () => string[], getDefaultNs: () =
     onRunningChange: import("./EventEmitter").EventEmitterInstance<boolean>;
     onCacheChange: import("./EventEmitter").EventEmitterInstance<CacheDescriptorWithKey>;
     onUpdate: import("./EventEmitterSelective").EventEmitterSelectiveInstance;
+    onPermanentChange: import("./EventEmitter").EventEmitterInstance<TranslationDescriptor>;
     setEmitterActive(active: boolean): void;
     on: TolgeeOn<keyof import("../../types").EventType>;
 }>;

package/lib/Controller/Plugins/Plugins.d.ts

@@ -1,5 +1,5 @@
-import { BackendDevMiddleware, BackendGetRecord, TranslatePropsInternal, HighlightInterface, LanguageDetectorMiddleware, LanguageStorageMiddleware, ChangeTranslationInterface, WrapperWrapProps, Unwrapped, KeyAndNamespacesInternal, TolgeePlugin, TolgeeInstance, TolgeeOptionsInternal } from '../../types';
-export declare function Plugins(getLanguage: () => string | undefined, getInitialOptions: () => TolgeeOptionsInternal, getAvailableLanguages: () => string[] | undefined, getTranslationNs: (props: KeyAndNamespacesInternal) => string[], getTranslation: (props: KeyAndNamespacesInternal) => string | undefined, changeTranslation: ChangeTranslationInterface): Readonly<{
+import { BackendDevMiddleware, TranslatePropsInternal, HighlightInterface, LanguageDetectorMiddleware, LanguageStorageMiddleware, ChangeTranslationInterface, WrapperWrapProps, Unwrapped, KeyAndNamespacesInternal, TolgeePlugin, TolgeeInstance, TolgeeOptionsInternal, BackendGetRecordInternal, TranslationDescriptor } from '../../types';
+export declare function Plugins(getLanguage: () => string | undefined, getInitialOptions: () => TolgeeOptionsInternal, getAvailableLanguages: () => string[] | undefined, getTranslationNs: (props: KeyAndNamespacesInternal) => string[], getTranslation: (props: KeyAndNamespacesInternal) => string | undefined, changeTranslation: ChangeTranslationInterface, onPermanentChange: (props: TranslationDescriptor) => void): Readonly<{
     addPlugin: (tolgeeInstance: TolgeeInstance, plugin: TolgeePlugin) => void;
     run(): void;
     stop(): void;
@@ -7,8 +7,8 @@ export declare function Plugins(getLanguage: () => string | undefined, getInitia
     getInitialLanguage(): string | Promise<string | undefined> | Promise<string | Promise<string | undefined> | undefined> | undefined;
     setStoredLanguage(language: string): void;
     getDevBackend(): BackendDevMiddleware | undefined;
-    getBackendRecord: BackendGetRecord;
-    getBackendDevRecord: BackendGetRecord;
+    getBackendRecord: BackendGetRecordInternal;
+    getBackendDevRecord: BackendGetRecordInternal;
     getLanguageDetector(): LanguageDetectorMiddleware | undefined;
     retranslate(): void;
     highlight: HighlightInterface;

package/lib/Controller/State/State.d.ts

@@ -26,6 +26,7 @@ export declare function State(onLanguageChange: EventEmitterInstance<string>, on
         observerType: "invisible" | "text";
         observerOptions: import("./observerOptions").ObserverOptionsInternal;
         onFormatError: import("../../types").OnFormatError;
+        fetch: import("../../types").FetchFn;
     };
     addActiveNs(ns: NsFallback): void;
     removeActiveNs(ns: NsFallback): void;

package/lib/Controller/State/initState.d.ts

@@ -1,4 +1,4 @@
-import { FallbackGeneral, FallbackLanguageOption, TreeTranslationsData, OnFormatError } from '../../types';
+import { FallbackGeneral, FallbackLanguageOption, TreeTranslationsData, OnFormatError, FetchFn } from '../../types';
 import { ObserverOptions, ObserverOptionsInternal } from './observerOptions';
 export declare const DEFAULT_FORMAT_ERROR = "invalid";
 export declare const DEFAULT_API_URL = "https://app.tolgee.io";
@@ -71,6 +71,10 @@ export declare type TolgeeOptionsInternal = {
      * Define what to display in case of formatting error. (Default: 'invalid')
      */
     onFormatError: OnFormatError;
+    /**
+     * Define custom fetch function, used for fetching the translations
+     */
+    fetch: FetchFn;
 };
 export declare type TolgeeOptions = Partial<Omit<TolgeeOptionsInternal, 'observerOptions'>> & {
     observerOptions?: ObserverOptions;

package/lib/Controller/State/observerOptions.d.ts

@@ -35,6 +35,10 @@ export declare type ObserverOptionsInternal = {
      * Html elements which will pass click listener to their parent (default: ['option', 'optgroup'])
      */
     passToParent: (keyof HTMLElementTagNameMap)[] | ((node: Element) => boolean);
+    /**
+     * Encodes full key info into the invisble characters (default: false)
+     */
+    fullKeyEncode: boolean;
 };
 export declare type ObserverOptions = Partial<ObserverOptionsInternal>;
 export declare type ModifierKey = 'Alt' | 'Control' | 'Shift' | 'Meta';

package/lib/TolgeeCore.d.ts

@@ -134,9 +134,7 @@ declare function createTolgee(options: TolgeeOptions): Readonly<{
         language?: string | undefined;
         defaultLanguage?: string | undefined;
         availableLanguages?: string[] | undefined;
-        fallbackLanguage?: import("./types").FallbackLanguageOption; /**
-         * Turn off/on events emitting. Is on by default.
-         */
+        fallbackLanguage?: import("./types").FallbackLanguageOption;
         ns?: string[] | undefined;
         fallbackNs?: import("./types").FallbackGeneral;
         defaultNs: string;
@@ -144,6 +142,7 @@ declare function createTolgee(options: TolgeeOptions): Readonly<{
         observerType: "invisible" | "text";
         observerOptions: import("./types").ObserverOptionsInternal;
         onFormatError: import("./types").OnFormatError;
+        fetch: import("./types").FetchFn;
     };
     /**
      * Tolgee is in dev mode if `DevTools` plugin is used and `apiKey` + `apiUrl` are specified.

package/lib/types/events.d.ts

@@ -17,7 +17,7 @@ export declare type ListenerEvent<T> = {
     value: T;
 };
 export declare type Listener<T> = (e: ListenerEvent<T>) => void;
-export declare type TolgeeEvent = 'language' | 'pendingLanguage' | 'loading' | 'fetching' | 'initialLoad' | 'running' | 'cache' | 'update';
+export declare type TolgeeEvent = 'language' | 'pendingLanguage' | 'loading' | 'fetching' | 'initialLoad' | 'running' | 'cache' | 'update' | 'permanentChange';
 export interface EventType {
     language: string;
     pendingLanguage: string;
@@ -27,6 +27,7 @@ export interface EventType {
     running: boolean;
     cache: CacheDescriptorWithKey;
     update: void;
+    permanentChange: CacheDescriptorWithKey;
 }
 export declare type TolgeeOn<E extends keyof EventType = keyof EventType> = {
     /**
@@ -62,5 +63,13 @@ export declare type TolgeeOn<E extends keyof EventType = keyof EventType> = {
      * Emitted when cache changes.
      */
     (event: 'cache', handler: Listener<CacheDescriptorWithKey>): Subscription;
+    /**
+     * Translation was changed or created via dev tools
+     */
+    (event: 'permanentChange', handler: Listener<CacheDescriptorWithKey>): Subscription;
     (event: E, handler: unknown): Subscription;
 };
+export declare type TranslationDescriptor = {
+    key: string;
+    namespace: string | undefined;
+};

package/lib/types/general.d.ts

@@ -32,4 +32,5 @@ export declare type TFnType<T = DefaultParamType, R = string, K extends string =
     (props: TranslateProps<T, K>): R;
 };
 export declare type KeyAndNamespacesInternal = Pick<TranslatePropsInternal, 'key' | 'ns' | 'language'>;
+export declare type FetchFn = (input: string | URL, init?: RequestInit | undefined) => Promise<Response>;
 export {};

package/lib/types/plugin.d.ts

@@ -1,21 +1,26 @@
 import { ChangeTranslationInterface, TreeTranslationsData } from './cache';
-import { NsFallback, NsType, TranslateParams, TranslatePropsInternal } from './general';
+import { FetchFn, NsFallback, NsType, TranslateParams, TranslatePropsInternal } from './general';
 import type { ObserverOptionsInternal } from '../Controller/State/observerOptions';
 import { TolgeeInstance } from '../TolgeeCore';
+import { TranslationDescriptor } from './events';
 export declare type BackendDevProps = {
     apiUrl?: string;
     apiKey?: string;
     projectId?: number | string;
 };
+export declare type CommonProps = {
+    fetch: FetchFn;
+};
 export declare type BackendGetRecordProps = {
     language: string;
     namespace?: string;
 };
-export declare type BackendGetRecord = (data: BackendGetRecordProps) => Promise<TreeTranslationsData | undefined> | undefined;
+export declare type BackendGetRecord = (data: BackendGetRecordProps & CommonProps) => Promise<TreeTranslationsData | undefined> | undefined;
 export interface BackendMiddleware {
     getRecord: BackendGetRecord;
 }
-export declare type BackendGetDevRecord = (data: BackendGetRecordProps & BackendDevProps) => Promise<TreeTranslationsData | undefined> | undefined;
+export declare type BackendGetDevRecord = (data: BackendGetRecordProps & CommonProps & BackendDevProps) => Promise<TreeTranslationsData | undefined> | undefined;
+export declare type BackendGetRecordInternal = (data: BackendGetRecordProps & BackendDevProps) => Promise<TreeTranslationsData | undefined> | undefined;
 export declare type BackendDevMiddleware = {
     getRecord: BackendGetDevRecord;
 };
@@ -56,13 +61,14 @@ export declare type ObserverMiddleware = () => {
 };
 export declare type LanguageDetectorProps = {
     availableLanguages: string[];
+    fetch: FetchFn;
 };
 export declare type LanguageDetectorMiddleware = {
     getLanguage: (props: LanguageDetectorProps) => string | undefined | Promise<string | undefined>;
 };
 export declare type LanguageStorageMiddleware = {
-    getLanguage: () => string | undefined | Promise<string | undefined>;
-    setLanguage: (language: string) => void | Promise<void>;
+    getLanguage: (props: CommonProps) => string | undefined | Promise<string | undefined>;
+    setLanguage: (language: string, props: CommonProps) => void | Promise<void>;
 };
 export declare type DevCredentials = undefined | {
     apiUrl?: string;
@@ -110,6 +116,7 @@ export declare type UiProps = {
     highlight: HighlightInterface;
     findPositions: (key?: string | undefined, ns?: NsFallback) => KeyPosition[];
     changeTranslation: ChangeTranslationInterface;
+    onPermanentChange: (props: TranslationDescriptor) => void;
 };
 export declare type UiKeyOption = {
     key: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolgee/core",
-  "version": "5.10.2",
+  "version": "5.11.0",
   "description": "Library providing ability to translate messages directly in context of developed application.",
   "main": "./dist/tolgee.cjs.js",
   "module": "./dist/tolgee.esm.js",
@@ -68,5 +68,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "38d4c0acf8a1bb14976fac3b9391afde580ee261"
+  "gitHead": "66aec0547ab6d28c0be0958f0dede3e4fde230fa"
 }

package/src/Controller/Cache/Cache.ts

@@ -6,8 +6,7 @@ import {
   TranslationsFlat,
   TranslationValue,
   TreeTranslationsData,
-  BackendGetRecord,
-  BackendGetDevRecord,
+  BackendGetRecordInternal,
 } from '../../types';
 import { getFallbackArray, unique } from '../../helpers';
 import { EventEmitterInstance } from '../Events/EventEmitter';
@@ -30,8 +29,8 @@ type StateCache = Map<string, CacheRecord>;
 
 export function Cache(
   onCacheChange: EventEmitterInstance<CacheDescriptorWithKey>,
-  backendGetRecord: BackendGetRecord,
-  backendGetDevRecord: BackendGetDevRecord,
+  backendGetRecord: BackendGetRecordInternal,
+  backendGetDevRecord: BackendGetRecordInternal,
   withDefaultNs: (descriptor: CacheDescriptor) => CacheDescriptorInternal,
   isInitialLoading: () => boolean,
   fetchingObserver: ValueObserverInstance<boolean>,

package/src/Controller/Controller.ts

@@ -6,6 +6,7 @@ import {
   TFnType,
   NsType,
   KeyAndNamespacesInternal,
+  TranslationDescriptor,
 } from '../types';
 import { Cache } from './Cache/Cache';
 import { getFallbackArray } from '../helpers';
@@ -44,7 +45,8 @@ export function Controller({ options }: StateServiceProps) {
     state.getAvailableLanguages,
     getTranslationNs,
     getTranslation,
-    changeTranslation
+    changeTranslation,
+    onPermanentChange
   );
 
   const cache = Cache(
@@ -105,6 +107,13 @@ export function Controller({ options }: StateServiceProps) {
     };
   }
 
+  function onPermanentChange(props: TranslationDescriptor) {
+    events.onPermanentChange.emit({
+      key: props.key,
+      namespace: props.namespace,
+    });
+  }
+
   function init(options: Partial<TolgeeOptions>) {
     state.init(options);
     cache.addStaticData(state.getInitialOptions().staticData);

package/src/Controller/Events/Events.ts

@@ -1,6 +1,10 @@
 import { EventEmitter } from './EventEmitter';
 import { EventEmitterSelective } from './EventEmitterSelective';
-import { CacheDescriptorWithKey, TolgeeOn } from '../../types';
+import {
+  CacheDescriptorWithKey,
+  TolgeeOn,
+  TranslationDescriptor,
+} from '../../types';
 
 export function Events(
   getFallbackNs: () => string[],
@@ -21,6 +25,7 @@ export function Events(
     onRunningChange: EventEmitter<boolean>(isActive),
     onCacheChange: EventEmitter<CacheDescriptorWithKey>(isActive),
     onUpdate: EventEmitterSelective(isActive, getFallbackNs, getDefaultNs),
+    onPermanentChange: EventEmitter<TranslationDescriptor>(isActive),
     setEmitterActive(active: boolean) {
       emitterActive = active;
     },
@@ -42,6 +47,8 @@ export function Events(
           return self.onCacheChange.listen(handler as any);
         case 'update':
           return self.onUpdate.listen(handler as any);
+        case 'permanentChange':
+          return self.onPermanentChange.listen(handler as any);
       }
     }) as TolgeeOn,
   });

package/src/Controller/Plugins/Plugins.ts

@@ -1,7 +1,6 @@
 import { getErrorMessage, isPromise, valueOrPromise } from '../../helpers';
 import {
   BackendDevMiddleware,
-  BackendGetRecord,
   BackendMiddleware,
   FormatterMiddleware,
   ObserverMiddleware,
@@ -22,6 +21,8 @@ import {
   TolgeeOptionsInternal,
   FormatErrorHandler,
   FindPositionsInterface,
+  BackendGetRecordInternal,
+  TranslationDescriptor,
 } from '../../types';
 import { DEFAULT_FORMAT_ERROR } from '../State/initState';
 
@@ -31,7 +32,8 @@ export function Plugins(
   getAvailableLanguages: () => string[] | undefined,
   getTranslationNs: (props: KeyAndNamespacesInternal) => string[],
   getTranslation: (props: KeyAndNamespacesInternal) => string | undefined,
-  changeTranslation: ChangeTranslationInterface
+  changeTranslation: ChangeTranslationInterface,
+  onPermanentChange: (props: TranslationDescriptor) => void
 ) {
   const plugins = {
     ui: undefined as UiMiddleware | undefined,
@@ -81,6 +83,10 @@ export function Plugins(
     });
   }
 
+  function getCommonProps() {
+    return { fetch: getInitialOptions().fetch };
+  }
+
   function setObserver(observer: ObserverMiddleware | undefined) {
     instances.observer = observer?.();
   }
@@ -126,6 +132,7 @@ export function Plugins(
 
     return instances.languageDetector.getLanguage({
       availableLanguages,
+      ...getCommonProps(),
     });
   }
 
@@ -168,6 +175,7 @@ export function Plugins(
         highlight: self.highlight,
         changeTranslation,
         findPositions,
+        onPermanentChange,
       });
 
       instances.observer?.run({
@@ -189,7 +197,9 @@ export function Plugins(
 
     getInitialLanguage() {
       const availableLanguages = getAvailableLanguages();
-      const languageOrPromise = instances.languageStorage?.getLanguage();
+      const languageOrPromise = instances.languageStorage?.getLanguage(
+        getCommonProps()
+      );
 
       return valueOrPromise(languageOrPromise, (language) => {
         if (
@@ -203,7 +213,7 @@ export function Plugins(
     },
 
     setStoredLanguage(language: string) {
-      instances.languageStorage?.setLanguage(language);
+      instances.languageStorage?.setLanguage(language, getCommonProps());
     },
 
     getDevBackend() {
@@ -212,7 +222,11 @@ export function Plugins(
 
     getBackendRecord: (({ language, namespace }) => {
       for (const backend of instances.backends) {
-        const data = backend.getRecord({ language, namespace });
+        const data = backend.getRecord({
+          language,
+          namespace,
+          ...getCommonProps(),
+        });
         if (isPromise(data)) {
           return data?.catch((e) => {
             // eslint-disable-next-line no-console
@@ -225,7 +239,7 @@ export function Plugins(
         }
       }
       return undefined;
-    }) as BackendGetRecord,
+    }) as BackendGetRecordInternal,
 
     getBackendDevRecord: (({ language, namespace }) => {
       const { apiKey, apiUrl, projectId } = getInitialOptions();
@@ -235,8 +249,9 @@ export function Plugins(
         projectId,
         language,
         namespace,
+        ...getCommonProps(),
       });
-    }) as BackendGetRecord,
+    }) as BackendGetRecordInternal,
 
     getLanguageDetector() {
       return instances.languageDetector;

package/src/Controller/State/initState.ts

@@ -3,6 +3,7 @@ import {
   FallbackLanguageOption,
   TreeTranslationsData,
   OnFormatError,
+  FetchFn,
 } from '../../types';
 import { sanitizeUrl } from '../../helpers';
 import {
@@ -97,6 +98,11 @@ export type TolgeeOptionsInternal = {
    * Define what to display in case of formatting error. (Default: 'invalid')
    */
   onFormatError: OnFormatError;
+
+  /**
+   * Define custom fetch function, used for fetching the translations
+   */
+  fetch: FetchFn;
 };
 
 export type TolgeeOptions = Partial<
@@ -120,6 +126,7 @@ const defaultValues: TolgeeOptionsInternal = {
   observerType: 'invisible',
   onFormatError: DEFAULT_FORMAT_ERROR,
   apiUrl: DEFAULT_API_URL,
+  fetch: (input, options) => fetch(input, options),
 };
 
 export const combineOptions = <T extends TolgeeOptions>(

package/src/Controller/State/observerOptions.ts

@@ -43,6 +43,11 @@ export type ObserverOptionsInternal = {
    * Html elements which will pass click listener to their parent (default: ['option', 'optgroup'])
    */
   passToParent: (keyof HTMLElementTagNameMap)[] | ((node: Element) => boolean);
+
+  /**
+   * Encodes full key info into the invisble characters (default: false)
+   */
+  fullKeyEncode: boolean;
 };
 
 export type ObserverOptions = Partial<ObserverOptionsInternal>;
@@ -63,4 +68,5 @@ export const defaultObserverOptions: ObserverOptionsInternal = {
   inputPrefix: '%-%tolgee:',
   inputSuffix: '%-%',
   passToParent: ['option', 'optgroup'],
+  fullKeyEncode: false,
 };

package/src/types/events.ts

@@ -27,7 +27,8 @@ export type TolgeeEvent =
   | 'initialLoad'
   | 'running'
   | 'cache'
-  | 'update';
+  | 'update'
+  | 'permanentChange';
 
 export interface EventType {
   language: string;
@@ -38,6 +39,7 @@ export interface EventType {
   running: boolean;
   cache: CacheDescriptorWithKey;
   update: void;
+  permanentChange: CacheDescriptorWithKey;
 }
 
 export type TolgeeOn<E extends keyof EventType = keyof EventType> = {
@@ -81,5 +83,19 @@ export type TolgeeOn<E extends keyof EventType = keyof EventType> = {
    * Emitted when cache changes.
    */
   (event: 'cache', handler: Listener<CacheDescriptorWithKey>): Subscription;
+
+  /**
+   * Translation was changed or created via dev tools
+   */
+  (
+    event: 'permanentChange',
+    handler: Listener<CacheDescriptorWithKey>
+  ): Subscription;
+
   (event: E, handler: unknown): Subscription;
 };
+
+export type TranslationDescriptor = {
+  key: string;
+  namespace: string | undefined;
+};

package/src/types/general.ts

@@ -58,3 +58,8 @@ export type KeyAndNamespacesInternal = Pick<
   TranslatePropsInternal,
   'key' | 'ns' | 'language'
 >;
+
+export type FetchFn = (
+  input: string | URL,
+  init?: RequestInit | undefined
+) => Promise<Response>;

package/src/types/plugin.ts

@@ -1,5 +1,6 @@
 import { ChangeTranslationInterface, TreeTranslationsData } from './cache';
 import {
+  FetchFn,
   NsFallback,
   NsType,
   TranslateParams,
@@ -7,6 +8,7 @@ import {
 } from './general';
 import type { ObserverOptionsInternal } from '../Controller/State/observerOptions';
 import { TolgeeInstance } from '../TolgeeCore';
+import { TranslationDescriptor } from './events';
 
 export type BackendDevProps = {
   apiUrl?: string;
@@ -14,13 +16,17 @@ export type BackendDevProps = {
   projectId?: number | string;
 };
 
+export type CommonProps = {
+  fetch: FetchFn;
+};
+
 export type BackendGetRecordProps = {
   language: string;
   namespace?: string;
 };
 
 export type BackendGetRecord = (
-  data: BackendGetRecordProps
+  data: BackendGetRecordProps & CommonProps
 ) => Promise<TreeTranslationsData | undefined> | undefined;
 
 export interface BackendMiddleware {
@@ -28,6 +34,10 @@ export interface BackendMiddleware {
 }
 
 export type BackendGetDevRecord = (
+  data: BackendGetRecordProps & CommonProps & BackendDevProps
+) => Promise<TreeTranslationsData | undefined> | undefined;
+
+export type BackendGetRecordInternal = (
   data: BackendGetRecordProps & BackendDevProps
 ) => Promise<TreeTranslationsData | undefined> | undefined;
 
@@ -82,6 +92,7 @@ export type ObserverMiddleware = () => {
 
 export type LanguageDetectorProps = {
   availableLanguages: string[];
+  fetch: FetchFn;
 };
 
 export type LanguageDetectorMiddleware = {
@@ -91,8 +102,10 @@ export type LanguageDetectorMiddleware = {
 };
 
 export type LanguageStorageMiddleware = {
-  getLanguage: () => string | undefined | Promise<string | undefined>;
-  setLanguage: (language: string) => void | Promise<void>;
+  getLanguage: (
+    props: CommonProps
+  ) => string | undefined | Promise<string | undefined>;
+  setLanguage: (language: string, props: CommonProps) => void | Promise<void>;
 };
 
 export type DevCredentials =
@@ -150,6 +163,7 @@ export type UiProps = {
   highlight: HighlightInterface;
   findPositions: (key?: string | undefined, ns?: NsFallback) => KeyPosition[];
   changeTranslation: ChangeTranslationInterface;
+  onPermanentChange: (props: TranslationDescriptor) => void;
 };
 
 export type UiKeyOption = {