@tolgee/react 4.9.2 → 5.0.0-rc.0b3e627.0

package/dist/GlobalContextPlugin.d.ts

@@ -0,0 +1,4 @@
+import type { TolgeePlugin } from '@tolgee/core';
+import type { ReactOptions, TolgeeReactContext } from './types';
+export declare const GlobalContextPlugin: (options?: Partial<ReactOptions>) => TolgeePlugin;
+export declare function getGlobalContext(): TolgeeReactContext | undefined;

package/dist/ReactPlugin.d.ts

@@ -0,0 +1,6 @@
+import { TolgeePlugin } from '@tolgee/core';
+import { ObserverOptions } from '@tolgee/devtools-web';
+import { ReactOptions } from './types';
+declare type Props = Partial<ObserverOptions> & Partial<ReactOptions>;
+export declare const ReactPlugin: (props?: Props) => TolgeePlugin;
+export {};

package/dist/T.d.ts

@@ -1,14 +1,12 @@
+import { FallbackNSTranslation, TranslateParams } from '@tolgee/core';
 import { FunctionComponent } from 'react';
 import { ParamsTags } from './types';
 declare type TProps = {
-    parameters?: ParamsTags;
+    params?: TranslateParams<ParamsTags>;
     children?: string;
     noWrap?: boolean;
-    /**
-     * @deprecated Use noWrap to disable in-context wrapping
-     */
-    strategy?: 'ELEMENT_WRAP' | 'TEXT_WRAP' | 'NO_WRAP';
     keyName?: string;
+    ns?: FallbackNSTranslation;
 };
 export declare const T: FunctionComponent<TProps>;
 export {};

package/dist/TolgeeProvider.d.ts

@@ -1,11 +1,12 @@
-import React, { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
-import { Tolgee, TolgeeConfig } from '@tolgee/core';
-declare type ContextValueType = TolgeeConfig & {
-    tolgee: Tolgee;
+import React from 'react';
+import { TolgeeInstance } from '@tolgee/core';
+import { ReactOptions, TolgeeReactContext } from './types';
+export declare const DEFAULT_REACT_OPTIONS: ReactOptions;
+export declare const TolgeeProviderContext: React.Context<TolgeeReactContext | undefined>;
+declare type Props = {
+    tolgee: TolgeeInstance;
+    options?: ReactOptions;
+    fallback?: React.ReactNode;
 };
-export declare const TolgeeProviderContext: React.Context<ContextValueType>;
-declare type TolgeeProviderProps = TolgeeConfig & {
-    loadingFallback?: ReactNode;
-};
-export declare const TolgeeProvider: FunctionComponent<PropsWithChildren<TolgeeProviderProps>>;
+export declare const TolgeeProvider: React.FC<Props>;
 export {};

package/dist/TolgeeProvider.spec.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package/dist/__integration/T.spec.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package/dist/__integration/TolgeeProvider.spec.d.ts

@@ -1,6 +1,6 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 export declare const createFetchMock: () => {
     fetch: import("jest-fetch-mock/types").FetchMock;
-    resolveCzech: any;
-    resolveEnglish: any;
+    resolveCzech: undefined;
+    resolveEnglish: undefined;
 };

package/dist/__integration/mockTranslations.d.ts

@@ -6,11 +6,18 @@ declare const _default: {
         with_tags: string;
         with_tag: string;
     };
+    'en:test': {
+        test: string;
+        test_english_fallback: string;
+    };
     cs: {
         hello_world: string;
         peter_dogs: string;
         with_tags: string;
         with_tag: string;
     };
+    'cs:test': {
+        test: string;
+    };
 };
 export default _default;

package/dist/__integration/namespaces.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/__integration/useTolgee.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/__integration/useTranslation.spec.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

package/dist/hooks.d.ts

@@ -0,0 +1 @@
+export declare const useRerender: () => () => void;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-import { useTranslate } from './useTranslate';
-import { TolgeeProvider, TolgeeProviderContext } from './TolgeeProvider';
-import { useSetLanguage } from './useSetLanguage';
-import { T } from './T';
-import { useCurrentLanguage } from './useCurrentLanguage';
-export { T, TolgeeProvider, TolgeeProviderContext, useSetLanguage, useTranslate, useCurrentLanguage, };
+export { useTranslate } from './useTranslate';
+export { TolgeeProvider, TolgeeProviderContext } from './TolgeeProvider';
+export { T } from './T';
+export { useTolgee } from './useTolgee';
+export { ReactPlugin } from './ReactPlugin';
+export * from './types';
+export * from '@tolgee/core';
+export * from '@tolgee/devtools-web';

package/dist/tagsTools.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TranslationParamsTags } from '@tolgee/core';
 import { ParamsTags } from './types';
-export declare const wrapTagHandlers: (params: ParamsTags) => TranslationParamsTags<React.ReactNode>;
+export declare const wrapTagHandlers: (params: ParamsTags) => any;
 export declare const addReactKeys: (val: React.ReactNode | React.ReactNode[] | undefined) => React.ReactNode;

package/dist/tolgee-react.cjs.js

@@ -4,27 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var core = require('@tolgee/core');
+var devtoolsWeb = require('@tolgee/devtools-web');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /******************************************************************************
@@ -68,43 +51,131 @@ function __read(o, n) {
         finally { if (e) throw e.error; }
     }
     return ar;
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
-var TolgeeProviderContext = React__default["default"].createContext(null);
-var TolgeeProvider = function (props) {
-    var config = __assign({}, props);
-    delete config.children;
-    delete config.loadingFallback;
-    var _a = __read(React.useState(core.Tolgee.use(core.IcuFormatter).init(__assign({ wrapperMode: 'invisible', ui: process.env.NODE_ENV !== 'development'
-            ? undefined
-            : typeof require !== 'undefined'
-                ? require('@tolgee/ui')
-                : Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@tolgee/ui')); }) }, config))), 1), tolgee = _a[0];
-    var _b = __read(React.useState(tolgee.initialLoading), 2), loading = _b[0], setLoading = _b[1];
-    //rerender components on forceLanguage change
-    React.useEffect(function () {
-        if (config.forceLanguage !== undefined) {
-            tolgee.properties.config.forceLanguage = config.forceLanguage;
-            tolgee.lang = config.forceLanguage;
-        }
-    }, [config.forceLanguage]);
+var DEFAULT_REACT_OPTIONS = {
+    useSuspense: true,
+};
+var TolgeeProviderContext = React__default["default"].createContext(undefined);
+var TolgeeProvider = function (_a) {
+    var tolgee = _a.tolgee, options = _a.options, children = _a.children, fallback = _a.fallback;
+    var _b = __read(React.useState(!tolgee.isLoaded()), 2), loading = _b[0], setLoading = _b[1];
     React.useEffect(function () {
-        tolgee.run().then(function () { return setLoading(false); });
+        tolgee.run().then(function () {
+            setLoading(false);
+        });
         return function () {
             tolgee.stop();
         };
     }, []);
-    return (React__default["default"].createElement(TolgeeProviderContext.Provider, { value: __assign(__assign({}, props), { tolgee: tolgee }) }, !loading ? props.children : props.loadingFallback));
+    var optionsWithDefault = __assign(__assign({}, DEFAULT_REACT_OPTIONS), options);
+    if (optionsWithDefault.useSuspense) {
+        return (React__default["default"].createElement(TolgeeProviderContext.Provider, { value: { tolgee: tolgee, options: optionsWithDefault } },
+            React__default["default"].createElement(React.Suspense, { fallback: fallback || null }, children)));
+    }
+    return (React__default["default"].createElement(TolgeeProviderContext.Provider, { value: { tolgee: tolgee, options: optionsWithDefault } }, fallback && loading ? fallback : children));
 };
 
+var globalContext;
+var GlobalContextPlugin = function (options) {
+    return function (tolgee) {
+        globalContext = {
+            tolgee: tolgee,
+            options: __assign(__assign({}, DEFAULT_REACT_OPTIONS), options),
+        };
+        return tolgee;
+    };
+};
+function getGlobalContext() {
+    return globalContext;
+}
+
 var useTolgeeContext = function () {
-    var context = React.useContext(TolgeeProviderContext);
-    if (context === null) {
-        throw new Error('Tolgee context is null. Is this code executed inside TolgeeProvider component?');
+    var context = React.useContext(TolgeeProviderContext) || getGlobalContext();
+    if (!context) {
+        throw new Error("Couldn't find tolgee instance, did you forgot to use `ReactPlugin`?");
     }
     return context;
 };
 
+var useTranslateInternal = function (ns, options) {
+    var _a = useTolgeeContext(), tolgee = _a.tolgee, defaultOptions = _a.options;
+    var namespaces = core.getFallback(ns);
+    var namespacesJoined = core.getFallbackArray(namespaces).join(':');
+    var currentOptions = __assign(__assign({}, defaultOptions), options);
+    // dummy state to enable re-rendering
+    var _b = __read(React.useState(0), 2), instance = _b[0], setInstance = _b[1];
+    var forceRerender = React.useCallback(function () {
+        setInstance(function (v) { return v + 1; });
+    }, [setInstance]);
+    var subscriptionRef = React.useRef();
+    var subscriptionQueue = React.useRef([]);
+    var subscribeToKey = function (key) {
+        if (subscriptionRef.current) {
+            subscriptionRef.current.subscribeKey(key);
+        }
+        else {
+            subscriptionQueue.current.push(key);
+        }
+    };
+    React.useEffect(function () {
+        subscriptionRef.current = tolgee.onKeyUpdate(forceRerender);
+        subscriptionQueue.current.forEach(function (key) {
+            subscriptionRef.current.subscribeKey(key);
+        });
+        subscriptionQueue.current = [];
+        return function () {
+            subscriptionRef.current.unsubscribe();
+        };
+    }, []);
+    var isLoaded = tolgee.isLoaded(namespaces);
+    React.useEffect(function () {
+        if (!isLoaded) {
+            subscriptionRef.current.subscribeNs(namespaces);
+            return function () {
+                subscriptionRef.current.unsubscribeNs(namespaces);
+            };
+        }
+    }, [namespacesJoined, isLoaded]);
+    React.useEffect(function () {
+        tolgee.addActiveNs(namespaces);
+        return function () { return tolgee.removeActiveNs(namespaces); };
+    }, [namespacesJoined]);
+    var t = React.useCallback(function (props) {
+        var fallbackNs = props.ns || (namespaces === null || namespaces === void 0 ? void 0 : namespaces[0]);
+        subscribeToKey({ key: props.key, ns: fallbackNs });
+        return tolgee.t(__assign(__assign({}, props), { ns: fallbackNs }));
+    }, [tolgee, instance]);
+    if ((currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.useSuspense) && !isLoaded) {
+        throw tolgee.addActiveNs(namespaces, true);
+    }
+    return { t: t, isLoading: !isLoaded };
+};
+
+var useTranslate = function (ns, options) {
+    var _a = useTranslateInternal(ns, options), tInternal = _a.t, isLoading = _a.isLoading;
+    var t = React.useCallback(function () {
+        var params = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            params[_i] = arguments[_i];
+        }
+        // @ts-ignore
+        var props = core.getTranslateParams.apply(void 0, __spreadArray([], __read(params), false));
+        return tInternal(props);
+    }, [tInternal]);
+    return { t: t, isLoading: isLoading };
+};
+
 var wrapTagHandlers = function (params) {
     if (!params) {
         return undefined;
@@ -120,7 +191,9 @@ var wrapTagHandlers = function (params) {
         else if (React__default["default"].isValidElement(value)) {
             var el_1 = value;
             result[key] = function (chunk) {
-                return __assign(__assign({}, el_1), { props: __assign(__assign({}, el_1.props), { children: addReactKeys(chunk) }) });
+                return __assign(__assign({}, el_1), { props: __assign(__assign({}, el_1.props), { children: el_1.props.children !== undefined
+                            ? el_1.props.children
+                            : addReactKeys(chunk) }) });
             };
         }
         else {
@@ -138,156 +211,69 @@ var addReactKeys = function (val) {
     }
 };
 
-var useTranslate = function () {
-    var tolgee = useTolgeeContext().tolgee;
-    var isMounted = React.useRef(false);
-    // dummy state to enable re-rendering
-    var _a = __read(React.useState(0), 2), instance = _a[0], setInstance = _a[1];
-    React.useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
-        };
-    }, []);
-    var forceRerender = React.useCallback(function () {
-        if (isMounted.current) {
-            setInstance(function (v) { return v + 1; });
-        }
-    }, [setInstance, isMounted]);
-    // cache of translations translated with this useTranslate
-    var keysRef = React.useRef([]);
-    var resetMemory = function (key) {
-        keysRef.current = key ? keysRef.current.filter(function (k) { return k !== key; }) : [];
-    };
-    React.useEffect(function () {
-        var subscription = tolgee.onTranslationChange.subscribe(function (_a) {
-            var key = _a.key;
-            if (keysRef.current.includes(key)) {
-                resetMemory(key);
-                forceRerender();
-            }
-        });
-        return function () { return subscription.unsubscribe(); };
-    }, [tolgee]);
-    React.useEffect(function () {
-        var subscription = tolgee.onLangChange.subscribe(function () {
-            if (keysRef.current.length) {
-                resetMemory();
-                forceRerender();
-            }
-        });
-        return function () { return subscription.unsubscribe(); };
-    }, [tolgee]);
-    var getTranslation = React.useCallback(function (key, params, noWrap, defaultValue) {
-        var firstRender = !keysRef.current.includes(key);
-        var translation = tolgee.instant({
-            key: key,
-            params: wrapTagHandlers(params),
-            noWrap: noWrap,
-            defaultValue: defaultValue,
-        });
-        if (firstRender) {
-            keysRef.current.push(key);
-            tolgee
-                .translate({
-                key: key,
-                params: wrapTagHandlers(params),
-                noWrap: noWrap,
-                defaultValue: defaultValue,
-            })
-                .then(function (value) {
-                if (value !== translation) {
-                    forceRerender();
-                }
-            });
-        }
-        return translation;
-    }, [tolgee, keysRef]);
-    var t = React.useCallback(function (keyOrProps) {
-        var params = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            params[_i - 1] = arguments[_i];
-        }
-        var parameters = undefined;
-        var noWrap = undefined;
-        var defaultValue = undefined;
-        // allow user to pass object of params and make the code cleaner
-        var key = typeof keyOrProps === 'object' ? keyOrProps.key : keyOrProps;
-        if (typeof keyOrProps === 'object') {
-            parameters = keyOrProps.parameters;
-            noWrap = keyOrProps.noWrap;
-            defaultValue = keyOrProps.defaultValue;
-        }
-        else {
-            params.forEach(function (param) {
-                switch (typeof param) {
-                    case 'object':
-                        parameters = param;
-                        break;
-                    case 'boolean':
-                        noWrap = param;
-                        break;
-                    case 'string':
-                        defaultValue = param;
-                }
-            });
-        }
-        return addReactKeys(getTranslation(key, parameters, noWrap, defaultValue));
-    }, [getTranslation, instance]);
-    return t;
-};
-
-/**
- * Custom react hook
- * @return function accepting language abbreviation as parameter
- */
-var useSetLanguage = function () {
-    var context = useTolgeeContext();
-    return function (language) { return context.tolgee.changeLanguage(language); };
-};
-
 var T = function (props) {
     var key = props.keyName || props.children;
-    if (!key) {
+    if (key === undefined) {
         // eslint-disable-next-line no-console
         console.error('T component: keyName not defined');
     }
     var defaultValue = props.keyName ? props.children : undefined;
-    var t = useTranslate();
-    var translation = t({
+    var t = useTranslateInternal().t;
+    var translation = addReactKeys(t({
         key: key,
-        parameters: props.parameters,
+        params: wrapTagHandlers(props.params),
         defaultValue: defaultValue,
         noWrap: props.noWrap,
-    });
+        ns: props.ns,
+    }));
     return React__default["default"].createElement(React__default["default"].Fragment, null, translation);
 };
 
-/**
- * Custom react hook
- * @return function accepting language abbreviation as parameter
- */
-var useCurrentLanguage = function () {
-    var context = useTolgeeContext();
-    //to make react rerender components which are using current language
-    var _a = __read(React.useState(context.tolgee.lang), 2), language = _a[0], setLanguage = _a[1];
+var useRerender = function () {
+    var _a = __read(React.useState(0), 2); _a[0]; var setCounter = _a[1];
+    var rerender = React.useCallback(function () {
+        setCounter(function (num) { return num + 1; });
+    }, [setCounter]);
+    return rerender;
+};
+
+var useTolgee = function (events) {
+    var tolgee = useTolgeeContext().tolgee;
+    var rerender = useRerender();
     React.useEffect(function () {
-        var subscription = context.tolgee.onLangChange.subscribe(function (lang) {
-            setLanguage(lang);
-        });
+        var listeners = events === null || events === void 0 ? void 0 : events.map(function (e) { return tolgee.on(e, rerender); });
         return function () {
-            subscription.unsubscribe();
+            listeners === null || listeners === void 0 ? void 0 : listeners.forEach(function (listener) { return listener.unsubscribe(); });
         };
-    }, []);
-    return function () {
-        return language;
+    }, [events === null || events === void 0 ? void 0 : events.join(':')]);
+    return tolgee;
+};
+
+var ReactPlugin = function (props) {
+    return function (tolgee) {
+        return tolgee
+            .use(devtoolsWeb.BrowserExtensionPlugin({ noReload: true }))
+            .use(devtoolsWeb.DevTools({ observer: props }))
+            .use(GlobalContextPlugin(props));
     };
 };
 
+exports.ReactPlugin = ReactPlugin;
 exports.T = T;
 exports.TolgeeProvider = TolgeeProvider;
 exports.TolgeeProviderContext = TolgeeProviderContext;
-exports.useCurrentLanguage = useCurrentLanguage;
-exports.useSetLanguage = useSetLanguage;
+exports.useTolgee = useTolgee;
 exports.useTranslate = useTranslate;
+Object.keys(core).forEach(function (k) {
+    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return core[k]; }
+    });
+});
+Object.keys(devtoolsWeb).forEach(function (k) {
+    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return devtoolsWeb[k]; }
+    });
+});
 //# sourceMappingURL=tolgee-react.cjs.js.map