fix: return a single node when applicable (#2016)

packages/react/src/Trans.test.tsx

@@ -238,6 +238,30 @@ describe("Trans component", () => {
     expect(translation).toEqual(`Read <a href="/docs">the docs</a>`)
   })
 
+  it("should render nested elements with `asChild` pattern", () => {
+    const ComponentThatExpectsSingleElementChild: React.FC<{
+      asChild: boolean
+      children?: React.ReactElement
+    }> = (props) => {
+      if (props.asChild && React.isValidElement(props.children)) {
+        return props.children
+      }
+
+      return <div />
+    }
+
+    const translation = html(
+      <Trans
+        id="please <0><1>sign in again</1></0>"
+        components={{
+          0: <ComponentThatExpectsSingleElementChild asChild />,
+          1: <a href="/login" />,
+        }}
+      />
+    )
+    expect(translation).toEqual(`please <a href="/login">sign in again</a>`)
+  })
+
   it("should render translation inside custom component", () => {
     const Component = (props: PropsWithChildren) => (
       <p className="lead">{props.children}</p>

packages/react/src/format.test.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { render } from "@testing-library/react"
+import * as React from "react"
 import { formatElements } from "./format"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { mockConsole } from "@lingui/jest-mocks"
@@ -138,13 +138,17 @@ describe("formatElements", function () {
     const elements = formatElements("<div><0/><0/></div>", {
       div: <div />,
       0: <span>hi</span>,
-    }) as Array<React.ReactElement>
-
-    expect(elements).toHaveLength(1)
-    const childElements = elements[0]!.props.children
-    const childKeys = childElements
-      .map((el: React.ReactElement) => el?.key)
-      .filter(Boolean)
-    expect(cleanPrefix(childKeys[0])).toBeLessThan(cleanPrefix(childKeys[1]))
+    })
+
+    expect(React.isValidElement(elements)).toBe(true)
+
+    const childElements = (
+      elements as React.ReactElement<{ children: React.ReactElement[] }>
+    ).props.children
+    const childKeys = childElements.map((el) => el?.key).filter(Boolean)
+
+    expect(cleanPrefix(childKeys[0] as string)).toBeLessThan(
+      cleanPrefix(childKeys[1] as string)
+    )
   })
 })

packages/react/src/format.ts

@@ -35,7 +35,7 @@ const voidElementTags = {
 function formatElements(
   value: string,
   elements: { [key: string]: React.ReactElement } = {}
-): string | Array<React.ReactElement | string> {
+): string | React.ReactElement | Array<React.ReactElement | string> {
   const uniqueId = makeCounter(0, "$lingui$")
   const parts = value.replace(nlRe, "").split(tagRe)
 
@@ -87,7 +87,7 @@ function formatElements(
     if (after) tree.push(after)
   }
 
-  return tree
+  return tree.length === 1 ? tree[0]! : tree
 }
 
 /*