[compiler][ez] Patch Array.concat object shape to capture callee
ghstack-source-id: 503fbf8f76e1cd10095b44cf180863221710774f Pull Request resolved: https://github.com/facebook/react/pull/30074
Mofei Zhang committed
Jun 25, 2024 at 16:03 UTC
9c2c7c670cfc51a63a9e1353c55d1d3beecb29d1
8 files changed
+100
-133
compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
+1
-1
@@ -237,7 +237,7 @@ addObject(BUILTIN_SHAPES, BuiltInArrayId, [
237
kind: "Object",
238
shapeId: BuiltInArrayId,
239
},
240
- calleeEffect: Effect.Read,
240
+ calleeEffect: Effect.Capture,
241
returnValueKind: ValueKind.Mutable,
242
}),
243
],
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md
renamed
+10
-14
@@ -40,24 +40,17 @@ import { mutate } from "shared-runtime";
40
* itself.
41
*/
42
function Foo(t0) {
43
- const $ = _c(3);
43
+ const $ = _c(2);
44
const { inputNum } = t0;
45
- let t1;
46
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
47
- t1 = [{ a: 1 }, {}];
48
- $[0] = t1;
49
- } else {
50
- t1 = $[0];
51
- }
52
- const arr1 = t1;
45
let arr2;
54
- if ($[1] !== inputNum) {
46
+ if ($[0] !== inputNum) {
47
+ const arr1 = [{ a: 1 }, {}];
48
arr2 = arr1.concat([1, inputNum]);
49
mutate(arr2[0]);
57
- $[1] = inputNum;
58
- $[2] = arr2;
50
+ $[0] = inputNum;
51
+ $[1] = arr2;
52
} else {
60
- arr2 = $[2];
53
+ arr2 = $[1];
54
}
55
return arr2;
56
}
@@ -69,4 +62,7 @@ export const FIXTURE_ENTRYPOINT = {
62
};
63
64
```
72
-
\ No newline at end of file
65
+
66
+### Eval output
67
+(kind: ok) [{"a":1,"wat0":"joe"},{},1,2]
68
+[{"a":1,"wat0":"joe"},{},1,3]
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.ts
renamed
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md
+27
-34
@@ -40,53 +40,46 @@ import { useCallback } from "react";
40
import { Stringify } from "shared-runtime";
41
42
function Foo(t0) {
43
- const $ = _c(11);
43
+ const $ = _c(9);
44
const { arr1, arr2, foo } = t0;
45
let t1;
46
- if ($[0] !== arr1) {
47
- t1 = [arr1];
48
- $[0] = arr1;
49
- $[1] = t1;
50
- } else {
51
- t1 = $[1];
52
- }
53
- const x = t1;
54
- let t2;
46
let getVal1;
56
- if ($[2] !== foo || $[3] !== x || $[4] !== arr2) {
47
+ if ($[0] !== arr1 || $[1] !== foo || $[2] !== arr2) {
48
+ const x = [arr1];
49
+
50
let y;
51
y = [];
59
- let t3;
60
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
61
- t3 = () => ({ x: 2 });
62
- $[7] = t3;
52
+ let t2;
53
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
54
+ t2 = () => ({ x: 2 });
55
+ $[5] = t2;
56
} else {
64
- t3 = $[7];
57
+ t2 = $[5];
58
}
66
- getVal1 = t3;
59
+ getVal1 = t2;
60
68
- t2 = () => [y];
61
+ t1 = () => [y];
62
foo ? (y = x.concat(arr2)) : y;
70
- $[2] = foo;
71
- $[3] = x;
72
- $[4] = arr2;
73
- $[5] = t2;
74
- $[6] = getVal1;
63
+ $[0] = arr1;
64
+ $[1] = foo;
65
+ $[2] = arr2;
66
+ $[3] = t1;
67
+ $[4] = getVal1;
68
} else {
76
- t2 = $[5];
77
- getVal1 = $[6];
69
+ t1 = $[3];
70
+ getVal1 = $[4];
71
}
79
- const getVal2 = t2;
80
- let t3;
81
- if ($[8] !== getVal1 || $[9] !== getVal2) {
82
- t3 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
83
- $[8] = getVal1;
84
- $[9] = getVal2;
85
- $[10] = t3;
72
+ const getVal2 = t1;
73
+ let t2;
74
+ if ($[6] !== getVal1 || $[7] !== getVal2) {
75
+ t2 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
76
+ $[6] = getVal1;
77
+ $[7] = getVal2;
78
+ $[8] = t2;
79
} else {
87
- t3 = $[10];
80
+ t2 = $[8];
81
}
89
- return t3;
82
+ return t2;
83
}
84
85
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md
+16
-23
@@ -36,38 +36,31 @@ import { Stringify } from "shared-runtime";
36
37
// We currently produce invalid output (incorrect scoping for `y` declaration)
38
function useFoo(arr1, arr2) {
39
- const $ = _c(7);
39
+ const $ = _c(5);
40
let t0;
41
- if ($[0] !== arr1) {
42
- t0 = [arr1];
41
+ if ($[0] !== arr1 || $[1] !== arr2) {
42
+ const x = [arr1];
43
+
44
+ let y;
45
+ t0 = () => ({ y });
46
+
47
+ (y = x.concat(arr2)), y;
48
$[0] = arr1;
44
- $[1] = t0;
49
+ $[1] = arr2;
50
+ $[2] = t0;
51
} else {
46
- t0 = $[1];
52
+ t0 = $[2];
53
}
48
- const x = t0;
54
+ const getVal = t0;
55
let t1;
50
- if ($[2] !== x || $[3] !== arr2) {
51
- let y;
52
- t1 = () => ({ y });
53
-
54
- (y = x.concat(arr2)), y;
55
- $[2] = x;
56
- $[3] = arr2;
56
+ if ($[3] !== getVal) {
57
+ t1 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
58
+ $[3] = getVal;
59
$[4] = t1;
60
} else {
61
t1 = $[4];
62
}
61
- const getVal = t1;
62
- let t2;
63
- if ($[5] !== getVal) {
64
- t2 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
65
- $[5] = getVal;
66
- $[6] = t2;
67
- } else {
68
- t2 = $[6];
69
- }
70
- return t2;
63
+ return t1;
64
}
65
66
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md
+18
-25
@@ -30,38 +30,31 @@ import { c as _c } from "react/compiler-runtime";
30
import { useMemo } from "react";
31
32
function useFoo(arr1, arr2) {
33
- const $ = _c(7);
34
- let t0;
35
- if ($[0] !== arr1) {
36
- t0 = [arr1];
37
- $[0] = arr1;
38
- $[1] = t0;
39
- } else {
40
- t0 = $[1];
41
- }
42
- const x = t0;
33
+ const $ = _c(5);
34
let y;
44
- if ($[2] !== x || $[3] !== arr2) {
35
+ if ($[0] !== arr1 || $[1] !== arr2) {
36
+ const x = [arr1];
37
+
38
y;
39
(y = x.concat(arr2)), y;
47
- $[2] = x;
48
- $[3] = arr2;
49
- $[4] = y;
40
+ $[0] = arr1;
41
+ $[1] = arr2;
42
+ $[2] = y;
43
} else {
51
- y = $[4];
44
+ y = $[2];
45
}
53
- let t1;
54
- const t2 = y;
55
- let t3;
56
- if ($[5] !== t2) {
57
- t3 = { y: t2 };
58
- $[5] = t2;
59
- $[6] = t3;
46
+ let t0;
47
+ const t1 = y;
48
+ let t2;
49
+ if ($[3] !== t1) {
50
+ t2 = { y: t1 };
51
+ $[3] = t1;
52
+ $[4] = t2;
53
} else {
61
- t3 = $[6];
54
+ t2 = $[4];
55
}
63
- t1 = t3;
64
- return t1;
56
+ t0 = t2;
57
+ return t0;
58
}
59
60
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md
+28
-35
@@ -40,55 +40,48 @@ import { useMemo } from "react";
40
import { Stringify } from "shared-runtime";
41
42
function Foo(t0) {
43
- const $ = _c(11);
43
+ const $ = _c(9);
44
const { arr1, arr2, foo } = t0;
45
let t1;
46
- if ($[0] !== arr1) {
47
- t1 = [arr1];
48
- $[0] = arr1;
49
- $[1] = t1;
50
- } else {
51
- t1 = $[1];
52
- }
53
- const x = t1;
54
- let t2;
46
let val1;
56
- if ($[2] !== foo || $[3] !== x || $[4] !== arr2) {
47
+ if ($[0] !== arr1 || $[1] !== foo || $[2] !== arr2) {
48
+ const x = [arr1];
49
+
50
let y;
51
y = [];
52
+ let t2;
53
let t3;
60
- let t4;
61
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
62
- t4 = { x: 2 };
63
- $[7] = t4;
54
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
55
+ t3 = { x: 2 };
56
+ $[5] = t3;
57
} else {
65
- t4 = $[7];
58
+ t3 = $[5];
59
}
67
- t3 = t4;
68
- val1 = t3;
60
+ t2 = t3;
61
+ val1 = t2;
62
63
foo ? (y = x.concat(arr2)) : y;
71
- t2 = (() => [y])();
72
- $[2] = foo;
73
- $[3] = x;
74
- $[4] = arr2;
75
- $[5] = t2;
76
- $[6] = val1;
64
+ t1 = (() => [y])();
65
+ $[0] = arr1;
66
+ $[1] = foo;
67
+ $[2] = arr2;
68
+ $[3] = t1;
69
+ $[4] = val1;
70
} else {
78
- t2 = $[5];
79
- val1 = $[6];
71
+ t1 = $[3];
72
+ val1 = $[4];
73
}
81
- const val2 = t2;
82
- let t3;
83
- if ($[8] !== val1 || $[9] !== val2) {
84
- t3 = <Stringify val1={val1} val2={val2} />;
85
- $[8] = val1;
86
- $[9] = val2;
87
- $[10] = t3;
74
+ const val2 = t1;
75
+ let t2;
76
+ if ($[6] !== val1 || $[7] !== val2) {
77
+ t2 = <Stringify val1={val1} val2={val2} />;
78
+ $[6] = val1;
79
+ $[7] = val2;
80
+ $[8] = t2;
81
} else {
89
- t3 = $[10];
82
+ t2 = $[8];
83
}
91
- return t3;
84
+ return t2;
85
}
86
87
export const FIXTURE_ENTRYPOINT = {
compiler/packages/snap/src/SproutTodoFilter.ts
-1
@@ -488,7 +488,6 @@ const skipFilter = new Set([
488
"original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block",
489
"original-reactive-scopes-fork/bug-hoisted-declaration-with-scope",
490
"bug-codegen-inline-iife",
491
- "bug-array-concat-should-capture",
491
492
// 'react-compiler-runtime' not yet supported
493
"flag-enable-emit-hook-guards",