[compiler] Fix for string attribute values with emoji

If a JSX attribute value is a string that contains unicode or other characters that need special escaping, we wrap the attribute value in an expression container. However, our unicode to detect this only handled the basic unicode character plane, not the "astral" plane which includes emojis.

This PR updates the regex to detect such extended characters and also use an expression container.

ghstack-source-id: 6d9c8e4
Pull Request resolved: #33096

Author: josephsavona

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

@@ -2327,9 +2327,12 @@ function codegenInstructionValue(
  * 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
+ *
+ * u010000 to u10FFFF: Astral plane characters
+ * https://mathiasbynens.be/notes/javascript-unicode
  */
 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{010000}-\u{10FFFF}]|"|\\/u;
 function codegenJsxAttribute(
   cx: Context,
   attribute: JsxAttribute,

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md

@@ -11,6 +11,7 @@ function Component() {
       <Text value={'Lauren'} />
       <Text value={'சத்யா'} />
       <Text value={'Sathya'} />
+      <Text value={'welcome 👋'} />
     </div>
   );
 }
@@ -42,6 +43,7 @@ function Component() {
         <Text value="Lauren" />
         <Text value={"\u0B9A\u0BA4\u0BCD\u0BAF\u0BBE"} />
         <Text value="Sathya" />
+        <Text value={"welcome \uD83D\uDC4B"} />
       </div>
     );
     $[0] = t0;
@@ -74,4 +76,4 @@ export const FIXTURE_ENTRYPOINT = {
       
 ### Eval output
 (kind: ok) <div><span>
-</span><span>A	E</span><span>나은</span><span>Lauren</span><span>சத்யா</span><span>Sathya</span></div>
+</span><span>A	E</span><span>나은</span><span>Lauren</span><span>சத்யா</span><span>Sathya</span><span>welcome 👋</span></div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js

@@ -7,6 +7,7 @@ function Component() {
       <Text value={'Lauren'} />
       <Text value={'சத்யா'} />
       <Text value={'Sathya'} />
+      <Text value={'welcome 👋'} />
     </div>
   );
 }