fix: one more ICU escape corner case

Author: AleksandrSl

cmp/compiler/src/plugin/transform/__snapshots__/transform.test.ts.snap

@@ -193,6 +193,17 @@ export function ListComponent({
 }"
 `;
 
+exports[`transformComponent > corner cases > should escape literal angle brackets in text 1`] = `
+"import { useTranslation } from "@lingo.dev/_compiler/react";
+export default function Help() {
+  const t = useTranslation(["9839f15c9f2b"]);
+  return <div>{t("9839f15c9f2b", "To wrap text, write '<'>content'<'/> <p0>Or use '<'Fragment>content'<'/Fragment></p0> or wrap it into the '<'>{content}'<'/>", {
+      content,
+      p0: chunks => <p>{chunks}</p>
+    })}</div>;
+}"
+`;
+
 exports[`transformComponent > corner cases > should handle function expressions correctly 1`] = `
 "import { useTranslation } from "@lingo.dev/_compiler/react";
 export const Button = function () {

cmp/compiler/src/plugin/transform/process-file.ts

@@ -316,7 +316,8 @@ function serializeJSXChildren(
         }
       } else if (expr.type === "StringLiteral") {
         // String literal (like {" "}) - include the literal text directly
-        text += expr.value;
+        text += escapeTextForICU(expr.value);
+        // TODO (AleksandrSl 07/12/2025): Should we just ignore the empty expression?
       } else if (expr.type !== "JSXEmptyExpression") {
         const name = `expression${expressions.size}`;
         text += `{${name}}`;

cmp/compiler/src/plugin/transform/transform.test.ts

@@ -2373,13 +2373,14 @@ export const Button = function() { return <button>Click me</button>; }
       expect(result.code).toMatchSnapshot();
     });
 
-    it.only("should escape literal angle brackets in text", () => {
+    it("should escape literal angle brackets in text", () => {
       const code = `
 export default function Help() {
   return (
     <div>
-      <p>To wrap text, write &lt;&gt;content&lt;/&gt;</p>
+      To wrap text, write &lt;&gt;content&lt;/&gt;
       <p>Or use &lt;Fragment&gt;content&lt;/Fragment&gt;</p>
+      or wrap it into the {"<>"}{content}{"</>"}
     </div>
   );
 }
@@ -2391,16 +2392,7 @@ export default function Help() {
         config,
       });
 
-      expect(result.newEntries).toHaveLength(2);
-      const firstEntry = asContent(result.newEntries![0]);
-      expect(firstEntry.sourceText).toBe(
-        "To wrap text, write '<'>content'<'/>",
-      );
-
-      const secondEntry = asContent(result.newEntries![1]);
-      expect(secondEntry.sourceText).toBe(
-        "Or use '<'Fragment>content'<'/Fragment>",
-      );
+      expect(result.code).toMatchSnapshot();
     });
   });
 });

cmp/compiler/src/react/shared/render-rich-text.tsx

@@ -1,11 +1,6 @@
-import {
-  Children,
-  cloneElement,
-  Fragment,
-  isValidElement,
-  type ReactNode,
-} from "react";
+import { Children, Fragment, isValidElement, type ReactNode } from "react";
 import IntlMessageFormat, { type FormatXMLElementFn } from "intl-messageformat";
+import { logger } from "../../utils/logger";
 
 /**
  * Component renderer function for rich text translation
@@ -81,18 +76,24 @@ export function renderRichText(
   text: string,
   params: RichTextParams,
 ): ReactNode {
-  const formatter = new IntlMessageFormat(text, "en");
-  const keyedParams = assignUniqueKeysToParams(params);
-  const result = formatter.format<ReactNode>(keyedParams);
+  try {
+    const formatter = new IntlMessageFormat(text, "en");
+    const keyedParams = assignUniqueKeysToParams(params);
+    const result = formatter.format<ReactNode>(keyedParams);
 
-  if (Array.isArray(result)) {
-    // Making all elements keyed here somehow fixes all the things. Maybe I also need to key everything in toKeyedReactNodeArray and I just don't get the error because I don't have a corner case for it? Need to investigate
-    return result.map((item, index) => {
-      // Each item gets wrapped in Fragment with unique key
-      // This handles strings, React elements (like <>text</>), everything
-      return <Fragment key={index}>{item}</Fragment>;
-    });
-  }
+    if (Array.isArray(result)) {
+      // Making all elements keyed here somehow fixes all the things. Maybe I also need to key everything in toKeyedReactNodeArray and I just don't get the error because I don't have a corner case for it? Need to investigate
+      return result.map((item, index) => {
+        // Each item gets wrapped in Fragment with unique key
+        // This handles strings, React elements (like <>text</>), everything
+        return <Fragment key={index}>{item}</Fragment>;
+      });
+    }
 
-  return result;
+    return result;
+  } catch (error) {
+    // It's better to render at least something than break the whole app.
+    logger.warn(`Error rendering rich text (${text}): ${error}`);
+    return text;
+  }
 }