From 78e4e9311e9c06758e274bf9a6de364b04a00124 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@meta.com>
Date: Sun, 19 Jan 2025 15:18:17 -0500
Subject: [PATCH 1/2] [compiler][repro] JSX escape sequences not printed
 correctly by @babel/generator

Repro for https://github.com/facebook/react/issues/32123

Note that this is only a bug when calling `@babel/generator:generate()` before transforming JSX.
---
 .../jsx-preserve-escape-character.expect.md   | 57 +++++++++++++++++++
 .../compiler/jsx-preserve-escape-character.js | 17 ++++++
 2 files changed, 74 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
new file mode 100644
index 0000000000..6f8a86382d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+/**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  return <input pattern="\w" />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; /**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <input pattern="\\w" />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input pattern="\w">
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js
new file mode 100644
index 0000000000..5a972a585b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.js
@@ -0,0 +1,17 @@
+/**
+ * Fixture showing `@babel/generator` bug with jsx attribute strings containing
+ * escape sequences. Note that this is only a problem when generating jsx
+ * literals.
+ *
+ * When using the jsx transform to correctly lower jsx into
+ * `React.createElement` calls, the escape sequences are preserved correctly
+ * (see evaluator output).
+ */
+function MyApp() {
+  return <input pattern="\w" />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: MyApp,
+  params: [],
+};

From f5af43493b40cefc3ee29783180d3d6a9eb49373 Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@meta.com>
Date: Sun, 19 Jan 2025 15:18:17 -0500
Subject: [PATCH 2/2] [compiler][ez] Patch for JSX escape sequences in
 @babel/generator

Fall back to using JSXExpressionContainer for strings potentially containing escape sequences (a single backslash) to fix  https://github.com/facebook/react/issues/32123. This is an extension of https://github.com/facebook/react/pull/29079
---
 .../src/ReactiveScopes/CodegenReactiveFunction.ts  |  2 +-
 .../jsx-preserve-escape-character.expect.md        |  2 +-
 ...epro-propagate-type-of-ternary-nested.expect.md | 14 +++++++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index b9ec688d87..7b5ed3395e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -2269,7 +2269,7 @@ function codegenInstructionValue(
  * https://en.wikipedia.org/wiki/List_of_Unicode_characters#Control_codes
  */
 const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
-  /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}]|"/u;
+  /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}]|"|\\/u;
 function codegenJsxAttribute(
   cx: Context,
   attribute: JsxAttribute,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
index 6f8a86382d..a539d92ed9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-preserve-escape-character.expect.md
@@ -38,7 +38,7 @@ function MyApp() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <input pattern="\\w" />;
+    t0 = <input pattern={"\\w"} />;
     $[0] = t0;
   } else {
     t0 = $[0];
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
index 609231ca8d..97109cfc4e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-propagate-type-of-ternary-nested.expect.md
@@ -42,15 +42,23 @@ function V0(t0) {
       <ComponentC cd="TxqUy" ce="oh`]uc" cf="Bdbo" c10={!V9.va && v11.v12}>
         gmhubcw
         {v1 === V3.V13 ? (
-          <c14 c15="L^]w\\\\T\\\\qrGmqrlQyrvBgf\\\\inuRdkEqwVPwixiriYGSZmKJf]E]RdT{N[WyVPiEJIbdFzvDohJV[BV`H[[K^xoy[HOGKDqVzUJ^h">
+          <c14
+            c15={
+              "L^]w\\\\T\\\\qrGmqrlQyrvBgf\\\\inuRdkEqwVPwixiriYGSZmKJf]E]RdT{N[WyVPiEJIbdFzvDohJV[BV`H[[K^xoy[HOGKDqVzUJ^h"
+            }
+          >
             iawyneijcgamsfgrrjyvhjrrqvzexxwenxqoknnilmfloafyvnvkqbssqnxnexqvtcpvjysaiovjxyqrorqskfph
           </c14>
         ) : v16.v17("pyorztRC]EJzVuP^e") ? (
-          <c14 c15="CRinMqvmOknWRAKERI]RBzB_LXGKQe{SUpoN[\\\\gL[`bLMOhvFqDVVMNOdY">
+          <c14
+            c15={
+              "CRinMqvmOknWRAKERI]RBzB_LXGKQe{SUpoN[\\\\gL[`bLMOhvFqDVVMNOdY"
+            }
+          >
             goprinbjmmjhfserfuqyluxcewpyjihektogc
           </c14>
         ) : (
-          <c14 c15="H\\\\\\\\GAcTc\\\\lfGMW[yHriCpvW`w]niSIKj\\\\kdgFI">
+          <c14 c15={"H\\\\\\\\GAcTc\\\\lfGMW[yHriCpvW`w]niSIKj\\\\kdgFI"}>
             yejarlvudihqdrdgpvahovggdnmgnueedxpbwbkdvvkdhqwrtoiual
           </c14>
         )}