From 4dc5a923c19481b6c68a04739a887ae4eb201941 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Thu, 20 Jun 2024 18:20:33 -0400
Subject: [PATCH] [compiler:codegen] Wrap non-ascii characters in
 JsxExpressionContainer

This PR extends the previous logic added in #29141 to also account for
other kinds of non-ascii characters such as `\n`. Because these control
characters are individual special characters (and not 2 characters `\`
and `n`) we match based on unicode which was already being checked for
non-Latin characters.

This allows control characters to continue to be compiled equivalently
to its original source if it was provided in a JsxExpressionContainer.
However note that this PR does not convert JSX attributes that are
StringLiterals to JsxExpressionContainer, to preserve the original
source code as it was written.

Alternatively we could always emit a JsxExpressionContainer if it was
used in the source and not try to down level it to some other node
kind. But since we already do this I opted to keep this behavior.

Partially addresses #29648.

ghstack-source-id: e5f3ca7f378c331de024e5118d5790f9b92d03a3
Pull Request resolved: https://github.com/facebook/react/pull/29997
---
 compiler/.eslintrc.js                         |   8 +++++++-
 .../ReactiveScopes/CodegenReactiveFunction.ts |  14 ++++++++++---
 ...g-attribute-expression-container.expect.md | Bin 0 -> 1171 bytes
 ...x-string-attribute-expression-container.js |  19 ++++++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js

diff --git a/compiler/.eslintrc.js b/compiler/.eslintrc.js
index 996046a130035..2f68f5c3103ce 100644
--- a/compiler/.eslintrc.js
+++ b/compiler/.eslintrc.js
@@ -43,6 +43,12 @@ module.exports = {
 
     "multiline-comment-style": ["error", "starred-block"],
 
+    /**
+     * We sometimes need to check for control characters in regexes for things like preserving input
+     * strings
+     */
+    "no-control-regex": "off",
+
     "@typescript-eslint/no-empty-function": "off",
 
     /*
@@ -82,7 +88,7 @@ module.exports = {
     ],
     "@typescript-eslint/array-type": ["error", { default: "generic" }],
     "@typescript-eslint/triple-slash-reference": "off",
-    "@typescript-eslint/no-var-requires": "off"
+    "@typescript-eslint/no-var-requires": "off",
   },
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],
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 3886628c8095a..d6818187bb229 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -2157,10 +2157,18 @@ function codegenInstructionValue(
 }
 
 /**
- * Due to a bug in earlier Babel versions, JSX string attributes with double quotes or with unicode characters
- * may be escaped unnecessarily. To avoid trigger this Babel bug, we use a JsxExpressionContainer for such strings.
+ * Due to a bug in earlier Babel versions, JSX string attributes with double quotes, unicode characters, or special
+ * control characters such as \n may be escaped unnecessarily. To avoid trigger this Babel bug, we use a
+ * JsxExpressionContainer for such strings.
+ *
+ * u0000 to u001F: C0 control codes
+ * u007F         : Delete character
+ * u0080 to u009F: C1 control codes
+ * u00A0 to uFFFF: All non-basic Latin characters
+ * https://en.wikipedia.org/wiki/List_of_Unicode_characters#Control_codes
  */
-const STRING_REQUIRES_EXPR_CONTAINER_PATTERN = /[\u{0080}-\u{FFFF}]|"/u;
+const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
+  /[\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-string-attribute-expression-container.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md
new file mode 100644
index 0000000000000000000000000000000000000000..188933c21b35c623eb9981f413a5052411cd5e52
GIT binary patch
literal 1171
zcmb`H(Q4Z;6oz*@J;j;R3kSN!8G~&}T<C%ax#>om!bVdZO_8ZrTQag7T8v@rDR#3b
z+#aGwlH1H~yQ>)tl8$|J{_j5$84O?{ib@l*Ua!B=EiIW!3r&(rFr7*PbD0-XaH0Jn
z)C53rT`2)R4gqGHbbDw=I9~E=4O^O3JgmJ{72xAFFnT<Gw9?Vj(ceFQ{`vL&>G&zt
zmp615pN-l=hEvjzUGb(Qzjj4I(-AN$3n~t4TW>QP*_r*BUl&qoU{aJCJ}f>j&rYH^
zI$oZ9`SfvdyoAtVNW^4^W*-q0RMEVgz<J$V?2~3{ff9mz=W@gQcvFOmo7BL7mJl;&
zAW<?0PjSlhh#~Ye<LafVgidqrO?R65hPXoau&$W-V*~(@aSb{!qcj13?>xAGFbv`J
zCjTn4gG4Id?Q@XxT*i#DOCFbKaVmJ`4IL)H44BjT+;#ea*Bzhx(Z19D_^NszynDN<
z=5JpABahcw{#QTUc@AJj1300r@&<TTa_dzq#e@x$2H&=e4WtMCq60^u1NN2O!!6x6
z6!LMHE%0#%_zMJXo9iCu7(ai!>&#JVi?_d+L}q1-zJa!RyK+n_6Yk5wPf^Z)?O;<0
v0QT_!A}kJMrOkEWU!`I*0eLlamw*%YtUX9>cJw^z%-yN(EIC*2maL<<A7@pA

literal 0
HcmV?d00001

diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js
new file mode 100644
index 0000000000000..77dd7e51449f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js
@@ -0,0 +1,19 @@
+function Component() {
+  return (
+    <div>
+      <Text value={"\u0000"} />
+      <Text value={"A\tE"} />
+      <Text value={"나은"} />
+      <Text value={"Sathya"} />
+    </div>
+  );
+}
+
+function Text({ value }) {
+  return <span>{value}</span>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};