[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: #29997

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"],

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

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: [{}],
+};