@lingui/react - npm Package Compare versions

Comparing version 4.0.0-next.2 to 4.0.0-next.3

./build/cjs/index.js

@@ -19,9 +19,9 @@ 'use strict';
     defaultComponent,
-    forceRenderOnLocaleChange = true,
     children
   } = _ref;
+  const latestKnownLocale = React.useRef(i18n.locale);
   /**
    * We can't pass `i18n` object directly through context, because even when locale
    * or messages are changed, i18n object is still the same. Context provider compares
-   * reference identity and suggested workaround is create a wrapper object every time
+   * reference identity and suggested workaround is to create a wrapper object every time
    * we need to trigger re-render. See https://reactjs.org/docs/context.html#caveats.
@@ -34,11 +34,7 @@ *
    */
-  const makeContext = () => ({
+  const makeContext = React.useCallback(() => ({
     i18n,
     defaultComponent
-  });
-  const getRenderKey = () => {
-    return forceRenderOnLocaleChange ? i18n.locale || "default" : "default";
-  };
-  const [context, setContext] = React.useState(makeContext()),
-    [renderKey, setRenderKey] = React.useState(getRenderKey());
+  }), [i18n, defaultComponent]);
+  const [context, setContext] = React.useState(makeContext());
 
@@ -51,25 +47,25 @@ /**
    * we need to trigger re-rendering of LinguiContext.Consumers.
-   *
-   * We call `setContext(makeContext())` after adding the observer in case the `change`
-   * event would already have fired between the inital renderKey calculation and the
-   * `useEffect` hook being called. This can happen if locales are loaded/activated
-   * async.
    */
   React.useEffect(() => {
-    const unsubscribe = i18n.on("change", () => {
+    const updateContext = () => {
+      latestKnownLocale.current = i18n.locale;
       setContext(makeContext());
-      setRenderKey(getRenderKey());
-    });
-    if (renderKey === "default") {
-      setRenderKey(getRenderKey());
+    };
+    const unsubscribe = i18n.on("change", updateContext);
+
+    /**
+     * unlikely, but if the locale changes before the onChange listener
+     * was added, we need to trigger a rerender
+     * */
+    if (latestKnownLocale.current !== i18n.locale) {
+      updateContext();
     }
-    if (forceRenderOnLocaleChange && renderKey === "default") {
-      console.log("I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false.");
-    }
-    return () => unsubscribe();
-  }, []);
-  if (forceRenderOnLocaleChange && renderKey === "default") return null;
+    return unsubscribe;
+  }, [makeContext]);
+  if (!latestKnownLocale.current) {
+    process.env.NODE_ENV === "development" && console.log("I18nProvider rendered `null`. A call to `i18n.activate` needs to happen in order for translations to be activated and for the I18nProvider to render." + "This is not an error but an informational message logged only in development.");
+    return null;
+  }
   return /*#__PURE__*/React.createElement(LinguiContext.Provider, {
-    value: context,
-    key: renderKey
+    value: context
   }, children);
@@ -249,4 +245,5 @@ };
 exports.I18nProvider = I18nProvider;
+exports.LinguiContext = LinguiContext;
 exports.Trans = Trans;
 exports.useLingui = useLingui;
 //# sourceMappingURL=index.js.map

build/cjs/index.js

@@ -19,9 +19,9 @@ 'use strict';
     defaultComponent,
-    forceRenderOnLocaleChange = true,
     children
   } = _ref;
+  const latestKnownLocale = React.useRef(i18n.locale);
   /**
    * We can't pass `i18n` object directly through context, because even when locale
    * or messages are changed, i18n object is still the same. Context provider compares
-   * reference identity and suggested workaround is create a wrapper object every time
+   * reference identity and suggested workaround is to create a wrapper object every time
    * we need to trigger re-render. See https://reactjs.org/docs/context.html#caveats.
@@ -34,11 +34,7 @@ *
    */
-  const makeContext = () => ({
+  const makeContext = React.useCallback(() => ({
     i18n,
     defaultComponent
-  });
-  const getRenderKey = () => {
-    return forceRenderOnLocaleChange ? i18n.locale || "default" : "default";
-  };
-  const [context, setContext] = React.useState(makeContext()),
-    [renderKey, setRenderKey] = React.useState(getRenderKey());
+  }), [i18n, defaultComponent]);
+  const [context, setContext] = React.useState(makeContext());
 
@@ -51,25 +47,25 @@ /**
    * we need to trigger re-rendering of LinguiContext.Consumers.
-   *
-   * We call `setContext(makeContext())` after adding the observer in case the `change`
-   * event would already have fired between the inital renderKey calculation and the
-   * `useEffect` hook being called. This can happen if locales are loaded/activated
-   * async.
    */
   React.useEffect(() => {
-    const unsubscribe = i18n.on("change", () => {
+    const updateContext = () => {
+      latestKnownLocale.current = i18n.locale;
       setContext(makeContext());
-      setRenderKey(getRenderKey());
-    });
-    if (renderKey === "default") {
-      setRenderKey(getRenderKey());
+    };
+    const unsubscribe = i18n.on("change", updateContext);
+
+    /**
+     * unlikely, but if the locale changes before the onChange listener
+     * was added, we need to trigger a rerender
+     * */
+    if (latestKnownLocale.current !== i18n.locale) {
+      updateContext();
     }
-    if (forceRenderOnLocaleChange && renderKey === "default") {
-      console.log("I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false.");
-    }
-    return () => unsubscribe();
-  }, []);
-  if (forceRenderOnLocaleChange && renderKey === "default") return null;
+    return unsubscribe;
+  }, [makeContext]);
+  if (!latestKnownLocale.current) {
+    process.env.NODE_ENV === "development" && console.log("I18nProvider rendered `null`. A call to `i18n.activate` needs to happen in order for translations to be activated and for the I18nProvider to render." + "This is not an error but an informational message logged only in development.");
+    return null;
+  }
   return /*#__PURE__*/React.createElement(LinguiContext.Provider, {
-    value: context,
-    key: renderKey
+    value: context
   }, children);
@@ -249,4 +245,5 @@ };
 exports.I18nProvider = I18nProvider;
+exports.LinguiContext = LinguiContext;
 exports.Trans = Trans;
 exports.useLingui = useLingui;
 //# sourceMappingURL=index.js.map

build/esm/index.js

@@ -17,9 +17,9 @@ import React from 'react';
     defaultComponent,
-    forceRenderOnLocaleChange = true,
     children
   } = _ref;
+  const latestKnownLocale = React.useRef(i18n.locale);
   /**
    * We can't pass `i18n` object directly through context, because even when locale
    * or messages are changed, i18n object is still the same. Context provider compares
-   * reference identity and suggested workaround is create a wrapper object every time
+   * reference identity and suggested workaround is to create a wrapper object every time
    * we need to trigger re-render. See https://reactjs.org/docs/context.html#caveats.
@@ -32,11 +32,7 @@ *
    */
-  const makeContext = () => ({
+  const makeContext = React.useCallback(() => ({
     i18n,
     defaultComponent
-  });
-  const getRenderKey = () => {
-    return forceRenderOnLocaleChange ? i18n.locale || "default" : "default";
-  };
-  const [context, setContext] = React.useState(makeContext()),
-    [renderKey, setRenderKey] = React.useState(getRenderKey());
+  }), [i18n, defaultComponent]);
+  const [context, setContext] = React.useState(makeContext());
 
@@ -49,25 +45,25 @@ /**
    * we need to trigger re-rendering of LinguiContext.Consumers.
-   *
-   * We call `setContext(makeContext())` after adding the observer in case the `change`
-   * event would already have fired between the inital renderKey calculation and the
-   * `useEffect` hook being called. This can happen if locales are loaded/activated
-   * async.
    */
   React.useEffect(() => {
-    const unsubscribe = i18n.on("change", () => {
+    const updateContext = () => {
+      latestKnownLocale.current = i18n.locale;
       setContext(makeContext());
-      setRenderKey(getRenderKey());
-    });
-    if (renderKey === "default") {
-      setRenderKey(getRenderKey());
+    };
+    const unsubscribe = i18n.on("change", updateContext);
+
+    /**
+     * unlikely, but if the locale changes before the onChange listener
+     * was added, we need to trigger a rerender
+     * */
+    if (latestKnownLocale.current !== i18n.locale) {
+      updateContext();
     }
-    if (forceRenderOnLocaleChange && renderKey === "default") {
-      console.log("I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false.");
-    }
-    return () => unsubscribe();
-  }, []);
-  if (forceRenderOnLocaleChange && renderKey === "default") return null;
+    return unsubscribe;
+  }, [makeContext]);
+  if (!latestKnownLocale.current) {
+    process.env.NODE_ENV === "development" && console.log("I18nProvider rendered `null`. A call to `i18n.activate` needs to happen in order for translations to be activated and for the I18nProvider to render." + "This is not an error but an informational message logged only in development.");
+    return null;
+  }
   return /*#__PURE__*/React.createElement(LinguiContext.Provider, {
-    value: context,
-    key: renderKey
+    value: context
   }, children);
@@ -246,3 +242,3 @@ };
 
-export { I18nProvider, Trans, useLingui };
+export { I18nProvider, LinguiContext, Trans, useLingui };
 //# sourceMappingURL=index.js.map

build/index.d.ts

@@ -30,8 +30,8 @@ import React, { ComponentType, FunctionComponent } from 'react';
 type I18nProviderProps = I18nContext & {
-    forceRenderOnLocaleChange?: boolean;
     children?: React.ReactNode;
 };
+declare const LinguiContext: React.Context<I18nContext>;
 declare function useLingui(): I18nContext;
 declare const I18nProvider: FunctionComponent<I18nProviderProps>;
 
-export { I18nContext, I18nProvider, I18nProviderProps, Trans, TransProps, TransRenderProps, useLingui };
+export { I18nContext, I18nProvider, I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderProps, useLingui };

package.json

 {
   "name": "@lingui/react",
-  "version": "4.0.0-next.2",
+  "version": "4.0.0-next.3",
   "sideEffects": false,
@@ -57,3 +57,3 @@ "description": "React components for translations",
     "@babel/runtime": "^7.20.13",
-    "@lingui/core": "^4.0.0-next.2"
+    "@lingui/core": "^4.0.0-next.3"
   },
@@ -63,3 +63,3 @@ "devDependencies": {
   },
-  "gitHead": "556ab57e20c2ac9d384a22424c6a90c2ba0dd133"
+  "gitHead": "29cad1bdcc781994ac4d496e5c4937795423d405"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

67353

decreased by-1%

Lines of code

714

decreased by-1.79%

Number of low supply chain risk alerts

6

increased by100%

Dependency changes

• Updated@lingui/core@^4.0.0-next.3