fix: ICU escapes

Author: AleksandrSl

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

@@ -10,6 +10,7 @@ import {
   constructServerImport,
   constructTranslationCall,
   createTranslationEntry,
+  escapeTextForICU,
   hasUseI18nDirective,
   inferComponentName,
   injectServerHook,
@@ -293,18 +294,18 @@ function serializeJSXChildren(
         normalized.length > 0
       ) {
         if (!text.endsWith(" ")) {
-          text += " ";
+          normalized = ` ${normalized}`;
         }
       }
 
-      text += normalized;
-
       // If this node ends with whitespace and has content, add trailing space
       if (normalized.length > 0 && child.value.match(/\s$/)) {
         if (!text.endsWith(" ")) {
-          text += " ";
+          normalized = `${normalized} `;
         }
       }
+
+      text += escapeTextForICU(normalized);
     } else if (child.type === "JSXExpressionContainer") {
       // Extract variable name from expression
       const expr = child.expression;
@@ -436,6 +437,7 @@ function transformJSXText(
   path: NodePath<t.JSXText>,
   state: VisitorsInternalState,
 ): void {
+  // These messages are rendered as is, so no ICU escaping is required.
   const text = normalizeWhitespace(path.node.value);
   if (text.length == 0) return;
 

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

@@ -2372,5 +2372,35 @@ export const Button = function() { return <button>Click me</button>; }
 
       expect(result.code).toMatchSnapshot();
     });
+
+    it.only("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>
+      <p>Or use &lt;Fragment&gt;content&lt;/Fragment&gt;</p>
+    </div>
+  );
+}
+`;
+
+      const result = transformComponent({
+        code,
+        filePath: "src/Help.tsx",
+        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>",
+      );
+    });
   });
 });

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

@@ -0,0 +1,52 @@
+/**
+ * Tests for ICU MessageFormat escaping utility
+ */
+import { describe, expect, it } from "vitest";
+import IntlMessageFormat from "intl-messageformat";
+import { escapeTextForICU } from "./utils";
+
+describe("escapeTextForICU", () => {
+  it.each([
+    // [input, expectedEscaped, expectedRendered]
+    ["It's a test", "It''s a test", "It's a test"],
+    [
+      "Use {braces} in code",
+      "Use '{'braces'}' in code",
+      "Use {braces} in code",
+    ],
+    [
+      "Use <>content</> for fragments",
+      "Use '<'>content'<'/> for fragments",
+      "Use <>content</> for fragments",
+    ],
+    ["Use #hashtags", "Use '#'hashtags", "Use '#'hashtags"], // ICU doesn't unescape #
+    [
+      "It's {test} with <tags> and #hash",
+      "It''s '{'test'}' with '<'tags> and '#'hash",
+      "It's {test} with <tags> and '#'hash",
+    ],
+    [
+      "Use <Fragment>content</Fragment>",
+      "Use '<'Fragment>content'<'/Fragment>",
+      "Use <Fragment>content</Fragment>",
+    ],
+    ["Plain text", "Plain text", "Plain text"],
+    [
+      "Write <>text</> or <Fragment>text</Fragment>",
+      "Write '<'>text'<'/> or '<'Fragment>text'<'/Fragment>",
+      "Write <>text</> or <Fragment>text</Fragment>",
+    ],
+    ["<>", "'<'>", "<>"],
+    ["</>", "'<'/>", "</>"],
+  ])(
+    "should escape %s correctly",
+    (input, expectedEscaped, expectedRendered) => {
+      const escaped = escapeTextForICU(input);
+      expect(escaped).toBe(expectedEscaped);
+
+      const formatter = new IntlMessageFormat(escaped, "en");
+      const result = formatter.format();
+      expect(result).toBe(expectedRendered);
+    },
+  );
+});

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

@@ -25,6 +25,19 @@ export function normalizeWhitespace(text: string): string {
     .trim(); // Remove leading/trailing whitespace
 }
 
+/**
+ * Escape literal angle brackets that are not part of ICU MessageFormat tags
+ */
+export function escapeTextForICU(text: string): string {
+  // Related spec - https://unicode-org.github.io/icu/userguide/format_parse/messages/#quotingescaping
+  return text
+    .replace(/'/g, "''")
+    .replace(/\{/g, "'{'")
+    .replace(/}/g, "'}'")
+    .replace(/</g, "'<'")
+    .replace(/#/g, "'#'");
+}
+
 /**
  * Detect if a function is a React component by checking if it returns JSX
  */

cmp/compiler/src/plugin/vite.ts

@@ -25,7 +25,7 @@ export function lingoCompilerPlugin(options: LingoPluginOptions) {
 
   // Attach Lingo config for CLI extraction
   // @ts-expect-error - Internal property for CLI access
-  plugin._lingoConfig = fullOptions;
+  plugin._lingoConfig = options;
 
   return plugin;
 }

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

@@ -22,6 +22,8 @@ exports[`renderRichText > should handle nested components inside component tags
 ]
 `;
 
+exports[`renderRichText > should handle text with literal angle brackets 1`] = `"To translate it you have to wrap it into the <'>some text</>"`;
+
 exports[`renderRichText > should handle the page.tsx example case 1`] = `
 [
   <React.Fragment

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

@@ -160,4 +160,14 @@ describe("renderRichText", () => {
     );
     expect(result).toMatchSnapshot();
   });
+
+  it("should handle text with literal angle brackets", () => {
+    const result = renderRichText(
+      "To wrap text use: '<'>content'<'/> or '<'Fragment>content'<'/Fragment>",
+      {},
+    );
+    expect(result).toBe(
+      "To wrap text use: <>content</> or <Fragment>content</Fragment>",
+    );
+  });
 });