@lingui/react 4.0.0-next.4 → 4.0.0-next.6

package/dist/index.cjs

@@ -89,6 +89,9 @@ function formatElements(value, elements = {}) {
       }
       element = React.createElement(React.Fragment);
     }
+    if (Array.isArray(element)) {
+      element = React.createElement(React.Fragment, {}, element);
+    }
     tree.push(
       React.cloneElement(
         element,
@@ -121,7 +124,8 @@ function Trans(props) {
   if (values) {
     Object.keys(values).forEach((key) => {
       const value = values[key];
-      if (!React.isValidElement(value))
+      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every((el) => React.isValidElement(el));
+      if (!valueIsReactEl)
         return;
       const index = Object.keys(components).length;
       components[index] = value;
@@ -133,12 +137,14 @@ function Trans(props) {
   if (render === null || component === null) {
     return translation;
   }
-  const FallbackComponent = defaultComponent || React.Fragment;
+  const FallbackComponent = defaultComponent || RenderFragment;
   const i18nProps = {
     id,
     message,
     translation,
-    isTranslated: id !== translation && message !== translation
+    isTranslated: id !== translation && message !== translation,
+    children: translation
+    // for type-compatibility with `component` prop
   };
   if (render && component) {
     console.error(
@@ -152,15 +158,18 @@ function Trans(props) {
     console.error(
       `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
     );
-    return /* @__PURE__ */ React.createElement(FallbackComponent, { ...i18nProps }, translation);
+    return React.createElement(FallbackComponent, i18nProps, translation);
   }
   if (typeof render === "function") {
     return render(i18nProps);
   }
   const Component = component || FallbackComponent;
-  const DefaultComponent = defaultComponent;
-  return DefaultComponent && !component ? /* @__PURE__ */ React.createElement(DefaultComponent, { ...i18nProps }, translation) : /* @__PURE__ */ React.createElement(Component, null, translation);
+  const RenderedComponent = defaultComponent && !component ? defaultComponent : Component;
+  return React.createElement(RenderedComponent, i18nProps, translation);
 }
+const RenderFragment = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
 
 exports.I18nProvider = I18nProvider;
 exports.LinguiContext = LinguiContext;

package/dist/index.d.ts

@@ -2,12 +2,15 @@ import React, { ComponentType, FunctionComponent } from 'react';
 import { I18n } from '@lingui/core';
 
 type TransRenderProps = {
-    id?: string;
-    translation?: React.ReactNode;
-    children?: React.ReactNode;
+    id: string;
+    translation: React.ReactNode;
+    children: React.ReactNode;
     message?: string | null;
-    isTranslated?: boolean;
+    isTranslated: boolean;
 };
+type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T ? {
+    [P in K]?: T[K];
+} & Partial<Record<Exclude<keyof T, K>, never>> : never;
 type TransProps = {
     id: string;
     message?: string;
@@ -17,9 +20,10 @@ type TransProps = {
     };
     formats?: Record<string, unknown>;
     children?: React.ReactNode;
+} & MaximumOneOf<{
     component?: React.ComponentType<TransRenderProps>;
     render?: (props: TransRenderProps) => React.ReactElement<any, any> | null;
-};
+}>;
 declare function Trans(props: TransProps): React.ReactElement<any, any> | null;
 
 type I18nContext = {

package/dist/index.mjs

@@ -87,6 +87,9 @@ function formatElements(value, elements = {}) {
       }
       element = React.createElement(React.Fragment);
     }
+    if (Array.isArray(element)) {
+      element = React.createElement(React.Fragment, {}, element);
+    }
     tree.push(
       React.cloneElement(
         element,
@@ -119,7 +122,8 @@ function Trans(props) {
   if (values) {
     Object.keys(values).forEach((key) => {
       const value = values[key];
-      if (!React.isValidElement(value))
+      const valueIsReactEl = React.isValidElement(value) || Array.isArray(value) && value.every((el) => React.isValidElement(el));
+      if (!valueIsReactEl)
         return;
       const index = Object.keys(components).length;
       components[index] = value;
@@ -131,12 +135,14 @@ function Trans(props) {
   if (render === null || component === null) {
     return translation;
   }
-  const FallbackComponent = defaultComponent || React.Fragment;
+  const FallbackComponent = defaultComponent || RenderFragment;
   const i18nProps = {
     id,
     message,
     translation,
-    isTranslated: id !== translation && message !== translation
+    isTranslated: id !== translation && message !== translation,
+    children: translation
+    // for type-compatibility with `component` prop
   };
   if (render && component) {
     console.error(
@@ -150,14 +156,17 @@ function Trans(props) {
     console.error(
       `Invalid value supplied to prop \`component\`. It must be a React component, provided ${component}`
     );
-    return /* @__PURE__ */ React.createElement(FallbackComponent, { ...i18nProps }, translation);
+    return React.createElement(FallbackComponent, i18nProps, translation);
   }
   if (typeof render === "function") {
     return render(i18nProps);
   }
   const Component = component || FallbackComponent;
-  const DefaultComponent = defaultComponent;
-  return DefaultComponent && !component ? /* @__PURE__ */ React.createElement(DefaultComponent, { ...i18nProps }, translation) : /* @__PURE__ */ React.createElement(Component, null, translation);
+  const RenderedComponent = defaultComponent && !component ? defaultComponent : Component;
+  return React.createElement(RenderedComponent, i18nProps, translation);
 }
+const RenderFragment = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
 
 export { I18nProvider, LinguiContext, Trans, useLingui };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingui/react",
-  "version": "4.0.0-next.4",
+  "version": "4.0.0-next.6",
   "sideEffects": false,
   "description": "React components for translations",
   "main": "./dist/index.cjs",
@@ -58,11 +58,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@lingui/core": "^4.0.0-next.4"
+    "@lingui/core": "^4.0.0-next.6"
   },
   "devDependencies": {
+    "@lingui/jest-mocks": "^3.0.3",
     "@testing-library/react": "^11.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "unbuild": "^1.1.2"
   },
-  "gitHead": "3b999e35d26e67dec7cf0591f794be782e11022c"
+  "gitHead": "d4d9e149b2419d1796e14176d53703a7cff4b82c"
 }