Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

compiler: super early exploration of instruction reordering

Browse Source 
See comments in InstructionReordering.ts. This needs substantial iteration before landing in some form, just putting up to share for discussion.

[ghstack-poisoned]
This commit is contained in:
Joe Savona
2024-05-24 07:53:28 +01:00
parent 5fe8c0b4ec
commit 9fdd3fac15
366 changed files with 3391 additions and 3040 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
+4
View File
@@ -41,6 +41,7 @@ import {
deadCodeElimination,
pruneMaybeThrows,
} from "../Optimization";
import { instructionReordering } from "../Optimization/InstructionReordering";
import {
CodegenFunction,
alignObjectMethodScopes,
@@ -177,6 +178,9 @@ function* runWithEnvironment(
inferTypes(hir);
yield log({ kind: "hir", name: "InferTypes", value: hir });
instructionReordering(hir);
yield log({ kind: "hir", name: "InstructionReordering", value: hir });
if (env.config.validateHooksUsage) {
validateHooksUsage(hir);
}
compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts
+225
View File
@@ -0,0 +1,225 @@
import {
BasicBlock,
HIRFunction,
IdentifierId,
Instruction,
markInstructionIds,
} from "../HIR";
import { printInstruction } from "../HIR/PrintHIR";
import {
eachInstructionValueLValue,
eachInstructionValueOperand,
eachTerminalOperand,
} from "../HIR/visitors";
import { getOrInsertDefault } from "../Utils/utils";
/**
* WIP early exploration of instruction reordering. This is a fairly aggressive form and has
* some issues. The idea of what's implemented:
*
* The high-level approach is to build a dependency graph where nodes generally correspond
* either to instructions OR to particular lvalue assignments of an expresssion. So
* `Destructure [x, y] = z` creates 3 nodes: one for the instruction, and one each for x and y.
* The lvalue nodes depend on the instruction node that assigns them.
*
* We add dependency edges for all the rvalues/lvalues of each instruction. In addition, we
* implicitly add dependencies btw non-reorderable instructions (more on that criteria) to
* serialize any instruction where order might be observable.
*
* We then distinguish two types of instructions that are reorderable:
* - Primitives, JSXText, JSX elements, and globals can be *globally* reordered, ie across blocks.
* We defer emitting them until they are first used globally.
* - Array and object expressions are reorderable within basic blocks. This could likely be relaxed to be global.
* - StoreLocal, LoadLocal, and Destructure are reorderable within basic blocks. However, we serialize all
* references to each named variable (reads and writes) to ensure that we aren't changing the order of evaluation
* of variable references.
*
* The variable reordering relies on the fact that any variables that could be reassigned via a function expression
* are promoted to "context" variables and use LoadContext/StoreContext, which are not reorderable.
*
* In theory it might even be safe to do this variable reordering globally, but i want to think through that more.
*
* With the above context, the algorithm is approximately:
* - For each basic block:
* - Iterate the instructions to create the dependency graph
* - Re-emit instructions, "pulling" from all the values that are depended upon by the block's terminal.
* - Emit any remaining instructions that cannot be globally reordered, starting from later instructions first.
* - Save any globally-reorderable instructions into a global map that is shared across blocks, so they can be
* emitted by the first block that needs them.
*
* Emitting instructions is currently naive: we just iterate in the order that the dependencies were established.
* If instruction 4 depends on instructions 1, 2, and 3, we'll visit in depth-first order and emit 1, 2, 3, 4.
* That's true even if instruction 1 and 2 are simple instructions (for ex primitives) while instruction 3 has its
* own large dependency tree.
*
* ## Issues/things to explore:
*
* - An obvious improvement is to weight the nodes and emit dependencies based on weight. Alternatively, we could try to
* determine the reactive dependencies of each node, and try to emit nodes that have the same dependencies together.
* - Reordering destructure statements means that we also end up deferring the evaluation of its RHS. So i noticed some
* `const [state, setState] = useState(...)` getting moved around. But i think i might have just messed up the bit that
* ensures non-reorderable instructions (like the useState() call here) are serialized. So this should just be a simple fix,
* if i didn't already fix it (need to go back through the fixture output changes)
* - I also noticed that destructuring being moved meant that some reactive scopes ended up with less precise input, because
* the destructure moved into the reactive scope itself (so the scope depends on the rvalue of the destructure, not the lvalues).
* This is weird, i need to debug.
* - Probably more things.
*/
export function instructionReordering(fn: HIRFunction): void {
const globalDependencies: Dependencies = new Map();
for (const [, block] of fn.body.blocks) {
reorderBlock(block, globalDependencies);
}
markInstructionIds(fn.body);
}
type Dependencies = Map<IdentifierId, Node>;
type Node = {
instruction: Instruction | null;
dependencies: Array<IdentifierId>;
};
function reorderBlock(
block: BasicBlock,
globalDependencies: Dependencies
): void {
const dependencies: Dependencies = new Map();
const locals = new Map<string, IdentifierId>();
let previousIdentifier: IdentifierId | null = null;
for (const instr of block.instructions) {
const node: Node = getOrInsertDefault(
dependencies,
instr.lvalue.identifier.id,
{
instruction: instr,
dependencies: [],
}
);
if (
getReorderingLevel(instr) === ReorderingLevel.None &&
previousIdentifier !== null
) {
node.dependencies.push(previousIdentifier);
previousIdentifier = instr.lvalue.identifier.id;
}
for (const operand of eachInstructionValueOperand(instr.value)) {
if (
operand.identifier.name !== null &&
operand.identifier.name.kind === "named"
) {
const previous = locals.get(operand.identifier.name.value);
if (previous !== undefined) {
node.dependencies.push(previous);
} else {
locals.set(operand.identifier.name.value, instr.lvalue.identifier.id);
node.dependencies.push(operand.identifier.id);
}
} else {
if (dependencies.has(operand.identifier.id)) {
node.dependencies.push(operand.identifier.id);
}
}
}
dependencies.set(instr.lvalue.identifier.id, node);
for (const lvalue of eachInstructionValueLValue(instr.value)) {
const lvalueNode = getOrInsertDefault(
dependencies,
lvalue.identifier.id,
{
instruction: null,
dependencies: [],
}
);
lvalueNode.dependencies.push(instr.lvalue.identifier.id);
if (
lvalue.identifier.name !== null &&
lvalue.identifier.name.kind === "named"
) {
const previous = locals.get(lvalue.identifier.name.value);
if (previous !== undefined) {
node.dependencies.push(previous);
}
}
}
}
const instructions: Array<Instruction> = [];
function emit(id: IdentifierId): void {
const node = dependencies.get(id) ?? globalDependencies.get(id);
if (node == null) {
return;
}
dependencies.delete(id);
globalDependencies.delete(id);
for (const dep of node.dependencies) {
emit(dep);
}
if (node.instruction !== null) {
instructions.push(node.instruction);
}
}
for (const operand of eachTerminalOperand(block.terminal)) {
emit(operand.identifier.id);
}
for (const id of Array.from(dependencies.keys()).reverse()) {
const node = dependencies.get(id);
if (node == null) {
continue;
}
if (
node.instruction !== null &&
getReorderingLevel(node.instruction) === ReorderingLevel.Global
) {
globalDependencies.set(id, node);
} else {
emit(id);
}
}
block.instructions = instructions;
}
function printDeps(deps: Dependencies): string {
return (
"[\n" +
Array.from(deps)
.map(
([id, dep]) =>
`$${id} ${
dep.instruction != null ? printInstruction(dep.instruction) : ""
} deps=[${dep.dependencies.map((x) => `$${x}`).join(", ")}]`
)
.join("\n") +
"\n]"
);
}
enum ReorderingLevel {
None = "none",
Local = "local",
Global = "global",
}
function getReorderingLevel(instr: Instruction): ReorderingLevel {
switch (instr.value.kind) {
case "JsxExpression":
case "JsxFragment":
case "JSXText":
case "LoadGlobal":
case "Primitive":
case "TemplateLiteral": {
return ReorderingLevel.Global;
}
case "ArrayExpression":
case "ObjectExpression":
case "LoadLocal":
case "Destructure":
case "StoreLocal": {
return ReorderingLevel.Local;
}
default: {
return ReorderingLevel.None;
}
}
}
compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
+3 -1
View File
@@ -30,7 +30,9 @@ export function assertExhaustive(_: never, errorMsg: string): never {
throw new Error(errorMsg);
}
// Modifies @param array in place, retaining only the items where the predicate returns true.
/**
* Modifies @param array in place, retaining only the items where the predicate returns true.
*/
export function retainWhere<T>(
array: Array<T>,
predicate: (item: T) => boolean
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md
+3 -4
View File
@@ -34,13 +34,12 @@ function Component() {
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const x = [];
const a = makeObject_Primitives();
const x = [];
x.push(a);
mutate(x);
t0 = [x, a];
mutate(x);
x.push(a);
$[0] = t0;
} else {
t0 = $[0];
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md
+7 -14
View File
@@ -20,26 +20,19 @@ function Component() {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component() {
const $ = _c(2);
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = someObj();
const x = [];
const a = someObj();
t0 = [x, a];
x.push(a);
$[0] = t0;
} else {
t0 = $[0];
}
const a = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
const x = [];
x.push(a);
t1 = [x, a];
$[1] = t1;
} else {
t1 = $[1];
}
return t1;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md
+9 -8
View File
@@ -19,18 +19,19 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== a) {
x = { a };
const y = {};
y.x = x.a;
mutate(y);
t0 = { a };
$[0] = a;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
const x = t0;
const y = {};
mutate(y);
y.x = x.a;
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md
+11 -9
View File
@@ -20,19 +20,21 @@ function component() {
import { c as _c } from "react/compiler-runtime";
function component() {
const $ = _c(1);
let x;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const z = [];
const y = {};
y.z = z;
x = {};
x.y = y;
const x = {};
t0 = x;
mutate(x.y.z);
$[0] = x;
const y = {};
x.y = y;
const z = [];
y.z = z;
$[0] = t0;
} else {
x = $[0];
t0 = $[0];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md
+9 -7
View File
@@ -25,18 +25,20 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component() {
const $ = _c(1);
let x;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const z = [];
const x = {};
t0 = x;
const y = {};
y.z = z;
x = {};
x.y = y;
$[0] = x;
const z = [];
y.z = z;
$[0] = t0;
} else {
x = $[0];
t0 = $[0];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md
+1 -1
View File
@@ -40,7 +40,6 @@ let someGlobal = {};
function Component() {
const $ = _c(7);
const [state, setState] = useState(someGlobal);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => {
@@ -65,6 +64,7 @@ function Component() {
t2 = $[2];
}
useEffect(t1, t2);
const [state, setState] = useState(someGlobal);
let t3;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t3 = () => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md
+1 -1
View File
@@ -40,7 +40,6 @@ let someGlobal = false;
function Component() {
const $ = _c(7);
const [state, setState] = useState(someGlobal);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => {
@@ -65,6 +64,7 @@ function Component() {
t2 = $[2];
}
useEffect(t1, t2);
const [state, setState] = useState(someGlobal);
let t3;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t3 = () => {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md
+23 -23
View File
@@ -45,47 +45,47 @@ import { useEffect, useRef, useState } from "react";
function Component() {
const $ = _c(7);
const ref = useRef(null);
const [state, setState] = useState(false);
let t0;
let t1;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => {};
t1 = [];
const [state, setState] = useState(false);
const t0 = String(state);
const ref = useRef(null);
let t1;
if ($[0] !== t0 || $[1] !== ref) {
t1 = <Child key={t0} ref={ref} />;
$[0] = t0;
$[1] = t1;
$[1] = ref;
$[2] = t1;
} else {
t0 = $[0];
t1 = $[1];
t1 = $[2];
}
useEffect(t0, t1);
let t2;
let t3;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t2 = () => {
setState(true);
};
t3 = [];
$[2] = t2;
$[3] = t3;
$[3] = t2;
$[4] = t3;
} else {
t2 = $[2];
t3 = $[3];
t2 = $[3];
t3 = $[4];
}
useEffect(t2, t3);
const t4 = String(state);
let t4;
let t5;
if ($[4] !== t4 || $[5] !== ref) {
t5 = <Child key={t4} ref={ref} />;
$[4] = t4;
$[5] = ref;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => {};
t5 = [];
$[5] = t4;
$[6] = t5;
} else {
t4 = $[5];
t5 = $[6];
}
return t5;
useEffect(t4, t5);
return t1;
}
function Child(t0) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md
+7 -5
View File
@@ -22,18 +22,20 @@ import { c as _c } from "react/compiler-runtime"; // x's mutable range should ex
function Component(props) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== props.b) {
x = [42, {}];
const x = [42, {}];
t0 = x;
const idx = foo(props.b);
const y = x.at(idx);
mutate(y);
$[0] = props.b;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md
+1 -1
View File
@@ -45,7 +45,6 @@ function Component(props) {
t3 = $[4];
}
const y = x.join(t3);
foo(y);
let t4;
if ($[5] !== x || $[6] !== y) {
t4 = [x, y];
@@ -55,6 +54,7 @@ function Component(props) {
} else {
t4 = $[7];
}
foo(y);
return t4;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md
+2 -1
View File
@@ -29,8 +29,9 @@ function Component(props) {
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const x = [{}];
const y = x.map((item) => item);
y[0].flag = true;
t0 = [x, y];
y[0].flag = true;
$[0] = t0;
} else {
t0 = $[0];
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md
+25 -21
View File
@@ -21,33 +21,37 @@ 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] === Symbol.for("react.memo_cache_sentinel")) {
t0 = (item) => item;
$[0] = t0;
let f;
if ($[0] !== props.items) {
let t1;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t1 = (item) => item;
$[3] = t1;
} else {
t1 = $[3];
}
f = t1;
t0 = [...props.items].map(f);
$[0] = props.items;
$[1] = t0;
$[2] = f;
} else {
t0 = $[0];
t0 = $[1];
f = $[2];
}
const f = t0;
const x = t0;
let t1;
if ($[1] !== props.items) {
t1 = [...props.items].map(f);
$[1] = props.items;
$[2] = t1;
if ($[4] !== x || $[5] !== f) {
t1 = [x, f];
$[4] = x;
$[5] = f;
$[6] = t1;
} else {
t1 = $[2];
t1 = $[6];
}
const x = t1;
let t2;
if ($[3] !== x) {
t2 = [x, f];
$[3] = x;
$[4] = t2;
} else {
t2 = $[4];
}
return t2;
return t1;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md
+24 -19
View File
@@ -23,42 +23,47 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(11);
const $ = _c(12);
let t0;
let a;
let t1;
if ($[0] !== props.a || $[1] !== props.b) {
a = [props.a, props.b, "hello"];
t1 = a;
t0 = a.push(42);
$[0] = props.a;
$[1] = props.b;
$[2] = t0;
$[3] = a;
$[4] = t1;
} else {
t0 = $[2];
a = $[3];
t1 = $[4];
}
const x = t0;
let t1;
if ($[4] !== a || $[5] !== props.c) {
t1 = a.at(props.c);
$[4] = a;
$[5] = props.c;
$[6] = t1;
} else {
t1 = $[6];
}
const y = t1;
let t2;
if ($[7] !== a || $[8] !== x || $[9] !== y) {
t2 = { a, x, y };
$[7] = a;
$[8] = x;
$[9] = y;
$[10] = t2;
if ($[5] !== a || $[6] !== props.c) {
t2 = a.at(props.c);
$[5] = a;
$[6] = props.c;
$[7] = t2;
} else {
t2 = $[10];
t2 = $[7];
}
return t2;
const y = t2;
let t3;
if ($[8] !== t1 || $[9] !== x || $[10] !== y) {
t3 = { a: t1, x, y };
$[8] = t1;
$[9] = x;
$[10] = y;
$[11] = t3;
} else {
t3 = $[11];
}
return t3;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md
+33 -31
View File
@@ -25,42 +25,44 @@ import { c as _c } from "react/compiler-runtime"; // arrayInstance.push should h
function Component(props) {
const $ = _c(8);
let t0;
if ($[0] !== props.x) {
t0 = foo(props.x);
$[0] = props.x;
$[1] = t0;
} else {
t0 = $[1];
}
const x = t0;
let t1;
if ($[2] !== props.y) {
t1 = { y: props.y };
$[2] = props.y;
$[3] = t1;
} else {
t1 = $[3];
}
const y = t1;
let arr;
if ($[4] !== x || $[5] !== y) {
arr = [];
let t2;
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t2 = {};
$[7] = t2;
if ($[0] !== props.x || $[1] !== props.y) {
const arr = [];
t0 = arr;
let t1;
if ($[3] !== props.x) {
t1 = foo(props.x);
$[3] = props.x;
$[4] = t1;
} else {
t2 = $[7];
t1 = $[4];
}
arr.push(t2);
const x = t1;
let t2;
if ($[5] !== props.y) {
t2 = { y: props.y };
$[5] = props.y;
$[6] = t2;
} else {
t2 = $[6];
}
const y = t2;
arr.push(x, y);
$[4] = x;
$[5] = y;
$[6] = arr;
let t3;
if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
t3 = {};
$[7] = t3;
} else {
t3 = $[7];
}
arr.push(t3);
$[0] = props.x;
$[1] = props.y;
$[2] = t0;
} else {
arr = $[6];
t0 = $[2];
}
return arr;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md
+7 -5
View File
@@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function foo() {
const $ = _c(1);
let a;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
a = [[1]];
const a = [[1]];
t0 = a;
const first = a.at(0);
first.set(0, 2);
$[0] = a;
$[0] = t0;
} else {
a = $[0];
t0 = $[0];
}
return a;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md
+1 -3
View File
@@ -22,9 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
function f() {
let x;
x = 3 >>> 1;
const x = 3 >>> 1;
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md
+7 -5
View File
@@ -16,16 +16,18 @@ async function Component(props) {
import { c as _c } from "react/compiler-runtime";
async function Component(props) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== props.id) {
x = [];
const x = [];
t0 = x;
await populateData(props.id, x);
$[0] = props.id;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md
+2 -2
View File
@@ -28,8 +28,8 @@ import { useState, useMemo } from "react";
function Component(props) {
const $ = _c(4);
const [x] = useState(0);
let t0;
const [x] = useState(0);
let t1;
if ($[0] !== x) {
t1 = calculateExpensiveNumber(x);
@@ -53,8 +53,8 @@ function Component(props) {
function Component2(props) {
const $ = _c(4);
const [x] = useState(0);
let t0;
const [x] = useState(0);
let t1;
if ($[0] !== x) {
t1 = calculateExpensiveNumber(x);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md
+2 -2
View File
@@ -30,8 +30,8 @@ import { useState, useMemo } from "react";
function Component(props) {
const $ = _c(4);
const [x] = useState(0);
let t0;
const [x] = useState(0);
let t1;
if ($[0] !== x) {
t1 = calculateExpensiveNumber(x);
@@ -55,8 +55,8 @@ function Component(props) {
function Component2(props) {
const $ = _c(4);
const [x] = useState(0);
let t0;
const [x] = useState(0);
let t1;
if ($[0] !== x) {
t1 = calculateExpensiveNumber(x);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md
+1 -1
View File
@@ -28,8 +28,8 @@ import { calculateExpensiveNumber } from "shared-runtime";
function Component(props) {
const $ = _c(4);
const [x] = React.useState(0);
let t0;
const [x] = React.useState(0);
let t1;
if ($[0] !== x) {
t1 = calculateExpensiveNumber(x);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-reactivity-value-block.expect.md
+19 -6
View File
@@ -65,20 +65,33 @@ import {
*/
function Foo() {
const $ = _c(1);
const obj = makeObject_Primitives();
const $ = _c(4);
useNoAlias();
const shouldCaptureObj = obj != null && CONST_TRUE;
let t0;
let obj;
let shouldCaptureObj;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = [shouldCaptureObj ? identity(obj) : null, obj];
obj = makeObject_Primitives();
shouldCaptureObj = obj != null && CONST_TRUE;
t0 = shouldCaptureObj ? identity(obj) : null;
$[0] = t0;
$[1] = obj;
$[2] = shouldCaptureObj;
} else {
t0 = $[0];
obj = $[1];
shouldCaptureObj = $[2];
}
const result = t0;
let t1;
if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
t1 = [t0, obj];
$[3] = t1;
} else {
t1 = $[3];
}
const result = t1;
useNoAlias(result, obj);
if (shouldCaptureObj && result[0] !== obj) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md
+21 -8
View File
@@ -22,20 +22,33 @@ import { c as _c } from "react/compiler-runtime";
function foo() {}
function Component(props) {
const $ = _c(1);
const $ = _c(3);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const a = [];
const b = {};
foo(a, b);
foo(b);
t0 = <div a={a} b={b} />;
t0 = [];
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
const a = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = {};
$[1] = t1;
} else {
t1 = $[1];
}
const b = t1;
let t2;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t2 = <div a={a} b={b} />;
$[2] = t2;
} else {
t2 = $[2];
}
foo(b);
foo(a, b);
return t2;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md
+5 -5
View File
@@ -32,12 +32,12 @@ import * as React from "react";
const React$useState = React.useState;
const THIS_IS_A_CONSTANT = () => {};
function Component() {
Boolean(true);
Number(3);
String("foo");
React$useState(0);
React.useState(1);
THIS_IS_A_CONSTANT();
React.useState(1);
React$useState(0);
String("foo");
Number(3);
Boolean(true);
return 3;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md
+7 -7
View File
@@ -30,25 +30,25 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== a) {
x = { a };
const x = { a };
t0 = x;
const f0 = function () {
const q = x;
const f1 = function () {
q.b = 1;
};
f1();
};
f0();
$[0] = a;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md
+7 -7
View File
@@ -28,24 +28,24 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let z;
let t0;
if ($[0] !== a) {
z = { a };
const z = { a };
t0 = z;
const f0 = function () {
const f1 = function () {
z.b = 1;
};
f1();
};
f0();
$[0] = a;
$[1] = z;
$[1] = t0;
} else {
z = $[1];
t0 = $[1];
}
return z;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md
+6 -5
View File
@@ -31,23 +31,24 @@ import { mutate } from "shared-runtime";
function component(foo, bar) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== foo || $[1] !== bar) {
x = { foo };
const x = { foo };
const y = { bar };
const a = { y };
const b = x;
a.x = b;
t0 = x;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md
+8 -7
View File
@@ -23,25 +23,26 @@ function component(foo, bar) {
import { c as _c } from "react/compiler-runtime";
function component(foo, bar) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== foo || $[1] !== bar) {
x = { foo };
const x = { foo };
t0 = x;
const y = { bar };
mutate(y);
const f0 = function () {
const a = { y };
const b = x;
a.x = b;
};
f0();
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md
+6 -5
View File
@@ -31,23 +31,24 @@ const { mutate } = require("shared-runtime");
function component(foo, bar) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== foo || $[1] !== bar) {
x = { foo };
const x = { foo };
const y = { bar };
const a = [y];
const b = x;
a.x = b;
t0 = x;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md
+8 -7
View File
@@ -23,25 +23,26 @@ function component(foo, bar) {
import { c as _c } from "react/compiler-runtime";
function component(foo, bar) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== foo || $[1] !== bar) {
x = { foo };
const x = { foo };
t0 = x;
const y = { bar };
mutate(y);
const f0 = function () {
const a = [y];
const b = x;
a.x = b;
};
f0();
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md
+6 -5
View File
@@ -31,23 +31,24 @@ const { mutate } = require("shared-runtime");
function component(foo, bar) {
const $ = _c(3);
let y;
let t0;
if ($[0] !== foo || $[1] !== bar) {
const x = { foo };
y = { bar };
const y = { bar };
const a = [y];
const b = x;
a.x = b;
t0 = y;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = y;
$[2] = t0;
} else {
y = $[2];
t0 = $[2];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md
+20 -15
View File
@@ -23,25 +23,30 @@ function component(foo, bar) {
import { c as _c } from "react/compiler-runtime";
function component(foo, bar) {
const $ = _c(3);
let y;
if ($[0] !== foo || $[1] !== bar) {
const x = { foo };
y = { bar };
const f0 = function () {
const a = [y];
const b = x;
a.x = b;
};
let t0;
let t1;
if ($[0] !== bar) {
const y = { bar };
f0();
t0 = y;
t1 = y;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = y;
$[0] = bar;
$[1] = t0;
$[2] = t1;
} else {
y = $[2];
t0 = $[1];
t1 = $[2];
}
return y;
const x = { foo };
const f0 = function () {
const a = [y];
const b = x;
a.x = b;
};
f0();
return t1;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md
+6 -5
View File
@@ -31,23 +31,24 @@ const { mutate } = require("shared-runtime");
function component(foo, bar) {
const $ = _c(3);
let y;
let t0;
if ($[0] !== foo || $[1] !== bar) {
const x = { foo };
y = { bar };
const y = { bar };
const a = { y };
const b = x;
a.x = b;
t0 = y;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = y;
$[2] = t0;
} else {
y = $[2];
t0 = $[2];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md
+20 -15
View File
@@ -23,25 +23,30 @@ function component(foo, bar) {
import { c as _c } from "react/compiler-runtime";
function component(foo, bar) {
const $ = _c(3);
let y;
if ($[0] !== foo || $[1] !== bar) {
const x = { foo };
y = { bar };
const f0 = function () {
const a = { y };
const b = x;
a.x = b;
};
let t0;
let t1;
if ($[0] !== bar) {
const y = { bar };
f0();
t0 = y;
t1 = y;
mutate(y);
$[0] = foo;
$[1] = bar;
$[2] = y;
$[0] = bar;
$[1] = t0;
$[2] = t1;
} else {
y = $[2];
t0 = $[1];
t1 = $[2];
}
return y;
const x = { foo };
const f0 = function () {
const a = { y };
const b = x;
a.x = b;
};
f0();
return t1;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md
+6 -5
View File
@@ -29,20 +29,21 @@ const { mutate } = require("shared-runtime");
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
y = {};
const y = {};
y.x = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md
+8 -7
View File
@@ -21,22 +21,23 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const y = {};
t0 = y;
mutate(y);
const x = { a };
y = {};
const f0 = function () {
y.x = x;
};
f0();
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md
+6 -5
View File
@@ -29,20 +29,21 @@ const { mutate } = require("shared-runtime");
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
y = {};
const y = {};
y.x = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md
+8 -7
View File
@@ -21,22 +21,23 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const y = {};
t0 = y;
mutate(y);
const x = { a };
y = {};
const f0 = function () {
y.x = x;
};
f0();
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md
+6 -5
View File
@@ -30,21 +30,22 @@ import { mutate } from "shared-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
y = {};
const y = {};
const a_0 = y;
a_0.x = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md
+8 -7
View File
@@ -22,23 +22,24 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const y = {};
t0 = y;
mutate(y);
const x = { a };
y = {};
const f0 = function () {
const a_0 = y;
a_0.x = x;
};
f0();
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md
+6 -5
View File
@@ -30,21 +30,22 @@ const { mutate } = require("shared-runtime");
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
y = {};
const y = {};
const a_0 = y;
a_0.x = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md
+8 -7
View File
@@ -22,23 +22,24 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const y = {};
t0 = y;
mutate(y);
const x = { a };
y = {};
const f0 = function () {
const a_0 = y;
a_0.x = x;
};
f0();
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md
+11 -18
View File
@@ -26,31 +26,24 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function component(a, b) {
const $ = _c(5);
const $ = _c(3);
let t0;
if ($[0] !== b) {
t0 = { b };
$[0] = b;
$[1] = t0;
} else {
t0 = $[1];
}
const y = t0;
let z;
if ($[2] !== a || $[3] !== y.b) {
z = { a };
if ($[0] !== a || $[1] !== b) {
const z = { a };
t0 = z;
const y = { b };
const x = function () {
z.a = 2;
};
x();
$[2] = a;
$[3] = y.b;
$[4] = z;
$[0] = a;
$[1] = b;
$[2] = t0;
} else {
z = $[4];
t0 = $[2];
}
return z;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md
+7 -6
View File
@@ -25,20 +25,21 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
y = { b: { a } };
const y = { b: { a } };
t0 = y;
const x = function () {
y.b.a = 2;
};
x();
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md
+7 -6
View File
@@ -27,23 +27,24 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component(a, b) {
const $ = _c(3);
let z;
let t0;
if ($[0] !== a || $[1] !== b) {
z = { a };
const z = { a };
t0 = z;
const y = { b };
const x = function () {
z.a = 2;
console.log(y.b);
};
x();
$[0] = a;
$[1] = b;
$[2] = z;
$[2] = t0;
} else {
z = $[2];
t0 = $[2];
}
return z;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md
+6 -4
View File
@@ -29,21 +29,23 @@ const { mutate } = require("shared-runtime");
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
let y;
y = {};
y;
y = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md
+9 -7
View File
@@ -21,22 +21,24 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
let y;
y = {};
t0 = y;
mutate(y);
const x = { a };
const f0 = function () {
y = x;
};
f0();
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md
+4 -4
View File
@@ -32,15 +32,15 @@ function bar(a, b) {
const $ = _c(3);
let y;
if ($[0] !== a || $[1] !== b) {
const x = [a, b];
y = {};
let t;
t = {};
y;
t;
y = x[0][1];
const x = [a, b];
y = {};
y;
t = x[1][0];
y = x[0][1];
$[0] = a;
$[1] = b;
$[2] = y;
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md
+8 -6
View File
@@ -27,21 +27,23 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function bar(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = [a];
let y;
y = {};
t0 = y;
const x = [a];
const f0 = function () {
y = x[0];
};
f0();
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md
+2 -1
View File
@@ -25,6 +25,8 @@ function component(a, b) {
import { c as _c } from "react/compiler-runtime"; // @debug
function component(a, b) {
const $ = _c(5);
const y = b;
let t0;
if ($[0] !== a) {
t0 = { a };
@@ -34,7 +36,6 @@ function component(a, b) {
t0 = $[1];
}
const z = t0;
const y = b;
let t1;
if ($[2] !== y || $[3] !== z) {
t1 = function () {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md
+7 -6
View File
@@ -25,20 +25,21 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let t;
let t0;
if ($[0] !== a) {
t = { a };
const t = { a };
t0 = t;
const x = function x() {
t.foo();
};
x(t);
$[0] = a;
$[1] = t;
$[1] = t0;
} else {
t = $[1];
t0 = $[1];
}
return t;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md
+19 -12
View File
@@ -20,20 +20,27 @@ function component(a, b) {
```javascript
import { c as _c } from "react/compiler-runtime";
function component(a, b) {
const $ = _c(2);
let t0;
if ($[0] !== a) {
t0 = { a };
$[0] = a;
$[1] = t0;
const $ = _c(5);
let z;
if ($[0] !== b || $[1] !== a) {
const z_0 = { b };
let t0;
if ($[3] !== a) {
t0 = { a };
$[3] = a;
$[4] = t0;
} else {
t0 = $[4];
}
z = t0;
mutate(z_0);
$[0] = b;
$[1] = a;
$[2] = z;
} else {
t0 = $[1];
z = $[2];
}
const z = t0;
const z_0 = { b };
mutate(z_0);
return z;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md
+1 -2
View File
@@ -36,7 +36,6 @@ function component(a) {
t0 = $[1];
}
const z = t0;
let x;
let t1;
if ($[2] !== z) {
t1 = function () {
@@ -47,7 +46,7 @@ function component(a) {
} else {
t1 = $[3];
}
x = t1;
const x = t1;
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md
+6 -4
View File
@@ -20,21 +20,23 @@ function component(a) {
import { c as _c } from "react/compiler-runtime";
function component(a) {
const $ = _c(2);
let y;
let t0;
if ($[0] !== a) {
const x = { a };
let y;
y = 1;
y;
y = x;
t0 = y;
mutate(y);
$[0] = a;
$[1] = y;
$[1] = t0;
} else {
y = $[1];
t0 = $[1];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md
+9 -7
View File
@@ -25,18 +25,20 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function foo() {
const $ = _c(1);
let z;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const x = { x: 0 };
const z = { z: 0 };
t0 = z;
const y = { z: 0 };
z = { z: 0 };
x.x = x.x + (y.y = y.y * 1);
const x = { x: 0 };
z.z = z.z + (y.y = y.y * (x.x = x.x & 3));
$[0] = z;
x.x = x.x + (y.y = y.y * 1);
$[0] = t0;
} else {
z = $[0];
t0 = $[0];
}
return z;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md
+12 -11
View File
@@ -24,21 +24,22 @@ import { c as _c } from "react/compiler-runtime"; // @enableEmitFreeze true
function MyComponentName(props) {
const $ = _c(3);
let y;
if ($[0] !== props.a || $[1] !== props.b) {
const x = {};
foo(x, props.a);
foo(x, props.b);
let t0;
if ($[0] !== props.b || $[1] !== props.a) {
const y = [];
y = [];
t0 = y;
const x = {};
y.push(x);
$[0] = props.a;
$[1] = props.b;
$[2] = __DEV__ ? makeReadOnly(y, "MyComponentName") : y;
foo(x, props.b);
foo(x, props.a);
$[0] = props.b;
$[1] = props.a;
$[2] = __DEV__ ? makeReadOnly(t0, "MyComponentName") : t0;
} else {
y = $[2];
t0 = $[2];
}
return y;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md
+6 -13
View File
@@ -30,27 +30,20 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime"; // Should print A, B, arg, original
function Component() {
const $ = _c(2);
let t0;
const $ = _c(1);
let x;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = (o) => {
x = { f: () => console.log("original") };
const changeF = (o) => {
o.f = () => console.log("new");
};
$[0] = t0;
} else {
t0 = $[0];
}
const changeF = t0;
let x;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
x = { f: () => console.log("original") };
(console.log("A"), x)[(console.log("B"), "f")](
(changeF(x), console.log("arg"), 1)
);
$[1] = x;
$[0] = x;
} else {
x = $[1];
x = $[0];
}
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md
+21 -11
View File
@@ -17,20 +17,30 @@ function component(a, b) {
```javascript
import { c as _c } from "react/compiler-runtime";
function component(a, b) {
const $ = _c(3);
let x;
if ($[0] !== a || $[1] !== b) {
const y = { a };
x = { b };
x.y = y;
const $ = _c(5);
let t0;
if ($[0] !== b || $[1] !== a) {
const x = { b };
t0 = x;
mutate(x);
$[0] = a;
$[1] = b;
$[2] = x;
let t1;
if ($[3] !== a) {
t1 = { a };
$[3] = a;
$[4] = t1;
} else {
t1 = $[4];
}
const y = t1;
x.y = y;
$[0] = b;
$[1] = a;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md
+4 -11
View File
@@ -15,24 +15,17 @@ function component() {
```javascript
import { c as _c } from "react/compiler-runtime";
function component() {
const $ = _c(2);
const $ = _c(1);
const [x, setX] = useState(0);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = (v) => setX(v);
const handler = (v) => setX(v);
t0 = <Foo handler={handler} />;
$[0] = t0;
} else {
t0 = $[0];
}
const handler = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = <Foo handler={handler} />;
$[1] = t1;
} else {
t1 = $[1];
}
return t1;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md
+6 -5
View File
@@ -35,9 +35,9 @@ import { c as _c } from "react/compiler-runtime";
*/
function Component(props) {
const $ = _c(2);
let a;
let t0;
if ($[0] !== props) {
a = [];
const a = [];
a.push(props.a);
bb0: {
if (props.b) {
@@ -47,13 +47,14 @@ function Component(props) {
a.push(props.c);
}
t0 = a;
a.push(props.d);
$[0] = props;
$[1] = a;
$[1] = t0;
} else {
a = $[1];
t0 = $[1];
}
return a;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md
+42 -38
View File
@@ -72,31 +72,32 @@ import { c as _c } from "react/compiler-runtime";
*/
function ComponentA(props) {
const $ = _c(3);
let a_DEBUG;
let t0;
let t1;
if ($[0] !== props) {
t0 = Symbol.for("react.early_return_sentinel");
t1 = Symbol.for("react.early_return_sentinel");
bb0: {
a_DEBUG = [];
const a_DEBUG = [];
a_DEBUG.push(props.a);
if (props.b) {
t0 = null;
t1 = null;
break bb0;
}
t0 = a_DEBUG;
a_DEBUG.push(props.d);
}
$[0] = props;
$[1] = a_DEBUG;
$[2] = t0;
$[1] = t0;
$[2] = t1;
} else {
a_DEBUG = $[1];
t0 = $[2];
t0 = $[1];
t1 = $[2];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;
if (t1 !== Symbol.for("react.early_return_sentinel")) {
return t1;
}
return a_DEBUG;
return t0;
}
/**
@@ -104,21 +105,22 @@ function ComponentA(props) {
*/
function ComponentB(props) {
const $ = _c(2);
let a;
let t0;
if ($[0] !== props) {
a = [];
const a = [];
a.push(props.a);
if (props.b) {
a.push(props.c);
}
t0 = a;
a.push(props.d);
$[0] = props;
$[1] = a;
$[1] = t0;
} else {
a = $[1];
t0 = $[1];
}
return a;
return t0;
}
/**
@@ -126,32 +128,33 @@ function ComponentB(props) {
*/
function ComponentC(props) {
const $ = _c(3);
let a;
let t0;
let t1;
if ($[0] !== props) {
t0 = Symbol.for("react.early_return_sentinel");
t1 = Symbol.for("react.early_return_sentinel");
bb0: {
a = [];
const a = [];
a.push(props.a);
if (props.b) {
a.push(props.c);
t0 = null;
t1 = null;
break bb0;
}
t0 = a;
a.push(props.d);
}
$[0] = props;
$[1] = a;
$[2] = t0;
$[1] = t0;
$[2] = t1;
} else {
a = $[1];
t0 = $[2];
t0 = $[1];
t1 = $[2];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;
if (t1 !== Symbol.for("react.early_return_sentinel")) {
return t1;
}
return a;
return t0;
}
/**
@@ -159,32 +162,33 @@ function ComponentC(props) {
*/
function ComponentD(props) {
const $ = _c(3);
let a;
let t0;
let t1;
if ($[0] !== props) {
t0 = Symbol.for("react.early_return_sentinel");
t1 = Symbol.for("react.early_return_sentinel");
bb0: {
a = [];
const a = [];
a.push(props.a);
if (props.b) {
a.push(props.c);
t0 = a;
t1 = a;
break bb0;
}
t0 = a;
a.push(props.d);
}
$[0] = props;
$[1] = a;
$[2] = t0;
$[1] = t0;
$[2] = t1;
} else {
a = $[1];
t0 = $[2];
t0 = $[1];
t1 = $[2];
}
if (t0 !== Symbol.for("react.early_return_sentinel")) {
return t0;
if (t1 !== Symbol.for("react.early_return_sentinel")) {
return t1;
}
return a;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md
+2 -2
View File
@@ -40,8 +40,8 @@ function ComponentA(props) {
let a;
let b;
if ($[0] !== props) {
a = [];
b = [];
a = [];
if (b) {
a.push(props.p0);
}
@@ -72,8 +72,8 @@ function ComponentB(props) {
let a;
let b;
if ($[0] !== props) {
a = [];
b = [];
a = [];
if (mayMutate(b)) {
a.push(props.p0);
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md
+1 -1
View File
@@ -35,8 +35,8 @@ function Component(props) {
setX(1);
};
if (props.cond) {
setX(2);
foo();
setX(2);
}
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md
+2 -2
View File
@@ -27,8 +27,8 @@ import { identity } from "shared-runtime";
function useHook(t0) {
const $ = _c(7);
const { a, b } = t0;
let t1;
const { a, b } = t0;
let t2;
if ($[0] !== a) {
t2 = identity({ a });
@@ -38,8 +38,8 @@ function useHook(t0) {
t2 = $[1];
}
t1 = t2;
const valA = t1;
let t3;
const valA = t1;
let t4;
if ($[2] !== b) {
t4 = identity([b]);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md
+5 -5
View File
@@ -42,12 +42,12 @@ function Component(props) {
}
const x = t0;
console.log(x);
console.info(x);
console.warn(x);
console.error(x);
console.trace(x);
console.table(x);
console.trace(x);
console.error(x);
console.warn(x);
console.info(x);
console.log(x);
return x;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md
+5 -4
View File
@@ -29,15 +29,16 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function useFoo(setOne) {
const $ = _c(4);
let x;
let y;
let z;
let y;
let x;
if (setOne) {
x = y = z = 1;
} else {
x = 2;
y = 3;
z = 5;
y = 3;
x = 2;
}
let t0;
if ($[0] !== x || $[1] !== y || $[2] !== z) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md
+8 -6
View File
@@ -24,17 +24,19 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== props.foo) {
x = {};
x.foo = x.foo + x.bar;
const x = {};
t0 = x;
x.foo(props.foo);
x.foo = x.foo + x.bar;
$[0] = props.foo;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md
+5 -11
View File
@@ -17,25 +17,19 @@ function Component(props) {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = () => {
const onEvent = () => {
console.log(42);
};
t0 = <Foo onEvent={onEvent} />;
$[0] = t0;
} else {
t0 = $[0];
}
const onEvent = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = <Foo onEvent={onEvent} />;
$[1] = t1;
} else {
t1 = $[1];
}
return t1;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md
+21 -7
View File
@@ -22,19 +22,33 @@ import { c as _c } from "react/compiler-runtime";
function Foo() {}
function Component(props) {
const $ = _c(1);
const $ = _c(3);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const a = [];
const b = {};
new Foo(a, b);
new Foo(b);
t0 = <div a={a} b={b} />;
t0 = [];
$[0] = t0;
} else {
t0 = $[0];
}
return t0;
const a = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = {};
$[1] = t1;
} else {
t1 = $[1];
}
const b = t1;
let t2;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t2 = <div a={a} b={b} />;
$[2] = t2;
} else {
t2 = $[2];
}
new Foo(b);
new Foo(a, b);
return t2;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md
+11 -9
View File
@@ -30,28 +30,30 @@ import { useMemo } from "react";
import { Stringify } from "shared-runtime";
function Component(props) {
const $ = _c(3);
const $ = _c(4);
let t0;
let Component;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
Component = Stringify;
Component;
let t0;
t0 = Component;
Component = t0;
$[0] = Component;
$[1] = t0;
} else {
Component = $[0];
t0 = $[1];
}
let t0;
if ($[1] !== props) {
t0 = <Component {...props} />;
$[1] = props;
$[2] = t0;
let t1;
if ($[2] !== props) {
t1 = <Component {...props} />;
$[2] = props;
$[3] = t1;
} else {
t0 = $[2];
t1 = $[3];
}
return t0;
return t1;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md
+20 -16
View File
@@ -27,32 +27,36 @@ import React from "react";
import { shallowCopy } from "shared-runtime";
function Component(props) {
const $ = _c(5);
const $ = _c(6);
let t0;
let childProps;
if ($[0] !== props.width) {
t0 = { style: { width: props.width } };
$[0] = props.width;
$[1] = t0;
} else {
t0 = $[1];
}
const childProps = t0;
let t1;
if ($[2] !== childProps) {
const t1 = { width: props.width };
let t2;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t2 = ["hello world"];
if ($[3] !== t1) {
t2 = { style: t1 };
$[3] = t1;
$[4] = t2;
} else {
t2 = $[4];
}
t1 = React.createElement("div", childProps, t2);
childProps = t2;
let t3;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t3 = ["hello world"];
$[5] = t3;
} else {
t3 = $[5];
}
t0 = React.createElement("div", childProps, t3);
$[0] = props.width;
$[1] = t0;
$[2] = childProps;
$[3] = t1;
} else {
t1 = $[3];
t0 = $[1];
childProps = $[2];
}
const element = t1;
const element = t0;
shallowCopy(childProps);
return element;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md
+7 -6
View File
@@ -23,18 +23,19 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(2);
let x;
let t0;
if ($[0] !== props.value) {
x = [];
debugger;
const x = [];
t0 = x;
x.push(props.value);
$[0] = props.value;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
return x;
debugger;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md
+7 -5
View File
@@ -26,18 +26,20 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function Component(p) {
const $ = _c(1);
let x;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
let x;
t0 = x;
const foo = () => {
x = {};
};
foo();
$[0] = x;
$[0] = t0;
} else {
x = $[0];
t0 = $[0];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md
+4 -11
View File
@@ -18,7 +18,7 @@ function Component() {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component() {
const $ = _c(2);
const $ = _c(1);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
let x;
@@ -27,20 +27,13 @@ function Component() {
x = 9;
};
t0 = bar(foo);
const y = bar(foo);
t0 = <Child y={y} />;
$[0] = t0;
} else {
t0 = $[0];
}
const y = t0;
let t1;
if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
t1 = <Child y={y} />;
$[1] = t1;
} else {
t1 = $[1];
}
return t1;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md
+7 -5
View File
@@ -23,17 +23,19 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== props.a || $[1] !== props.b) {
x = { a: props.a, b: props.b };
const x = { a: props.a, b: props.b };
t0 = x;
delete x["b"];
$[0] = props.a;
$[1] = props.b;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md
+7 -5
View File
@@ -22,17 +22,19 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(3);
let x;
let t0;
if ($[0] !== props.a || $[1] !== props.b) {
x = { a: props.a, b: props.b };
const x = { a: props.a, b: props.b };
t0 = x;
delete x.b;
$[0] = props.a;
$[1] = props.b;
$[2] = x;
$[2] = t0;
} else {
x = $[2];
t0 = $[2];
}
return x;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md
+9 -15
View File
@@ -30,30 +30,24 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function foo(a, b) {
const $ = _c(5);
let x;
if ($[0] !== a) {
x = [];
x.push(a);
$[0] = a;
$[1] = x;
} else {
x = $[1];
}
const $ = _c(3);
let y;
if ($[2] !== x || $[3] !== b) {
if ($[0] !== a || $[1] !== b) {
const x = [];
y = [];
x.push(a);
if (x.length) {
y.push(x);
}
if (b) {
y.push(b);
}
$[2] = x;
$[3] = b;
$[4] = y;
$[0] = a;
$[1] = b;
$[2] = y;
} else {
y = $[4];
y = $[2];
}
return y;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md
+12 -11
View File
@@ -31,23 +31,24 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function foo(x, y, z) {
const $ = _c(3);
const items = [z];
items.push(x);
const $ = _c(4);
let items2;
if ($[0] !== x || $[1] !== y) {
if ($[0] !== z || $[1] !== x || $[2] !== y) {
items2 = [];
const items = [z];
items.push(x);
if (x) {
items2.push(y);
}
$[0] = x;
$[1] = y;
$[2] = items2;
if (y) {
items.push(x);
}
$[0] = z;
$[1] = x;
$[2] = y;
$[3] = items2;
} else {
items2 = $[2];
}
if (y) {
items.push(x);
items2 = $[3];
}
return items2;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md
+10 -17
View File
@@ -28,31 +28,24 @@ import { c as _c } from "react/compiler-runtime";
import { identity } from "shared-runtime";
function Component(props) {
const $ = _c(4);
let x;
const $ = _c(2);
let t0;
if ($[0] !== props.value) {
const [t0] = props.value;
x = t0;
let x;
const [t1] = props.value;
x = t1;
t0 = { x };
const foo = () => {
x = identity(props.value[0]);
};
foo();
$[0] = props.value;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
const t0 = x;
let t1;
if ($[2] !== t0) {
t1 = { x: t0 };
$[2] = t0;
$[3] = t1;
} else {
t1 = $[3];
}
return t1;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md
+10 -17
View File
@@ -27,31 +27,24 @@ import { c as _c } from "react/compiler-runtime";
import { identity } from "shared-runtime";
function Component(props) {
const $ = _c(4);
let x;
const $ = _c(2);
let t0;
if ($[0] !== props.value) {
const [t0] = props.value;
x = t0;
let x;
const [t1] = props.value;
x = t1;
t0 = { x };
const foo = () => {
x = identity(props.value[0]);
};
foo();
$[0] = props.value;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
const t0 = x;
let t1;
if ($[2] !== t0) {
t1 = { x: t0 };
$[2] = t0;
$[3] = t1;
} else {
t1 = $[3];
}
return t1;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md
+10 -25
View File
@@ -36,39 +36,24 @@ export const FIXTURE_ENTRYPOINT = {
```javascript
import { c as _c } from "react/compiler-runtime";
function useFoo(props) {
const $ = _c(9);
let x = null;
let y = null;
let z;
let myList;
const $ = _c(2);
let t0;
if ($[0] !== props) {
myList = [];
const myList = [];
let z;
let y = null;
let x = null;
if (props.doDestructure) {
({ x, y, z } = props);
myList.push(z);
}
$[0] = props;
$[1] = myList;
$[2] = x;
$[3] = y;
$[4] = z;
} else {
myList = $[1];
x = $[2];
y = $[3];
z = $[4];
}
let t0;
if ($[5] !== x || $[6] !== y || $[7] !== myList) {
t0 = { x, y, myList };
$[5] = x;
$[6] = y;
$[7] = myList;
$[8] = t0;
$[0] = props;
$[1] = t0;
} else {
t0 = $[8];
t0 = $[1];
}
return t0;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md
+10 -17
View File
@@ -28,31 +28,24 @@ import { c as _c } from "react/compiler-runtime";
import { identity } from "shared-runtime";
function Component(props) {
const $ = _c(4);
let x;
const $ = _c(2);
let t0;
if ($[0] !== props) {
const { x: t0 } = props;
x = t0;
let x;
const { x: t1 } = props;
x = t1;
t0 = { x };
const foo = () => {
x = identity(props.x);
};
foo();
$[0] = props;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
const t0 = x;
let t1;
if ($[2] !== t0) {
t1 = { x: t0 };
$[2] = t0;
$[3] = t1;
} else {
t1 = $[3];
}
return t1;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md
+10 -17
View File
@@ -27,31 +27,24 @@ import { c as _c } from "react/compiler-runtime";
import { identity } from "shared-runtime";
function Component(props) {
const $ = _c(4);
let x;
const $ = _c(2);
let t0;
if ($[0] !== props) {
const { x: t0 } = props;
x = t0;
let x;
const { x: t1 } = props;
x = t1;
t0 = { x };
const foo = () => {
x = identity(props.x);
};
foo();
$[0] = props;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
const t0 = x;
let t1;
if ($[2] !== t0) {
t1 = { x: t0 };
$[2] = t0;
$[3] = t1;
} else {
t1 = $[3];
}
return t1;
return t0;
}
export const FIXTURE_ENTRYPOINT = {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md
+5 -8
View File
@@ -35,20 +35,17 @@ export const FIXTURE_ENTRYPOINT = {
import { c as _c } from "react/compiler-runtime";
function foo(a, b, c) {
const $ = _c(5);
let d;
let g;
let n;
let o;
const [t0, t1] = a;
d = t0;
const d = t0;
const [t2] = t1;
const { e: t3 } = t2;
({ f: g } = t3);
const { f: g } = t3;
const { l: t4, o: t5 } = b;
const { m: t6 } = t4;
const [t7] = t6;
[n] = t7;
o = t5;
const [n] = t7;
const o = t5;
let t8;
if ($[0] !== d || $[1] !== g || $[2] !== n || $[3] !== o) {
t8 = { d, g, n, o };
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md
+26 -38
View File
@@ -30,49 +30,37 @@ function Component(props) {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(8);
const $ = _c(5);
const post = useFragment(graphql`...`, props.post);
let media;
let onClick;
if ($[0] !== post) {
const allUrls = [];
const { media: t0, comments, urls } = post;
media = t0;
let t1;
if ($[3] !== comments.length) {
t1 = (e) => {
if (!comments.length) {
return;
}
console.log(comments.length);
};
$[3] = comments.length;
$[4] = t1;
} else {
t1 = $[4];
}
onClick = t1;
allUrls.push(...urls);
$[0] = post;
$[1] = media;
$[2] = onClick;
} else {
media = $[1];
onClick = $[2];
}
const { media, comments, urls } = post;
let t0;
if ($[5] !== media || $[6] !== onClick) {
t0 = <Media media={media} onClick={onClick} />;
$[5] = media;
$[6] = onClick;
$[7] = t0;
if ($[0] !== comments.length) {
t0 = (e) => {
if (!comments.length) {
return;
}
console.log(comments.length);
};
$[0] = comments.length;
$[1] = t0;
} else {
t0 = $[7];
t0 = $[1];
}
return t0;
const onClick = t0;
let t1;
if ($[2] !== media || $[3] !== onClick) {
t1 = <Media media={media} onClick={onClick} />;
$[2] = media;
$[3] = onClick;
$[4] = t1;
} else {
t1 = $[4];
}
const allUrls = [];
allUrls.push(...urls);
return t1;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md
+10 -16
View File
@@ -17,26 +17,20 @@ function Component(props) {
```javascript
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(5);
let x;
const $ = _c(2);
let t0;
if ($[0] !== props.value) {
x = [];
const x = [];
const { length: y } = x;
t0 = [x, y];
foo(y);
x.push(props.value);
$[0] = props.value;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
}
const { length: y } = x;
foo(y);
let t0;
if ($[2] !== x || $[3] !== y) {
t0 = [x, y];
$[2] = x;
$[3] = y;
$[4] = t0;
} else {
t0 = $[4];
t0 = $[1];
}
return t0;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md
+1 -1
View File
@@ -28,8 +28,8 @@ function Component(props) {
const $ = _c(2);
let ret;
if ($[0] !== props) {
const x = [1, 2, 3];
ret = [];
const x = [1, 2, 3];
do {
const item = x.pop();
ret.push(item * 2);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md
+1 -1
View File
@@ -32,8 +32,8 @@ function Component() {
const $ = _c(1);
let ret;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const x = [0, 1, 2, 3];
ret = [];
const x = [0, 1, 2, 3];
do {
const item = x.pop();
if (item === 0) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md
+6 -5
View File
@@ -19,16 +19,17 @@ function Component(props) {
import { c as _c } from "react/compiler-runtime";
function Component(props) {
const $ = _c(1);
let x;
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
x = [1, 2, 3];
const x = [1, 2, 3];
t0 = x;
mutate(x);
$[0] = x;
$[0] = t0;
} else {
x = $[0];
t0 = $[0];
}
return x;
return t0;
}
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md
+1 -1
View File
@@ -28,8 +28,8 @@ function Component() {
const $ = _c(1);
let ret;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
const x = [1, 2, 3];
ret = [];
const x = [1, 2, 3];
do {
const item = x.pop();
ret.push(item * 2);
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md
+6 -5
View File
@@ -52,8 +52,9 @@ import { ValidateMemoization } from "shared-runtime";
// @disableNonForgetInSprout
function Component(t0) {
const $ = _c(25);
const { a, b, c } = t0;
let y;
const { a, b, c } = t0;
let x;
if ($[0] !== a || $[1] !== b || $[2] !== c) {
x = [];
@@ -73,11 +74,11 @@ function Component(t0) {
$[0] = a;
$[1] = b;
$[2] = c;
$[3] = y;
$[4] = x;
$[3] = x;
$[4] = y;
} else {
y = $[3];
x = $[4];
x = $[3];
y = $[4];
}
let t1;
if ($[7] !== y) {
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md
+2 -2
View File
@@ -36,7 +36,6 @@ function Component(props) {
t0 = $[1];
}
const array = t0;
const x = makeObject_Primitives();
let t1;
if ($[2] !== array) {
t1 = <div>{array}</div>;
@@ -46,7 +45,6 @@ function Component(props) {
t1 = $[3];
}
const element = t1;
console.log(x);
let t2;
if ($[4] !== element) {
t2 = <div>{element}</div>;
@@ -55,6 +53,8 @@ function Component(props) {
} else {
t2 = $[5];
}
const x = makeObject_Primitives();
console.log(x);
return t2;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md
+1 -2
View File
@@ -32,7 +32,6 @@ import { Stringify } from "shared-runtime";
function Component(props) {
const $ = _c(7);
let x;
let t0;
if ($[0] !== props.count) {
t0 = [props.count];
@@ -42,7 +41,6 @@ function Component(props) {
t0 = $[1];
}
const array = t0;
x = array;
let t1;
if ($[2] !== array) {
t1 = <div>{array}</div>;
@@ -52,6 +50,7 @@ function Component(props) {
t1 = $[3];
}
const element = t1;
const x = array;
let t2;
if ($[4] !== element || $[5] !== x) {
t2 = (
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md
+5 -5
View File
@@ -29,16 +29,16 @@ import * as React from "react";
function Component(props) {
const $ = _c(2);
let t0;
let x;
if ($[0] !== props.value) {
x = [];
const x = [];
t0 = x;
x.push(props.value);
$[0] = props.value;
$[1] = x;
$[1] = t0;
} else {
x = $[1];
t0 = $[1];
}
t0 = x;
const x_0 = t0;
return x_0;
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md
+1 -1
View File
@@ -20,7 +20,7 @@ function Foo() {
## Error
```
Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:24(18:26)
Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:21(16:23)
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md
+3 -4
View File
@@ -14,11 +14,10 @@ function Component(props) {
## Error
```
1 | function Component(props) {
2 | let x = makeObject();
> 3 | x.foo(([[x]] = makeObject()));
| ^^^^^ Invariant: Const declaration cannot be referenced as an expression (3:3)
4 | return x;
3 | x.foo(([[x]] = makeObject()));
> 4 | return x;
| ^ Invariant: [hoisting] Expected value for identifier to be initialized. x$26 (4:4)
5 | }
6 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
+1 -1
View File
@@ -18,7 +18,7 @@ function Component(props) {
3 | const ref = useRef(null);
4 | ref.current = props.value;
> 5 | return ref.current;
| ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24:TObject<BuiltInRefValue> (5:5)
| ^^^^^^^^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef). Cannot access ref value at freeze $24[7:11]:TObject<BuiltInRefValue> (5:5)
6 | }
7 |
```
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md
+8 -8
View File
@@ -19,15 +19,15 @@ function Component(props) {
## Error
```
4 | const aliased = setX;
5 |
> 6 | setX(1);
| ^^^^ InvalidReact: This is an unconditional set state during render, which will trigger an infinite loop. (https://react.dev/reference/react/useState) (6:6)
5 |
6 | setX(1);
> 7 | aliased(2);
| ^^^^^^^ InvalidReact: This is an unconditional set state during render, which will trigger an infinite loop. (https://react.dev/reference/react/useState) (7:7)
InvalidReact: This is an unconditional set state during render, which will trigger an infinite loop. (https://react.dev/reference/react/useState) (7:7)
7 | aliased(2);
8 |
9 | return x;
InvalidReact: This is an unconditional set state during render, which will trigger an infinite loop. (https://react.dev/reference/react/useState) (6:6)
8 |
9 | return x;
10 | }
```

Some files were not shown because too many files have changed in this diff Show More