@lingui/react 4.4.0 → 4.4.1

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const shim = require('use-sync-external-store/shim');
 
 const LinguiContext = React.createContext(null);
 function useLingui() {
@@ -17,7 +18,6 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const latestKnownLocale = React.useRef(i18n.locale);
   const makeContext = React.useCallback(
     () => ({
       i18n,
@@ -26,25 +26,36 @@ const I18nProvider = ({
     }),
     [i18n, defaultComponent]
   );
-  const [context, setContext] = React.useState(makeContext());
-  React.useEffect(() => {
-    const updateContext = () => {
-      latestKnownLocale.current = i18n.locale;
-      setContext(makeContext());
-    };
-    const unsubscribe = i18n.on("change", updateContext);
-    if (latestKnownLocale.current !== i18n.locale) {
-      updateContext();
-    }
-    return unsubscribe;
-  }, [i18n, makeContext]);
-  if (!latestKnownLocale.current) {
+  const context = React.useRef(makeContext());
+  const subscribe = React.useCallback(
+    (onStoreChange) => {
+      const renderWithFreshContext = () => {
+        context.current = makeContext();
+        onStoreChange();
+      };
+      const propsChanged = context.current.i18n !== i18n || context.current.defaultComponent !== defaultComponent;
+      if (propsChanged) {
+        renderWithFreshContext();
+      }
+      return i18n.on("change", renderWithFreshContext);
+    },
+    [makeContext, i18n, defaultComponent]
+  );
+  const getSnapshot = React.useCallback(() => {
+    return context.current;
+  }, []);
+  const contextObject = shim.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+  if (!contextObject.i18n.locale) {
     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 }, children);
+  return /* @__PURE__ */ React.createElement(LinguiContext.Provider, { value: contextObject }, children);
 };
 
 const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
@@ -116,10 +127,6 @@ function getElements(parts) {
 }
 const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
 
-function Trans(props) {
-  const lingui = useLingui();
-  return React.createElement(TransNoContext, { ...props, lingui });
-}
 function TransNoContext(props) {
   const {
     render,
@@ -180,8 +187,12 @@ const RenderFragment = ({ children }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
+function Trans(props) {
+  const lingui = useLingui();
+  return React.createElement(TransNoContext, { ...props, lingui });
+}
+
 exports.I18nProvider = I18nProvider;
 exports.LinguiContext = LinguiContext;
 exports.Trans = Trans;
-exports.TransNoContext = TransNoContext;
 exports.useLingui = useLingui;

package/dist/index.d.ts

@@ -26,19 +26,6 @@ type TransProps = {
     comment?: string;
     children?: React.ReactNode;
 } & TransRenderCallbackOrComponent;
-declare function Trans(props: TransProps): React.ReactElement<any, any> | null;
-/**
- * Version of `<Trans>` component without using a Provider/Context React feature.
- * Primarily made for support React Server Components (RSC)
- *
- * @experimental the api of this component is not stabilized yet.
- */
-declare function TransNoContext(props: TransProps & {
-    lingui: {
-        i18n: I18n;
-        defaultComponent?: ComponentType<TransRenderProps>;
-    };
-}): React.ReactElement<any, any> | null;
 
 type I18nContext = {
     i18n: I18n;
@@ -52,4 +39,6 @@ declare const LinguiContext: React.Context<I18nContext | null>;
 declare function useLingui(): I18nContext;
 declare const I18nProvider: FunctionComponent<I18nProviderProps>;
 
-export { I18nContext, I18nProvider, I18nProviderProps, LinguiContext, Trans, TransNoContext, TransProps, TransRenderCallbackOrComponent, TransRenderProps, useLingui };
+declare function Trans(props: TransProps): React.ReactElement<any, any> | null;
+
+export { I18nContext, I18nProvider, I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderCallbackOrComponent, TransRenderProps, useLingui };

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const LinguiContext = React.createContext(null);
 function useLingui() {
@@ -15,8 +16,7 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const latestKnownLocale = React.useRef(i18n.locale);
-  const makeContext = React.useCallback(
+  const makeContext = useCallback(
     () => ({
       i18n,
       defaultComponent,
@@ -24,25 +24,36 @@ const I18nProvider = ({
     }),
     [i18n, defaultComponent]
   );
-  const [context, setContext] = React.useState(makeContext());
-  React.useEffect(() => {
-    const updateContext = () => {
-      latestKnownLocale.current = i18n.locale;
-      setContext(makeContext());
-    };
-    const unsubscribe = i18n.on("change", updateContext);
-    if (latestKnownLocale.current !== i18n.locale) {
-      updateContext();
-    }
-    return unsubscribe;
-  }, [i18n, makeContext]);
-  if (!latestKnownLocale.current) {
+  const context = useRef(makeContext());
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      const renderWithFreshContext = () => {
+        context.current = makeContext();
+        onStoreChange();
+      };
+      const propsChanged = context.current.i18n !== i18n || context.current.defaultComponent !== defaultComponent;
+      if (propsChanged) {
+        renderWithFreshContext();
+      }
+      return i18n.on("change", renderWithFreshContext);
+    },
+    [makeContext, i18n, defaultComponent]
+  );
+  const getSnapshot = useCallback(() => {
+    return context.current;
+  }, []);
+  const contextObject = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getSnapshot
+  );
+  if (!contextObject.i18n.locale) {
     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 }, children);
+  return /* @__PURE__ */ React.createElement(LinguiContext.Provider, { value: contextObject }, children);
 };
 
 const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
@@ -114,10 +125,6 @@ function getElements(parts) {
 }
 const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
 
-function Trans(props) {
-  const lingui = useLingui();
-  return React.createElement(TransNoContext, { ...props, lingui });
-}
 function TransNoContext(props) {
   const {
     render,
@@ -178,4 +185,9 @@ const RenderFragment = ({ children }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
-export { I18nProvider, LinguiContext, Trans, TransNoContext, useLingui };
+function Trans(props) {
+  const lingui = useLingui();
+  return React.createElement(TransNoContext, { ...props, lingui });
+}
+
+export { I18nProvider, LinguiContext, Trans, useLingui };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingui/react",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "sideEffects": false,
   "description": "React components for translations",
   "main": "./dist/index.cjs",
@@ -63,17 +63,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@lingui/core": "4.4.0"
+    "@lingui/core": "4.4.1",
+    "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
     "@lingui/jest-mocks": "*",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.13",
+    "@types/use-sync-external-store": "^0.0.3",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unbuild": "^1.1.2"
   },
-  "gitHead": "c36c0340ced1c4b76d5e1c340785932122449ac9"
+  "gitHead": "e7103c9f06a493e5871086e121f037309b0b742c"
 }