OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[compiler] Fix for string attribute values with emoji

Browse Source 
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
This commit is contained in:
Joe Savona 2025-05-03 09:07:50 +09:00
parent 66de8e5a99
commit ac2cae5245
3 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

@ -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>

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

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