@samitouri / QOS-React-2 / commits / 0cf6d0c929

[compiler] Update fixtures for new inference (#33496)

--- [//]: # (BEGIN SAPLING FOOTER) Stack created with [Sapling](https://sapling-scm.com). Best reviewed with [ReviewStack](https://reviewstack.dev/facebook/react/pull/33496). * #33571 * #33558 * #33547 * #33543 * #33533 * #33532 * #33530 * #33526 * #33522 * #33518 * #33514 * #33513 * #33512 * #33504 * #33500 * #33497 * __->__ #33496

Joseph Savona committed Jun 18, 2025 at 13:01 UTC 0cf6d0c929e14d4a3c5bcc11a7347b4cad250e7f
48 files changed +389 -280
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.expect.md
+5 -11
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {
7 Stringify,
8 mutate,
@@ -101,7 +102,7 @@ export const FIXTURE_ENTRYPOINT = {
102 ## Code
103
104 ```javascript
104 -import { c as _c } from "react/compiler-runtime";
105 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
106 import {
107 Stringify,
108 mutate,
@@ -175,21 +176,14 @@ import {
176 * and mutability.
177 */
178 function Component(t0) {
178 - const $ = _c(4);
179 + const $ = _c(2);
180 const { prop } = t0;
181 let t1;
182 if ($[0] !== prop) {
183 const obj = shallowCopy(prop);
184 const aliasedObj = identity(obj);
184 - let t2;
185 - if ($[2] !== obj) {
186 - t2 = [obj.id];
187 - $[2] = obj;
188 - $[3] = t2;
189 - } else {
190 - t2 = $[3];
191 - }
192 - const id = t2;
185 +
186 + const id = [obj.id];
187
188 mutate(aliasedObj);
189 setPropertyByKey(aliasedObj, "id", prop.id + 1);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/aliased-nested-scope-truncated-dep.tsx
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {
3 Stringify,
4 mutate,
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.expect.md
+45 -39
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {Stringify} from 'shared-runtime';
7
8 /**
@@ -43,7 +44,7 @@ export const FIXTURE_ENTRYPOINT = {
44 ## Code
45
46 ```javascript
46 -import { c as _c } from "react/compiler-runtime";
47 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
48 import { Stringify } from "shared-runtime";
49
50 /**
@@ -57,62 +58,67 @@ import { Stringify } from "shared-runtime";
58 * - cb1 is not assumed to be called since it's only used as a call operand
59 */
60 function useFoo(t0) {
60 - const $ = _c(13);
61 - const { arr1, arr2 } = t0;
61 + const $ = _c(14);
62 + let arr1;
63 + let arr2;
64 let t1;
63 - if ($[0] !== arr1[0]) {
64 - t1 = (e) => arr1[0].value + e.value;
65 - $[0] = arr1[0];
66 - $[1] = t1;
65 + if ($[0] !== t0) {
66 + ({ arr1, arr2 } = t0);
67 + let t2;
68 + if ($[4] !== arr1[0]) {
69 + t2 = (e) => arr1[0].value + e.value;
70 + $[4] = arr1[0];
71 + $[5] = t2;
72 + } else {
73 + t2 = $[5];
74 + }
75 + const cb1 = t2;
76 + t1 = () => arr1.map(cb1);
77 + $[0] = t0;
78 + $[1] = arr1;
79 + $[2] = arr2;
80 + $[3] = t1;
81 } else {
68 - t1 = $[1];
82 + arr1 = $[1];
83 + arr2 = $[2];
84 + t1 = $[3];
85 }
70 - const cb1 = t1;
86 + const getArrMap1 = t1;
87 let t2;
72 - if ($[2] !== arr1 || $[3] !== cb1) {
73 - t2 = () => arr1.map(cb1);
74 - $[2] = arr1;
75 - $[3] = cb1;
76 - $[4] = t2;
88 + if ($[6] !== arr2) {
89 + t2 = (e_0) => arr2[0].value + e_0.value;
90 + $[6] = arr2;
91 + $[7] = t2;
92 } else {
78 - t2 = $[4];
93 + t2 = $[7];
94 }
80 - const getArrMap1 = t2;
95 + const cb2 = t2;
96 let t3;
82 - if ($[5] !== arr2) {
83 - t3 = (e_0) => arr2[0].value + e_0.value;
84 - $[5] = arr2;
85 - $[6] = t3;
97 + if ($[8] !== arr1 || $[9] !== cb2) {
98 + t3 = () => arr1.map(cb2);
99 + $[8] = arr1;
100 + $[9] = cb2;
101 + $[10] = t3;
102 } else {
87 - t3 = $[6];
103 + t3 = $[10];
104 }
89 - const cb2 = t3;
105 + const getArrMap2 = t3;
106 let t4;
91 - if ($[7] !== arr1 || $[8] !== cb2) {
92 - t4 = () => arr1.map(cb2);
93 - $[7] = arr1;
94 - $[8] = cb2;
95 - $[9] = t4;
96 - } else {
97 - t4 = $[9];
98 - }
99 - const getArrMap2 = t4;
100 - let t5;
101 - if ($[10] !== getArrMap1 || $[11] !== getArrMap2) {
102 - t5 = (
107 + if ($[11] !== getArrMap1 || $[12] !== getArrMap2) {
108 + t4 = (
109 <Stringify
110 getArrMap1={getArrMap1}
111 getArrMap2={getArrMap2}
112 shouldInvokeFns={true}
113 />
114 );
109 - $[10] = getArrMap1;
110 - $[11] = getArrMap2;
111 - $[12] = t5;
115 + $[11] = getArrMap1;
116 + $[12] = getArrMap2;
117 + $[13] = t4;
118 } else {
113 - t5 = $[12];
119 + t4 = $[13];
120 }
115 - return t5;
121 + return t4;
122 }
123
124 export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-named-callback-cross-context.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {Stringify} from 'shared-runtime';
3
4 /**
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.expect.md
+16 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function bar(a) {
7 let x = [a];
8 let y = {};
@@ -23,19 +24,27 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
26 -import { c as _c } from "react/compiler-runtime";
27 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
28 function bar(a) {
28 - const $ = _c(2);
29 - let y;
29 + const $ = _c(4);
30 + let t0;
31 if ($[0] !== a) {
31 - const x = [a];
32 + t0 = [a];
33 + $[0] = a;
34 + $[1] = t0;
35 + } else {
36 + t0 = $[1];
37 + }
38 + const x = t0;
39 + let y;
40 + if ($[2] !== x[0][1]) {
41 y = {};
42
43 y = x[0][1];
35 - $[0] = a;
36 - $[1] = y;
44 + $[2] = x[0][1];
45 + $[3] = y;
46 } else {
38 - y = $[1];
47 + y = $[3];
48 }
49 return y;
50 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-2-iife.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function bar(a) {
3 let x = [a];
4 let y = {};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.expect.md
+18 -8
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function bar(a, b) {
7 let x = [a, b];
8 let y = {};
@@ -27,22 +28,31 @@ export const FIXTURE_ENTRYPOINT = {
28 ## Code
29
30 ```javascript
30 -import { c as _c } from "react/compiler-runtime";
31 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
32 function bar(a, b) {
32 - const $ = _c(3);
33 - let y;
33 + const $ = _c(6);
34 + let t0;
35 if ($[0] !== a || $[1] !== b) {
35 - const x = [a, b];
36 + t0 = [a, b];
37 + $[0] = a;
38 + $[1] = b;
39 + $[2] = t0;
40 + } else {
41 + t0 = $[2];
42 + }
43 + const x = t0;
44 + let y;
45 + if ($[3] !== x[0][1] || $[4] !== x[1][0]) {
46 y = {};
47 let t = {};
48
49 y = x[0][1];
50 t = x[1][0];
41 - $[0] = a;
42 - $[1] = b;
43 - $[2] = y;
51 + $[3] = x[0][1];
52 + $[4] = x[1][0];
53 + $[5] = y;
54 } else {
45 - y = $[2];
55 + y = $[5];
56 }
57 return y;
58 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-3-iife.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function bar(a, b) {
3 let x = [a, b];
4 let y = {};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.expect.md
+16 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function bar(a) {
7 let x = [a];
8 let y = {};
@@ -23,19 +24,27 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
26 -import { c as _c } from "react/compiler-runtime";
27 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
28 function bar(a) {
28 - const $ = _c(2);
29 - let y;
29 + const $ = _c(4);
30 + let t0;
31 if ($[0] !== a) {
31 - const x = [a];
32 + t0 = [a];
33 + $[0] = a;
34 + $[1] = t0;
35 + } else {
36 + t0 = $[1];
37 + }
38 + const x = t0;
39 + let y;
40 + if ($[2] !== x[0].a[1]) {
41 y = {};
42
43 y = x[0].a[1];
35 - $[0] = a;
36 - $[1] = y;
44 + $[2] = x[0].a[1];
45 + $[3] = y;
46 } else {
38 - y = $[1];
47 + y = $[3];
48 }
49 return y;
50 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-4-iife.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function bar(a) {
3 let x = [a];
4 let y = {};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.expect.md
+16 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function bar(a) {
7 let x = [a];
8 let y = {};
@@ -22,19 +23,27 @@ export const FIXTURE_ENTRYPOINT = {
23 ## Code
24
25 ```javascript
25 -import { c as _c } from "react/compiler-runtime";
26 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
27 function bar(a) {
27 - const $ = _c(2);
28 - let y;
28 + const $ = _c(4);
29 + let t0;
30 if ($[0] !== a) {
30 - const x = [a];
31 + t0 = [a];
32 + $[0] = a;
33 + $[1] = t0;
34 + } else {
35 + t0 = $[1];
36 + }
37 + const x = t0;
38 + let y;
39 + if ($[2] !== x[0]) {
40 y = {};
41
42 y = x[0];
34 - $[0] = a;
35 - $[1] = y;
43 + $[2] = x[0];
44 + $[3] = y;
45 } else {
37 - y = $[1];
46 + y = $[3];
47 }
48 return y;
49 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/capturing-function-alias-computed-load-iife.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function bar(a) {
3 let x = [a];
4 let y = {};
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
+2 -2
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @validateNoImpureFunctionsInRender
5 +// @validateNoImpureFunctionsInRender @enableNewMutationAliasingModel
6
7 function Component() {
8 const date = Date.now();
@@ -20,7 +20,7 @@ function Component() {
20 2 |
21 3 | function Component() {
22 > 4 | const date = Date.now();
23 - | ^^^^^^^^ InvalidReact: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent). `Date.now` is an impure function whose results may change on every call (4:4)
23 + | ^^^^^^^^^^ InvalidReact: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent). `Date.now` is an impure function whose results may change on every call (4:4)
24
25 InvalidReact: Calling an impure function can produce unstable results. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent). `performance.now` is an impure function whose results may change on every call (5:5)
26
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @validateNoImpureFunctionsInRender
1 +// @validateNoImpureFunctionsInRender @enableNewMutationAliasingModel
2
3 function Component() {
4 const date = Date.now();
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md
+8 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function Component() {
7 let local;
8
@@ -41,13 +42,13 @@ function Component() {
42 ## Error
43
44 ```
44 - 3 |
45 - 4 | const reassignLocal = newValue => {
46 -> 5 | local = newValue;
47 - | ^^^^^ InvalidReact: Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. Variable `local` cannot be reassigned after render (5:5)
48 - 6 | };
49 - 7 |
50 - 8 | const onClick = newValue => {
45 + 4 |
46 + 5 | const reassignLocal = newValue => {
47 +> 6 | local = newValue;
48 + | ^^^^^ InvalidReact: Reassigning a variable after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead. Variable `local` cannot be reassigned after render (6:6)
49 + 7 | };
50 + 8 |
51 + 9 | const onClick = newValue => {
52 ```
53
54
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function Component() {
3 let local;
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.expect.md
+10 -6
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function useHook(a, b) {
7 b.test = 1;
8 a.test = 2;
@@ -13,12 +14,15 @@ function useHook(a, b) {
14 ## Error
15
16 ```
16 - 1 | function useHook(a, b) {
17 -> 2 | b.test = 1;
18 - | ^ InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (2:2)
19 - 3 | a.test = 2;
20 - 4 | }
21 - 5 |
17 + 1 | // @enableNewMutationAliasingModel
18 + 2 | function useHook(a, b) {
19 +> 3 | b.test = 1;
20 + | ^ InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (3:3)
21 +
22 +InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (4:4)
23 + 4 | a.test = 2;
24 + 5 | }
25 + 6 |
26 ```
27
28
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.mutate-hook-argument.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function useHook(a, b) {
3 b.test = 1;
4 a.test = 2;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.expect.md
+10 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 let x = {a: 42};
7
8 function Component(props) {
@@ -17,13 +18,15 @@ function Component(props) {
18 ## Error
19
20 ```
20 - 3 | function Component(props) {
21 - 4 | foo(() => {
22 -> 5 | x.a = 10;
23 - | ^ InvalidReact: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect (5:5)
24 - 6 | x.a = 20;
25 - 7 | });
26 - 8 | }
21 + 4 | function Component(props) {
22 + 5 | foo(() => {
23 +> 6 | x.a = 10;
24 + | ^ InvalidReact: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect (6:6)
25 +
26 +InvalidReact: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect (7:7)
27 + 7 | x.a = 20;
28 + 8 | });
29 + 9 | }
30 ```
31
32
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.not-useEffect-external-mutate.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 let x = {a: 42};
3
4 function Component(props) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.expect.md
+10 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function Component() {
7 const foo = () => {
8 // Cannot assign to globals
@@ -17,13 +18,15 @@ function Component() {
18 ## Error
19
20 ```
20 - 2 | const foo = () => {
21 - 3 | // Cannot assign to globals
22 -> 4 | someUnknownGlobal = true;
23 - | ^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (4:4)
24 - 5 | moduleLocal = true;
25 - 6 | };
26 - 7 | foo();
21 + 3 | const foo = () => {
22 + 4 | // Cannot assign to globals
23 +> 5 | someUnknownGlobal = true;
24 + | ^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (5:5)
25 +
26 +InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (6:6)
27 + 6 | moduleLocal = true;
28 + 7 | };
29 + 8 | foo();
30 ```
31
32
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global-indirect.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function Component() {
3 const foo = () => {
4 // Cannot assign to globals
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.expect.md
+10 -7
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function Component() {
7 // Cannot assign to globals
8 someUnknownGlobal = true;
@@ -14,13 +15,15 @@ function Component() {
15 ## Error
16
17 ```
17 - 1 | function Component() {
18 - 2 | // Cannot assign to globals
19 -> 3 | someUnknownGlobal = true;
20 - | ^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (3:3)
21 - 4 | moduleLocal = true;
22 - 5 | }
23 - 6 |
18 + 2 | function Component() {
19 + 3 | // Cannot assign to globals
20 +> 4 | someUnknownGlobal = true;
21 + | ^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (4:4)
22 +
23 +InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (5:5)
24 + 5 | moduleLocal = true;
25 + 6 | }
26 + 7 |
27 ```
28
29
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.reassignment-to-global.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function Component() {
3 // Cannot assign to globals
4 someUnknownGlobal = true;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.expect.md
+7 -6
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 function Component(props) {
7 function hasErrors() {
8 let hasErrors = false;
@@ -19,12 +20,12 @@ function Component(props) {
20 ## Error
21
22 ```
22 - 7 | return hasErrors;
23 - 8 | }
24 -> 9 | return hasErrors();
25 - | ^^^^^^^^^ Invariant: [hoisting] Expected value for identifier to be initialized. hasErrors_0$15 (9:9)
26 - 10 | }
27 - 11 |
23 + 8 | return hasErrors;
24 + 9 | }
25 +> 10 | return hasErrors();
26 + | ^^^^^^^^^ Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized. <unknown> hasErrors_0$15:TFunction (10:10)
27 + 11 | }
28 + 12 |
29 ```
30
31
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.todo-repro-named-function-with-shadowed-local-same-name.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 function Component(props) {
3 function hasErrors() {
4 let hasErrors = false;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md
+5 -5
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
5 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
6 import {useEffect} from 'react';
7 import {print} from 'shared-runtime';
8
@@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
25 ## Code
26
27 ```javascript
28 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
28 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
29 import { useEffect } from "react";
30 import { print } from "shared-runtime";
31
@@ -48,9 +48,9 @@ export const FIXTURE_ENTRYPOINT = {
48 ## Logs
49
50 ```
51 -{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":139},"end":{"line":12,"column":1,"index":384},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"reason":"This mutates a variable that React considers immutable","description":null,"loc":{"start":{"line":10,"column":2,"index":345},"end":{"line":10,"column":5,"index":348},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"suggestions":null,"severity":"InvalidReact"}}
52 -{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":304},"end":{"line":9,"column":39,"index":341},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":326},"end":{"line":9,"column":27,"index":329},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
53 -{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":139},"end":{"line":12,"column":1,"index":384},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
51 +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":171},"end":{"line":12,"column":1,"index":416},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":10,"column":2,"index":377},"end":{"line":10,"column":5,"index":380},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}}}
52 +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":336},"end":{"line":9,"column":39,"index":373},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":358},"end":{"line":9,"column":27,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
53 +{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":171},"end":{"line":12,"column":1,"index":416},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
54 ```
55
56 ### Eval output
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
1 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
2 import {useEffect} from 'react';
3 import {print} from 'shared-runtime';
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
+5 -5
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
5 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
6
7 import {useEffect, useRef} from 'react';
8 import {print} from 'shared-runtime';
@@ -24,7 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
27 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
27 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
28
29 import { useEffect, useRef } from "react";
30 import { print } from "shared-runtime";
@@ -47,9 +47,9 @@ export const FIXTURE_ENTRYPOINT = {
47 ## Logs
48
49 ```
50 -{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":148},"end":{"line":11,"column":1,"index":311},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"loc":{"start":{"line":9,"column":2,"index":269},"end":{"line":9,"column":16,"index":283},"filename":"mutate-after-useeffect-ref-access.ts"},"suggestions":null,"severity":"InvalidReact"}}
51 -{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":227},"end":{"line":8,"column":40,"index":265},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":249},"end":{"line":8,"column":30,"index":255},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
52 -{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":148},"end":{"line":11,"column":1,"index":311},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
50 +{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":180},"end":{"line":11,"column":1,"index":343},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"reason":"Mutating component props or hook arguments is not allowed. Consider using a local variable instead","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":301},"end":{"line":9,"column":16,"index":315},"filename":"mutate-after-useeffect-ref-access.ts"}}}
51 +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":259},"end":{"line":8,"column":40,"index":297},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":281},"end":{"line":8,"column":30,"index":287},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
52 +{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":180},"end":{"line":11,"column":1,"index":343},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
53 ```
54
55 ### Eval output
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
1 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
2
3 import {useEffect, useRef} from 'react';
4 import {print} from 'shared-runtime';
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md
+5 -5
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
5 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
6 import {useEffect} from 'react';
7
8 function Component({foo}) {
@@ -24,7 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
27 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
27 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
28 import { useEffect } from "react";
29
30 function Component(t0) {
@@ -47,9 +47,9 @@ export const FIXTURE_ENTRYPOINT = {
47 ## Logs
48
49 ```
50 -{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":101},"end":{"line":11,"column":1,"index":222},"filename":"mutate-after-useeffect.ts"},"detail":{"reason":"This mutates a variable that React considers immutable","description":null,"loc":{"start":{"line":9,"column":2,"index":194},"end":{"line":9,"column":5,"index":197},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"suggestions":null,"severity":"InvalidReact"}}
51 -{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":149},"end":{"line":8,"column":4,"index":190},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":171},"end":{"line":7,"column":7,"index":174},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":171},"end":{"line":7,"column":7,"index":174},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":180},"end":{"line":7,"column":16,"index":183},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
52 -{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":101},"end":{"line":11,"column":1,"index":222},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
50 +{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":133},"end":{"line":11,"column":1,"index":254},"filename":"mutate-after-useeffect.ts"},"detail":{"reason":"Updating a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the mutation before calling useEffect()","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":9,"column":2,"index":226},"end":{"line":9,"column":5,"index":229},"filename":"mutate-after-useeffect.ts","identifierName":"arr"}}}
51 +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":181},"end":{"line":8,"column":4,"index":222},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":203},"end":{"line":7,"column":7,"index":206},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":203},"end":{"line":7,"column":7,"index":206},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":212},"end":{"line":7,"column":16,"index":215},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
52 +{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":133},"end":{"line":11,"column":1,"index":254},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
53 ```
54
55 ### Eval output
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly
1 +// @inferEffectDependencies @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
2 import {useEffect} from 'react';
3
4 function Component({foo}) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.expect.md
+12 -27
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {identity, mutate} from 'shared-runtime';
7
8 function Component(props) {
@@ -23,38 +24,22 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
26 -import { c as _c } from "react/compiler-runtime";
27 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
28 import { identity, mutate } from "shared-runtime";
29
30 function Component(props) {
30 - const $ = _c(5);
31 - let t0;
32 - if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
33 - t0 = {};
34 - $[0] = t0;
31 + const $ = _c(2);
32 + let context;
33 + if ($[0] !== props.value) {
34 + const key = {};
35 + context = { [key]: identity([props.value]) };
36 +
37 + mutate(key);
38 + $[0] = props.value;
39 + $[1] = context;
40 } else {
36 - t0 = $[0];
41 + context = $[1];
42 }
38 - const key = t0;
39 - let t1;
40 - if ($[1] !== props.value) {
41 - t1 = identity([props.value]);
42 - $[1] = props.value;
43 - $[2] = t1;
44 - } else {
45 - t1 = $[2];
46 - }
47 - let t2;
48 - if ($[3] !== t1) {
49 - t2 = { [key]: t1 };
50 - $[3] = t1;
51 - $[4] = t2;
52 - } else {
53 - t2 = $[4];
54 - }
55 - const context = t2;
56 -
57 - mutate(key);
43 return context;
44 }
45
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-key-object-mutated-later.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {identity, mutate} from 'shared-runtime';
3
4 function Component(props) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.expect.md
+15 -3
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {identity, mutate, mutateAndReturn} from 'shared-runtime';
7
8 function Component(props) {
@@ -23,15 +24,26 @@ export const FIXTURE_ENTRYPOINT = {
24 ## Code
25
26 ```javascript
26 -import { c as _c } from "react/compiler-runtime";
27 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
28 import { identity, mutate, mutateAndReturn } from "shared-runtime";
29
30 function Component(props) {
30 - const $ = _c(2);
31 + const $ = _c(4);
32 let context;
33 if ($[0] !== props.value) {
34 const key = { a: "key" };
34 - context = { [key.a]: identity([props.value]) };
35 +
36 + const t0 = key.a;
37 + const t1 = identity([props.value]);
38 + let t2;
39 + if ($[2] !== t1) {
40 + t2 = { [t0]: t1 };
41 + $[2] = t1;
42 + $[3] = t2;
43 + } else {
44 + t2 = $[3];
45 + }
46 + context = t2;
47
48 mutate(key);
49 $[0] = props.value;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/object-expression-computed-member.js
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {identity, mutate, mutateAndReturn} from 'shared-runtime';
3
4 function Component(props) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.expect.md
+16 -10
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @inferEffectDependencies
5 +// @inferEffectDependencies @enableNewMutationAliasingModel
6 import {useEffect, useState} from 'react';
7 import {print} from 'shared-runtime';
8
@@ -26,7 +26,7 @@ function ReactiveRefInEffect(props) {
26 ## Code
27
28 ```javascript
29 -import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies
29 +import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies @enableNewMutationAliasingModel
30 import { useEffect, useState } from "react";
31 import { print } from "shared-runtime";
32
@@ -34,22 +34,28 @@ import { print } from "shared-runtime";
34 * setState types are not enough to determine to omit from deps. Must also take reactivity into account.
35 */
36 function ReactiveRefInEffect(props) {
37 - const $ = _c(2);
37 + const $ = _c(4);
38 const [, setState1] = useRef("initial value");
39 const [, setState2] = useRef("initial value");
40 let setState;
41 - if (props.foo) {
42 - setState = setState1;
41 + if ($[0] !== props.foo) {
42 + if (props.foo) {
43 + setState = setState1;
44 + } else {
45 + setState = setState2;
46 + }
47 + $[0] = props.foo;
48 + $[1] = setState;
49 } else {
44 - setState = setState2;
50 + setState = $[1];
51 }
52 let t0;
47 - if ($[0] !== setState) {
53 + if ($[2] !== setState) {
54 t0 = () => print(setState);
49 - $[0] = setState;
50 - $[1] = t0;
55 + $[2] = setState;
56 + $[3] = t0;
57 } else {
52 - t0 = $[1];
58 + t0 = $[3];
59 }
60 useEffect(t0, [setState]);
61 }
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/reactive-setState.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @inferEffectDependencies
1 +// @inferEffectDependencies @enableNewMutationAliasingModel
2 import {useEffect, useState} from 'react';
3 import {print} from 'shared-runtime';
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md
+6 -6
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
5 +// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
6 import {print} from 'shared-runtime';
7 import useEffectWrapper from 'useEffectWrapper';
8
@@ -27,7 +27,7 @@ export const FIXTURE_ENTRYPOINT = {
27 ## Code
28
29 ```javascript
30 -// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
30 +// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
31 import { print } from "shared-runtime";
32 import useEffectWrapper from "useEffectWrapper";
33
@@ -52,10 +52,10 @@ export const FIXTURE_ENTRYPOINT = {
52 ## Logs
53
54 ```
55 -{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":163},"end":{"line":13,"column":1,"index":357},"filename":"retry-no-emit.ts"},"detail":{"reason":"This mutates a variable that React considers immutable","description":null,"loc":{"start":{"line":11,"column":2,"index":320},"end":{"line":11,"column":6,"index":324},"filename":"retry-no-emit.ts","identifierName":"arr2"},"suggestions":null,"severity":"InvalidReact"}}
56 -{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":7,"column":2,"index":216},"end":{"line":7,"column":36,"index":250},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":7,"column":31,"index":245},"end":{"line":7,"column":34,"index":248},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
57 -{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":10,"column":2,"index":274},"end":{"line":10,"column":44,"index":316},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":10,"column":25,"index":297},"end":{"line":10,"column":29,"index":301},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":25,"index":297},"end":{"line":10,"column":29,"index":301},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":35,"index":307},"end":{"line":10,"column":42,"index":314},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
58 -{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":163},"end":{"line":13,"column":1,"index":357},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
55 +{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":195},"end":{"line":13,"column":1,"index":389},"filename":"retry-no-emit.ts"},"detail":{"reason":"This mutates a variable that React considers immutable","description":null,"severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":11,"column":2,"index":352},"end":{"line":11,"column":6,"index":356},"filename":"retry-no-emit.ts","identifierName":"arr2"}}}
56 +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":7,"column":2,"index":248},"end":{"line":7,"column":36,"index":282},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":7,"column":31,"index":277},"end":{"line":7,"column":34,"index":280},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
57 +{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":10,"column":2,"index":306},"end":{"line":10,"column":44,"index":348},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":10,"column":25,"index":329},"end":{"line":10,"column":29,"index":333},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":25,"index":329},"end":{"line":10,"column":29,"index":333},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":10,"column":35,"index":339},"end":{"line":10,"column":42,"index":346},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
58 +{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":195},"end":{"line":13,"column":1,"index":389},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
59 ```
60
61 ### Eval output
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
1 +// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
2 import {print} from 'shared-runtime';
3 import useEffectWrapper from 'useEffectWrapper';
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.expect.md
+47 -34
@@ -2,7 +2,7 @@
2 ## Input
3
4 ```javascript
5 -// @enableFire
5 +// @enableFire @enableNewMutationAliasingModel
6 import {fire} from 'react';
7
8 function Component({bar, baz}) {
@@ -26,51 +26,64 @@ function Component({bar, baz}) {
26 ## Code
27
28 ```javascript
29 -import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire
29 +import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @enableNewMutationAliasingModel
30 import { fire } from "react";
31
32 function Component(t0) {
33 - const $ = _c(9);
34 - const { bar, baz } = t0;
35 - let t1;
36 - if ($[0] !== bar) {
37 - t1 = () => {
38 - console.log(bar);
39 - };
40 - $[0] = bar;
41 - $[1] = t1;
33 + const $ = _c(13);
34 + let bar;
35 + let baz;
36 + let foo;
37 + if ($[0] !== t0) {
38 + ({ bar, baz } = t0);
39 + let t1;
40 + if ($[4] !== bar) {
41 + t1 = () => {
42 + console.log(bar);
43 + };
44 + $[4] = bar;
45 + $[5] = t1;
46 + } else {
47 + t1 = $[5];
48 + }
49 + foo = t1;
50 + $[0] = t0;
51 + $[1] = bar;
52 + $[2] = baz;
53 + $[3] = foo;
54 } else {
43 - t1 = $[1];
55 + bar = $[1];
56 + baz = $[2];
57 + foo = $[3];
58 }
45 - const foo = t1;
46 - const t2 = useFire(foo);
47 - const t3 = useFire(baz);
48 - let t4;
49 - if ($[2] !== bar || $[3] !== t2 || $[4] !== t3) {
50 - t4 = () => {
59 + const t1 = useFire(foo);
60 + const t2 = useFire(baz);
61 + let t3;
62 + if ($[6] !== bar || $[7] !== t1 || $[8] !== t2) {
63 + t3 = () => {
64 + t1(bar);
65 t2(bar);
52 - t3(bar);
66 };
54 - $[2] = bar;
55 - $[3] = t2;
56 - $[4] = t3;
57 - $[5] = t4;
67 + $[6] = bar;
68 + $[7] = t1;
69 + $[8] = t2;
70 + $[9] = t3;
71 } else {
59 - t4 = $[5];
72 + t3 = $[9];
73 }
61 - useEffect(t4);
62 - let t5;
63 - if ($[6] !== bar || $[7] !== t2) {
64 - t5 = () => {
65 - t2(bar);
74 + useEffect(t3);
75 + let t4;
76 + if ($[10] !== bar || $[11] !== t1) {
77 + t4 = () => {
78 + t1(bar);
79 };
67 - $[6] = bar;
68 - $[7] = t2;
69 - $[8] = t5;
80 + $[10] = bar;
81 + $[11] = t1;
82 + $[12] = t4;
83 } else {
71 - t5 = $[8];
84 + t4 = $[12];
85 }
73 - useEffect(t5);
86 + useEffect(t4);
87 return null;
88 }
89
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/shared-hook-calls.js
+1 -1
@@ -1,4 +1,4 @@
1 -// @enableFire
1 +// @enableFire @enableNewMutationAliasingModel
2 import {fire} from 'react';
3
4 function Component({bar, baz}) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.expect.md
+31 -23
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {useCallback} from 'react';
7 import {Stringify} from 'shared-runtime';
8
@@ -35,44 +36,51 @@ export const FIXTURE_ENTRYPOINT = {
36 ## Code
37
38 ```javascript
38 -import { c as _c } from "react/compiler-runtime";
39 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
40 import { useCallback } from "react";
41 import { Stringify } from "shared-runtime";
42
43 function Foo(t0) {
43 - const $ = _c(8);
44 + const $ = _c(10);
45 const { arr1, arr2, foo } = t0;
45 - let getVal1;
46 let t1;
47 - if ($[0] !== arr1 || $[1] !== arr2 || $[2] !== foo) {
48 - const x = [arr1];
49 -
47 + if ($[0] !== arr1) {
48 + t1 = [arr1];
49 + $[0] = arr1;
50 + $[1] = t1;
51 + } else {
52 + t1 = $[1];
53 + }
54 + const x = t1;
55 + let getVal1;
56 + let t2;
57 + if ($[2] !== arr2 || $[3] !== foo || $[4] !== x) {
58 let y = [];
59
60 getVal1 = _temp;
61
54 - t1 = () => [y];
62 + t2 = () => [y];
63 foo ? (y = x.concat(arr2)) : y;
56 - $[0] = arr1;
57 - $[1] = arr2;
58 - $[2] = foo;
59 - $[3] = getVal1;
60 - $[4] = t1;
64 + $[2] = arr2;
65 + $[3] = foo;
66 + $[4] = x;
67 + $[5] = getVal1;
68 + $[6] = t2;
69 } else {
62 - getVal1 = $[3];
63 - t1 = $[4];
70 + getVal1 = $[5];
71 + t2 = $[6];
72 }
65 - const getVal2 = t1;
66 - let t2;
67 - if ($[5] !== getVal1 || $[6] !== getVal2) {
68 - t2 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
69 - $[5] = getVal1;
70 - $[6] = getVal2;
71 - $[7] = t2;
73 + const getVal2 = t2;
74 + let t3;
75 + if ($[7] !== getVal1 || $[8] !== getVal2) {
76 + t3 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
77 + $[7] = getVal1;
78 + $[8] = getVal2;
79 + $[9] = t3;
80 } else {
73 - t2 = $[7];
81 + t3 = $[9];
82 }
75 - return t2;
83 + return t3;
84 }
85 function _temp() {
86 return { x: 2 };
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-deplist-controlflow.tsx
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {useCallback} from 'react';
3 import {Stringify} from 'shared-runtime';
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.expect.md
+25 -17
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {useCallback} from 'react';
7 import {Stringify} from 'shared-runtime';
8
@@ -30,37 +31,44 @@ export const FIXTURE_ENTRYPOINT = {
31 ## Code
32
33 ```javascript
33 -import { c as _c } from "react/compiler-runtime";
34 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
35 import { useCallback } from "react";
36 import { Stringify } from "shared-runtime";
37
38 // We currently produce invalid output (incorrect scoping for `y` declaration)
39 function useFoo(arr1, arr2) {
39 - const $ = _c(5);
40 + const $ = _c(7);
41 let t0;
41 - if ($[0] !== arr1 || $[1] !== arr2) {
42 - const x = [arr1];
43 -
44 - let y;
45 - t0 = () => ({ y });
46 -
47 - (y = x.concat(arr2)), y;
42 + if ($[0] !== arr1) {
43 + t0 = [arr1];
44 $[0] = arr1;
49 - $[1] = arr2;
50 - $[2] = t0;
45 + $[1] = t0;
46 } else {
52 - t0 = $[2];
47 + t0 = $[1];
48 }
54 - const getVal = t0;
49 + const x = t0;
50 let t1;
56 - if ($[3] !== getVal) {
57 - t1 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
58 - $[3] = getVal;
51 + if ($[2] !== arr2 || $[3] !== x) {
52 + let y;
53 + t1 = () => ({ y });
54 +
55 + (y = x.concat(arr2)), y;
56 + $[2] = arr2;
57 + $[3] = x;
58 $[4] = t1;
59 } else {
60 t1 = $[4];
61 }
63 - return t1;
62 + const getVal = t1;
63 + let t2;
64 + if ($[5] !== getVal) {
65 + t2 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
66 + $[5] = getVal;
67 + $[6] = t2;
68 + } else {
69 + t2 = $[6];
70 + }
71 + return t2;
72 }
73
74 export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useCallback-reordering-depslist-assignment.tsx
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {useCallback} from 'react';
3 import {Stringify} from 'shared-runtime';
4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.expect.md
+25 -17
@@ -2,6 +2,7 @@
2 ## Input
3
4 ```javascript
5 +// @enableNewMutationAliasingModel
6 import {useMemo} from 'react';
7
8 function useFoo(arr1, arr2) {
@@ -26,33 +27,40 @@ export const FIXTURE_ENTRYPOINT = {
27 ## Code
28
29 ```javascript
29 -import { c as _c } from "react/compiler-runtime";
30 +import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
31 import { useMemo } from "react";
32
33 function useFoo(arr1, arr2) {
33 - const $ = _c(5);
34 + const $ = _c(7);
35 + let t0;
36 + if ($[0] !== arr1) {
37 + t0 = [arr1];
38 + $[0] = arr1;
39 + $[1] = t0;
40 + } else {
41 + t0 = $[1];
42 + }
43 + const x = t0;
44 let y;
35 - if ($[0] !== arr1 || $[1] !== arr2) {
36 - const x = [arr1];
37 -
45 + if ($[2] !== arr2 || $[3] !== x) {
46 (y = x.concat(arr2)), y;
39 - $[0] = arr1;
40 - $[1] = arr2;
41 - $[2] = y;
47 + $[2] = arr2;
48 + $[3] = x;
49 + $[4] = y;
50 } else {
43 - y = $[2];
51 + y = $[4];
52 }
45 - let t0;
53 let t1;
47 - if ($[3] !== y) {
48 - t1 = { y };
49 - $[3] = y;
50 - $[4] = t1;
54 + let t2;
55 + if ($[5] !== y) {
56 + t2 = { y };
57 + $[5] = y;
58 + $[6] = t2;
59 } else {
52 - t1 = $[4];
60 + t2 = $[6];
61 }
54 - t0 = t1;
55 - return t0;
62 + t1 = t2;
63 + return t1;
64 }
65
66 export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/useMemo-reordering-depslist-assignment.ts
+1
@@ -1,3 +1,4 @@
1 +// @enableNewMutationAliasingModel
2 import {useMemo} from 'react';
3
4 function useFoo(arr1, arr2) {