@lingui/react 4.4.1 → 4.5.0

package/dist/index.cjs

@@ -1,11 +1,15 @@
 'use strict';
 
 const React = require('react');
-const shim = require('use-sync-external-store/shim');
+const server = require('./server.cjs');
 
-const LinguiContext = React.createContext(null);
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const LinguiContext = React__default.createContext(null);
 function useLingui() {
-  const context = React.useContext(LinguiContext);
+  const context = React__default.useContext(LinguiContext);
   if (process.env.NODE_ENV !== "production") {
     if (context == null) {
       throw new Error("useLingui hook was used without I18nProvider.");
@@ -18,7 +22,8 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const makeContext = React.useCallback(
+  const latestKnownLocale = React__default.useRef(i18n.locale);
+  const makeContext = React__default.useCallback(
     () => ({
       i18n,
       defaultComponent,
@@ -26,170 +31,30 @@ const I18nProvider = ({
     }),
     [i18n, defaultComponent]
   );
-  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) {
+  const [context, setContext] = React__default.useState(makeContext());
+  React__default.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) {
     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: contextObject }, children);
-};
-
-const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
-const nlRe = /(?:\r\n|\r|\n)/g;
-const voidElementTags = {
-  area: true,
-  base: true,
-  br: true,
-  col: true,
-  embed: true,
-  hr: true,
-  img: true,
-  input: true,
-  keygen: true,
-  link: true,
-  meta: true,
-  param: true,
-  source: true,
-  track: true,
-  wbr: true,
-  menuitem: true
-};
-function formatElements(value, elements = {}) {
-  const uniqueId = makeCounter(0, "$lingui$");
-  const parts = value.replace(nlRe, "").split(tagRe);
-  if (parts.length === 1)
-    return value;
-  const tree = [];
-  const before = parts.shift();
-  if (before)
-    tree.push(before);
-  for (const [index, children, after] of getElements(parts)) {
-    let element = typeof index !== "undefined" ? elements[index] : void 0;
-    if (!element || voidElementTags[element.type] && children) {
-      if (!element) {
-        console.error(
-          `Can't use element at index '${index}' as it is not declared in the original translation`
-        );
-      } else {
-        console.error(
-          `${element.type} is a void element tag therefore it must have no children`
-        );
-      }
-      element = React.createElement(React.Fragment);
-    }
-    if (Array.isArray(element)) {
-      element = React.createElement(React.Fragment, {}, element);
-    }
-    tree.push(
-      React.cloneElement(
-        element,
-        { key: uniqueId() },
-        // format children for pair tags
-        // unpaired tags might have children if it's a component passed as a variable
-        children ? formatElements(children, elements) : element.props.children
-      )
-    );
-    if (after)
-      tree.push(after);
-  }
-  return tree;
-}
-function getElements(parts) {
-  if (!parts.length)
-    return [];
-  const [paired, children, unpaired, after] = parts.slice(0, 4);
-  const triple = [paired || unpaired, children || "", after];
-  return [triple].concat(getElements(parts.slice(4, parts.length)));
-}
-const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
-
-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(React.isValidElement);
-      if (!valueIsReactEl)
-        return;
-      const index = Object.keys(components).length;
-      components[index] = value;
-      values[key] = `<${index}/>`;
-    });
-  }
-  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, { message, formats }) : id;
-  const translation = _translation ? formatElements(_translation, components) : null;
-  if (render === null || component === null) {
-    return translation;
-  }
-  const FallbackComponent = defaultComponent || RenderFragment;
-  const i18nProps = {
-    id,
-    message,
-    translation,
-    isTranslated: id !== translation && message !== translation,
-    children: translation
-    // for type-compatibility with `component` prop
-  };
-  if (render && component) {
-    console.error(
-      "You can't use both `component` and `render` prop at the same time. `component` is ignored."
-    );
-  } else if (render && typeof render !== "function") {
-    console.error(
-      `Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`
-    );
-  } else if (component && typeof component !== "function") {
-    console.error(
-      `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
-    );
-    return React.createElement(FallbackComponent, i18nProps, translation);
-  }
-  if (typeof render === "function") {
-    return render(i18nProps);
-  }
-  const Component = component || FallbackComponent;
-  return React.createElement(Component, i18nProps, translation);
-}
-const RenderFragment = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ React__default.createElement(LinguiContext.Provider, { value: context }, children);
 };
 
 function Trans(props) {
   const lingui = useLingui();
-  return React.createElement(TransNoContext, { ...props, lingui });
+  return React__default.createElement(server.TransNoContext, { ...props, lingui });
 }
 
 exports.I18nProvider = I18nProvider;

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import React, { ComponentType, FunctionComponent } from 'react';
+import { I18n } from '@lingui/core';
+import { TransRenderProps, TransProps } from './server.cjs';
+export { TransRenderCallbackOrComponent } from './server.cjs';
+
+type I18nContext = {
+    i18n: I18n;
+    _: I18n["_"];
+    defaultComponent?: ComponentType<TransRenderProps>;
+};
+type I18nProviderProps = Omit<I18nContext, "_"> & {
+    children?: React.ReactNode;
+};
+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 { type I18nContext, I18nProvider, type I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderProps, useLingui };

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import React, { ComponentType, FunctionComponent } from 'react';
+import { I18n } from '@lingui/core';
+import { TransRenderProps, TransProps } from './server.mjs';
+export { TransRenderCallbackOrComponent } from './server.mjs';
+
+type I18nContext = {
+    i18n: I18n;
+    _: I18n["_"];
+    defaultComponent?: ComponentType<TransRenderProps>;
+};
+type I18nProviderProps = Omit<I18nContext, "_"> & {
+    children?: React.ReactNode;
+};
+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 { type I18nContext, I18nProvider, type I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderProps, useLingui };

package/dist/index.d.ts

@@ -1,31 +1,7 @@
 import React, { ComponentType, FunctionComponent } from 'react';
-import { MessageOptions, I18n } from '@lingui/core';
-
-type TransRenderProps = {
-    id: string;
-    translation: React.ReactNode;
-    children: React.ReactNode;
-    message?: string | null;
-    isTranslated: boolean;
-};
-type TransRenderCallbackOrComponent = {
-    component?: undefined;
-    render?: ((props: TransRenderProps) => React.ReactElement<any, any>) | null;
-} | {
-    component?: React.ComponentType<TransRenderProps> | null;
-    render?: undefined;
-};
-type TransProps = {
-    id: string;
-    message?: string;
-    values?: Record<string, unknown>;
-    components?: {
-        [key: string]: React.ElementType | any;
-    };
-    formats?: MessageOptions["formats"];
-    comment?: string;
-    children?: React.ReactNode;
-} & TransRenderCallbackOrComponent;
+import { I18n } from '@lingui/core';
+import { TransRenderProps, TransProps } from './server.js';
+export { TransRenderCallbackOrComponent } from './server.js';
 
 type I18nContext = {
     i18n: I18n;
@@ -41,4 +17,4 @@ 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 };
+export { type I18nContext, I18nProvider, type I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderProps, useLingui };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import React, { useCallback, useRef } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import React from 'react';
+import { TransNoContext } from './server.mjs';
 
 const LinguiContext = React.createContext(null);
 function useLingui() {
@@ -16,7 +16,8 @@ const I18nProvider = ({
   defaultComponent,
   children
 }) => {
-  const makeContext = useCallback(
+  const latestKnownLocale = React.useRef(i18n.locale);
+  const makeContext = React.useCallback(
     () => ({
       i18n,
       defaultComponent,
@@ -24,165 +25,25 @@ const I18nProvider = ({
     }),
     [i18n, defaultComponent]
   );
-  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) {
+  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) {
     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: contextObject }, children);
-};
-
-const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
-const nlRe = /(?:\r\n|\r|\n)/g;
-const voidElementTags = {
-  area: true,
-  base: true,
-  br: true,
-  col: true,
-  embed: true,
-  hr: true,
-  img: true,
-  input: true,
-  keygen: true,
-  link: true,
-  meta: true,
-  param: true,
-  source: true,
-  track: true,
-  wbr: true,
-  menuitem: true
-};
-function formatElements(value, elements = {}) {
-  const uniqueId = makeCounter(0, "$lingui$");
-  const parts = value.replace(nlRe, "").split(tagRe);
-  if (parts.length === 1)
-    return value;
-  const tree = [];
-  const before = parts.shift();
-  if (before)
-    tree.push(before);
-  for (const [index, children, after] of getElements(parts)) {
-    let element = typeof index !== "undefined" ? elements[index] : void 0;
-    if (!element || voidElementTags[element.type] && children) {
-      if (!element) {
-        console.error(
-          `Can't use element at index '${index}' as it is not declared in the original translation`
-        );
-      } else {
-        console.error(
-          `${element.type} is a void element tag therefore it must have no children`
-        );
-      }
-      element = React.createElement(React.Fragment);
-    }
-    if (Array.isArray(element)) {
-      element = React.createElement(React.Fragment, {}, element);
-    }
-    tree.push(
-      React.cloneElement(
-        element,
-        { key: uniqueId() },
-        // format children for pair tags
-        // unpaired tags might have children if it's a component passed as a variable
-        children ? formatElements(children, elements) : element.props.children
-      )
-    );
-    if (after)
-      tree.push(after);
-  }
-  return tree;
-}
-function getElements(parts) {
-  if (!parts.length)
-    return [];
-  const [paired, children, unpaired, after] = parts.slice(0, 4);
-  const triple = [paired || unpaired, children || "", after];
-  return [triple].concat(getElements(parts.slice(4, parts.length)));
-}
-const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
-
-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(React.isValidElement);
-      if (!valueIsReactEl)
-        return;
-      const index = Object.keys(components).length;
-      components[index] = value;
-      values[key] = `<${index}/>`;
-    });
-  }
-  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, { message, formats }) : id;
-  const translation = _translation ? formatElements(_translation, components) : null;
-  if (render === null || component === null) {
-    return translation;
-  }
-  const FallbackComponent = defaultComponent || RenderFragment;
-  const i18nProps = {
-    id,
-    message,
-    translation,
-    isTranslated: id !== translation && message !== translation,
-    children: translation
-    // for type-compatibility with `component` prop
-  };
-  if (render && component) {
-    console.error(
-      "You can't use both `component` and `render` prop at the same time. `component` is ignored."
-    );
-  } else if (render && typeof render !== "function") {
-    console.error(
-      `Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`
-    );
-  } else if (component && typeof component !== "function") {
-    console.error(
-      `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
-    );
-    return React.createElement(FallbackComponent, i18nProps, translation);
-  }
-  if (typeof render === "function") {
-    return render(i18nProps);
-  }
-  const Component = component || FallbackComponent;
-  return React.createElement(Component, i18nProps, translation);
-}
-const RenderFragment = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  return /* @__PURE__ */ React.createElement(LinguiContext.Provider, { value: context }, children);
 };
 
 function Trans(props) {

package/dist/server.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+const React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
+const nlRe = /(?:\r\n|\r|\n)/g;
+const voidElementTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  menuitem: true
+};
+function formatElements(value, elements = {}) {
+  const uniqueId = makeCounter(0, "$lingui$");
+  const parts = value.replace(nlRe, "").split(tagRe);
+  if (parts.length === 1)
+    return value;
+  const tree = [];
+  const before = parts.shift();
+  if (before)
+    tree.push(before);
+  for (const [index, children, after] of getElements(parts)) {
+    let element = typeof index !== "undefined" ? elements[index] : void 0;
+    if (!element || voidElementTags[element.type] && children) {
+      if (!element) {
+        console.error(
+          `Can't use element at index '${index}' as it is not declared in the original translation`
+        );
+      } else {
+        console.error(
+          `${element.type} is a void element tag therefore it must have no children`
+        );
+      }
+      element = React__default.createElement(React__default.Fragment);
+    }
+    if (Array.isArray(element)) {
+      element = React__default.createElement(React__default.Fragment, {}, element);
+    }
+    tree.push(
+      React__default.cloneElement(
+        element,
+        { key: uniqueId() },
+        // format children for pair tags
+        // unpaired tags might have children if it's a component passed as a variable
+        children ? formatElements(children, elements) : element.props.children
+      )
+    );
+    if (after)
+      tree.push(after);
+  }
+  return tree;
+}
+function getElements(parts) {
+  if (!parts.length)
+    return [];
+  const [paired, children, unpaired, after] = parts.slice(0, 4);
+  const triple = [paired || unpaired, children || "", after];
+  return [triple].concat(getElements(parts.slice(4, parts.length)));
+}
+const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
+
+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__default.isValidElement(value) || Array.isArray(value) && value.every(React__default.isValidElement);
+      if (!valueIsReactEl)
+        return;
+      const index = Object.keys(components).length;
+      components[index] = value;
+      values[key] = `<${index}/>`;
+    });
+  }
+  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, { message, formats }) : id;
+  const translation = _translation ? formatElements(_translation, components) : null;
+  if (render === null || component === null) {
+    return translation;
+  }
+  const FallbackComponent = defaultComponent || RenderFragment;
+  const i18nProps = {
+    id,
+    message,
+    translation,
+    isTranslated: id !== translation && message !== translation,
+    children: translation
+    // for type-compatibility with `component` prop
+  };
+  if (render && component) {
+    console.error(
+      "You can't use both `component` and `render` prop at the same time. `component` is ignored."
+    );
+  } else if (render && typeof render !== "function") {
+    console.error(
+      `Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`
+    );
+  } else if (component && typeof component !== "function") {
+    console.error(
+      `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
+    );
+    return React__default.createElement(FallbackComponent, i18nProps, translation);
+  }
+  if (typeof render === "function") {
+    return render(i18nProps);
+  }
+  const Component = component || FallbackComponent;
+  return React__default.createElement(Component, i18nProps, translation);
+}
+const RenderFragment = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+};
+
+exports.TransNoContext = TransNoContext;

package/dist/server.d.cts

@@ -0,0 +1,42 @@
+import React, { ComponentType } from 'react';
+import { MessageOptions, I18n } from '@lingui/core';
+
+type TransRenderProps = {
+    id: string;
+    translation: React.ReactNode;
+    children: React.ReactNode;
+    message?: string | null;
+    isTranslated: boolean;
+};
+type TransRenderCallbackOrComponent = {
+    component?: undefined;
+    render?: ((props: TransRenderProps) => React.ReactElement<any, any>) | null;
+} | {
+    component?: React.ComponentType<TransRenderProps> | null;
+    render?: undefined;
+};
+type TransProps = {
+    id: string;
+    message?: string;
+    values?: Record<string, unknown>;
+    components?: {
+        [key: string]: React.ElementType | any;
+    };
+    formats?: MessageOptions["formats"];
+    comment?: string;
+    children?: React.ReactNode;
+} & TransRenderCallbackOrComponent;
+/**
+ * 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;
+
+export { TransNoContext, type TransProps, type TransRenderCallbackOrComponent, type TransRenderProps };

package/dist/server.d.mts

@@ -0,0 +1,42 @@
+import React, { ComponentType } from 'react';
+import { MessageOptions, I18n } from '@lingui/core';
+
+type TransRenderProps = {
+    id: string;
+    translation: React.ReactNode;
+    children: React.ReactNode;
+    message?: string | null;
+    isTranslated: boolean;
+};
+type TransRenderCallbackOrComponent = {
+    component?: undefined;
+    render?: ((props: TransRenderProps) => React.ReactElement<any, any>) | null;
+} | {
+    component?: React.ComponentType<TransRenderProps> | null;
+    render?: undefined;
+};
+type TransProps = {
+    id: string;
+    message?: string;
+    values?: Record<string, unknown>;
+    components?: {
+        [key: string]: React.ElementType | any;
+    };
+    formats?: MessageOptions["formats"];
+    comment?: string;
+    children?: React.ReactNode;
+} & TransRenderCallbackOrComponent;
+/**
+ * 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;
+
+export { TransNoContext, type TransProps, type TransRenderCallbackOrComponent, type TransRenderProps };

package/dist/server.d.ts

@@ -0,0 +1,42 @@
+import React, { ComponentType } from 'react';
+import { MessageOptions, I18n } from '@lingui/core';
+
+type TransRenderProps = {
+    id: string;
+    translation: React.ReactNode;
+    children: React.ReactNode;
+    message?: string | null;
+    isTranslated: boolean;
+};
+type TransRenderCallbackOrComponent = {
+    component?: undefined;
+    render?: ((props: TransRenderProps) => React.ReactElement<any, any>) | null;
+} | {
+    component?: React.ComponentType<TransRenderProps> | null;
+    render?: undefined;
+};
+type TransProps = {
+    id: string;
+    message?: string;
+    values?: Record<string, unknown>;
+    components?: {
+        [key: string]: React.ElementType | any;
+    };
+    formats?: MessageOptions["formats"];
+    comment?: string;
+    children?: React.ReactNode;
+} & TransRenderCallbackOrComponent;
+/**
+ * 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;
+
+export { TransNoContext, type TransProps, type TransRenderCallbackOrComponent, type TransRenderProps };

package/dist/server.mjs

@@ -0,0 +1,132 @@
+import React from 'react';
+
+const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/;
+const nlRe = /(?:\r\n|\r|\n)/g;
+const voidElementTags = {
+  area: true,
+  base: true,
+  br: true,
+  col: true,
+  embed: true,
+  hr: true,
+  img: true,
+  input: true,
+  keygen: true,
+  link: true,
+  meta: true,
+  param: true,
+  source: true,
+  track: true,
+  wbr: true,
+  menuitem: true
+};
+function formatElements(value, elements = {}) {
+  const uniqueId = makeCounter(0, "$lingui$");
+  const parts = value.replace(nlRe, "").split(tagRe);
+  if (parts.length === 1)
+    return value;
+  const tree = [];
+  const before = parts.shift();
+  if (before)
+    tree.push(before);
+  for (const [index, children, after] of getElements(parts)) {
+    let element = typeof index !== "undefined" ? elements[index] : void 0;
+    if (!element || voidElementTags[element.type] && children) {
+      if (!element) {
+        console.error(
+          `Can't use element at index '${index}' as it is not declared in the original translation`
+        );
+      } else {
+        console.error(
+          `${element.type} is a void element tag therefore it must have no children`
+        );
+      }
+      element = React.createElement(React.Fragment);
+    }
+    if (Array.isArray(element)) {
+      element = React.createElement(React.Fragment, {}, element);
+    }
+    tree.push(
+      React.cloneElement(
+        element,
+        { key: uniqueId() },
+        // format children for pair tags
+        // unpaired tags might have children if it's a component passed as a variable
+        children ? formatElements(children, elements) : element.props.children
+      )
+    );
+    if (after)
+      tree.push(after);
+  }
+  return tree;
+}
+function getElements(parts) {
+  if (!parts.length)
+    return [];
+  const [paired, children, unpaired, after] = parts.slice(0, 4);
+  const triple = [paired || unpaired, children || "", after];
+  return [triple].concat(getElements(parts.slice(4, parts.length)));
+}
+const makeCounter = (count = 0, prefix = "") => () => `${prefix}_${count++}`;
+
+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(React.isValidElement);
+      if (!valueIsReactEl)
+        return;
+      const index = Object.keys(components).length;
+      components[index] = value;
+      values[key] = `<${index}/>`;
+    });
+  }
+  const _translation = i18n && typeof i18n._ === "function" ? i18n._(id, values, { message, formats }) : id;
+  const translation = _translation ? formatElements(_translation, components) : null;
+  if (render === null || component === null) {
+    return translation;
+  }
+  const FallbackComponent = defaultComponent || RenderFragment;
+  const i18nProps = {
+    id,
+    message,
+    translation,
+    isTranslated: id !== translation && message !== translation,
+    children: translation
+    // for type-compatibility with `component` prop
+  };
+  if (render && component) {
+    console.error(
+      "You can't use both `component` and `render` prop at the same time. `component` is ignored."
+    );
+  } else if (render && typeof render !== "function") {
+    console.error(
+      `Invalid value supplied to prop \`render\`. It must be a function, provided ${render}`
+    );
+  } else if (component && typeof component !== "function") {
+    console.error(
+      `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
+    );
+    return React.createElement(FallbackComponent, i18nProps, translation);
+  }
+  if (typeof render === "function") {
+    return render(i18nProps);
+  }
+  const Component = component || FallbackComponent;
+  return React.createElement(Component, i18nProps, translation);
+}
+const RenderFragment = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+
+export { TransNoContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingui/react",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "sideEffects": false,
   "description": "React components for translations",
   "main": "./dist/index.cjs",
@@ -43,14 +43,24 @@
   "exports": {
     ".": {
       "require": {
-        "types": "./dist/index.d.ts",
+        "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       },
       "import": {
-        "types": "./dist/index.d.ts",
+        "types": "./dist/index.d.mts",
         "default": "./dist/index.mjs"
       }
     },
+    "./server": {
+      "require": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.cjs"
+      },
+      "import": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.mjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -63,19 +73,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@lingui/core": "4.4.1",
-    "use-sync-external-store": "^1.2.0"
+    "@lingui/core": "4.5.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"
+    "unbuild": "2.0.0"
   },
-  "gitHead": "e7103c9f06a493e5871086e121f037309b0b742c"
+  "gitHead": "62c92d1f8c60b3890bdda870f307fa780d423080"
 }