@lingui/react 4.3.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,33 +18,44 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const latestKnownLocale = React.useRef(i18n.locale);
   const makeContext = React.useCallback(
     () => ({
       i18n,
-      defaultComponent
+      defaultComponent,
+      _: i18n.t.bind(i18n)
     }),
     [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]+)\/>/;
@@ -76,7 +88,7 @@ function formatElements(value, elements = {}) {
   if (before)
     tree.push(before);
   for (const [index, children, after] of getElements(parts)) {
-    let element = elements[index];
+    let element = typeof index !== "undefined" ? elements[index] : void 0;
     if (!element || voidElementTags[element.type] && children) {
       if (!element) {
         console.error(
@@ -110,21 +122,26 @@ function getElements(parts) {
   if (!parts.length)
     return [];
   const [paired, children, unpaired, after] = parts.slice(0, 4);
-  return [[paired || unpaired, children || "", after]].concat(
-    getElements(parts.slice(4, parts.length))
-  );
+  const triple = [paired || unpaired, children || "", after];
+  return [triple].concat(getElements(parts.slice(4, parts.length)));
 }
 const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
 
-function Trans(props) {
-  const { i18n, defaultComponent } = useLingui();
-  const { render, component, id, message, formats } = props;
+function TransNoContext(props) {
+  const {
+    render,
+    component,
+    id,
+    message,
+    formats,
+    lingui: { i18n, defaultComponent }
+  } = props;
   const values = { ...props.values };
   const components = { ...props.components };
   if (values) {
     Object.keys(values).forEach((key) => {
       const value = values[key];
-      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every((el) => React.isValidElement(el));
+      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every(React.isValidElement);
       if (!valueIsReactEl)
         return;
       const index = Object.keys(components).length;
@@ -170,6 +187,11 @@ 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;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentType, FunctionComponent } from 'react';
-import { I18n } from '@lingui/core';
+import { MessageOptions, I18n } from '@lingui/core';
 
 type TransRenderProps = {
     id: string;
@@ -10,7 +10,7 @@ type TransRenderProps = {
 };
 type TransRenderCallbackOrComponent = {
     component?: undefined;
-    render?: (props: TransRenderProps) => React.ReactElement<any, any> | null;
+    render?: ((props: TransRenderProps) => React.ReactElement<any, any>) | null;
 } | {
     component?: React.ComponentType<TransRenderProps> | null;
     render?: undefined;
@@ -22,21 +22,23 @@ type TransProps = {
     components?: {
         [key: string]: React.ElementType | any;
     };
-    formats?: Record<string, unknown>;
+    formats?: MessageOptions["formats"];
     comment?: string;
     children?: React.ReactNode;
 } & TransRenderCallbackOrComponent;
-declare function Trans(props: TransProps): React.ReactElement<any, any> | null;
 
 type I18nContext = {
     i18n: I18n;
+    _: I18n["_"];
     defaultComponent?: ComponentType<TransRenderProps>;
 };
-type I18nProviderProps = I18nContext & {
+type I18nProviderProps = Omit<I18nContext, "_"> & {
     children?: React.ReactNode;
 };
-declare const LinguiContext: React.Context<I18nContext>;
+declare const LinguiContext: React.Context<I18nContext | null>;
 declare function useLingui(): I18nContext;
 declare const I18nProvider: FunctionComponent<I18nProviderProps>;
 
+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,33 +16,44 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const latestKnownLocale = React.useRef(i18n.locale);
-  const makeContext = React.useCallback(
+  const makeContext = useCallback(
     () => ({
       i18n,
-      defaultComponent
+      defaultComponent,
+      _: i18n.t.bind(i18n)
     }),
     [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]+)\/>/;
@@ -74,7 +86,7 @@ function formatElements(value, elements = {}) {
   if (before)
     tree.push(before);
   for (const [index, children, after] of getElements(parts)) {
-    let element = elements[index];
+    let element = typeof index !== "undefined" ? elements[index] : void 0;
     if (!element || voidElementTags[element.type] && children) {
       if (!element) {
         console.error(
@@ -108,21 +120,26 @@ function getElements(parts) {
   if (!parts.length)
     return [];
   const [paired, children, unpaired, after] = parts.slice(0, 4);
-  return [[paired || unpaired, children || "", after]].concat(
-    getElements(parts.slice(4, parts.length))
-  );
+  const triple = [paired || unpaired, children || "", after];
+  return [triple].concat(getElements(parts.slice(4, parts.length)));
 }
 const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
 
-function Trans(props) {
-  const { i18n, defaultComponent } = useLingui();
-  const { render, component, id, message, formats } = props;
+function TransNoContext(props) {
+  const {
+    render,
+    component,
+    id,
+    message,
+    formats,
+    lingui: { i18n, defaultComponent }
+  } = props;
   const values = { ...props.values };
   const components = { ...props.components };
   if (values) {
     Object.keys(values).forEach((key) => {
       const value = values[key];
-      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every((el) => React.isValidElement(el));
+      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every(React.isValidElement);
       if (!valueIsReactEl)
         return;
       const index = Object.keys(components).length;
@@ -168,4 +185,9 @@ const RenderFragment = ({ children }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
+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.3.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.3.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": "da6c52629e978c24ec83f2a6c22e4dfc910808b4"
+  "gitHead": "e7103c9f06a493e5871086e121f037309b0b742c"
 }