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

package/lib/ui/client/client.d.ts

@@ -0,0 +1,5 @@
+import { paths } from './apiSchema.generated';
+import { GlobalOptions } from './QueryProvider';
+import { RequestParamsType, ResponseContent } from './types';
+export declare const addProjectIdToUrl: (url: string) => string;
+export declare function client<Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths>(url: Url, method: Method, request: RequestParamsType<Url, Method, Paths>, options: GlobalOptions): Promise<ResponseContent<Url, Method, Paths>>;

package/lib/ui/client/types.d.ts

@@ -0,0 +1,58 @@
+import { paths } from './apiSchema.generated';
+declare type ExcludeAk<T extends Record<string, Record<string, any>>> = Omit<T, 'query'> & {
+    query?: Omit<T['query'], 'ak'>;
+};
+export declare type RequestParamsType<Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths> = ExcludeAk<Omit<OperationSchema<Url, Method, Paths>['parameters'], 'header'>> & OperationSchema<Url, Method, Paths>['requestBody'];
+export declare type ResponseContent<Url extends keyof Paths, Method extends keyof Paths[Url], Paths> = OperationSchema<Url, Method, Paths>['responses'][200] extends NotNullAnyContent ? OperationSchema<Url, Method, Paths>['responses'][200]['content']['*/*'] : OperationSchema<Url, Method, Paths>['responses'][200] extends NotNullJsonHalContent ? OperationSchema<Url, Method, Paths>['responses'][200]['content']['application/hal+json'] : OperationSchema<Url, Method, Paths>['responses'][200] extends NotNullJsonContent ? OperationSchema<Url, Method, Paths>['responses'][200]['content']['application/json'] : OperationSchema<Url, Method, Paths>['responses'][201] extends NotNullAnyContent ? OperationSchema<Url, Method, Paths>['responses'][201]['content']['*/*'] : void;
+declare type NotNullAnyContent = {
+    content: {
+        '*/*': any;
+    };
+};
+declare type NotNullJsonHalContent = {
+    content: {
+        'application/hal+json': any;
+    };
+};
+declare type NotNullJsonContent = {
+    content: {
+        'application/json': any;
+    };
+};
+declare type ResponseType = {
+    200?: {
+        content?: {
+            '*/*'?: any;
+            'application/json'?: any;
+            'application/hal+json'?: any;
+        };
+    } | unknown;
+    201?: {
+        content?: {
+            '*/*'?: any;
+        };
+    } | unknown;
+};
+declare type OperationSchemaType = {
+    requestBody?: {
+        content?: {
+            'multipart/form-data'?: {
+                [key: string]: any;
+            };
+            'application/json'?: any;
+        };
+    };
+    parameters?: {
+        path?: {
+            [key: string]: any;
+        };
+        query?: {
+            [key: string]: {
+                [key: string]: any;
+            } | any;
+        };
+    };
+    responses: ResponseType;
+};
+declare type OperationSchema<Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths> = Paths[Url][Method] extends OperationSchemaType ? Paths[Url][Method] : never;
+export {};

package/lib/ui/client/useQueryApi.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="node" />
+import { RequestOptions } from 'https';
+import { UseQueryOptions, Query, QueryClient, UseMutationOptions } from 'react-query';
+import { paths } from './apiSchema.generated';
+import { RequestParamsType, ResponseContent } from './types';
+export declare type QueryProps<Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths> = {
+    url: Url;
+    method: Method;
+    fetchOptions?: RequestOptions;
+    options?: UseQueryOptions<ResponseContent<Url, Method, Paths>>;
+} & RequestParamsType<Url, Method, Paths>;
+export declare const useApiQuery: <Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths>(props: QueryProps<Url, Method, Paths>) => import("react-query").UseQueryResult<ResponseContent<Url, Method, Paths>, any>;
+export declare type MutationProps<Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths> = {
+    url: Url;
+    method: Method;
+    fetchOptions?: RequestOptions;
+    options?: UseMutationOptions<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>>;
+    invalidatePrefix?: string;
+};
+export declare const useApiMutation: <Url extends keyof Paths, Method extends keyof Paths[Url], Paths = paths>(props: MutationProps<Url, Method, Paths>) => {
+    mutate: import("react-query").UseMutateFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    mutateAsync: import("react-query").UseMutateAsyncFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: true;
+    isLoading: false;
+    isSuccess: false;
+    status: "idle";
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    isPaused: boolean;
+    variables: RequestParamsType<Url, Method, Paths> | undefined;
+} | {
+    mutate: import("react-query").UseMutateFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    mutateAsync: import("react-query").UseMutateAsyncFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: true;
+    isSuccess: false;
+    status: "loading";
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    isPaused: boolean;
+    variables: RequestParamsType<Url, Method, Paths> | undefined;
+} | {
+    mutate: import("react-query").UseMutateFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    mutateAsync: import("react-query").UseMutateAsyncFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    data: undefined;
+    error: any;
+    isError: true;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: false;
+    status: "error";
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    isPaused: boolean;
+    variables: RequestParamsType<Url, Method, Paths> | undefined;
+} | {
+    mutate: import("react-query").UseMutateFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    mutateAsync: import("react-query").UseMutateAsyncFunction<ResponseContent<Url, Method, Paths>, any, RequestParamsType<Url, Method, Paths>, unknown>;
+    data: ResponseContent<Url, Method, Paths>;
+    error: null;
+    isError: false;
+    isIdle: false;
+    isLoading: false;
+    isSuccess: true;
+    status: "success";
+    reset: () => void;
+    context: unknown;
+    failureCount: number;
+    isPaused: boolean;
+    variables: RequestParamsType<Url, Method, Paths> | undefined;
+};
+export declare const matchUrlPrefix: (prefix: string) => {
+    predicate: (query: Query) => boolean;
+};
+export declare const invalidateUrlPrefix: (queryClient: QueryClient, prefix: string) => Promise<void>;

package/lib/ui/common/BodyEnd.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare class BodyEnd extends React.PureComponent<{
+    document?: Document;
+}> {
+    _popup: HTMLElement | null;
+    get document(): Document;
+    get devTools(): HTMLElement | ShadowRoot;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    _render(): void;
+    render(): null;
+}

package/lib/ui/common/FieldTitle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ScFieldTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/ui/common/LoadingButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+declare type Props = ButtonProps & {
+    loading?: boolean;
+};
+export declare const LoadingButton: React.FC<Props>;
+export {};

package/lib/ui/index.d.ts

@@ -0,0 +1,13 @@
+import type { FallbackNSTranslation, UiProps, UiInterface, UiKeyOption } from '@tolgee/core';
+export declare class UI implements UiInterface {
+    private props;
+    private viewerComponent;
+    private keyContextMenu;
+    constructor(props: UiProps);
+    renderViewer(key: string, defaultValue: string | undefined, ns: FallbackNSTranslation): void;
+    getKey(props: {
+        openEvent: MouseEvent;
+        keys: Map<string, string | undefined>;
+    }): Promise<string | undefined>;
+    handleElementClick(event: MouseEvent, keysAndDefaults: UiKeyOption[]): Promise<void>;
+}

package/lib/ui/tools/createProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare type DispatchType<ActionType, DispatchReturn> = (action: ActionType) => DispatchReturn;
+declare type SelectorType<StateType, ReturnType> = (state: StateType) => ReturnType;
+export declare const createProvider: <StateType, ActionType, DispatchReturn, ProviderProps>(body: (props: ProviderProps) => [state: StateType, dispatch: DispatchType<ActionType, DispatchReturn>]) => readonly [React.FC<ProviderProps>, () => DispatchType<ActionType, DispatchReturn>, <SelectorReturn>(selector: SelectorType<StateType, SelectorReturn>) => SelectorReturn];
+export {};

package/lib/ui/tools/isLanguagePermitted.d.ts

@@ -0,0 +1 @@
+export declare const isLanguagePermitted: (language: string, permittedLanguages: number[] | undefined, allLanguages?: any[]) => boolean;

package/lib/ui/tools/sleep.d.ts

@@ -0,0 +1 @@
+export declare const sleep: (ms: number) => Promise<unknown>;

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@tolgee/web",
+  "version": "4.9.3-rc.128edeb.0",
+  "description": "Tolgee for web",
+  "main": "./dist/tolgee-web.cjs.js",
+  "module": "./dist/tolgee-web.esm.js",
+  "types": "./types/index.d.ts",
+  "declaration": true,
+  "directories": {
+    "lib": "lib",
+    "test": "test"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js && tsc --project tsconfig.prod.json",
+    "clean": "rm -rf build build-e2e dist dist-e2e lib",
+    "test": "jest --config ./jest.config.js --collect-coverage",
+    "develop": "concurrently \"rollup -c rollup.dev.js -w\" \"tsc --watch --preserveWatchOutput --project tsconfig.prod.json\" ",
+    "schema": "openapi-typescript http://localhost:8202/v3/api-docs/Accessible%20with%20API%20key --output ./src/ui/client/apiSchema.generated.ts"
+  },
+  "author": "Tolgee",
+  "license": "BSD-3-Clause",
+  "files": [
+    "types/**/*",
+    "lib/**/*",
+    "dist/**/*",
+    "src/**/*",
+    "index.js"
+  ],
+  "dependencies": {
+    "@tolgee/core": "4.9.3-rc.128edeb.0"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.18.6",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.4",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "14.0.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "8.5.0",
+    "@testing-library/dom": "^8.7.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^17.0.8",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.1",
+    "clsx": "^1.1.1",
+    "concurrently": "7.4.0",
+    "jest": "^27.2.4",
+    "jest-fetch-mock": "^3.0.3",
+    "openapi-typescript": "^4.3.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-dropzone": "^11.4.2",
+    "react-query": "^3.39.2",
+    "rollup": "2.79.0",
+    "rollup-plugin-bundle-size": "^1.0.3",
+    "rollup-plugin-replace": "2.2.0",
+    "rollup-plugin-sourcemaps": "^0.6.3",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-visualizer": "^5.8.1",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.6",
+    "typescript": "4.8.3",
+    "use-context-selector": "^1.4.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tolgee/tolgee-js.git"
+  },
+  "exports": {
+    "require": "./dist/tolgee-web.cjs.js",
+    "import": "./dist/tolgee-web.esm.js"
+  },
+  "keywords": [
+    "localization",
+    "languages",
+    "internationalization",
+    "framework",
+    "localize"
+  ],
+  "bugs": {
+    "url": "https://github.com/tolgee/tolgee-js/issues"
+  },
+  "homepage": "https://github.com/tolgee/tolgee-js#readme",
+  "gitHead": "a22312d123c766ce751e5d629ff352e4a1fbe6c2",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BackendFetch.ts

@@ -0,0 +1,64 @@
+import type { BackendInterface, TolgeePlugin } from '@tolgee/core';
+import { GetPath, BackendOptions } from './types';
+
+const trimSlashes = (path: string) => {
+  if (path.endsWith('/')) {
+    return path.slice(0, -1);
+  }
+  return path;
+};
+
+const defaultGetPath: GetPath = ({ namespace, language, prefix }) => {
+  if (namespace) {
+    return `${trimSlashes(prefix)}/${language}/${namespace}.json`;
+  } else {
+    return `${trimSlashes(prefix)}/${language}.json`;
+  }
+};
+
+const defaultGetData = (r: Response) => r.json();
+
+const DEFAULT_OPTIONS = {
+  prefix: '/i18n',
+  getPath: defaultGetPath,
+  getData: defaultGetData,
+  headers: {
+    Accept: 'application/json',
+  },
+};
+
+export const BackendFetchCreator = (
+  options?: Partial<BackendOptions>
+): BackendInterface => {
+  const { prefix, getPath, getData, headers, ...fetchOptions }: BackendOptions =
+    {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      headers: {
+        ...DEFAULT_OPTIONS.headers,
+        ...options?.headers,
+      },
+    };
+  return {
+    getRecord({ namespace, language }) {
+      const path = getPath({
+        namespace,
+        language,
+        prefix,
+      });
+      return fetch(path, { headers, ...fetchOptions }).then((r) => {
+        if (!r.ok) {
+          throw new Error(`${r.url} ${r.status}`);
+        }
+        return getData(r);
+      });
+    },
+  };
+};
+
+export const BackendFetch =
+  (options?: Partial<BackendOptions>): TolgeePlugin =>
+  (tolgee, tools) => {
+    tools.addBackend(BackendFetchCreator(options));
+    return tolgee;
+  };

package/src/BrowserExtensionPlugin/BrowserExtensionPlugin.ts

@@ -0,0 +1,98 @@
+import type { TolgeePlugin } from '@tolgee/core';
+import { Handshaker } from '../tools/extension';
+import { loadInContextLib } from './loadInContextLib';
+
+export const API_KEY_LOCAL_STORAGE = '__tolgee_apiKey';
+export const API_URL_LOCAL_STORAGE = '__tolgee_apiUrl';
+
+function getCredentials() {
+  const apiKey = sessionStorage.getItem(API_KEY_LOCAL_STORAGE) || undefined;
+  const apiUrl = sessionStorage.getItem(API_URL_LOCAL_STORAGE) || undefined;
+
+  if (!apiKey || !apiUrl) {
+    return undefined;
+  }
+
+  return {
+    apiKey,
+    apiUrl,
+  };
+}
+
+function clearSessionStorage() {
+  sessionStorage.removeItem(API_KEY_LOCAL_STORAGE);
+  sessionStorage.removeItem(API_URL_LOCAL_STORAGE);
+}
+
+function onDocumentReady(callback: () => void) {
+  // in case the document is already rendered
+  if (document.readyState !== 'loading') {
+    Promise.resolve().then(() => {
+      callback();
+    });
+  }
+  // modern browsers
+  else if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', callback);
+  }
+}
+
+export type BrowserExtensionProps = {
+  noReload?: boolean;
+};
+
+let BrowserExtensionPlugin = (): TolgeePlugin => (tolgee) => tolgee;
+
+if (typeof window !== 'undefined') {
+  BrowserExtensionPlugin = (): TolgeePlugin => (tolgee) => {
+    const handshaker = Handshaker();
+    const getConfig = () =>
+      ({
+        // prevent extension downloading ui library
+        uiPresent: true,
+        uiVersion: undefined,
+        // tolgee mode
+        mode: tolgee.isDev() ? 'development' : 'production',
+        // pass credentials
+        config: {
+          apiUrl: tolgee.getInitialOptions().apiUrl || '',
+          apiKey: tolgee.getInitialOptions().apiKey || '',
+        },
+      } as const);
+
+    const getTolgeePlugin = async (): Promise<TolgeePlugin> => {
+      const InContextTools = await loadInContextLib(
+        process.env.TOLGEE_UI_VERSION || 'rc'
+      );
+      return (tolgee) => {
+        const credentials = getCredentials()!;
+        tolgee.use(InContextTools(credentials));
+        return tolgee;
+      };
+    };
+
+    tolgee.on('running', ({ value: isRunning }) => {
+      if (isRunning) {
+        onDocumentReady(() => {
+          handshaker.update(getConfig()).catch(clearSessionStorage);
+        });
+      }
+    });
+
+    const credentials = getCredentials();
+    if (credentials) {
+      getTolgeePlugin()
+        .then((plugin) => {
+          tolgee.use(plugin);
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-console
+          console.error('Tolgee: Failed to load in-context tools');
+        });
+    }
+
+    return tolgee;
+  };
+}
+
+export { BrowserExtensionPlugin };

package/src/BrowserExtensionPlugin/constants.ts

@@ -0,0 +1,3 @@
+export const IN_CONTEXT_FILE = 'tolgee-in-context-tools.umd.min.js';
+export const IN_CONTEXT_UMD_NAME = '@tolgee/in-context-tools';
+export const IN_CONTEXT_EXPORT_NAME = 'InContextTools';

package/src/BrowserExtensionPlugin/loadInContextLib.ts

@@ -0,0 +1,32 @@
+import type { InContextTools } from '../InContextTools';
+import {
+  IN_CONTEXT_FILE,
+  IN_CONTEXT_UMD_NAME,
+  IN_CONTEXT_EXPORT_NAME,
+} from './constants';
+
+const CDN_URL = 'https://cdn.jsdelivr.net/npm';
+
+function injectScript(src: string) {
+  return new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = src;
+    script.addEventListener('load', () => resolve());
+    script.addEventListener('error', (e) => reject(e.error));
+    document.body.appendChild(script);
+  });
+}
+
+let injectPromise = null as any as Promise<typeof InContextTools>;
+
+export function loadInContextLib(version?: string) {
+  if (!injectPromise) {
+    injectPromise = injectScript(
+      `${CDN_URL}/@tolgee/web@${version || 'latest'}/dist/${IN_CONTEXT_FILE}`
+    ).then(() => {
+      // @ts-ignore
+      return window[IN_CONTEXT_UMD_NAME][IN_CONTEXT_EXPORT_NAME];
+    });
+  }
+  return injectPromise;
+}

package/src/ContextUi.ts

@@ -0,0 +1,7 @@
+import { TolgeePlugin } from '@tolgee/core';
+import { UI } from './ui/index';
+
+export const ContextUi = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setUi(UI as any);
+  return tolgee;
+};

package/src/DevBackend.ts

@@ -0,0 +1,30 @@
+import { BackendDevInterface, TolgeePlugin } from '@tolgee/core';
+import { getProjectIdFromApiKey } from './tools/decodeApiKey';
+
+const DevBackendCreator = (): BackendDevInterface => ({
+  getRecord({ apiUrl, apiKey, language, namespace, projectId }) {
+    if (namespace) {
+      return undefined;
+    }
+    const pId = getProjectIdFromApiKey(apiKey) ?? projectId;
+    const url =
+      pId !== undefined
+        ? `${apiUrl}/v2/projects/${pId}/translations/${language}`
+        : `${apiUrl}/v2/projects/translations/${language}`;
+
+    return fetch(url, {
+      headers: { 'X-API-Key': apiKey || '' },
+    }).then((r) => {
+      if (r.ok) {
+        return r.json().then((data) => data[language]);
+      } else {
+        throw new Error(r.statusText);
+      }
+    });
+  },
+});
+
+export const DevBackend = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setDevBackend(DevBackendCreator());
+  return tolgee;
+};

package/src/DevTools.ts

@@ -0,0 +1,9 @@
+import { InContextTools } from './InContextTools';
+
+let DevTools: typeof InContextTools = () => (tolgee) => tolgee;
+
+if (process.env.NODE_ENV !== 'production') {
+  DevTools = InContextTools;
+}
+
+export { DevTools };

package/src/InContextTools.ts

@@ -0,0 +1,20 @@
+import type { DevCredentials, TolgeePlugin } from '@tolgee/core';
+import { InvisibleObserver } from './InvisibleObserver';
+import { DevBackend } from './DevBackend';
+import { ContextUi } from './ContextUi';
+
+export const InContextTools =
+  (overrideCredentials?: DevCredentials): TolgeePlugin =>
+  (tolgee, tools) => {
+    tolgee.use(DevBackend());
+    if (!tools.hasObserver()) {
+      tolgee.use(InvisibleObserver());
+    }
+    if (!tools.hasUi()) {
+      tolgee.use(ContextUi());
+    }
+    if (overrideCredentials) {
+      tools.overrideCredentials(overrideCredentials);
+    }
+    return tolgee;
+  };

package/src/InvisibleObserver.ts

@@ -0,0 +1,16 @@
+import type { ObserverInterface, TolgeePlugin } from '@tolgee/core';
+import { GeneralObserver } from './observers/general/GeneralObserver';
+import { InvisibleWrapper } from './observers/invisible/InvisibleWrapper';
+
+const InvisibleObserverCreator =
+  (): ObserverInterface =>
+  ({ onClick, options }) => {
+    const wrapper = InvisibleWrapper();
+    const observer = GeneralObserver(wrapper, options, onClick);
+    return { ...observer, retranslate: () => {}, outputNotFormattable: false };
+  };
+
+export const InvisibleObserver = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setObserver(InvisibleObserverCreator());
+  return tolgee;
+};

package/src/LanguageDetector.test.ts

@@ -0,0 +1,19 @@
+jest.autoMockOff();
+import { LanguageDetectorCreator } from './LanguageDetector';
+
+describe('language detector', () => {
+  beforeEach(() => {
+    const languageGetter = jest.spyOn(window.navigator, 'language', 'get');
+    languageGetter.mockReturnValue('cs-CZ');
+  });
+
+  it('detects language', () => {
+    const detector = LanguageDetectorCreator();
+
+    const result = detector.getLanguage({
+      availableLanguages: ['cs', 'sk'],
+    });
+
+    expect(result).toEqual('cs');
+  });
+});

package/src/LanguageDetector.ts

@@ -0,0 +1,32 @@
+import type { LanguageDetectorInterface, TolgeePlugin } from '@tolgee/core';
+
+export const LanguageDetectorCreator = (): LanguageDetectorInterface => {
+  return {
+    getLanguage({ availableLanguages }) {
+      if (typeof window !== 'undefined' && availableLanguages) {
+        const preferred = window.navigator.language;
+        const exactMatch = availableLanguages.find((l) => l === preferred);
+        if (exactMatch) {
+          return exactMatch;
+        }
+
+        const getTwoLetters = (fullTag: string) =>
+          fullTag.replace(/^(.+?)(-.*)?$/, '$1');
+
+        const preferredTwoLetter = getTwoLetters(window.navigator.language);
+        const twoLetterMatch = availableLanguages.find(
+          (l) => getTwoLetters(l) === preferredTwoLetter
+        );
+        if (twoLetterMatch) {
+          return twoLetterMatch;
+        }
+        return undefined;
+      }
+    },
+  };
+};
+
+export const LanguageDetector = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setLanguageDetector(LanguageDetectorCreator());
+  return tolgee;
+};

package/src/LanguageStorage.ts

@@ -0,0 +1,23 @@
+import type { LanguageStorageInterface, TolgeePlugin } from '@tolgee/core';
+
+const CURRENT_LANGUAGE_LOCAL_STORAGE_KEY = '__tolgee_currentLanguage';
+
+export const LanguageStorageCreator = (): LanguageStorageInterface => {
+  return {
+    getLanguage() {
+      const storedLanguage = localStorage.getItem(
+        CURRENT_LANGUAGE_LOCAL_STORAGE_KEY
+      );
+
+      return storedLanguage || undefined;
+    },
+    setLanguage(language: string) {
+      localStorage.setItem(CURRENT_LANGUAGE_LOCAL_STORAGE_KEY, language);
+    },
+  };
+};
+
+export const LanguageStorage = (): TolgeePlugin => (tolgee, tools) => {
+  tools.setLanguageStorage(LanguageStorageCreator());
+  return tolgee;
+};