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

Author: himself65

compiler/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;
+}

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -97,6 +97,15 @@ function nonReactFn() {
     input: `// @compilationMode(all)
 function nonReactFn() {
   return {};
+}
+    `,
+    noFormat: true,
+  },
+  {
+    name: 'bracket-in-jsx-text',
+    input: `// @compilationMode(all)
+function Component() {
+  return <div>Hello, &#123;world&#125;!</div>;
 }
     `,
     noFormat: true,

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -2327,7 +2327,7 @@ function codegenJsxAttribute(
   }
 }
 
-const JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN = /[<>&]/;
+const JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN = /[<>&{}]/;
 function codegenJsxElement(
   cx: Context,
   place: Place,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/descriptive-name.expect.md

@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+function Test({friends}) {
+  return (
+    <div>
+      If the string contains the string &#123;pageNumber&#125; it will be
+      replaced by the page number.
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{friends: []}],
+};
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Test(t0) {
+  const $ = _c(1);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (
+      <div>
+        {
+          "If the string contains the string {pageNumber} it will be replaced by the page number."
+        }
+      </div>
+    );
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{ friends: [] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>If the string contains the string {pageNumber} it will be replaced by the page number.</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/descriptive-name.jsx

@@ -0,0 +1,12 @@
+function Test() {
+  return (
+    <div>
+      If the string contains the string &#123;pageNumber&#125; it will be
+      replaced by the page number.
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+};