[compiler][ez] Patch compilationMode:infer object method edge case (#32055)
Fix for https://github.com/facebook/react/issues/31180
mofeiZ committed
Jan 13, 2025 at 12:18 UTC
af8532f25121a6b4060e3edd7186f0a58812d771
3 files changed
+84
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts
+2
@@ -992,9 +992,11 @@ function returnsNonNode(
992
}
993
}
994
},
995
+ // Skip traversing all nested functions and their return statements
996
ArrowFunctionExpression: skipNestedFunctions(node),
997
FunctionExpression: skipNestedFunctions(node),
998
FunctionDeclaration: skipNestedFunctions(node),
999
+ ObjectMethod: node => node.skip(),
1000
});
1001
1002
return !hasReturn || returnsNonNode;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.expect.md
new
+63
@@ -0,0 +1,63 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+// @compilationMode(infer)
6
+
7
+import {Stringify} from 'shared-runtime';
8
+
9
+function Test() {
10
+ const context = {
11
+ testFn() {
12
+ // if it is an arrow function its work
13
+ return () => 'test'; // it will break compile if returns an arrow fn
14
+ },
15
+ };
16
+
17
+ return <Stringify value={context} shouldInvokeFns={true} />;
18
+}
19
+
20
+export const FIXTURE_ENTRYPOINT = {
21
+ fn: Test,
22
+ params: [{}],
23
+};
24
+
25
+```
26
+
27
+## Code
28
+
29
+```javascript
30
+import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
31
+
32
+import { Stringify } from "shared-runtime";
33
+
34
+function Test() {
35
+ const $ = _c(1);
36
+ let t0;
37
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
38
+ const context = {
39
+ testFn() {
40
+ return _temp;
41
+ },
42
+ };
43
+
44
+ t0 = <Stringify value={context} shouldInvokeFns={true} />;
45
+ $[0] = t0;
46
+ } else {
47
+ t0 = $[0];
48
+ }
49
+ return t0;
50
+}
51
+function _temp() {
52
+ return "test";
53
+}
54
+
55
+export const FIXTURE_ENTRYPOINT = {
56
+ fn: Test,
57
+ params: [{}],
58
+};
59
+
60
+```
61
+
62
+### Eval output
63
+(kind: ok) <div>{"value":{"testFn":{"kind":"Function","result":{"kind":"Function","result":"test"}}},"shouldInvokeFns":true}</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-nested-object-method.jsx
new
+19
@@ -0,0 +1,19 @@
1
+// @compilationMode(infer)
2
+
3
+import {Stringify} from 'shared-runtime';
4
+
5
+function Test() {
6
+ const context = {
7
+ testFn() {
8
+ // if it is an arrow function its work
9
+ return () => 'test'; // it will break compile if returns an arrow fn
10
+ },
11
+ };
12
+
13
+ return <Stringify value={context} shouldInvokeFns={true} />;
14
+}
15
+
16
+export const FIXTURE_ENTRYPOINT = {
17
+ fn: Test,
18
+ params: [{}],
19
+};