compiler: workaround babel issue with html entity escaping
Babel doesn't seem to properly preserve escaping of HTML entities when emitting JSX text children, so this commit works around the issue by emitting a JsxExpressionContainer for JSX children that contain ">", "<", or "&" characters. Closes #29100 ghstack-source-id: 2d0622397cc067c6336f3635073e07daef854084 Pull Request resolved: https://github.com/facebook/react/pull/29143
Joe Savona committed
May 17, 2024 at 11:35 UTC
5a12a0d330b48ca511456dd770c5a158116f91a5
3 files changed
+55
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+7
@@ -2077,6 +2077,7 @@ function codegenJsxAttribute(
2077
}
2078
}
2079
2080
+const JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN = /[<>&]/;
2081
function codegenJsxElement(
2082
cx: Context,
2083
place: Place
@@ -2089,6 +2090,12 @@ function codegenJsxElement(
2090
const value = codegenPlace(cx, place);
2091
switch (value.type) {
2092
case "JSXText": {
2093
+ if (JSX_TEXT_CHILD_REQUIRES_EXPR_CONTAINER_PATTERN.test(value.value)) {
2094
+ return createJsxExpressionContainer(
2095
+ place.loc,
2096
+ createStringLiteral(place.loc, value.value)
2097
+ );
2098
+ }
2099
return createJsxText(place.loc, value.value);
2100
}
2101
case "JSXElement":
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.expect.md
new
+40
@@ -0,0 +1,40 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Component() {
6
+ return <div>><span &</div>;
7
+}
8
+
9
+export const FIXTURE_ENTRYPOINT = {
10
+ fn: Component,
11
+ params: [{}],
12
+};
13
+
14
+```
15
+
16
+## Code
17
+
18
+```javascript
19
+import { c as _c } from "react/compiler-runtime";
20
+function Component() {
21
+ const $ = _c(1);
22
+ let t0;
23
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
24
+ t0 = <div>{"><span &"}</div>;
25
+ $[0] = t0;
26
+ } else {
27
+ t0 = $[0];
28
+ }
29
+ return t0;
30
+}
31
+
32
+export const FIXTURE_ENTRYPOINT = {
33
+ fn: Component,
34
+ params: [{}],
35
+};
36
+
37
+```
38
+
39
+### Eval output
40
+(kind: ok) <div>><span &</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-html-entity.js
new
+8
@@ -0,0 +1,8 @@
1
+function Component() {
2
+ return <div>><span &</div>;
3
+}
4
+
5
+export const FIXTURE_ENTRYPOINT = {
6
+ fn: Component,
7
+ params: [{}],
8
+};