[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: 6d9c8e4dd22285077108e2fa53d66154d1b781fb Pull Request resolved: https://github.com/facebook/react/pull/33096
Joe Savona committed
May 3, 2025 at 09:07 UTC
ac2cae524576b8091a6d78d9ab05627053949df1
3 files changed
+8
-2
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+4
-1
@@ -2327,9 +2327,12 @@ function codegenInstructionValue(
2327
* u0080 to u009F: C1 control codes
2328
* u00A0 to uFFFF: All non-basic Latin characters
2329
* https://en.wikipedia.org/wiki/List_of_Unicode_characters#Control_codes
2330
+ *
2331
+ * u010000 to u10FFFF: Astral plane characters
2332
+ * https://mathiasbynens.be/notes/javascript-unicode
2333
*/
2334
const STRING_REQUIRES_EXPR_CONTAINER_PATTERN =
2332
- /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}]|"|\\/u;
2335
+ /[\u{0000}-\u{001F}\u{007F}\u{0080}-\u{FFFF}\u{010000}-\u{10FFFF}]|"|\\/u;
2336
function codegenJsxAttribute(
2337
cx: Context,
2338
attribute: JsxAttribute,
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.expect.md
+3
-1
@@ -11,6 +11,7 @@ function Component() {
11
<Text value={'Lauren'} />
12
<Text value={'சத்யா'} />
13
<Text value={'Sathya'} />
14
+ <Text value={'welcome 👋'} />
15
</div>
16
);
17
}
@@ -42,6 +43,7 @@ function Component() {
43
<Text value="Lauren" />
44
<Text value={"\u0B9A\u0BA4\u0BCD\u0BAF\u0BBE"} />
45
<Text value="Sathya" />
46
+ <Text value={"welcome \uD83D\uDC4B"} />
47
</div>
48
);
49
$[0] = t0;
@@ -74,4 +76,4 @@ export const FIXTURE_ENTRYPOINT = {
76
77
### Eval output
78
(kind: ok) <div><span>
77
-</span><span>A E</span><span>나은</span><span>Lauren</span><span>சத்யா</span><span>Sathya</span></div>
\ No newline at end of file
79
+</span><span>A E</span><span>나은</span><span>Lauren</span><span>சத்யா</span><span>Sathya</span><span>welcome 👋</span></div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-string-attribute-expression-container.js
+1
@@ -7,6 +7,7 @@ function Component() {
7
<Text value={'Lauren'} />
8
<Text value={'சத்யா'} />
9
<Text value={'Sathya'} />
10
+ <Text value={'welcome 👋'} />
11
</div>
12
);
13
}