fix(react-compiler): JSXText emits incorrect with bracket

facebook · Jan 20, 2025 · 472c0cc · 472c0cc
1 parent 18eaf51
commit 472c0cc
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/...r/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/bracket-in-jsx-text-output.txt b/...r/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/bracket-in-jsx-text-output.txt
@@ -0,0 +1,13 @@
+import { c as _c } from "react/compiler-runtime"; // 
+        @compilationMode(all)
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>{"Hello, {world}!"}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
diff --git a/compiler/apps/playground/__tests__/e2e/page.spec.ts b/compiler/apps/playground/__tests__/e2e/page.spec.ts
@@ -101,6 +101,15 @@ function nonReactFn() {
     `,
     noFormat: true,
   },
+  {
+    name: 'bracket-in-jsx-text',
+    input: `// @compilationMode(all)
+function Component() {
+  return <div>Hello, &#123;world&#125;!</div>;
+}
+    `,
+    noFormat: true,
+  }
 ];
 
 test('editor should open successfully', async ({page}) => {

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -2328,6 +2328,7 @@ function codegenJsxAttribute(
 }
 
 const JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN = /[<>&]/;
+const JSX_TEXT_BRACKET_REQUIRES_EXPR_CONTAINER_PATTERN = /[{}]/;
 function codegenJsxElement(
   cx: Context,
   place: Place,
@@ -2340,6 +2341,12 @@ function codegenJsxElement(
   const value = codegenPlace(cx, place);
   switch (value.type) {
     case 'JSXText': {
+      if (JSX_TEXT_BRACKET_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value)) {
+        return createJsxExpressionContainer(
+          place.loc,
+          createStringLiteral(place.loc, value.value),
+        );
+      }
       if (JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value)) {
         return createJsxExpressionContainer(
           place.loc,