@lingui/react 4.3.0 → 4.4.0

package/dist/index.cjs

@@ -21,7 +21,8 @@ const I18nProvider = ({
   const makeContext = React.useCallback(
     () => ({
       i18n,
-      defaultComponent
+      defaultComponent,
+      _: i18n.t.bind(i18n)
     }),
     [i18n, defaultComponent]
   );
@@ -76,7 +77,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 +111,30 @@ 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;
+  const lingui = useLingui();
+  return React.createElement(TransNoContext, { ...props, lingui });
+}
+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;
@@ -173,4 +183,5 @@ const RenderFragment = ({ children }) => {
 exports.I18nProvider = I18nProvider;
 exports.LinguiContext = LinguiContext;
 exports.Trans = Trans;
+exports.TransNoContext = TransNoContext;
 exports.useLingui = useLingui;

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,34 @@ 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;
+/**
+ * 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;
+    _: 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>;
 
-export { I18nContext, I18nProvider, I18nProviderProps, LinguiContext, Trans, TransProps, TransRenderCallbackOrComponent, TransRenderProps, useLingui };
+export { I18nContext, I18nProvider, I18nProviderProps, LinguiContext, Trans, TransNoContext, TransProps, TransRenderCallbackOrComponent, TransRenderProps, useLingui };

package/dist/index.mjs

@@ -19,7 +19,8 @@ const I18nProvider = ({
   const makeContext = React.useCallback(
     () => ({
       i18n,
-      defaultComponent
+      defaultComponent,
+      _: i18n.t.bind(i18n)
     }),
     [i18n, defaultComponent]
   );
@@ -74,7 +75,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 +109,30 @@ 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;
+  const lingui = useLingui();
+  return React.createElement(TransNoContext, { ...props, lingui });
+}
+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 +178,4 @@ const RenderFragment = ({ children }) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
 
-export { I18nProvider, LinguiContext, Trans, useLingui };
+export { I18nProvider, LinguiContext, Trans, TransNoContext, useLingui };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingui/react",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "sideEffects": false,
   "description": "React components for translations",
   "main": "./dist/index.cjs",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@lingui/core": "4.3.0"
+    "@lingui/core": "4.4.0"
   },
   "devDependencies": {
     "@lingui/jest-mocks": "*",
@@ -75,5 +75,5 @@
     "react-dom": "^18.2.0",
     "unbuild": "^1.1.2"
   },
-  "gitHead": "da6c52629e978c24ec83f2a6c22e4dfc910808b4"
+  "gitHead": "c36c0340ced1c4b76d5e1c340785932122449ac9"
 }