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] Delete propagateScopeDeps (non-hir) (#31199)

Browse Source 
`enablePropagateScopeDepsHIR` is now used extensively in Meta. This has
been tested for over two weeks in our e2e tests and production.

The rest of this stack deletes `LoweredFunction.dependencies`, which the
non-hir version of `PropagateScopeDeps` depends on. To avoid a more
forked HIR (non-hir with dependencies and hir with no dependencies),
let's go ahead and clean up the non-hir version of
PropagateScopeDepsHIR.

Note that all fixture changes in this PR were previously reviewed when
they were copied to `propagate-scope-deps-hir-fork`. Will clean up /
merge these duplicate fixtures in a later PR

'
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/31199).
* #31202
* #31203
* #31201
* #31200
* #31346
* __->__ #31199
This commit is contained in:
mofeiZ 2024-11-05 19:22:04 -05:00 committed by GitHub
parent f2f002c7c1
commit fd018af617
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
61 changed files with 566 additions and 1868 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
View File

@ -57,7 +57,6 @@ import {
mergeReactiveScopesThatInvalidateTogether,
promoteUsedTemporaries,
propagateEarlyReturns,
propagateScopeDependencies,
pruneHoistedContexts,
pruneNonEscapingScopes,
pruneNonReactiveDependencies,
@ -348,14 +347,12 @@ function* runWithEnvironment(
});
assertTerminalSuccessorsExist(hir);
assertTerminalPredsExist(hir);
if (env.config.enablePropagateDepsInHIR) {
propagateScopeDependenciesHIR(hir);
yield log({
kind: 'hir',
name: 'PropagateScopeDependenciesHIR',
value: hir,
});
}
propagateScopeDependenciesHIR(hir);
yield log({
kind: 'hir',
name: 'PropagateScopeDependenciesHIR',
value: hir,
});
if (env.config.inlineJsxTransform) {
inlineJsxTransform(hir, env.config.inlineJsxTransform);
@ -383,15 +380,6 @@ function* runWithEnvironment(
});
assertScopeInstructionsWithinScopes(reactiveFunction);
if (!env.config.enablePropagateDepsInHIR) {
propagateScopeDependencies(reactiveFunction);
yield log({
kind: 'reactive',
name: 'PropagateScopeDependencies',
value: reactiveFunction,
});
}
pruneNonEscapingScopes(reactiveFunction);
yield log({
kind: 'reactive',

10
compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
View File

@ -231,16 +231,6 @@ const EnvironmentConfigSchema = z.object({
*/
enableUseTypeAnnotations: z.boolean().default(false),
enablePropagateDepsInHIR: z.boolean().default(false),
/**
* Enables inference of optional dependency chains. Without this flag
* a property chain such as `props?.items?.foo` will infer as a dep on
* just `props`. With this flag enabled, we'll infer that full path as
* the dependency.
*/
enableOptionalDependencies: z.boolean().default(true),
/**
* Enables inlining ReactElement object literals in place of JSX
* An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime

1324
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PropagateScopeDependencies.ts
View File

File diff suppressed because it is too large Load Diff

1
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/index.ts
View File

@ -17,7 +17,6 @@ export {mergeReactiveScopesThatInvalidateTogether} from './MergeReactiveScopesTh
export {printReactiveFunction} from './PrintReactiveFunction';
export {promoteUsedTemporaries} from './PromoteUsedTemporaries';
export {propagateEarlyReturns} from './PropagateEarlyReturns';
export {propagateScopeDependencies} from './PropagateScopeDependencies';
export {pruneAllReactiveScopes} from './PruneAllReactiveScopes';
export {pruneHoistedContexts} from './PruneHoistedContexts';
export {pruneNonEscapingScopes} from './PruneNonEscapingScopes';

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-hoisting-functionexpr.expect.md
View File

@ -58,7 +58,7 @@ function Component(t0) {
const $ = _c(5);
const { obj, isObjNull } = t0;
let t1;
if ($[0] !== isObjNull || $[1] !== obj.prop) {
if ($[0] !== isObjNull || $[1] !== obj) {
t1 = () => {
if (!isObjNull) {
return obj.prop;
@ -67,7 +67,7 @@ function Component(t0) {
}
};
$[0] = isObjNull;
$[1] = obj.prop;
$[1] = obj;
$[2] = t1;
} else {
t1 = $[2];

16
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-try-catch-maybe-null-dependency.expect.md
View File

@ -38,16 +38,24 @@ import { identity } from "shared-runtime";
* try-catch block, as that might throw
*/
function useFoo(maybeNullObject) {
const $ = _c(2);
const $ = _c(4);
let y;
if ($[0] !== maybeNullObject.value.inner) {
if ($[0] !== maybeNullObject) {
y = [];
try {
y.push(identity(maybeNullObject.value.inner));
let t0;
if ($[2] !== maybeNullObject.value.inner) {
t0 = identity(maybeNullObject.value.inner);
$[2] = maybeNullObject.value.inner;
$[3] = t0;
} else {
t0 = $[3];
}
y.push(t0);
} catch {
y.push("null");
}
$[0] = maybeNullObject.value.inner;
$[0] = maybeNullObject;
$[1] = y;
} else {
y = $[1];

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md
View File

@ -37,7 +37,7 @@ function component(a, b) {
}
const y = t0;
let z;
if ($[2] !== a || $[3] !== y.b) {
if ($[2] !== a || $[3] !== y) {
z = { a };
const x = function () {
z.a = 2;
@ -45,7 +45,7 @@ function component(a, b) {
x();
$[2] = a;
$[3] = y.b;
$[3] = y;
$[4] = z;
} else {
z = $[4];

18
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md
View File

@ -33,9 +33,14 @@ import { c as _c } from "react/compiler-runtime"; /**
* props.b *does* influence `a`
*/
function Component(props) {
const $ = _c(2);
const $ = _c(5);
let a;
if ($[0] !== props) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.c ||
$[3] !== props.d
) {
a = [];
a.push(props.a);
bb0: {
@ -47,10 +52,13 @@ function Component(props) {
}
a.push(props.d);
$[0] = props;
$[1] = a;
$[0] = props.a;
$[1] = props.b;
$[2] = props.c;
$[3] = props.d;
$[4] = a;
} else {
a = $[1];
a = $[4];
}
return a;
}

78
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md
View File

@ -70,10 +70,10 @@ import { c as _c } from "react/compiler-runtime"; /**
* props.b does *not* influence `a`
*/
function ComponentA(props) {
const $ = _c(3);
const $ = _c(5);
let a_DEBUG;
let t0;
if ($[0] !== props) {
if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.d) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
a_DEBUG = [];
@ -85,12 +85,14 @@ function ComponentA(props) {
a_DEBUG.push(props.d);
}
$[0] = props;
$[1] = a_DEBUG;
$[2] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.d;
$[3] = a_DEBUG;
$[4] = t0;
} else {
a_DEBUG = $[1];
t0 = $[2];
a_DEBUG = $[3];
t0 = $[4];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;
@ -102,9 +104,14 @@ function ComponentA(props) {
* props.b *does* influence `a`
*/
function ComponentB(props) {
const $ = _c(2);
const $ = _c(5);
let a;
if ($[0] !== props) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.c ||
$[3] !== props.d
) {
a = [];
a.push(props.a);
if (props.b) {
@ -112,10 +119,13 @@ function ComponentB(props) {
}
a.push(props.d);
$[0] = props;
$[1] = a;
$[0] = props.a;
$[1] = props.b;
$[2] = props.c;
$[3] = props.d;
$[4] = a;
} else {
a = $[1];
a = $[4];
}
return a;
}
@ -124,10 +134,15 @@ function ComponentB(props) {
* props.b *does* influence `a`, but only in a way that is never observable
*/
function ComponentC(props) {
const $ = _c(3);
const $ = _c(6);
let a;
let t0;
if ($[0] !== props) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.c ||
$[3] !== props.d
) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
a = [];
@ -140,12 +155,15 @@ function ComponentC(props) {
a.push(props.d);
}
$[0] = props;
$[1] = a;
$[2] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.c;
$[3] = props.d;
$[4] = a;
$[5] = t0;
} else {
a = $[1];
t0 = $[2];
a = $[4];
t0 = $[5];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;
@ -157,10 +175,15 @@ function ComponentC(props) {
* props.b *does* influence `a`
*/
function ComponentD(props) {
const $ = _c(3);
const $ = _c(6);
let a;
let t0;
if ($[0] !== props) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.c ||
$[3] !== props.d
) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
a = [];
@ -173,12 +196,15 @@ function ComponentD(props) {
a.push(props.d);
}
$[0] = props;
$[1] = a;
$[2] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.c;
$[3] = props.d;
$[4] = a;
$[5] = t0;
} else {
a = $[1];
t0 = $[2];
a = $[4];
t0 = $[5];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;

24
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md
View File

@ -36,9 +36,9 @@ function mayMutate() {}
```javascript
import { c as _c } from "react/compiler-runtime";
function ComponentA(props) {
const $ = _c(2);
const $ = _c(4);
let t0;
if ($[0] !== props) {
if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
const a = [];
const b = [];
if (b) {
@ -49,18 +49,20 @@ function ComponentA(props) {
}
t0 = <Foo a={a} b={b} />;
$[0] = props;
$[1] = t0;
$[0] = props.p0;
$[1] = props.p1;
$[2] = props.p2;
$[3] = t0;
} else {
t0 = $[1];
t0 = $[3];
}
return t0;
}
function ComponentB(props) {
const $ = _c(2);
const $ = _c(4);
let t0;
if ($[0] !== props) {
if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) {
const a = [];
const b = [];
if (mayMutate(b)) {
@ -71,10 +73,12 @@ function ComponentB(props) {
}
t0 = <Foo a={a} b={b} />;
$[0] = props;
$[1] = t0;
$[0] = props.p0;
$[1] = props.p1;
$[2] = props.p2;
$[3] = t0;
} else {
t0 = $[1];
t0 = $[3];
}
return t0;
}

26
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-nested-early-return-within-reactive-scope.expect.md
View File

@ -31,9 +31,9 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(5);
const $ = _c(7);
let t0;
if ($[0] !== props) {
if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
const x = [];
@ -41,12 +41,12 @@ function Component(props) {
x.push(props.a);
if (props.b) {
let t1;
if ($[2] !== props.b) {
if ($[4] !== props.b) {
t1 = [props.b];
$[2] = props.b;
$[3] = t1;
$[4] = props.b;
$[5] = t1;
} else {
t1 = $[3];
t1 = $[5];
}
const y = t1;
x.push(y);
@ -58,20 +58,22 @@ function Component(props) {
break bb0;
} else {
let t1;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
t1 = foo();
$[4] = t1;
$[6] = t1;
} else {
t1 = $[4];
t1 = $[6];
}
t0 = t1;
break bb0;
}
}
$[0] = props;
$[1] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.cond;
$[3] = t0;
} else {
t0 = $[1];
t0 = $[3];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;

20
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/early-return-within-reactive-scope.expect.md
View File

@ -45,9 +45,9 @@ import { c as _c } from "react/compiler-runtime";
import { makeArray } from "shared-runtime";
function Component(props) {
const $ = _c(4);
const $ = _c(6);
let t0;
if ($[0] !== props) {
if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
const x = [];
@ -57,21 +57,23 @@ function Component(props) {
break bb0;
} else {
let t1;
if ($[2] !== props.b) {
if ($[4] !== props.b) {
t1 = makeArray(props.b);
$[2] = props.b;
$[3] = t1;
$[4] = props.b;
$[5] = t1;
} else {
t1 = $[3];
t1 = $[5];
}
t0 = t1;
break bb0;
}
}
$[0] = props;
$[1] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.cond;
$[3] = t0;
} else {
t0 = $[1];
t0 = $[3];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;

50
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.expect.md Normal file
View File

@ -0,0 +1,50 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import {ValidateMemoization} from 'shared-runtime';
function Component(props) {
const data = useMemo(() => {
const x = [];
x.push(props?.items);
if (props.cond) {
x.push(props?.items);
}
return x;
}, [props?.items, props.cond]);
return (
<ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
);
}
```
## Error
```
2 | import {ValidateMemoization} from 'shared-runtime';
3 | function Component(props) {
> 4 | const data = useMemo(() => {
| ^^^^^^^
> 5 | const x = [];
| ^^^^^^^^^^^^^^^^^
> 6 | x.push(props?.items);
| ^^^^^^^^^^^^^^^^^
> 7 | if (props.cond) {
| ^^^^^^^^^^^^^^^^^
> 8 | x.push(props?.items);
| ^^^^^^^^^^^^^^^^^
> 9 | }
| ^^^^^^^^^^^^^^^^^
> 10 | return x;
| ^^^^^^^^^^^^^^^^^
> 11 | }, [props?.items, props.cond]);
| ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (4:11)
12 | return (
13 | <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
14 | );
```

0
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-conditional-optional.js → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional-optional.js
View File

50
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.expect.md Normal file
View File

@ -0,0 +1,50 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import {ValidateMemoization} from 'shared-runtime';
function Component(props) {
const data = useMemo(() => {
const x = [];
x.push(props?.items);
if (props.cond) {
x.push(props.items);
}
return x;
}, [props?.items, props.cond]);
return (
<ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
);
}
```
## Error
```
2 | import {ValidateMemoization} from 'shared-runtime';
3 | function Component(props) {
> 4 | const data = useMemo(() => {
| ^^^^^^^
> 5 | const x = [];
| ^^^^^^^^^^^^^^^^^
> 6 | x.push(props?.items);
| ^^^^^^^^^^^^^^^^^
> 7 | if (props.cond) {
| ^^^^^^^^^^^^^^^^^
> 8 | x.push(props.items);
| ^^^^^^^^^^^^^^^^^
> 9 | }
| ^^^^^^^^^^^^^^^^^
> 10 | return x;
| ^^^^^^^^^^^^^^^^^
> 11 | }, [props?.items, props.cond]);
| ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (4:11)
12 | return (
13 | <ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
14 | );
```

0
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-conditional.js → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hoist-optional-member-expression-with-conditional.js
View File

2
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.expect.md
View File

@ -25,7 +25,7 @@ export const FIXTURE_ENTRYPONT = {
1 | function useFoo(props: {value: {x: string; y: string} | null}) {
2 | const value = props.value;
> 3 | return createArray(value?.x, value?.y)?.join(', ');
| ^^^^^^^^ Todo: Unexpected terminal kind `optional` for optional test block (3:3)
| ^^^^^^^^ Todo: Unexpected terminal kind `optional` for optional fallthrough block (3:3)
4 | }
5 |
6 | function createArray<T>(...args: Array<T>): Array<T> {

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.expect.md
View File

@ -2,7 +2,7 @@
## Input
```javascript
// @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
// @enableTreatFunctionDepsAsConditional
import {Stringify} from 'shared-runtime';
function Component({props}) {
@ -20,7 +20,7 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional
import { Stringify } from "shared-runtime";
function Component(t0) {

2
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr-conditional-access-2.tsx
View File

@ -1,4 +1,4 @@
// @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
// @enableTreatFunctionDepsAsConditional
import {Stringify} from 'shared-runtime';
function Component({props}) {

8
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr–conditional-access.expect.md
View File

@ -2,7 +2,7 @@
## Input
```javascript
// @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
// @enableTreatFunctionDepsAsConditional
function Component(props) {
function getLength() {
return props.bar.length;
@ -21,15 +21,15 @@ export const FIXTURE_ENTRYPOINT = {
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
import { c as _c } from "react/compiler-runtime"; // @enableTreatFunctionDepsAsConditional
function Component(props) {
const $ = _c(5);
let t0;
if ($[0] !== props) {
if ($[0] !== props.bar) {
t0 = function getLength() {
return props.bar.length;
};
$[0] = props;
$[0] = props.bar;
$[1] = t0;
} else {
t0 = $[1];

2
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/functionexpr–conditional-access.js
View File

@ -1,4 +1,4 @@
// @enableTreatFunctionDepsAsConditional @enablePropagateDepsInHIR:false
// @enableTreatFunctionDepsAsConditional
function Component(props) {
function getLength() {
return props.bar.length;

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/iife-return-modified-later-phi.expect.md
View File

@ -26,9 +26,9 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
const $ = _c(3);
let items;
if ($[0] !== props) {
if ($[0] !== props.a || $[1] !== props.cond) {
let t0;
if (props.cond) {
t0 = [];
@ -38,10 +38,11 @@ function Component(props) {
items = t0;
items?.push(props.a);
$[0] = props;
$[1] = items;
$[0] = props.a;
$[1] = props.cond;
$[2] = items;
} else {
items = $[1];
items = $[2];
}
return items;
}

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-sequential-optional-chain-nonnull.expect.md
View File

@ -33,11 +33,11 @@ function useFoo(t0) {
const $ = _c(2);
const { a } = t0;
let x;
if ($[0] !== a.b.c.d) {
if ($[0] !== a.b.c.d.e) {
x = [];
x.push(a?.b.c?.d.e);
x.push(a.b?.c.d?.e);
$[0] = a.b.c.d;
$[0] = a.b.c.d.e;
$[1] = x;
} else {
x = $[1];

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-optional-chains.expect.md
View File

@ -120,29 +120,29 @@ function useFoo(t0) {
}
const x = t1;
let t2;
if ($[2] !== prop2?.inner) {
if ($[2] !== prop2?.inner.value) {
t2 = identity(prop2?.inner.value)?.toString();
$[2] = prop2?.inner;
$[2] = prop2?.inner.value;
$[3] = t2;
} else {
t2 = $[3];
}
const y = t2;
let t3;
if ($[4] !== prop3 || $[5] !== prop4) {
if ($[4] !== prop3 || $[5] !== prop4?.inner) {
t3 = prop3?.fn(prop4?.inner.value).toString();
$[4] = prop3;
$[5] = prop4;
$[5] = prop4?.inner;
$[6] = t3;
} else {
t3 = $[6];
}
const z = t3;
let t4;
if ($[7] !== prop5 || $[8] !== prop6) {
if ($[7] !== prop5 || $[8] !== prop6?.inner) {
t4 = prop5?.fn(prop6?.inner.value)?.toString();
$[7] = prop5;
$[8] = prop6;
$[8] = prop6?.inner;
$[9] = t4;
} else {
t4 = $[9];

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-mutated-in-consequent-alternate-both-return.expect.md
View File

@ -29,9 +29,9 @@ import { c as _c } from "react/compiler-runtime";
import { makeObject_Primitives } from "shared-runtime";
function Component(props) {
const $ = _c(2);
const $ = _c(3);
let t0;
if ($[0] !== props) {
if ($[0] !== props.cond || $[1] !== props.value) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
const object = makeObject_Primitives();
@ -45,10 +45,11 @@ function Component(props) {
break bb0;
}
}
$[0] = props;
$[1] = t0;
$[0] = props.cond;
$[1] = props.value;
$[2] = t0;
} else {
t0 = $[1];
t0 = $[2];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;

74
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-conditional-optional.expect.md
View File

@ -1,74 +0,0 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import {ValidateMemoization} from 'shared-runtime';
function Component(props) {
const data = useMemo(() => {
const x = [];
x.push(props?.items);
if (props.cond) {
x.push(props?.items);
}
return x;
}, [props?.items, props.cond]);
return (
<ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
);
}
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import { ValidateMemoization } from "shared-runtime";
function Component(props) {
const $ = _c(9);
props?.items;
let t0;
let x;
if ($[0] !== props?.items || $[1] !== props.cond) {
x = [];
x.push(props?.items);
if (props.cond) {
x.push(props?.items);
}
$[0] = props?.items;
$[1] = props.cond;
$[2] = x;
} else {
x = $[2];
}
t0 = x;
const data = t0;
const t1 = props?.items;
let t2;
if ($[3] !== props.cond || $[4] !== t1) {
t2 = [t1, props.cond];
$[3] = props.cond;
$[4] = t1;
$[5] = t2;
} else {
t2 = $[5];
}
let t3;
if ($[6] !== data || $[7] !== t2) {
t3 = <ValidateMemoization inputs={t2} output={data} />;
$[6] = data;
$[7] = t2;
$[8] = t3;
} else {
t3 = $[8];
}
return t3;
}
```
### Eval output
(kind: exception) Fixture not implemented

74
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-member-expression-with-conditional.expect.md
View File

@ -1,74 +0,0 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import {ValidateMemoization} from 'shared-runtime';
function Component(props) {
const data = useMemo(() => {
const x = [];
x.push(props?.items);
if (props.cond) {
x.push(props.items);
}
return x;
}, [props?.items, props.cond]);
return (
<ValidateMemoization inputs={[props?.items, props.cond]} output={data} />
);
}
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees @enableOptionalDependencies
import { ValidateMemoization } from "shared-runtime";
function Component(props) {
const $ = _c(9);
props?.items;
let t0;
let x;
if ($[0] !== props?.items || $[1] !== props.cond) {
x = [];
x.push(props?.items);
if (props.cond) {
x.push(props.items);
}
$[0] = props?.items;
$[1] = props.cond;
$[2] = x;
} else {
x = $[2];
}
t0 = x;
const data = t0;
const t1 = props?.items;
let t2;
if ($[3] !== props.cond || $[4] !== t1) {
t2 = [t1, props.cond];
$[3] = props.cond;
$[4] = t1;
$[5] = t2;
} else {
t2 = $[5];
}
let t3;
if ($[6] !== data || $[7] !== t2) {
t3 = <ValidateMemoization inputs={t2} output={data} />;
$[6] = data;
$[7] = t2;
$[8] = t3;
} else {
t3 = $[8];
}
return t3;
}
```
### Eval output
(kind: exception) Fixture not implemented

22
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md
View File

@ -30,10 +30,10 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(4);
const $ = _c(6);
let t0;
let y;
if ($[0] !== props) {
if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
t0 = Symbol.for("react.early_return_sentinel");
bb0: {
const x = [];
@ -43,11 +43,11 @@ function Component(props) {
break bb0;
} else {
let t1;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t1 = foo();
$[3] = t1;
$[5] = t1;
} else {
t1 = $[3];
t1 = $[5];
}
y = t1;
if (props.b) {
@ -56,12 +56,14 @@ function Component(props) {
}
}
}
$[0] = props;
$[1] = t0;
$[2] = y;
$[0] = props.a;
$[1] = props.b;
$[2] = props.cond;
$[3] = t0;
$[4] = y;
} else {
t0 = $[1];
y = $[2];
t0 = $[3];
y = $[4];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;

18
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push-consecutive-phis.expect.md
View File

@ -49,7 +49,7 @@ import { c as _c } from "react/compiler-runtime";
import { makeArray } from "shared-runtime";
function Component(props) {
const $ = _c(3);
const $ = _c(6);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = {};
@ -59,7 +59,12 @@ function Component(props) {
}
const x = t0;
let t1;
if ($[1] !== props) {
if (
$[1] !== props.cond ||
$[2] !== props.cond2 ||
$[3] !== props.value ||
$[4] !== props.value2
) {
let y;
if (props.cond) {
if (props.cond2) {
@ -74,10 +79,13 @@ function Component(props) {
y.push(x);
t1 = [x, y];
$[1] = props;
$[2] = t1;
$[1] = props.cond;
$[2] = props.cond2;
$[3] = props.value;
$[4] = props.value2;
$[5] = t1;
} else {
t1 = $[2];
t1 = $[5];
}
return t1;
}

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md
View File

@ -36,7 +36,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(3);
const $ = _c(4);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = {};
@ -46,7 +46,7 @@ function Component(props) {
}
const x = t0;
let t1;
if ($[1] !== props) {
if ($[1] !== props.cond || $[2] !== props.value) {
let y;
if (props.cond) {
y = [props.value];
@ -57,10 +57,11 @@ function Component(props) {
y.push(x);
t1 = [x, y];
$[1] = props;
$[2] = t1;
$[1] = props.cond;
$[2] = props.value;
$[3] = t1;
} else {
t1 = $[2];
t1 = $[3];
}
return t1;
}

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md
View File

@ -32,7 +32,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime"; // @debug
function Component(props) {
const $ = _c(3);
const $ = _c(4);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = {};
@ -42,7 +42,7 @@ function Component(props) {
}
const x = t0;
let t1;
if ($[1] !== props) {
if ($[1] !== props.a || $[2] !== props.cond) {
let y;
if (props.cond) {
y = {};
@ -53,10 +53,11 @@ function Component(props) {
y.x = x;
t1 = [x, y];
$[1] = props;
$[2] = t1;
$[1] = props.a;
$[2] = props.cond;
$[3] = t1;
} else {
t1 = $[2];
t1 = $[3];
}
return t1;
}

50
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.expect.md Normal file
View File

@ -0,0 +1,50 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
import {useCallback} from 'react';
function Component({propA, propB}) {
return useCallback(() => {
if (propA) {
return {
value: propB.x.y,
};
}
}, [propA, propB.x.y]);
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{propA: 1, propB: {x: {y: []}}}],
};
```
## Error
```
3 |
4 | function Component({propA, propB}) {
> 5 | return useCallback(() => {
| ^^^^^^^
> 6 | if (propA) {
| ^^^^^^^^^^^^^^^^
> 7 | return {
| ^^^^^^^^^^^^^^^^
> 8 | value: propB.x.y,
| ^^^^^^^^^^^^^^^^
> 9 | };
| ^^^^^^^^^^^^^^^^
> 10 | }
| ^^^^^^^^^^^^^^^^
> 11 | }, [propA, propB.x.y]);
| ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (5:11)
12 | }
13 |
14 | export const FIXTURE_ENTRYPOINT = {
```

0
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-conditional-access-own-scope.ts → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-conditional-access-own-scope.ts
View File

59
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.expect.md Normal file
View File

@ -0,0 +1,59 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
import {useCallback} from 'react';
import {identity, mutate} from 'shared-runtime';
function useHook(propA, propB) {
return useCallback(() => {
const x = {};
if (identity(null) ?? propA.a) {
mutate(x);
return {
value: propB.x.y,
};
}
}, [propA.a, propB.x.y]);
}
export const FIXTURE_ENTRYPOINT = {
fn: useHook,
params: [{a: 1}, {x: {y: 3}}],
};
```
## Error
```
4 |
5 | function useHook(propA, propB) {
> 6 | return useCallback(() => {
| ^^^^^^^
> 7 | const x = {};
| ^^^^^^^^^^^^^^^^^
> 8 | if (identity(null) ?? propA.a) {
| ^^^^^^^^^^^^^^^^^
> 9 | mutate(x);
| ^^^^^^^^^^^^^^^^^
> 10 | return {
| ^^^^^^^^^^^^^^^^^
> 11 | value: propB.x.y,
| ^^^^^^^^^^^^^^^^^
> 12 | };
| ^^^^^^^^^^^^^^^^^
> 13 | }
| ^^^^^^^^^^^^^^^^^
> 14 | }, [propA.a, propB.x.y]);
| ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (6:14)
CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (6:14)
15 | }
16 |
17 | export const FIXTURE_ENTRYPOINT = {
```

0
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-conditional-value-block.ts → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.hoist-useCallback-infer-conditional-value-block.ts
View File

2
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-infer-less-specific-conditional-access.expect.md
View File

@ -44,6 +44,8 @@ function Component({propA, propB}) {
| ^^^^^^^^^^^^^^^^^
> 14 | }, [propA?.a, propB.x.y]);
| ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (6:14)
CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected (6:14)
15 | }
16 |
```

58
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-conditional-access-own-scope.expect.md
View File

@ -1,58 +0,0 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
import {useCallback} from 'react';
function Component({propA, propB}) {
return useCallback(() => {
if (propA) {
return {
value: propB.x.y,
};
}
}, [propA, propB.x.y]);
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{propA: 1, propB: {x: {y: []}}}],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
import { useCallback } from "react";
function Component(t0) {
const $ = _c(3);
const { propA, propB } = t0;
let t1;
if ($[0] !== propA || $[1] !== propB.x.y) {
t1 = () => {
if (propA) {
return { value: propB.x.y };
}
};
$[0] = propA;
$[1] = propB.x.y;
$[2] = t1;
} else {
t1 = $[2];
}
return t1;
}
export const FIXTURE_ENTRYPOINT = {
fn: Component,
params: [{ propA: 1, propB: { x: { y: [] } } }],
};
```
### Eval output
(kind: ok) "[[ function params=0 ]]"

63
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-infer-conditional-value-block.expect.md
View File

@ -1,63 +0,0 @@
## Input
```javascript
// @validatePreserveExistingMemoizationGuarantees
import {useCallback} from 'react';
import {identity, mutate} from 'shared-runtime';
function useHook(propA, propB) {
return useCallback(() => {
const x = {};
if (identity(null) ?? propA.a) {
mutate(x);
return {
value: propB.x.y,
};
}
}, [propA.a, propB.x.y]);
}
export const FIXTURE_ENTRYPOINT = {
fn: useHook,
params: [{a: 1}, {x: {y: 3}}],
};
```
## Code
```javascript
import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
import { useCallback } from "react";
import { identity, mutate } from "shared-runtime";
function useHook(propA, propB) {
const $ = _c(3);
let t0;
if ($[0] !== propA.a || $[1] !== propB.x.y) {
t0 = () => {
const x = {};
if (identity(null) ?? propA.a) {
mutate(x);
return { value: propB.x.y };
}
};
$[0] = propA.a;
$[1] = propB.x.y;
$[2] = t0;
} else {
t0 = $[2];
}
return t0;
}
export const FIXTURE_ENTRYPOINT = {
fn: useHook,
params: [{ a: 1 }, { x: { y: 3 } }],
};
```
### Eval output
(kind: ok) "[[ function params=0 ]]"

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependencies-non-optional-properties-inside-optional-chain.expect.md
View File

@ -15,9 +15,9 @@ import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
let t0;
if ($[0] !== props.post.feedback.comments) {
if ($[0] !== props.post.feedback.comments?.edges) {
t0 = props.post.feedback.comments?.edges?.map(render);
$[0] = props.post.feedback.comments;
$[0] = props.post.feedback.comments?.edges;
$[1] = t0;
} else {
t0 = $[1];

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassigned-phi-in-returned-function-expression.expect.md
View File

@ -23,7 +23,7 @@ import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
let t0;
if ($[0] !== props.str) {
if ($[0] !== props) {
t0 = () => {
let str;
if (arguments.length) {
@ -34,7 +34,7 @@ function Component(props) {
global.log(str);
};
$[0] = props.str;
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/bug-infer-function-cond-access-not-hoisted.expect.md
View File

@ -38,7 +38,7 @@ function Foo(t0) {
const $ = _c(3);
const { a, shouldReadA } = t0;
let t1;
if ($[0] !== a.b.c || $[1] !== shouldReadA) {
if ($[0] !== a || $[1] !== shouldReadA) {
t1 = (
<Stringify
fn={() => {
@ -50,7 +50,7 @@ function Foo(t0) {
shouldInvokeFns={true}
/>
);
$[0] = a.b.c;
$[0] = a;
$[1] = shouldReadA;
$[2] = t1;
} else {

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/bug-merge-uncond-optional-chain-and-cond.expect.md
View File

@ -65,12 +65,12 @@ function useFoo(t0) {
const $ = _c(2);
const { screen } = t0;
let t1;
if ($[0] !== screen?.title_text) {
if ($[0] !== screen) {
t1 =
screen?.title_text != null
? "(not null)"
: identity({ title: screen.title_text });
$[0] = screen?.title_text;
$[0] = screen;
$[1] = t1;
} else {
t1 = $[1];

15
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md
View File

@ -61,20 +61,13 @@ import { c as _c } from "react/compiler-runtime"; // This tests an optimization,
import { CONST_TRUE, setProperty } from "shared-runtime";
function useJoinCondDepsInUncondScopes(props) {
const $ = _c(4);
const $ = _c(2);
let t0;
if ($[0] !== props.a.b) {
const y = {};
let x;
if ($[2] !== props) {
x = {};
if (CONST_TRUE) {
setProperty(x, props.a.b);
}
$[2] = props;
$[3] = x;
} else {
x = $[3];
const x = {};
if (CONST_TRUE) {
setProperty(x, props.a.b);
}
setProperty(y, props.a.b);

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md
View File

@ -34,19 +34,20 @@ import { identity } from "shared-runtime";
// and promote it to an unconditional dependency.
function usePromoteUnconditionalAccessToDependency(props, other) {
const $ = _c(3);
const $ = _c(4);
let x;
if ($[0] !== other || $[1] !== props.a) {
if ($[0] !== other || $[1] !== props.a.a.a || $[2] !== props.a.b) {
x = {};
x.a = props.a.a.a;
if (identity(other)) {
x.c = props.a.b.c;
}
$[0] = other;
$[1] = props.a;
$[2] = x;
$[1] = props.a.a.a;
$[2] = props.a.b;
$[3] = x;
} else {
x = $[2];
x = $[3];
}
return x;
}

25
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md
View File

@ -36,10 +36,16 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(4);
const $ = _c(7);
let x = 0;
let values;
if ($[0] !== props || $[1] !== x) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.c ||
$[3] !== props.d ||
$[4] !== x
) {
values = [];
const y = props.a || props.b;
values.push(y);
@ -53,13 +59,16 @@ function Component(props) {
}
values.push(x);
$[0] = props;
$[1] = x;
$[2] = values;
$[3] = x;
$[0] = props.a;
$[1] = props.b;
$[2] = props.c;
$[3] = props.d;
$[4] = x;
$[5] = values;
$[6] = x;
} else {
values = $[2];
x = $[3];
values = $[5];
x = $[6];
}
return values;
}

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md
View File

@ -39,9 +39,9 @@ import { c as _c } from "react/compiler-runtime";
import { Stringify } from "shared-runtime";
function Component(props) {
const $ = _c(2);
const $ = _c(3);
let t0;
if ($[0] !== props) {
if ($[0] !== props.p0 || $[1] !== props.p1) {
const x = [];
let y;
if (props.p0) {
@ -55,10 +55,11 @@ function Component(props) {
{y}
</Stringify>
);
$[0] = props;
$[1] = t0;
$[0] = props.p0;
$[1] = props.p1;
$[2] = t0;
} else {
t0 = $[1];
t0 = $[2];
}
return t0;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md
View File

@ -31,17 +31,19 @@ import { c as _c } from "react/compiler-runtime";
import { mutate } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
x = [];
x.push(props.bar);
props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
mutate(x);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction.expect.md
View File

@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function useFoo(props) {
const $ = _c(4);
const $ = _c(5);
let x;
if ($[0] !== props.bar) {
x = [];
@ -36,12 +36,13 @@ function useFoo(props) {
} else {
x = $[1];
}
if ($[2] !== props) {
if ($[2] !== props.cond || $[3] !== props.foo) {
props.cond ? (([x] = [[]]), x.push(props.foo)) : null;
$[2] = props;
$[3] = x;
$[2] = props.cond;
$[3] = props.foo;
$[4] = x;
} else {
x = $[3];
x = $[4];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md
View File

@ -31,17 +31,19 @@ import { c as _c } from "react/compiler-runtime";
import { mutate } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
x = [];
x.push(props.bar);
props.cond ? ((x = []), x.push(props.foo)) : null;
mutate(x);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

11
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary.expect.md
View File

@ -26,7 +26,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function useFoo(props) {
const $ = _c(4);
const $ = _c(5);
let x;
if ($[0] !== props.bar) {
x = [];
@ -36,12 +36,13 @@ function useFoo(props) {
} else {
x = $[1];
}
if ($[2] !== props) {
if ($[2] !== props.cond || $[3] !== props.foo) {
props.cond ? ((x = []), x.push(props.foo)) : null;
$[2] = props;
$[3] = x;
$[2] = props.cond;
$[3] = props.foo;
$[4] = x;
} else {
x = $[3];
x = $[4];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md
View File

@ -31,17 +31,19 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
import { arrayPush } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
x = [];
x.push(props.bar);
props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
arrayPush(x, 4);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary.expect.md
View File

@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function useFoo(props) {
const $ = _c(4);
const $ = _c(6);
let x;
if ($[0] !== props.bar) {
x = [];
@ -38,12 +38,14 @@ function useFoo(props) {
} else {
x = $[1];
}
if ($[2] !== props) {
if ($[2] !== props.bar || $[3] !== props.cond || $[4] !== props.foo) {
props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar));
$[2] = props;
$[3] = x;
$[2] = props.bar;
$[3] = props.cond;
$[4] = props.foo;
$[5] = x;
} else {
x = $[3];
x = $[5];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md
View File

@ -39,9 +39,9 @@ import { c as _c } from "react/compiler-runtime";
import { mutate } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
x = [];
x.push(props.bar);
if (props.cond) {
@ -53,10 +53,12 @@ function useFoo(props) {
}
mutate(x);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md
View File

@ -35,9 +35,9 @@ import { c as _c } from "react/compiler-runtime";
import { mutate } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
({ x } = { x: [] });
x.push(props.bar);
if (props.cond) {
@ -46,10 +46,12 @@ function useFoo(props) {
}
mutate(x);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

12
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md
View File

@ -35,9 +35,9 @@ import { c as _c } from "react/compiler-runtime";
import { mutate } from "shared-runtime";
function useFoo(props) {
const $ = _c(2);
const $ = _c(4);
let x;
if ($[0] !== props) {
if ($[0] !== props.bar || $[1] !== props.cond || $[2] !== props.foo) {
x = [];
x.push(props.bar);
if (props.cond) {
@ -46,10 +46,12 @@ function useFoo(props) {
}
mutate(x);
$[0] = props;
$[1] = x;
$[0] = props.bar;
$[1] = props.cond;
$[2] = props.foo;
$[3] = x;
} else {
x = $[1];
x = $[3];
}
return x;
}

31
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md
View File

@ -33,10 +33,10 @@ function Component(props) {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(7);
const $ = _c(8);
let t0;
let y;
if ($[0] !== props) {
if ($[0] !== props.p0 || $[1] !== props.p2) {
const x = [];
bb0: switch (props.p0) {
case 1: {
@ -45,11 +45,11 @@ function Component(props) {
case true: {
x.push(props.p2);
let t1;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t1 = [];
$[3] = t1;
$[4] = t1;
} else {
t1 = $[3];
t1 = $[4];
}
y = t1;
}
@ -62,23 +62,24 @@ function Component(props) {
}
t0 = <Component data={x} />;
$[0] = props;
$[1] = t0;
$[2] = y;
$[0] = props.p0;
$[1] = props.p2;
$[2] = t0;
$[3] = y;
} else {
t0 = $[1];
y = $[2];
t0 = $[2];
y = $[3];
}
const child = t0;
y.push(props.p4);
let t1;
if ($[4] !== child || $[5] !== y) {
if ($[5] !== child || $[6] !== y) {
t1 = <Component data={y}>{child}</Component>;
$[4] = child;
$[5] = y;
$[6] = t1;
$[5] = child;
$[6] = y;
$[7] = t1;
} else {
t1 = $[6];
t1 = $[7];
}
return t1;
}

26
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md
View File

@ -28,10 +28,10 @@ function Component(props) {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(6);
const $ = _c(8);
let t0;
let y;
if ($[0] !== props) {
if ($[0] !== props.p0 || $[1] !== props.p2 || $[2] !== props.p3) {
const x = [];
switch (props.p0) {
case true: {
@ -44,23 +44,25 @@ function Component(props) {
}
t0 = <Component data={x} />;
$[0] = props;
$[1] = t0;
$[2] = y;
$[0] = props.p0;
$[1] = props.p2;
$[2] = props.p3;
$[3] = t0;
$[4] = y;
} else {
t0 = $[1];
y = $[2];
t0 = $[3];
y = $[4];
}
const child = t0;
y.push(props.p4);
let t1;
if ($[3] !== child || $[4] !== y) {
if ($[5] !== child || $[6] !== y) {
t1 = <Component data={y}>{child}</Component>;
$[3] = child;
$[4] = y;
$[5] = t1;
$[5] = child;
$[6] = y;
$[7] = t1;
} else {
t1 = $[5];
t1 = $[7];
}
return t1;
}

16
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
View File

@ -28,9 +28,9 @@ import { c as _c } from "react/compiler-runtime";
const { shallowCopy, throwErrorWithMessage } = require("shared-runtime");
function Component(props) {
const $ = _c(3);
const $ = _c(5);
let x;
if ($[0] !== props.a) {
if ($[0] !== props) {
x = [];
try {
let t0;
@ -42,9 +42,17 @@ function Component(props) {
}
x.push(t0);
} catch {
x.push(shallowCopy({ a: props.a }));
let t0;
if ($[3] !== props.a) {
t0 = shallowCopy({ a: props.a });
$[3] = props.a;
$[4] = t0;
} else {
t0 = $[4];
}
x.push(t0);
}
$[0] = props.a;
$[0] = props;
$[1] = x;
} else {
x = $[1];

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.expect.md
View File

@ -31,7 +31,7 @@ import { throwInput } from "shared-runtime";
function Component(props) {
const $ = _c(4);
let t0;
if ($[0] !== props.value) {
if ($[0] !== props) {
t0 = () => {
try {
throwInput([props.value]);
@ -40,7 +40,7 @@ function Component(props) {
return e;
}
};
$[0] = props.value;
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-object-method-returns-caught-value.expect.md
View File

@ -33,7 +33,7 @@ import { throwInput } from "shared-runtime";
function Component(props) {
const $ = _c(2);
let t0;
if ($[0] !== props.value) {
if ($[0] !== props) {
const object = {
foo() {
try {
@ -46,7 +46,7 @@ function Component(props) {
};
t0 = object.foo();
$[0] = props.value;
$[0] = props;
$[1] = t0;
} else {
t0 = $[1];

22
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-multiple-if-else.expect.md
View File

@ -33,11 +33,16 @@ import { c as _c } from "react/compiler-runtime";
import { useMemo } from "react";
function Component(props) {
const $ = _c(3);
const $ = _c(6);
let t0;
bb0: {
let y;
if ($[0] !== props) {
if (
$[0] !== props.a ||
$[1] !== props.b ||
$[2] !== props.cond ||
$[3] !== props.cond2
) {
y = [];
if (props.cond) {
y.push(props.a);
@ -48,12 +53,15 @@ function Component(props) {
}
y.push(props.b);
$[0] = props;
$[1] = y;
$[2] = t0;
$[0] = props.a;
$[1] = props.b;
$[2] = props.cond;
$[3] = props.cond2;
$[4] = y;
$[5] = t0;
} else {
y = $[1];
t0 = $[2];
y = $[4];
t0 = $[5];
}
t0 = y;
}