From ecae71f68fb7851e3a2813be0d405050af6ecaf3 Mon Sep 17 00:00:00 2001 From: medihack Date: Thu, 4 Mar 2021 21:39:12 +0100 Subject: [PATCH 1/3] Fix replace i18n in provider (#1272) --- src/useTranslation.js | 22 ++++++++++++++++------ test/useTranslation.spec.js | 25 +++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/useTranslation.js b/src/useTranslation.js index 8ba619d5..25e2a947 100755 --- a/src/useTranslation.js +++ b/src/useTranslation.js @@ -10,7 +10,7 @@ export function useTranslation(ns, props = {}) { if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces(); if (!i18n) { warnOnce('You will need to pass in an i18next instance by using initReactI18next'); - const notReadyT = k => (Array.isArray(k) ? k[k.length - 1] : k); + const notReadyT = (k) => (Array.isArray(k) ? k[k.length - 1] : k); const retNotReady = [notReadyT, {}, false]; retNotReady.t = notReadyT; retNotReady.i18n = {}; @@ -19,7 +19,9 @@ export function useTranslation(ns, props = {}) { } if (i18n.options.react && i18n.options.react.wait !== undefined) - warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.'); + warnOnce( + 'It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.', + ); const i18nOptions = { ...getDefaults(), ...i18n.options.react, ...props }; const { useSuspense } = i18nOptions; @@ -34,7 +36,7 @@ export function useTranslation(ns, props = {}) { // are we ready? yes if all namespaces in first language are loaded already (either with data or empty object on failed load) const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && - namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions)); + namespaces.every((n) => hasLoadedNamespace(n, i18n, i18nOptions)); // binding t function to namespace (acts also as rerender trigger) function getT() { @@ -68,12 +70,20 @@ export function useTranslation(ns, props = {}) { // unbinding on unmount return () => { isMounted.current = false; - if (bindI18n && i18n) bindI18n.split(' ').forEach(e => i18n.off(e, boundReset)); + if (bindI18n && i18n) bindI18n.split(' ').forEach((e) => i18n.off(e, boundReset)); if (bindI18nStore && i18n) - bindI18nStore.split(' ').forEach(e => i18n.store.off(e, boundReset)); + bindI18nStore.split(' ').forEach((e) => i18n.store.off(e, boundReset)); }; }, [namespaces.join()]); // re-run effect whenever list of namespaces changes + const isInitial = useRef(true); + useEffect(() => { + if (isMounted.current && !isInitial.current) { + setT(getT()); + } + isInitial.current = false; + }, [i18n]); + const ret = [t.t, i18n, ready]; ret.t = t.t; ret.i18n = i18n; @@ -86,7 +96,7 @@ export function useTranslation(ns, props = {}) { if (!ready && !useSuspense) return ret; // not yet loaded namespaces -> load them -> and trigger suspense - throw new Promise(resolve => { + throw new Promise((resolve) => { loadNamespaces(i18n, namespaces, () => { resolve(); }); diff --git a/test/useTranslation.spec.js b/test/useTranslation.spec.js index 282712a5..2955cc1d 100644 --- a/test/useTranslation.spec.js +++ b/test/useTranslation.spec.js @@ -113,4 +113,29 @@ describe('useTranslation', () => { expect(i18nInstance.reportNamespaces.getUsedNamespaces()).toContain(namespace); }); }); + + describe('replacing i18n instance in provider', () => { + i18nInstance.addResource('fr', 'translation', 'key1', 'test2'); + const i18nInstanceClone = i18nInstance.cloneInstance({ lng: 'fr' }); + const wrapper = ({ children, i18n }) => ( + {children} + ); + + it('should render correct content', () => { + const { result, rerender } = renderHook(() => useTranslation(), { + wrapper, + initialProps: { + i18n: i18nInstance, + }, + }); + + const { t: t1 } = result.current; + expect(t1('key1')).toBe('test'); + + rerender({ i18n: i18nInstanceClone }); + + const { t: t2 } = result.current; + expect(t2('key1')).toBe('test2'); + }); + }); }); From b6e50de6c1098ea860689ed7b5e8ee18d4a2a61f Mon Sep 17 00:00:00 2001 From: medihack Date: Fri, 5 Mar 2021 06:04:48 +0100 Subject: [PATCH 2/3] Comment the code --- src/useTranslation.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/useTranslation.js b/src/useTranslation.js index 25e2a947..885bf4ae 100755 --- a/src/useTranslation.js +++ b/src/useTranslation.js @@ -76,13 +76,15 @@ export function useTranslation(ns, props = {}) { }; }, [namespaces.join()]); // re-run effect whenever list of namespaces changes + // t is correctly initialized by useState hook. We only neet to update it after i18n + // instance was replaced (for example in the provider). const isInitial = useRef(true); useEffect(() => { if (isMounted.current && !isInitial.current) { setT(getT()); } isInitial.current = false; - }, [i18n]); + }, [i18n]); // re-run when i18n instance was replaced const ret = [t.t, i18n, ready]; ret.t = t.t; From bd657b6d1b0da889166c8cc0fe4fb234af2b6ee4 Mon Sep 17 00:00:00 2001 From: medihack Date: Fri, 5 Mar 2021 07:34:25 +0100 Subject: [PATCH 3/3] Fixed typo in comment --- src/useTranslation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useTranslation.js b/src/useTranslation.js index 885bf4ae..ccbb3ecd 100755 --- a/src/useTranslation.js +++ b/src/useTranslation.js @@ -76,7 +76,7 @@ export function useTranslation(ns, props = {}) { }; }, [namespaces.join()]); // re-run effect whenever list of namespaces changes - // t is correctly initialized by useState hook. We only neet to update it after i18n + // t is correctly initialized by useState hook. We only need to update it after i18n // instance was replaced (for example in the provider). const isInitial = useRef(true); useEffect(() => {