feature(react): introduce TransNoContext component for future RSC sup…

…port (#1738)

packages/react/src/Trans.test.tsx

@@ -9,6 +9,7 @@ import {
 import { setupI18n } from "@lingui/core"
 import { mockConsole } from "@lingui/jest-mocks"
 import { PropsWithChildren } from "react"
+import { TransNoContext } from "./Trans"
 
 describe("Trans component", () => {
   /*
@@ -410,5 +411,20 @@ describe("Trans component", () => {
       )
       expect(markup.queryByTestId("is-translated")?.innerHTML).toEqual("false")
     })
+
+    describe("TransNoContext", () => {
+      it("Should render without provider/context", () => {
+        const translation = render(
+          <TransNoContext
+            id="All human beings are born free and equal in dignity and rights."
+            lingui={{ i18n: i18n }}
+          />
+        ).container.textContent
+
+        expect(translation).toEqual(
+          "Všichni lidé rodí se svobodní a sobě rovní co do důstojnosti a práv."
+        )
+      })
+    })
   })
 })

packages/react/src/Trans.tsx

@@ -1,8 +1,9 @@
-import React from "react"
+import React, { ComponentType } from "react"
 
 import { useLingui } from "./I18nProvider"
 import { formatElements } from "./format"
 import type { MessageOptions } from "@lingui/core"
+import { I18n } from "@lingui/core"
 
 export type TransRenderProps = {
   id: string
@@ -35,8 +36,23 @@ export type TransProps = {
 } & TransRenderCallbackOrComponent
 
 export function Trans(props: TransProps): React.ReactElement<any, any> | null {
-  const { i18n, defaultComponent } = useLingui()
-  const { render, component, id, message, formats } = props
+  const lingui = useLingui()
+  return React.createElement(TransNoContext, { ...props, lingui })
+}
+
+export function TransNoContext(
+  props: TransProps & {
+    lingui: { i18n: I18n; defaultComponent?: ComponentType<TransRenderProps> }
+  }
+): React.ReactElement<any, any> | null {
+  const {
+    render,
+    component,
+    id,
+    message,
+    formats,
+    lingui: { i18n, defaultComponent },
+  } = props
 
   const values = { ...props.values }
   const components = { ...props.components }