fix: preserve component tree structure for React.Children APIs

packages/compiler/src/jsx-scope-inject.ts

@@ -23,6 +23,18 @@ export const lingoJsxScopeInjectMutation = createCodeMutation((payload) => {
     if (skip) {
       continue;
     }
+
+    // Get the original JSX element name
+    const originalJsxElementName = getJsxElementName(jsxScope);
+    if (!originalJsxElementName) {
+      continue;
+    }
+
+    // Check if this is a component (uppercase or member expression)
+    const isMemberExpression = originalJsxElementName.includes(".");
+    const isComponent = /^[A-Z]/.test(originalJsxElementName);
+    const isReactComponent = isMemberExpression || isComponent;
+
     // Import LingoComponent based on the module execution mode
     const packagePath =
       mode === "client" ? ModuleId.ReactClient : ModuleId.ReactRSC;
@@ -31,88 +43,124 @@ export const lingoJsxScopeInjectMutation = createCodeMutation((payload) => {
       exportedName: "LingoComponent",
     });
 
-    // Get the original JSX element name
-    const originalJsxElementName = getJsxElementName(jsxScope);
-    if (!originalJsxElementName) {
-      continue;
-    }
+    if (isReactComponent) {
+      // For React components, wrap children instead of replacing the component
+      // This preserves the component type for React.Children APIs
+      const lingoTextImport = getOrCreateImport(payload.ast, {
+        moduleName: packagePath,
+        exportedName: "LingoText",
+      });
 
-    // Create new JSXElement with original attributes
-    const newNode = t.jsxElement(
-      t.jsxOpeningElement(
-        t.jsxIdentifier(lingoComponentImport.importedName),
-        jsxScope.node.openingElement.attributes.slice(), // original attributes
-        true, // selfClosing
-      ),
-      null, // no closing element
-      [], // no children
-      true, // selfClosing
-    );
-
-    // Create a NodePath wrapper for the new node to use setJsxAttributeValue
-    const newNodePath = {
-      node: newNode,
-    } as any;
-
-    // Add $as prop
-    const as = /^[A-Z]/.test(originalJsxElementName)
-      ? t.identifier(originalJsxElementName)
-      : originalJsxElementName;
-    setJsxAttributeValue(newNodePath, "$as", as);
-
-    // Add $fileKey prop
-    setJsxAttributeValue(newNodePath, "$fileKey", payload.relativeFilePath);
-
-    // Add $entryKey prop
-    setJsxAttributeValue(
-      newNodePath,
-      "$entryKey",
-      getJsxScopeAttribute(jsxScope)!,
-    );
-
-    // Extract $variables from original JSX scope before lingo component was inserted
-    const $variables = getJsxVariables(jsxScope);
-    if ($variables.properties.length > 0) {
-      setJsxAttributeValue(newNodePath, "$variables", $variables);
-    }
+      // Create LingoText element with translation data
+      const lingoTextNode = t.jsxElement(
+        t.jsxOpeningElement(
+          t.jsxIdentifier(lingoTextImport.importedName),
+          [],
+          true,
+        ),
+        null,
+        [],
+        true,
+      );
 
-    // Extract nested JSX elements
-    const $elements = getNestedJsxElements(jsxScope);
-    if ($elements.elements.length > 0) {
-      setJsxAttributeValue(newNodePath, "$elements", $elements);
-    }
+      const lingoTextNodePath = { node: lingoTextNode } as any;
 
-    // Extract nested functions
-    const $functions = getJsxFunctions(jsxScope);
-    if ($functions.properties.length > 0) {
-      setJsxAttributeValue(newNodePath, "$functions", $functions);
-    }
+      // Add translation metadata to LingoText
+      setJsxAttributeValue(lingoTextNodePath, "$fileKey", payload.relativeFilePath);
+      setJsxAttributeValue(lingoTextNodePath, "$entryKey", getJsxScopeAttribute(jsxScope)!);
 
-    // Extract expressions
-    const $expressions = getJsxExpressions(jsxScope);
-    if ($expressions.elements.length > 0) {
-      setJsxAttributeValue(newNodePath, "$expressions", $expressions);
-    }
+      const $variables = getJsxVariables(jsxScope);
+      if ($variables.properties.length > 0) {
+        setJsxAttributeValue(lingoTextNodePath, "$variables", $variables);
+      }
 
-    if (mode === "server") {
-      // Add $loadDictionary prop
-      const loadDictionaryImport = getOrCreateImport(payload.ast, {
-        exportedName: "loadDictionary",
-        moduleName: ModuleId.ReactRSC,
-      });
-      setJsxAttributeValue(
-        newNodePath,
-        "$loadDictionary",
-        t.arrowFunctionExpression(
-          [t.identifier("locale")],
-          t.callExpression(t.identifier(loadDictionaryImport.importedName), [
-            t.identifier("locale"),
-          ]),
+      const $functions = getJsxFunctions(jsxScope);
+      if ($functions.properties.length > 0) {
+        setJsxAttributeValue(lingoTextNodePath, "$functions", $functions);
+      }
+
+      const $expressions = getJsxExpressions(jsxScope);
+      if ($expressions.elements.length > 0) {
+        setJsxAttributeValue(lingoTextNodePath, "$expressions", $expressions);
+      }
+
+      if (mode === "server") {
+        const loadDictionaryImport = getOrCreateImport(payload.ast, {
+          exportedName: "loadDictionary",
+          moduleName: ModuleId.ReactRSC,
+        });
+        setJsxAttributeValue(
+          lingoTextNodePath,
+          "$loadDictionary",
+          t.arrowFunctionExpression(
+            [t.identifier("locale")],
+            t.callExpression(t.identifier(loadDictionaryImport.importedName), [
+              t.identifier("locale"),
+            ]),
+          ),
+        );
+      }
+
+      // Replace only the text children with LingoText, keeping the component wrapper
+      jsxScope.node.children = [lingoTextNode];
+    } else {
+      // For HTML elements, use the existing approach (replace entire element)
+      const newNode = t.jsxElement(
+        t.jsxOpeningElement(
+          t.jsxIdentifier(lingoComponentImport.importedName),
+          jsxScope.node.openingElement.attributes.slice(),
+          true,
         ),
+        null,
+        [],
+        true,
       );
-    }
 
-    jsxScope.replaceWith(newNode);
+      const newNodePath = { node: newNode } as any;
+
+      setJsxAttributeValue(newNodePath, "$as", originalJsxElementName);
+      setJsxAttributeValue(newNodePath, "$fileKey", payload.relativeFilePath);
+      setJsxAttributeValue(newNodePath, "$entryKey", getJsxScopeAttribute(jsxScope)!);
+
+      const $variables = getJsxVariables(jsxScope);
+      if ($variables.properties.length > 0) {
+        setJsxAttributeValue(newNodePath, "$variables", $variables);
+      }
+
+      const $elements = getNestedJsxElements(jsxScope);
+      if ($elements.elements.length > 0) {
+        setJsxAttributeValue(newNodePath, "$elements", $elements);
+      }
+
+      const $functions = getJsxFunctions(jsxScope);
+      if ($functions.properties.length > 0) {
+        setJsxAttributeValue(newNodePath, "$functions", $functions);
+      }
+
+      const $expressions = getJsxExpressions(jsxScope);
+      if ($expressions.elements.length > 0) {
+        setJsxAttributeValue(newNodePath, "$expressions", $expressions);
+      }
+
+      if (mode === "server") {
+        const loadDictionaryImport = getOrCreateImport(payload.ast, {
+          exportedName: "loadDictionary",
+          moduleName: ModuleId.ReactRSC,
+        });
+        setJsxAttributeValue(
+          newNodePath,
+          "$loadDictionary",
+          t.arrowFunctionExpression(
+            [t.identifier("locale")],
+            t.callExpression(t.identifier(loadDictionaryImport.importedName), [
+              t.identifier("locale"),
+            ]),
+          ),
+        );
+      }
+
+      jsxScope.replaceWith(newNode);
+    }
   }
 
   return payload;

packages/react/src/client/index.ts

@@ -2,6 +2,7 @@ export * from "./loader";
 export * from "./context";
 export * from "./provider";
 export * from "./component";
+export * from "./text-component";
 export * from "./locale-switcher";
 export * from "./attribute-component";
 export * from "./locale";

packages/react/src/client/text-component.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useLingo } from "./context";
+
+export type LingoTextProps = {
+  $fileKey: string;
+  $entryKey: string;
+  $variables?: Record<string, any>;
+  $functions?: Record<string, Function>;
+  $expressions?: any[];
+};
+
+export function LingoText(props: LingoTextProps) {
+  const { $fileKey, $entryKey, $variables, $functions, $expressions } = props;
+  const lingo = useLingo();
+
+  const translation = getTranslation(
+    lingo.dictionary,
+    $fileKey,
+    $entryKey,
+    $variables,
+    $functions,
+    $expressions
+  );
+
+  // Return just the text, no wrapping element
+  // This preserves the parent component structure for React.Children APIs
+  return <>{translation}</>;
+}
+
+function getTranslation(
+  dictionary: any,
+  fileKey: string,
+  entryKey: string,
+  variables?: Record<string, any>,
+  functions?: Record<string, Function>,
+  expressions?: any[]
+): string {
+  if (!dictionary) return "";
+
+  const entry = dictionary.data?.[fileKey]?.[entryKey];
+  if (!entry) return "";
+
+  let text = entry;
+
+  // Replace variables
+  if (variables) {
+    Object.entries(variables).forEach(([key, value]) => {
+      text = text.replace(new RegExp(`\\{${key}\\}`, "g"), String(value));
+    });
+  }
+
+  // Handle expressions
+  if (expressions) {
+    expressions.forEach((expr, index) => {
+      text = text.replace(`{${index}}`, String(expr));
+    });
+  }
+
+  return text;
+}
+

packages/react/src/rsc/index.ts

@@ -1,5 +1,6 @@
 export * from "./loader";
 export * from "./component";
+export * from "./text-component";
 export * from "./provider";
 export * from "./utils";
 export * from "./attribute-component";

packages/react/src/rsc/text-component.tsx

@@ -0,0 +1,61 @@
+export type LingoTextProps = {
+  $fileKey: string;
+  $entryKey: string;
+  $loadDictionary: (locale: string) => Promise<any>;
+  $variables?: Record<string, any>;
+  $functions?: Record<string, Function>;
+  $expressions?: any[];
+};
+
+export async function LingoText(props: LingoTextProps) {
+  const { $fileKey, $entryKey, $loadDictionary, $variables, $functions, $expressions } = props;
+
+  // Load dictionary on server
+  const dictionary = await $loadDictionary("default");
+
+  const translation = getTranslation(
+    dictionary,
+    $fileKey,
+    $entryKey,
+    $variables,
+    $functions,
+    $expressions
+  );
+
+  // Return just the text, no wrapping element
+  // This preserves the parent component structure for React.Children APIs
+  return <>{translation}</>;
+}
+
+function getTranslation(
+  dictionary: any,
+  fileKey: string,
+  entryKey: string,
+  variables?: Record<string, any>,
+  functions?: Record<string, Function>,
+  expressions?: any[]
+): string {
+  if (!dictionary) return "";
+
+  const entry = dictionary.data?.[fileKey]?.[entryKey];
+  if (!entry) return "";
+
+  let text = entry;
+
+  // Replace variables
+  if (variables) {
+    Object.entries(variables).forEach(([key, value]) => {
+      text = text.replace(new RegExp(`\\{${key}\\}`, "g"), String(value));
+    });
+  }
+
+  // Handle expressions
+  if (expressions) {
+    expressions.forEach((expr, index) => {
+      text = text.replace(`{${index}}`, String(expr));
+    });
+  }
+
+  return text;
+}
+