diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 1fa755499e..49b65316c3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -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); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts new file mode 100644 index 0000000000..6a238e7812 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts @@ -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; +type Node = { + instruction: Instruction | null; + dependencies: Array; +}; + +function reorderBlock( + block: BasicBlock, + globalDependencies: Dependencies +): void { + const dependencies: Dependencies = new Map(); + const locals = new Map(); + 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 = []; + + 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; + } + } +} diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts index c02e813255..eb4e783851 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts @@ -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( array: Array, predicate: (item: T) => boolean diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md index e51cd8d5fa..a079aab071 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md @@ -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]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md index 2b9efc0f4a..4060bb63d3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md index f76e98b6c3..174f449d58 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md index f320d63071..47e7f6dd4f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md index 100567a338..3ab826d242 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md index 44813be9f1..f755381f5f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md @@ -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 = () => { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md index 27e2d3b3a4..4db39eeddb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md @@ -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 = () => { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md index 334523b3a0..caeb3fe2e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-access-in-unused-callback-nested.expect.md @@ -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 = ; $[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 = ; - $[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) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md index c2ba733636..2b4b2973c4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-mutate-after-capture.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md index 2d06f084ff..dfa998c3ea 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-join.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md index ee209592dc..80506eb82a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-mutable-array-non-mutating-lambda-mutated-result.expect.md @@ -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]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md index b5a581ce14..745856f2ab 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md index e7201a01eb..346db36a73 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-property-call.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md index 5173d8a6f8..a85f580545 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-push-effect.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md index 7ea9a06929..8bb482f835 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations-complex-lvalue-array.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md index 746fed4056..36e35078fb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/assignment-variations.expect.md @@ -22,9 +22,7 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function f() { - let x; - - x = 3 >>> 1; + const x = 3 >>> 1; return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md index 6996c2cac7..0abe8f0df6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/await-side-effecting-promise.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md index c10b199236..70b38a379c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-import.expect.md @@ -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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md index 40e68e8aca..bf34109293 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-kitchensink-import.expect.md @@ -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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md index ad9a15f74c..3c8f9f49db 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/babel-existing-react-namespace-import.expect.md @@ -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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-reactivity-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-reactivity-value-block.expect.md index 88e4ee8917..6f6cc1ed48 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-reactivity-value-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-reactivity-value-block.expect.md @@ -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) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md index b0bd96c2bf..9e5a7a75aa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md @@ -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 =
; + 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 =
; + $[2] = t2; + } else { + t2 = $[2]; + } + foo(b); + foo(a, b); + return t2; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md index 9b73080c76..a4d5f27737 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capitalized-function-allowlist.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md index 8373795ca1..0a4ae3440a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-indirect-mutate-alias.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md index c9c066fef5..510cb838fb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture_mutate-across-fns.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md index b201c8ec5b..bd53012d7c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md index e4eac82064..d4f83b080d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md index d8f889aaf4..889c3afc46 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md index a912853a91..619e942a37 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md index d3fd9e16ea..2a0f8050fd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md index 13dcc589a6..277d93895d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md index 4b8a5857f8..91c611107b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md index cb6d0d6e6a..fe8c9f5ffd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md index 7a1405611a..d4270e7623 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md index b96fcb590c..18ccc54b4e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-computed-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md index e5e1f88688..dd289113bb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md index 4f3ec26a55..bdf4960e05 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md index c285e3cfce..6e0b8ecece 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md index e9bd3e4e0c..3654a64d47 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-computed-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md index 5c19fc6dcb..3a17980746 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md index c4cf99c1e2..09521f2cd0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-receiver-mutate.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md index 146c6292ca..0a9ec99824 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-2.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md index 7d0edb1a3b..3b9acc7c2c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate-nested.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md index 5b48ec9070..dd60c47bfa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md index b0656b488a..74f400a721 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias-iife.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md index 964f2cf953..ff628aacb8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-simple-alias.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md index 5c0be290a6..ffc27e48eb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load-3-iife.expect.md @@ -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; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md index 8833331a7f..268ac95c28 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-alias-computed-load.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md index 6055ca42c9..9c7cf002fb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-conditional-capture-mutate.expect.md @@ -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 () { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md index 143ffa5bf9..95de2fe918 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-decl.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md index 5d237dfe16..7c7a237c0d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-renamed-ref.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md index 39f04f140d..208b90d448 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-within-block.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md index 8795160cbf..9936cc36d6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-reference-changes-type.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md index 5cd4f52387..945cfed86f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-assignment-expressions.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md index ba9e39e691..746da2f172 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md index 3ea5625688..f02bc51df2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-call-evaluation-order.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md index f08c01f728..7e0ff8702a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/computed-store-alias.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md index b993630ce9..5b88a40644 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md @@ -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 = ; $[0] = t0; } else { t0 = $[0]; } - const handler = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md index 5160f9fecb..a2bad67e66 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-break-labeled.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md index 1cc33444dc..c53e13722d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-early-return.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md index cd2fbc1011..8a81cfff6d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md @@ -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); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md index b3a9c3ce1a..52ea0bcdfd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-set-state-in-render.expect.md @@ -35,8 +35,8 @@ function Component(props) { setX(1); }; if (props.cond) { - setX(2); foo(); + setX(2); } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md index 4093b1a178..477e41a8c2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/consecutive-use-memo.expect.md @@ -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]); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md index c6930a2bc7..62d52f7db1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/console-readonly.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md index fc38ffb74c..e8f71270cb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/const-propagation-phi-nodes.expect.md @@ -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) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md index 4c2db49c80..f8f44b7c3b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-computed.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md index 7be6b15a88..8ea2190480 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md @@ -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 = ; $[0] = t0; } else { t0 = $[0]; } - const onEvent = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md index bfa6c83071..1ab2258ed4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md @@ -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 =
; + 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 =
; + $[2] = t2; + } else { + t2 = $[2]; + } + new Foo(b); + new Foo(a, b); + return t2; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md index 63eb68adce..c69c2a8af0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-as-jsx-element-tag.expect.md @@ -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 = ; - $[1] = props; - $[2] = t0; + let t1; + if ($[2] !== props) { + t1 = ; + $[2] = props; + $[3] = t1; } else { - t0 = $[2]; + t1 = $[3]; } - return t0; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md index 2d9b097c2a..79e34b57a2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/createElement-freeze.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md index 6eb6dacd5f..b5d61ad2bf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/debugger-memoized.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md index 4fb08320ff..afad744a70 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-closure.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md index 4c6faaaad2..b9fc15ea0a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md @@ -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 = ; $[0] = t0; } else { t0 = $[0]; } - const y = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md index b7b201d4c5..76e48a5828 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-computed-property.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md index 764a26f07b..962c2ff125 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/delete-property.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md index 8f3e06a4d5..43a52333ba 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies-outputs.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md index 4707dddce7..93c8305c64 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dependencies.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md index 937bb7c2b6..d1484c31e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-assignment-to-context-var.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md index e79bf7f171..81f24fd3a7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-array-declaration-to-context-var.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md index f84964e3f9..205692d648 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-in-branch-ssa.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md index 89296533fa..76e84d40f4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-assignment-to-context-var.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md index 50c9ffa766..76ca64df15 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructure-object-declaration-to-context-var.expect.md @@ -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 = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md index 542e74f96d..86e614a056 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-assignment.expect.md @@ -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 }; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md index 665b4a65fd..3fb4294d46 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md @@ -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 = ; - $[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 = ; + $[2] = media; + $[3] = onClick; + $[4] = t1; + } else { + t1 = $[4]; + } + const allUrls = []; + allUrls.push(...urls); + return t1; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md index 47d95c7287..e110924305 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-property-inference.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md index cf9e489c8f..573435f093 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-compound-test.expect.md @@ -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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md index c40110f44b..22ac1f7683 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-continue.expect.md @@ -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) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md index 1e79a239dd..67ff401433 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-early-unconditional-break.expect.md @@ -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; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md index 9bafc6d8ef..a9a2f4ab65 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/do-while-simple.expect.md @@ -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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md index ad843e230f..9d0cd30b27 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md @@ -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) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md index ccbd69e840..a2d691624b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-store-const-used-later.expect.md @@ -36,7 +36,6 @@ function Component(props) { t0 = $[1]; } const array = t0; - const x = makeObject_Primitives(); let t1; if ($[2] !== array) { t1 =
{array}
; @@ -46,7 +45,6 @@ function Component(props) { t1 = $[3]; } const element = t1; - console.log(x); let t2; if ($[4] !== element) { t2 =
{element}
; @@ -55,6 +53,8 @@ function Component(props) { } else { t2 = $[5]; } + const x = makeObject_Primitives(); + console.log(x); return t2; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md index 7325cd29d3..a0b268eaa8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-overlapping-scopes-with-intermediate-reassignment.expect.md @@ -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 =
{array}
; @@ -52,6 +50,7 @@ function Component(props) { t1 = $[3]; } const element = t1; + const x = array; let t2; if ($[4] !== element || $[5] !== x) { t2 = ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md index fd71bf0a50..14127bbe99 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/drop-methodcall-usememo.expect.md @@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md index ca77829e2f..e01414d8d6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md @@ -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) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md index cb2ce1a20d..d7022e1203 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.call-args-destructuring-asignment-complex.expect.md @@ -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 | ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md index 8e35021703..6272dc8523 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md @@ -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 (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 (5:5) 6 | } 7 | ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md index b2b25dbfa4..b4e26b220a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md @@ -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 | } ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md index 665fc7053b..db21068014 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutate-hook-argument.expect.md @@ -14,9 +14,9 @@ function useHook(a, b) { ``` 1 | function useHook(a, b) { -> 2 | b.test = 1; - | ^ InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (2:2) - 3 | a.test = 2; + 2 | b.test = 1; +> 3 | a.test = 2; + | ^ InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (3:3) 4 | } 5 | ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md index 4619cd27cb..08daeee4c7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.reassignment-to-global.expect.md @@ -14,11 +14,10 @@ function Component() { ## Error ``` - 1 | function Component() { 2 | // Cannot assign to globals -> 3 | someUnknownGlobal = true; - | ^^^^^^^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (3:3) - 4 | moduleLocal = true; + 3 | someUnknownGlobal = true; +> 4 | moduleLocal = true; + | ^^^^^^^^^^^ InvalidReact: Unexpected reassignment of a variable which was defined outside of the component. Components and hooks should be pure and side-effect free, but variable reassignment is a form of side-effect. If this variable is used in rendering, use useState instead. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) (4:4) 5 | } 6 | ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md index 7cd2acc9af..915195c3e4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md @@ -21,7 +21,7 @@ function Foo(props, ref) { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 1:21(16:23) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:21(16:23) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-iife-return-modified-later-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-iife-return-modified-later-logical.expect.md index c14ae737e5..534f390693 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-iife-return-modified-later-logical.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-iife-return-modified-later-logical.expect.md @@ -23,7 +23,7 @@ export const FIXTURE_ENTRYPOINT = { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:15(3:21) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:15(3:22) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-label.expect.md index 62295b9a0c..e2150e883a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-label.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-label.expect.md @@ -34,7 +34,7 @@ export const FIXTURE_ENTRYPOINT = { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 3:14(4:18) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 3:14(5:19) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md index 95cdbe5aee..e443462fae 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md @@ -30,7 +30,7 @@ export const FIXTURE_ENTRYPOINT = { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 4:19(5:22) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 3:16(4:20) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md index 78951bf6c0..878820e728 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-repro-declaration-for-all-identifiers.expect.md @@ -19,7 +19,7 @@ function Foo() { 3 | // NOTE: this fixture previously failed during LeaveSSA; 4 | // double-check this code when supporting value blocks in try/catch > 5 | for (let i = 0; i < 2; i++) {} - | ^ Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement (5:5) + | ^ Invariant: [hoisting] Expected value for identifier to be initialized. $8 (5:5) 6 | } catch {} 7 | } 8 | diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md index 20777083e6..927e623ce1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md @@ -45,7 +45,7 @@ export const FIXTURE_ENTRYPOINT = { > 10 | ref.current.inner = event.target.value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 11 | }); - | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value may be mutated later, which could cause the value to change unexpectedly (7:11) + | ^^^^ Invariant: Unexpected mismatch between StartMemoize and FinishMemoize. Encountered StartMemoize id=undefined followed by FinishMemoize id=0 (7:11) 12 | 13 | // The ref is modified later, extending its range and preventing memoization of onChange 14 | const reset = () => { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md index 568ea337fe..f1becd218e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md @@ -42,7 +42,7 @@ export const FIXTURE_ENTRYPOINT = { > 10 | ref.current.inner = event.target.value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ > 11 | }); - | ^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value may be mutated later, which could cause the value to change unexpectedly (7:11) + | ^^^^ Invariant: Unexpected mismatch between StartMemoize and FinishMemoize. Encountered StartMemoize id=undefined followed by FinishMemoize id=0 (7:11) 12 | 13 | // The ref is modified later, extending its range and preventing memoization of onChange 14 | ref.current.inner = null; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md index f6f05a3022..0570fcabb6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-logical.expect.md @@ -26,14 +26,14 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(6); let t0; - if ($[0] !== props.a) { - t0 = [props.a]; - $[0] = props.a; + if ($[0] !== props.c) { + t0 = [props.c]; + $[0] = props.c; $[1] = t0; } else { t0 = $[1]; } - const a = t0; + const c = t0; let t1; if ($[2] !== props.b) { t1 = [props.b]; @@ -44,14 +44,14 @@ function Component(props) { } const b = t1; let t2; - if ($[4] !== props.c) { - t2 = [props.c]; - $[4] = props.c; + if ($[4] !== props.a) { + t2 = [props.a]; + $[4] = props.a; $[5] = t2; } else { t2 = $[5]; } - const c = t2; + const a = t2; return (a && b) || c; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md index 50b96072fd..d43e24e6bf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-dependency.expect.md @@ -31,29 +31,26 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(5); + const $ = _c(3); let t0; - if ($[0] !== props.a) { - t0 = [props.a]; - $[0] = props.a; + let t1; + if ($[0] !== props) { + const b = []; + + t1 = b; + t0 = props; + b.push(props.b); + $[0] = props; $[1] = t0; + $[2] = t1; } else { t0 = $[1]; + t1 = $[2]; } - const a = t0; - let b; - if ($[2] !== a || $[3] !== props.b) { - b = []; - const c = {}; - c.a = a; - b.push(props.b); - $[2] = a; - $[3] = props.b; - $[4] = b; - } else { - b = $[4]; - } - return b; + const c = {}; + const a = [t0.a]; + c.a = a; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md index 99b208b9e0..ec285afb1a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md @@ -40,38 +40,27 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(7); + const $ = _c(3); let t0; - if ($[0] !== props.a) { - t0 = [props.a]; - $[0] = props.a; + let t1; + if ($[0] !== props) { + const c = []; + + t1 = c; + t0 = props; + c.push(props.b); + $[0] = props; $[1] = t0; + $[2] = t1; } else { t0 = $[1]; + t1 = $[2]; } - const a = t0; - let t1; - if ($[2] !== a) { - t1 = [a]; - $[2] = a; - $[3] = t1; - } else { - t1 = $[3]; - } - const b = t1; - let c; - if ($[4] !== b || $[5] !== props.b) { - c = []; - const d = {}; - d.b = b; - c.push(props.b); - $[4] = b; - $[5] = props.b; - $[6] = c; - } else { - c = $[6]; - } - return c; + const d = {}; + const a = [t0.a]; + const b = [a]; + d.b = b; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md index 3132362670..d7fe3d954f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-primitive-dependency.expect.md @@ -34,21 +34,25 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(3); + let t0; + let t1; + if ($[0] !== props) { + const b = []; - const a = props.a + props.b; - let b; - if ($[0] !== a || $[1] !== props.c) { - b = []; - const c = {}; - c.a = a; + t1 = b; + t0 = props; b.push(props.c); - $[0] = a; - $[1] = props.c; - $[2] = b; + $[0] = props; + $[1] = t0; + $[2] = t1; } else { - b = $[2]; + t0 = $[1]; + t1 = $[2]; } - return b; + const c = {}; + const a = t0.a + props.b; + c.a = a; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md index 0b90b6c625..004453ccee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/existing-variables-with-c-name.expect.md @@ -34,6 +34,7 @@ import { ValidateMemoization } from "shared-runtime"; function Component(props) { const $ = _c2(7); + let t0; const [state] = useState(0); const c = state; @@ -41,7 +42,6 @@ function Component(props) { const __c = _c; const c1 = __c; const $c = c1; - let t0; let t1; if ($[0] !== $c) { t1 = [$c]; @@ -51,7 +51,6 @@ function Component(props) { t1 = $[1]; } t0 = t1; - const array = t0; let t2; if ($[2] !== state) { t2 = [state]; @@ -60,6 +59,7 @@ function Component(props) { } else { t2 = $[3]; } + const array = t0; let t3; if ($[4] !== t2 || $[5] !== array) { t3 = ; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md index a080b44870..ef62be4082 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-no-whitespace-btw-text-and-param.expect.md @@ -29,15 +29,16 @@ import fbt from "fbt"; const _ = fbt; function Component(t0) { const $ = _c(2); - const { value } = t0; let t1; - if ($[0] !== value) { + if ($[0] !== t0) { + const { value } = t0; + t1 = fbt._( "Before text{paramName}After text", [fbt._param("paramName", value)], { hk: "aKEGX" } ); - $[0] = value; + $[0] = t0; $[1] = t1; } else { t1 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md index 995f9c6ffc..fee04bb8f3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace.expect.md @@ -30,9 +30,10 @@ import fbt from "fbt"; const _ = fbt; function Component(t0) { const $ = _c(2); - const { value } = t0; let t1; - if ($[0] !== value) { + if ($[0] !== t0) { + const { value } = t0; + t1 = fbt._( "Before text {paramName}", [ @@ -44,7 +45,7 @@ function Component(t0) { ], { hk: "3z5SVE" } ); - $[0] = value; + $[0] = t0; $[1] = t1; } else { t1 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md index 4d29c6650c..d3828ce88c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-single-space-btw-param-and-text.expect.md @@ -29,15 +29,16 @@ import fbt from "fbt"; const _ = fbt; function Component(t0) { const $ = _c(2); - const { value } = t0; let t1; - if ($[0] !== value) { + if ($[0] !== t0) { + const { value } = t0; + t1 = fbt._( "Before text {paramName} after text", [fbt._param("paramName", value)], { hk: "26pxNm" } ); - $[0] = value; + $[0] = t0; $[1] = t1; } else { t1 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md index bd62994eaa..5414d6b828 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-around-param-value.expect.md @@ -29,15 +29,16 @@ import fbt from "fbt"; const _ = fbt; function Component(t0) { const $ = _c(2); - const { value } = t0; let t1; - if ($[0] !== value) { + if ($[0] !== t0) { + const { value } = t0; + t1 = fbt._( "Before text {paramName} after text", [fbt._param("paramName", value)], { hk: "26pxNm" } ); - $[0] = value; + $[0] = t0; $[1] = t1; } else { t1 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md index 16aecf4580..d16f9feb3e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-whitespace-within-text.expect.md @@ -31,15 +31,16 @@ import fbt from "fbt"; const _ = fbt; function Component(t0) { const $ = _c(2); - const { value } = t0; let t1; - if ($[0] !== value) { + if ($[0] !== t0) { + const { value } = t0; + t1 = fbt._( "Before text {paramName} after text more text and more and more and more and more and more and more and more and more and blah blah blah blah", [fbt._param("paramName", value)], { hk: "24ZPpO" } ); - $[0] = value; + $[0] = t0; $[1] = t1; } else { t1 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md index fd0c5e72e3..0e605db9a4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md @@ -29,10 +29,11 @@ import { c as _c } from "react/compiler-runtime"; import fbt from "fbt"; function Component(t0) { - const $ = _c(4); - const { name, data, icon } = t0; + const $ = _c(2); let t1; - if ($[0] !== name || $[1] !== icon || $[2] !== data) { + if ($[0] !== t0) { + const { name, data, icon } = t0; + t1 = ( {fbt._( @@ -61,12 +62,10 @@ function Component(t0) { )} ); - $[0] = name; - $[1] = icon; - $[2] = data; - $[3] = t1; + $[0] = t0; + $[1] = t1; } else { - t1 = $[3]; + t1 = $[1]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md index bb85e2c0be..5aa8ecb13e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md @@ -42,10 +42,10 @@ import { c as _c } from "react/compiler-runtime"; import { fbt } from "fbt"; function Component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const buttonLabel = () => { if (!someCondition) { return fbt._("Purchase as a gift", null, { hk: "1gHj4g" }); } else { @@ -66,23 +66,17 @@ function Component() { } } }; - $[0] = t0; - } else { - t0 = $[0]; - } - const buttonLabel = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + + t0 = ( ; $[2] = t1; } else { t1 = $[2]; } let t2; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t2 = ; - $[3] = t2; - } else { - t2 = $[3]; - } - let t3; - if ($[4] !== t1) { - t3 = ( + if ($[3] !== t0) { + t2 = ( <> + {t0} {t1} - {t2} ); - $[4] = t1; - $[5] = t3; + $[3] = t0; + $[4] = t2; } else { - t3 = $[5]; + t2 = $[4]; } - return t3; + return t2; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md index 887479c01e..b8fe226061 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-computed.expect.md @@ -23,36 +23,20 @@ function foo(a, b, c) { ```javascript import { c as _c } from "react/compiler-runtime"; function foo(a, b, c) { - const $ = _c(8); + const $ = _c(3); let t0; - if ($[0] !== a) { - t0 = makeObject(a); + if ($[0] !== a || $[1] !== b) { + const x = makeObject(a); + const y = makeObject(a); + + t0 = x[y.method](b); $[0] = a; - $[1] = t0; + $[1] = b; + $[2] = t0; } else { - t0 = $[1]; + t0 = $[2]; } - const x = t0; - let t1; - if ($[2] !== a) { - t1 = makeObject(a); - $[2] = a; - $[3] = t1; - } else { - t1 = $[3]; - } - const y = t1; - let t2; - if ($[4] !== x || $[5] !== y.method || $[6] !== b) { - t2 = x[y.method](b); - $[4] = x; - $[5] = y.method; - $[6] = b; - $[7] = t2; - } else { - t2 = $[7]; - } - const z = t2; + const z = t0; return z; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md index c32777534b..058fb80228 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call-fn-call.expect.md @@ -20,29 +20,20 @@ function foo(a, b, c) { ```javascript import { c as _c } from "react/compiler-runtime"; function foo(a, b, c) { - const $ = _c(6); + const $ = _c(3); let t0; - if ($[0] !== a) { - t0 = makeObject(a); - $[0] = a; - $[1] = t0; - } else { - t0 = $[1]; - } - const x = t0; + if ($[0] !== a || $[1] !== b) { + const x = makeObject(a); - const method = x.method; - let t1; - if ($[2] !== method || $[3] !== x || $[4] !== b) { - t1 = method.call(x, b); - $[2] = method; - $[3] = x; - $[4] = b; - $[5] = t1; + const method = x.method; + t0 = method.call(x, b); + $[0] = a; + $[1] = b; + $[2] = t0; } else { - t1 = $[5]; + t0 = $[2]; } - const y = t1; + const y = t0; return y; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md index 76e4c1defa..ef945be19b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/method-call.expect.md @@ -29,26 +29,19 @@ import { c as _c } from "react/compiler-runtime"; import { addOne, shallowCopy } from "shared-runtime"; function foo(a, b, c) { - const $ = _c(5); + const $ = _c(3); let t0; - if ($[0] !== a) { - t0 = shallowCopy(a); + if ($[0] !== a || $[1] !== b) { + const x = shallowCopy(a); + + t0 = x.foo(b); $[0] = a; - $[1] = t0; + $[1] = b; + $[2] = t0; } else { - t0 = $[1]; + t0 = $[2]; } - const x = t0; - let t1; - if ($[2] !== x || $[3] !== b) { - t1 = x.foo(b); - $[2] = x; - $[3] = b; - $[4] = t1; - } else { - t1 = $[4]; - } - const y = t1; + const y = t0; return y; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md index 116ac02f1e..afcc7bdf99 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-calls-to-hoisted-callback-from-other-callback.expect.md @@ -40,21 +40,19 @@ import { useState } from "react"; function Component(props) { const $ = _c(1); const [_state, setState] = useState(); + + const onClick = (value) => { + setState(value); + }; + const b = () => ( + <> +
onClick(true)}>a
+
onClick(false)}>b
+ + ); + const a = () => b(); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - const a = () => b(); - - const b = () => ( - <> -
onClick(true)}>a
-
onClick(false)}>b
- - ); - - const onClick = (value) => { - setState(value); - }; - t0 =
{a()}
; $[0] = t0; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md index 62501bfb6f..7849ecab49 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-liverange-loop.expect.md @@ -41,10 +41,10 @@ function mutate() {} function cond() {} function Component(props) { - const a = {}; - const b = {}; - const c = {}; const d = {}; + const c = {}; + const b = {}; + const a = {}; while (true) { mutate(a, b); if (cond(a)) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md index 61029f602f..578ecd95d6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutate-outer-scope-within-value-block.expect.md @@ -67,20 +67,26 @@ import { CONST_TRUE, identity, shallowCopy } from "shared-runtime"; * should be merged. */ function useFoo(t0) { - const $ = _c(2); - const { input } = t0; + const $ = _c(3); let t1; - if ($[0] !== input) { - const arr = shallowCopy(input); - - const cond = identity(false); - t1 = cond ? { val: CONST_TRUE } : mutate(arr); - $[0] = input; - $[1] = t1; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t1 = identity(false); + $[0] = t1; } else { - t1 = $[1]; + t1 = $[0]; } - return t1; + const cond = t1; + const { input } = t0; + let t2; + if ($[1] !== input) { + const arr = shallowCopy(input); + t2 = cond ? { val: CONST_TRUE } : mutate(arr); + $[1] = input; + $[2] = t2; + } else { + t2 = $[2]; + } + return t2; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md index d1f8165d61..d29bebd1c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md @@ -29,19 +29,20 @@ import { identity, mutate, mutateAndReturnNewValue } from "shared-runtime"; function Component(props) { const $ = _c(2); - let element; + let t0; if ($[0] !== props.value) { const key = {}; - element =
{props.value}
; + const element =
{props.value}
; + t0 = element; mutate(key); $[0] = props.value; - $[1] = element; + $[1] = t0; } else { - element = $[1]; + t0 = $[1]; } - return element; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md index 79370f8713..9a2884cdf0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md @@ -51,24 +51,24 @@ import { mutate } from "shared-runtime"; * values in a subsequent render. */ function useFoo(t0) { - const $ = _c(3); + const $ = _c(2); const { a, b } = t0; - let z; - if ($[0] !== a || $[1] !== b) { - const x = { a }; + let t1; + if ($[0] !== b) { const y = [b]; - mutate(x); - z = [mutate(y)]; + const z = [mutate(y)]; + t1 = z; mutate(y); - $[0] = a; - $[1] = b; - $[2] = z; + $[0] = b; + $[1] = t1; } else { - z = $[2]; + t1 = $[1]; } - return z; + const x = { a }; + mutate(x); + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md index 0092a99efb..87fdc19e94 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx-and-break.expect.md @@ -50,9 +50,10 @@ import { function useFoo(t0) { const $ = _c(3); - const { data } = t0; - let obj; + let myDiv = null; + let obj; + const { data } = t0; bb0: if (data.cond) { if ($[0] !== data.cond1) { obj = makeObject_Primitives(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md index 18d892ae6f..bc84a3cef5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-jsx.expect.md @@ -96,8 +96,9 @@ import { function useFoo(t0) { const $ = _c(3); const { data } = t0; - let obj; + let myDiv = null; + let obj; if (data.cond) { if ($[0] !== data.cond1) { obj = makeObject_Primitives(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md index b962759ef3..4dccaf3a9e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md @@ -33,17 +33,18 @@ import { identity, mutate } from "shared-runtime"; function Foo(t0) { const $ = _c(2); const { cond } = t0; - let x; + let t1; if ($[0] !== cond) { - x = identity(identity(cond)) ? { a: 2 } : { b: 2 }; + const x = identity(identity(cond)) ? { a: 2 } : { b: 2 }; + t1 = x; mutate(x); $[0] = cond; - $[1] = x; + $[1] = t1; } else { - x = $[1]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md index 600ff19f0f..9865f428e1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-hook-call.expect.md @@ -18,8 +18,9 @@ function component(props) { function component(props) { const x = []; const y = []; - y.push(useHook(props.foo)); + x.push(y); + y.push(useHook(props.foo)); return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md index 6d492ba1b7..68192123da 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-does-not-mutate-class.expect.md @@ -28,42 +28,35 @@ import { identity } from "shared-runtime"; class Foo {} function Component(t0) { - const $ = _c(6); + const $ = _c(5); const { val } = t0; let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t1 = identity(Foo); - $[0] = t1; + if ($[0] !== val) { + t1 = [val]; + $[0] = val; + $[1] = t1; } else { - t1 = $[0]; + t1 = $[1]; } - const MyClass = t1; + const x = t1; let t2; - if ($[1] !== val) { - t2 = [val]; - $[1] = val; + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + const MyClass = identity(Foo); + t2 = new MyClass(); $[2] = t2; } else { t2 = $[2]; } - const x = t2; + const y = t2; let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = new MyClass(); - $[3] = t3; + if ($[3] !== x) { + t3 = [x, y]; + $[3] = x; + $[4] = t3; } else { - t3 = $[3]; + t3 = $[4]; } - const y = t3; - let t4; - if ($[4] !== x) { - t4 = [x, y]; - $[4] = x; - $[5] = t4; - } else { - t4 = $[5]; - } - return t4; + return t3; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md index aa9a35e6b3..f4d977baaa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nonmutating-capture-in-unsplittable-memo-block.expect.md @@ -72,24 +72,30 @@ import { identity, mutate } from "shared-runtime"; */ function useFoo(t0) { const $ = _c(4); - const { a, b } = t0; + let a; + let t1; let z; - let y; - if ($[0] !== a || $[1] !== b) { - const x = { a }; - y = {}; - mutate(x); + if ($[0] !== t0) { + const y = {}; + const { a: t2, b } = t0; + a = t2; + z = [identity(y), b]; + + t1 = z[0] !== y; mutate(y); - $[0] = a; - $[1] = b; - $[2] = z; - $[3] = y; + $[0] = t0; + $[1] = a; + $[2] = t1; + $[3] = z; } else { - z = $[2]; - y = $[3]; + a = $[1]; + t1 = $[2]; + z = $[3]; } - if (z[0] !== y) { + const x = { a }; + mutate(x); + if (t1) { throw new Error("oh no!"); } return z; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md index a3bf0e5ee8..b62d7517ad 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md @@ -22,22 +22,24 @@ function foo(a, b, c, d) { import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(3); - let x; + let t0; if ($[0] !== b || $[1] !== c) { + let x; if (someVal) { x = { b }; } else { x = { c }; } + t0 = x; x.f = 1; $[0] = b; $[1] = c; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md index 52077b6b89..47c22c1694 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md @@ -25,8 +25,9 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(2); someObj(); - let x; + let t0; if ($[0] !== a) { + let x; if (a) { const y = someObj(); const z = y; @@ -35,13 +36,14 @@ function foo(a, b, c, d) { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md index 933e05d155..db1ea1b788 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md @@ -23,21 +23,23 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(2); someObj(); - let x; + let t0; if ($[0] !== a) { + let x; if (a) { x = someObj(); } else { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md index 8c4a8b1a3c..0c1c88cd40 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md @@ -31,8 +31,9 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(3); someObj(); - let x; + let t0; if ($[0] !== a || $[1] !== b) { + let x; if (a) { let z; if (b) { @@ -47,14 +48,15 @@ function foo(a, b, c, d) { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; $[1] = b; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md index 998959a719..5e00d7cbe3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-computed-access-assignment.expect.md @@ -21,8 +21,9 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function foo(a, b, c) { const x = { ...a }; - x[b] = c[b]; + x[3] = c[b * 4]; + x[b] = c[b]; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md index 3ad02df030..22712884ed 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md @@ -29,21 +29,22 @@ import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime"; function useHook(t0) { const $ = _c(2); const { value } = t0; - let obj; + let t1; if ($[0] !== value) { - const x = mutateAndReturn({ value }); - obj = { + t1 = { getValue() { return value; }, }; - - mutate(x); $[0] = value; - $[1] = obj; + $[1] = t1; } else { - obj = $[1]; + t1 = $[1]; } + const obj = t1; + const x = mutateAndReturn({ value }); + + mutate(x); return obj; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md index 46d532308b..89ce380c58 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md @@ -29,22 +29,23 @@ import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime"; function useHook(t0) { const $ = _c(2); const { value } = t0; - let obj; + let t1; if ($[0] !== value) { const x = mutateAndReturn({ value }); - obj = { + const obj = { getValue() { return x; }, }; + t1 = obj; mutate(obj); $[0] = value; - $[1] = obj; + $[1] = t1; } else { - obj = $[1]; + t1 = $[1]; } - return obj; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md index f29ddc09cc..20fd360bd8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-properties.expect.md @@ -16,9 +16,9 @@ function foo(a, b, c) { ```javascript function foo(a, b, c) { + foo(a.b.c); const y = { ...b.c.d }; y.z = c.d.e; - foo(a.b.c); } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md index 856d235ae6..1ab2673c89 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call.expect.md @@ -19,8 +19,8 @@ function Component(props) { const $ = _c(2); let t0; if ($[0] !== props) { - const x = makeOptionalFunction(props); const y = makeObject(props); + const x = makeOptionalFunction(props); t0 = x?.(y.a, props.a, foo(y.b), bar(props.b)); $[0] = props; $[1] = t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md index 6da3dea150..31d5d1f479 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-method-call.expect.md @@ -19,8 +19,8 @@ function Component(props) { const $ = _c(2); let t0; if ($[0] !== props) { - const x = makeObject(props); const y = makeObject(props); + const x = makeObject(props); t0 = x.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b)); $[0] = props; $[1] = t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md index 1ce6250e10..b9dad6cb04 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-method-call.expect.md @@ -19,8 +19,8 @@ function Component(props) { const $ = _c(2); let t0; if ($[0] !== props) { - const x = makeOptionalObject(props); const y = makeObject(props); + const x = makeOptionalObject(props); t0 = x?.method(y.a, props.a, foo(y.b), bar(props.b)); $[0] = props; $[1] = t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md index ac3d199608..a476e1ebf2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-receiver-optional-method.expect.md @@ -19,8 +19,8 @@ function Component(props) { const $ = _c(2); let t0; if ($[0] !== props) { - const x = makeOptionalObject(props); const y = makeObject(props); + const x = makeOptionalObject(props); t0 = x?.optionalMethod?.(y.a, props.a, foo(y.b), bar(props.b)); $[0] = props; $[1] = t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block.expect.md index eb272fa01c..a75c5b36cd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block.expect.md @@ -93,32 +93,37 @@ import { identity, mutate } from "shared-runtime"; */ function useFoo(t0) { const $ = _c(6); - const { a, b } = t0; + let a; + let t1; let z; - let y; - if ($[0] !== a || $[1] !== b) { - const x = { a }; - y = {}; - mutate(x); - let t1; + if ($[0] !== t0) { + const y = {}; + const { a: t2, b } = t0; + a = t2; + let t3; if ($[4] !== b) { - t1 = [identity(y), b]; + t3 = [identity(y), b]; $[4] = b; - $[5] = t1; + $[5] = t3; } else { - t1 = $[5]; + t3 = $[5]; } - z = t1; + z = t3; + + t1 = z[0] !== y; mutate(y); - $[0] = a; - $[1] = b; - $[2] = z; - $[3] = y; + $[0] = t0; + $[1] = a; + $[2] = t1; + $[3] = z; } else { - z = $[2]; - y = $[3]; + a = $[1]; + t1 = $[2]; + z = $[3]; } - if (z[0] !== y) { + const x = { a }; + mutate(x); + if (t1) { throw new Error("oh no!"); } return z; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutate-outer-scope-within-value-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutate-outer-scope-within-value-block.expect.md index bcb9caa4b6..a844ee8c09 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutate-outer-scope-within-value-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutate-outer-scope-within-value-block.expect.md @@ -69,8 +69,6 @@ import { CONST_TRUE, identity, shallowCopy } from "shared-runtime"; */ function useFoo(t0) { const $ = _c(3); - const { input } = t0; - const arr = shallowCopy(input); let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = identity(false); @@ -79,6 +77,8 @@ function useFoo(t0) { t1 = $[0]; } const cond = t1; + const { input } = t0; + const arr = shallowCopy(input); let t2; if ($[1] !== arr) { t2 = cond ? { val: CONST_TRUE } : mutate(arr); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md index f3278e91ba..433a7a3459 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md @@ -52,33 +52,33 @@ import { mutate } from "shared-runtime"; * values in a subsequent render. */ function useFoo(t0) { - const $ = _c(5); + const $ = _c(4); const { a, b } = t0; - let z; - if ($[0] !== a || $[1] !== b) { - const x = { a }; + let t1; + if ($[0] !== b) { const y = [b]; - mutate(x); - const t1 = mutate(y); - let t2; - if ($[3] !== t1) { - t2 = [t1]; - $[3] = t1; - $[4] = t2; + const t2 = mutate(y); + let t3; + if ($[2] !== t2) { + t3 = [t2]; + $[2] = t2; + $[3] = t3; } else { - t2 = $[4]; + t3 = $[3]; } - z = t2; + const z = t3; + t1 = z; mutate(y); - $[0] = a; - $[1] = b; - $[2] = z; + $[0] = b; + $[1] = t1; } else { - z = $[2]; + t1 = $[1]; } - return z; + const x = { a }; + mutate(x); + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx-and-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx-and-break.expect.md index 9d3e7906c4..826a0260e7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx-and-break.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx-and-break.expect.md @@ -51,9 +51,10 @@ import { function useFoo(t0) { const $ = _c(5); - const { data } = t0; - let obj; + let myDiv = null; + let obj; + const { data } = t0; bb0: if (data.cond) { if ($[0] !== data.cond1) { obj = makeObject_Primitives(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx.expect.md index 996fdd2aa8..bbdd8cdacd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-jsx.expect.md @@ -97,8 +97,9 @@ import { function useFoo(t0) { const $ = _c(5); const { data } = t0; - let obj; + let myDiv = null; + let obj; if (data.cond) { if ($[0] !== data.cond1) { obj = makeObject_Primitives(); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/repro-allocating-ternary-test-instruction-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/repro-allocating-ternary-test-instruction-scope.expect.md index f295d0ca5b..b06dec0619 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/repro-allocating-ternary-test-instruction-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/repro-allocating-ternary-test-instruction-scope.expect.md @@ -34,7 +34,8 @@ import { identity, makeObject_Primitives } from "shared-runtime"; function useTest(t0) { const $ = _c(1); - const { cond } = t0; + + useHook(); let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = makeObject_Primitives(); @@ -43,8 +44,7 @@ function useTest(t0) { t1 = $[0]; } const val = t1; - - useHook(); + const { cond } = t0; const result = identity(cond) ? val : null; return result; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md index 7b191118bd..c2dad3b7c6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved-by-terminal.expect.md @@ -30,8 +30,8 @@ function foo(a, b, c) { if (x) { } - y.push(a); x.push(b); + y.push(a); } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md index ea77b9e3d9..01cbd9ebda 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-interleaved.expect.md @@ -21,10 +21,11 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function foo(a, b) { - const x = []; const y = []; - x.push(a); + y.push(b); + const x = []; + x.push(a); } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md index 4f6e0df8b4..e096f0b784 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-shadowed.expect.md @@ -22,9 +22,10 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function foo(a, b) { const x = []; + + x.push(a); const y = []; y.push(b); - x.push(a); } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md index 7170874dee..fbc49e86fa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/overlapping-scopes-while.expect.md @@ -23,11 +23,11 @@ export const FIXTURE_ENTRYPOINT = { ```javascript function foo(a, b, c) { - const x = []; const y = []; + const x = []; while (c) { - y.push(b); x.push(a); + y.push(b); } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md index 9e0050255b..8f33e5ca0d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/partial-early-return-within-reactive-scope.expect.md @@ -31,6 +31,7 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(4); + let y; let t0; if ($[0] !== props) { @@ -57,11 +58,11 @@ function Component(props) { } } $[0] = props; - $[1] = y; - $[2] = t0; + $[1] = t0; + $[2] = y; } else { - y = $[1]; - t0 = $[2]; + t0 = $[1]; + y = $[2]; } if (t0 !== Symbol.for("react.early_return_sentinel")) { return t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md index ee7aa62495..6d745f2001 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-array-push.expect.md @@ -39,17 +39,16 @@ function Component(props) { const $ = _c(2); let t0; if ($[0] !== props) { - const x = {}; let y; + const x = {}; if (props.cond) { y = [props.value]; } else { y = []; } - y.push(x); - t0 = [x, y]; + y.push(x); $[0] = props; $[1] = t0; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md index b4343d3fbb..c93a3bb9bf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-type-inference-property-store.expect.md @@ -32,38 +32,25 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; // @debug function Component(props) { - const $ = _c(5); + const $ = _c(2); let t0; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = {}; - $[0] = t0; - } else { - t0 = $[0]; - } - const x = t0; - let y; - if ($[1] !== props) { + if ($[0] !== props) { + let y; + const x = {}; if (props.cond) { y = {}; } else { y = { a: props.a }; } + t0 = [x, y]; y.x = x; - $[1] = props; - $[2] = y; + $[0] = props; + $[1] = t0; } else { - y = $[2]; + t0 = $[1]; } - let t1; - if ($[3] !== y) { - t1 = [x, y]; - $[3] = y; - $[4] = t1; - } else { - t1 = $[4]; - } - return t1; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md index 4dd05b0828..03f261ae3d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.invalid-useCallback-captures-reassigned-context.expect.md @@ -33,9 +33,7 @@ export const FIXTURE_ENTRYPOINT = { 10 | 11 | // makeArray() is captured, but depsList contains [props] > 12 | const cb = useCallback(() => [x], [x]); - | ^^^^^^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value may be mutated later, which could cause the value to change unexpectedly (12:12) - -CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value may be mutated later, which could cause the value to change unexpectedly (12:12) + | ^^^^^^^^^ Invariant: Unexpected mismatch between StartMemoize and FinishMemoize. Encountered StartMemoize id=undefined followed by FinishMemoize id=0 (12:12) 13 | 14 | x = makeArray(); 15 | diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md index 0f31ec9a4e..226261c0a0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.todo-useCallback-captures-invalidating-value.expect.md @@ -31,7 +31,7 @@ export const FIXTURE_ENTRYPOINT = { 11 | x.push(props); 12 | > 13 | return useCallback(() => [x], [x]); - | ^^^^^^^^^ CannotPreserveMemoization: React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value may be mutated later, which could cause the value to change unexpectedly (13:13) + | ^^^^^^^^^ Invariant: Unexpected mismatch between StartMemoize and FinishMemoize. Encountered StartMemoize id=undefined followed by FinishMemoize id=0 (13:13) 14 | } 15 | 16 | export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md index b6ecf72875..c6e60597e9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-aliased-var.expect.md @@ -22,7 +22,7 @@ function useHook(x) { 7 | const aliasedProp = x.y.z; 8 | > 9 | return useCallback(() => [aliasedX, x.y.z], [x, aliasedProp]); - | ^^^^^^^^^^^^^^^^^^^^^^^ 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 (9:9) + | ^^^^^^^^^^^^^^^^^^^^^^^ Invariant: Unexpected mismatch between StartMemoize and FinishMemoize. Encountered StartMemoize id=undefined followed by FinishMemoize id=0 (9:9) 10 | } 11 | ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md index fd007ab7c9..15ad99ed0a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-invalid-useMemo-no-memoblock-sideeffect.expect.md @@ -35,8 +35,8 @@ import { useMemo } from "react"; // instruction within manual memoization gets assigned to a reactive scope // (i.e. inferred non-mutable or non-escaping values don't get memoized) function useFoo(t0) { - const { minWidth, styles, setStyles } = t0; let t1; + const { minWidth, styles, setStyles } = t0; if (styles.width > minWidth) { setStyles(styles); } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md index a3be4912a1..7dd97f4700 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/todo-ensure-constant-prop-decls-get-removed.expect.md @@ -38,8 +38,8 @@ import { useMemo } from "react"; // propagated values function useFoo() { const $ = _c(1); - const constVal = 0; let t0; + const constVal = 0; let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = [0]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md index ae0a399220..339b8d57b9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-captures-reassigned-context-property.expect.md @@ -57,7 +57,6 @@ function Foo(props) { } else { t1 = $[3]; } - contextVar; const cb = t1; let t2; if ($[4] !== cb) { @@ -67,6 +66,7 @@ function Foo(props) { } else { t2 = $[5]; } + contextVar; return t2; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md index b6ccab92d5..c28254a95e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-in-other-reactive-block.expect.md @@ -37,32 +37,38 @@ import { arrayPush } from "shared-runtime"; // useCallback-produced values can exist in nested reactive blocks, as long // as their reactive dependencies are a subset of depslist from source function useFoo(minWidth, otherProp) { - const $ = _c(7); + const $ = _c(8); const [width] = useState(1); let t0; - if ($[0] !== width || $[1] !== minWidth || $[2] !== otherProp) { - const x = []; - let t1; - if ($[4] !== minWidth || $[5] !== width) { - t1 = () => ({ width: Math.max(minWidth, width) }); - $[4] = minWidth; - $[5] = width; - $[6] = t1; - } else { - t1 = $[6]; - } - const style = t1; + if ($[0] !== minWidth || $[1] !== width) { + t0 = () => ({ width: Math.max(minWidth, width) }); + $[0] = minWidth; + $[1] = width; + $[2] = t0; + } else { + t0 = $[2]; + } + const style = t0; + let x; + if ($[3] !== otherProp) { + x = []; arrayPush(x, otherProp); - t0 = [style, x]; - $[0] = width; - $[1] = minWidth; - $[2] = otherProp; - $[3] = t0; + $[3] = otherProp; + $[4] = x; } else { - t0 = $[3]; + x = $[4]; } - return t0; + let t1; + if ($[5] !== style || $[6] !== x) { + t1 = [style, x]; + $[5] = style; + $[6] = x; + $[7] = t1; + } else { + t1 = $[7]; + } + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md index f47b6089eb..ef11cd82fe 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md @@ -40,53 +40,51 @@ import { useCallback } from "react"; import { Stringify } from "shared-runtime"; function Foo(t0) { - const $ = _c(11); - const { arr1, arr2, foo } = t0; + const $ = _c(9); let t1; - if ($[0] !== arr1) { - t1 = [arr1]; - $[0] = arr1; - $[1] = t1; - } else { - t1 = $[1]; - } - const x = t1; - let t2; let getVal1; - if ($[2] !== foo || $[3] !== x || $[4] !== arr2) { + if ($[0] !== t0) { let y; y = []; - let t3; - if ($[7] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => ({ x: 2 }); - $[7] = t3; - } else { - t3 = $[7]; - } - getVal1 = t3; - t2 = () => [y]; + t1 = () => [y]; + let t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => ({ x: 2 }); + $[3] = t2; + } else { + t2 = $[3]; + } + getVal1 = t2; + const { arr1, arr2, foo } = t0; + let t3; + if ($[4] !== arr1) { + t3 = [arr1]; + $[4] = arr1; + $[5] = t3; + } else { + t3 = $[5]; + } + const x = t3; foo ? (y = x.concat(arr2)) : y; - $[2] = foo; - $[3] = x; - $[4] = arr2; - $[5] = t2; + $[0] = t0; + $[1] = t1; + $[2] = getVal1; + } else { + t1 = $[1]; + getVal1 = $[2]; + } + const getVal2 = t1; + let t2; + if ($[6] !== getVal1 || $[7] !== getVal2) { + t2 = ; $[6] = getVal1; + $[7] = getVal2; + $[8] = t2; } else { - t2 = $[5]; - getVal1 = $[6]; + t2 = $[8]; } - const getVal2 = t2; - let t3; - if ($[8] !== getVal1 || $[9] !== getVal2) { - t3 = ; - $[8] = getVal1; - $[9] = getVal2; - $[10] = t3; - } else { - t3 = $[10]; - } - return t3; + return t2; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md index a11b5f709e..7c02d09a42 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md @@ -38,36 +38,36 @@ import { Stringify } from "shared-runtime"; function useFoo(arr1, arr2) { const $ = _c(7); let t0; - if ($[0] !== arr1) { - t0 = [arr1]; - $[0] = arr1; - $[1] = t0; - } else { - t0 = $[1]; - } - const x = t0; - let t1; - if ($[2] !== x || $[3] !== arr2) { + if ($[0] !== arr1 || $[1] !== arr2) { let y; - t1 = () => ({ y }); + t0 = () => ({ y }); + let t1; + if ($[3] !== arr1) { + t1 = [arr1]; + $[3] = arr1; + $[4] = t1; + } else { + t1 = $[4]; + } + const x = t1; (y = x.concat(arr2)), y; - $[2] = x; - $[3] = arr2; - $[4] = t1; + $[0] = arr1; + $[1] = arr2; + $[2] = t0; } else { - t1 = $[4]; + t0 = $[2]; } - const getVal = t1; - let t2; + const getVal = t0; + let t1; if ($[5] !== getVal) { - t2 = ; + t1 = ; $[5] = getVal; - $[6] = t2; + $[6] = t1; } else { - t2 = $[6]; + t1 = $[6]; } - return t2; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md index 04b99c6202..c969d0256d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-alias-property-load-dep.expect.md @@ -29,9 +29,9 @@ import { sum } from "shared-runtime"; function Component(t0) { const $ = _c(3); + let t1; const { propA, propB } = t0; const x = propB.x.y; - let t1; let t2; if ($[0] !== propA.x || $[1] !== x) { t2 = sum(propA.x, x); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md index 3a9e9be413..e907e639ec 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-noAlloc.expect.md @@ -29,8 +29,8 @@ import { useMemo } from "react"; function Component(t0) { const $ = _c(3); - const { propA, propB } = t0; let t1; + const { propA, propB } = t0; const t2 = propB?.x.y; let t3; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md index ba759266dc..9bb033ec6a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-conditional-access-own-scope.expect.md @@ -30,8 +30,8 @@ import { useMemo } from "react"; function Component(t0) { const $ = _c(2); - const { propA, propB } = t0; let t1; + const { propA, propB } = t0; bb0: { if (propA) { let t2; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md index 9a6bd99a49..f1b9276195 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-constant-prop.expect.md @@ -35,8 +35,8 @@ import { identity } from "shared-runtime"; function useFoo(cond) { const $ = _c(5); - const sourceDep = 0; let t0; + const sourceDep = 0; let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = identity(0); @@ -46,9 +46,9 @@ function useFoo(cond) { } t0 = t1; const derived1 = t0; + let t2; const derived2 = cond ?? Math.min(0, 1) ? 1 : 2; - let t2; let t3; if ($[1] === Symbol.for("react.memo_cache_sentinel")) { t3 = identity(0); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md index 6458e9812a..d75c8918d1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-in-other-reactive-block.expect.md @@ -37,35 +37,48 @@ import { arrayPush } from "shared-runtime"; // useMemo-produced values can exist in nested reactive blocks, as long // as their reactive dependencies are a subset of depslist from source function useFoo(minWidth, otherProp) { - const $ = _c(6); - const [width] = useState(1); + const $ = _c(11); let t0; - if ($[0] !== width || $[1] !== minWidth || $[2] !== otherProp) { - const x = []; - let t1; + const [width] = useState(1); + let style; + let x; + if ($[0] !== minWidth || $[1] !== width || $[2] !== otherProp) { + x = []; - const t2 = Math.max(minWidth, width); - let t3; - if ($[4] !== t2) { - t3 = { width: t2 }; - $[4] = t2; - $[5] = t3; + const t1 = Math.max(minWidth, width); + let t2; + if ($[6] !== t1) { + t2 = { width: t1 }; + $[6] = t1; + $[7] = t2; } else { - t3 = $[5]; + t2 = $[7]; } - t1 = t3; - const style = t1; + t0 = t2; + style = t0; arrayPush(x, otherProp); - t0 = [style, x]; - $[0] = width; - $[1] = minWidth; + $[0] = minWidth; + $[1] = width; $[2] = otherProp; - $[3] = t0; + $[3] = style; + $[4] = x; + $[5] = t0; } else { - t0 = $[3]; + style = $[3]; + x = $[4]; + t0 = $[5]; } - return t0; + let t1; + if ($[8] !== style || $[9] !== x) { + t1 = [style, x]; + $[8] = style; + $[9] = x; + $[10] = t1; + } else { + t1 = $[10]; + } + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md index 0fa7fd6b10..46662c6563 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-invoke-prop.expect.md @@ -33,8 +33,8 @@ import { useMemo } from "react"; function useFoo(t0) { const $ = _c(2); - const { callback } = t0; let t1; + const { callback } = t0; let t2; if ($[0] !== callback) { t2 = new Array(callback()); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md index c7fd376912..b177f76427 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md @@ -31,37 +31,37 @@ import { useMemo } from "react"; function useFoo(arr1, arr2) { const $ = _c(7); - let t0; - if ($[0] !== arr1) { - t0 = [arr1]; - $[0] = arr1; - $[1] = t0; - } else { - t0 = $[1]; - } - const x = t0; let y; - if ($[2] !== x || $[3] !== arr2) { + if ($[0] !== arr1 || $[1] !== arr2) { y; + let t0; + if ($[3] !== arr1) { + t0 = [arr1]; + $[3] = arr1; + $[4] = t0; + } else { + t0 = $[4]; + } + const x = t0; (y = x.concat(arr2)), y; - $[2] = x; - $[3] = arr2; - $[4] = y; + $[0] = arr1; + $[1] = arr2; + $[2] = y; } else { - y = $[4]; + y = $[2]; } - let t1; - const t2 = y; - let t3; - if ($[5] !== t2) { - t3 = { y: t2 }; - $[5] = t2; - $[6] = t3; + let t0; + const t1 = y; + let t2; + if ($[5] !== t1) { + t2 = { y: t1 }; + $[5] = t1; + $[6] = t2; } else { - t3 = $[6]; + t2 = $[6]; } - t1 = t3; - return t1; + t0 = t2; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md index 577db4ae91..e4fcba46d7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md @@ -40,55 +40,62 @@ import { useMemo } from "react"; import { Stringify } from "shared-runtime"; function Foo(t0) { - const $ = _c(11); - const { arr1, arr2, foo } = t0; + const $ = _c(12); let t1; - if ($[0] !== arr1) { - t1 = [arr1]; - $[0] = arr1; - $[1] = t1; - } else { - t1 = $[1]; - } - const x = t1; let t2; - let val1; - if ($[2] !== foo || $[3] !== x || $[4] !== arr2) { + let T0; + let t3; + if ($[0] !== t0) { let y; y = []; - let t3; + const { arr1, arr2, foo } = t0; let t4; - if ($[7] === Symbol.for("react.memo_cache_sentinel")) { - t4 = { x: 2 }; - $[7] = t4; + if ($[5] !== arr1) { + t4 = [arr1]; + $[5] = arr1; + $[6] = t4; } else { - t4 = $[7]; + t4 = $[6]; } - t3 = t4; - val1 = t3; + const x = t4; + let t5; + if ($[7] === Symbol.for("react.memo_cache_sentinel")) { + t5 = { x: 2 }; + $[7] = t5; + } else { + t5 = $[7]; + } + t1 = t5; + const val1 = t1; foo ? (y = x.concat(arr2)) : y; + + T0 = Stringify; + t3 = val1; t2 = (() => [y])(); - $[2] = foo; - $[3] = x; - $[4] = arr2; - $[5] = t2; - $[6] = val1; + $[0] = t0; + $[1] = t2; + $[2] = T0; + $[3] = t3; + $[4] = t1; } else { - t2 = $[5]; - val1 = $[6]; + t2 = $[1]; + T0 = $[2]; + t3 = $[3]; + t1 = $[4]; } const val2 = t2; - let t3; - if ($[8] !== val1 || $[9] !== val2) { - t3 = ; - $[8] = val1; - $[9] = val2; - $[10] = t3; + let t4; + if ($[8] !== T0 || $[9] !== t3 || $[10] !== val2) { + t4 = ; + $[8] = T0; + $[9] = t3; + $[10] = val2; + $[11] = t4; } else { - t3 = $[10]; + t4 = $[11]; } - return t3; + return t4; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md index ad097ab0a9..35e85d4475 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-no-depslist.expect.md @@ -31,8 +31,8 @@ import { useMemo } from "react"; // source listed no memo deps function Component(t0) { const $ = _c(2); - const { propA } = t0; let t1; + const { propA } = t0; let t2; if ($[0] !== propA) { t2 = [propA]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md index d097ee0fad..92301bf455 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md @@ -30,25 +30,18 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; // Should print A, 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).f((changeF(x), console.log("arg"), 1)); - $[1] = x; + $[0] = x; } else { - x = $[1]; + x = $[0]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md index 00c59b2450..5c5c736804 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-array.expect.md @@ -28,10 +28,10 @@ import { useHook } from "shared-runtime"; function Component(props) { const x = []; - useHook(); - x.push(props.value); const y = [x]; + x.push(props.value); + useHook(); return [y]; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md index 4cf4e6f994..28e9c6b2f5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md @@ -30,7 +30,6 @@ import { useHook } from "shared-runtime"; function Component(props) { const $ = _c(6); - const o = {}; let t0; if ($[0] !== props.value) { t0 =
{props.value}
; @@ -40,8 +39,6 @@ function Component(props) { t0 = $[1]; } const x = t0; - useHook(); - o.value = props.value; let t1; if ($[2] !== x) { t1 =
{x}
; @@ -59,6 +56,9 @@ function Component(props) { } else { t2 = $[5]; } + const o = {}; + o.value = props.value; + useHook(); return t2; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md index 6dc42be6b9..f46f83c590 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-new.expect.md @@ -26,15 +26,26 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript +import { c as _c } from "react/compiler-runtime"; import { useHook } from "shared-runtime"; function Component(props) { - const x = new Foo(); - useHook(); - x.value = props.value; + const $ = _c(2); + let t0; + if ($[0] !== props.value) { + const x = new Foo(); - const y = { x }; - return { y }; + const y = { x }; + + t0 = { y }; + x.value = props.value; + $[0] = props.value; + $[1] = t0; + } else { + t0 = $[1]; + } + useHook(); + return t0; } class Foo {} diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md index a5b86367c5..dbd54ddf45 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-object.expect.md @@ -28,10 +28,10 @@ import { useHook } from "shared-runtime"; function Component(props) { const x = {}; - useHook(); - x.value = props.value; const y = { x }; + x.value = props.value; + useHook(); return { y }; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md index 077af82159..fb1791b013 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md @@ -31,32 +31,25 @@ import { c as _c } from "react/compiler-runtime"; import { useHook, identity } from "shared-runtime"; function Component(props) { - const $ = _c(4); - let x = 42; - if (props.cond) { - x = []; - } - - useHook(); - identity(x); + const $ = _c(2); let t0; - if ($[0] !== x) { - t0 = [x]; - $[0] = x; + if ($[0] !== props.cond) { + let x = 42; + if (props.cond) { + x = []; + } + + const y = [x]; + + t0 = [y]; + identity(x); + $[0] = props.cond; $[1] = t0; } else { t0 = $[1]; } - const y = t0; - let t1; - if ($[2] !== y) { - t1 = [y]; - $[2] = y; - $[3] = t1; - } else { - t1 = $[3]; - } - return t1; + useHook(); + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md index 8e16183e17..67886aafd7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/react-namespace.expect.md @@ -30,9 +30,9 @@ const FooContext = React.createContext({ current: null }); function Component(props) { const $ = _c(6); - React.useContext(FooContext); - const ref = React.useRef(); + const [x, setX] = React.useState(false); + const ref = React.useRef(); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = () => { @@ -61,6 +61,7 @@ function Component(props) { } else { t2 = $[5]; } + React.useContext(FooContext); return t2; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md index 84e853b5cc..6a074f58fb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-do-while-test.expect.md @@ -43,8 +43,9 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(2); - let x; + let i = 0; + let x; do { if (i > 10) { x = 10; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md index 029ea768aa..716d70bd22 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-in.expect.md @@ -42,13 +42,13 @@ function Component(props) { const $ = _c(1); const a = []; - const b = []; - b.push(props.cond); - a.push({ a: false }); const c = [a]; let x; + a.push({ a: false }); + const b = []; + b.push(props.cond); for (const i in c[0][0]) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md index 47c8589e48..361d4f3b9b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-init.expect.md @@ -41,14 +41,12 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(1); + let x; const a = []; + const c = [a]; + a.push(0); const b = []; b.push(props.cond); - a.push(0); - - const c = [a]; - - let x; for (let i = c[0][0]; i < 10; i++) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md index e0441ff680..9c227bf17b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-of.expect.md @@ -42,13 +42,13 @@ function Component(props) { const $ = _c(1); const a = []; - const b = []; - b.push(props.cond); - a.push(null); const c = [a]; let x; + a.push(null); + const b = []; + b.push(props.cond); for (const i of c[0]) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md index d037a124a1..c889019bb7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-test.expect.md @@ -41,14 +41,12 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(1); + let x; const a = []; + const c = [a]; + a.push(10); const b = []; b.push(props.cond); - a.push(10); - - const c = [a]; - - let x; for (let i = 0; i < c[0][0]; i++) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md index d99523d0e0..f4fbb4eeee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-for-update.expect.md @@ -41,14 +41,12 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(1); + let x; const a = []; const b = []; b.push(props.cond); a.push(10); - const c = [a]; - - let x; for (let i = 0; i < 10; i = i + c[0][0], i) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md index ccddda4f03..13b5c64141 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-if.expect.md @@ -44,13 +44,13 @@ function Component(props) { const $ = _c(1); const a = []; - const b = []; - b.push(props.cond); - a.push(null); const c = [a]; let x; + a.push(null); + const b = []; + b.push(props.cond); if (c[0][0]) { x = 1; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md index e6b32d66ee..9389dcea0c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-switch.expect.md @@ -48,13 +48,13 @@ function Component(props) { const $ = _c(1); const a = []; - const b = []; - b.push(props.cond); - a.push(null); const c = [a]; let x; + a.push(null); + const b = []; + b.push(props.cond); bb0: switch (c[0][0]) { case true: { x = 1; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md index 2dc752515f..f8a896d9f2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-from-interleaved-reactivity-while.expect.md @@ -41,14 +41,12 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(1); + let x; const a = []; + const c = [a]; + a.push(null); const b = []; b.push(props.cond); - a.push(null); - - const c = [a]; - - let x; while (c[0][0]) { x = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md index 35526fc9e8..5dd00d9f80 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-phi-setState-type.expect.md @@ -61,9 +61,10 @@ import { useState } from "react"; function Component(props) { const $ = _c(5); - const [x, setX] = useState(false); - const [y, setY] = useState(false); + let setState; + const [y, setY] = useState(false); + const [x, setX] = useState(false); if (props.cond) { setState = setX; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md index 132a8a4dda..b9219099f7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-reactive-after-fixpoint.expect.md @@ -52,9 +52,9 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(2); - let x = 0; let value = null; + let x = 0; for (let i = 0; i < 10; i++) { switch (value) { case true: { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md index 2f54d99eb5..8804fd4a54 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-control-dependency-while-test.expect.md @@ -43,8 +43,9 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(2); - let x; + let i = 0; + let x; while (i < props.test) { if (i > 10) { x = 10; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md index 6ef90c7549..e89193958f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-fixpoint.expect.md @@ -31,11 +31,12 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(2); - let x = 0; + let y = 0; + let x = 0; while (x === 0) { - x = y; y = props.value; + x = y; } let t0; if ($[0] !== x) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md index 140ca28a72..e985e57d65 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-dependency-object-captured-with-reactive-mutated.expect.md @@ -31,11 +31,11 @@ function Component(props) { let t0; if ($[0] !== props.y) { const x = {}; + + t0 = [x]; const y = props.y; const z = [x, y]; mutate(z); - - t0 = [x]; $[0] = props.y; $[1] = t0; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md index 71cd4e526a..9837a1a3ed 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md @@ -26,18 +26,20 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - x = {}; + const x = {}; + + t0 = x; const y = []; + x.y = y; const z = {}; y.push(z); - x.y = y; - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md index f38f4c8334..38fd4bd53f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scopes.expect.md @@ -27,23 +27,25 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function f(a, b) { const $ = _c(3); - let t0; - if ($[0] !== a.length || $[1] !== b) { + + const t0 = a.length === 1; + let t1; + if ($[0] !== t0 || $[1] !== b) { const x = []; - if (a.length === 1) { + if (t0) { if (b) { x.push(b); } } - t0 =
{x}
; - $[0] = a.length; + t1 =
{x}
; + $[0] = t0; $[1] = b; - $[2] = t0; + $[2] = t1; } else { - t0 = $[2]; + t1 = $[2]; } - return t0; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md index d11f054a34..ab1ec512f5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md @@ -35,34 +35,22 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let a; + const $ = _c(1); let t0; - if ($[0] !== props.b) { - a = {}; - const b = []; - b.push(props.b); - a.a = null; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + const a = {}; - t0 = [a]; - $[0] = props.b; - $[1] = a; - $[2] = t0; + const c = [a]; + + t0 = [c, a]; + a.a = null; + $[0] = t0; } else { - a = $[1]; - t0 = $[2]; + t0 = $[0]; } - const c = t0; - let t1; - if ($[3] !== c || $[4] !== a) { - t1 = [c, a]; - $[3] = c; - $[4] = a; - $[5] = t1; - } else { - t1 = $[5]; - } - return t1; + const b = []; + b.push(props.b); + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md index 9c5aec804e..61bb53f367 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-computed-load.expect.md @@ -18,38 +18,22 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let items; + const $ = _c(3); + let t0; if ($[0] !== props.key || $[1] !== props.a) { - items = bar(); + const items = bar(); + + const count = foo(items.length + 1); + + t0 = { items, count }; mutate(items[props.key], props.a); $[0] = props.key; $[1] = props.a; - $[2] = items; + $[2] = t0; } else { - items = $[2]; + t0 = $[2]; } - - const t0 = items.length + 1; - let t1; - if ($[3] !== t0) { - t1 = foo(t0); - $[3] = t0; - $[4] = t1; - } else { - t1 = $[4]; - } - const count = t1; - let t2; - if ($[5] !== items || $[6] !== count) { - t2 = { items, count }; - $[5] = items; - $[6] = count; - $[7] = t2; - } else { - t2 = $[7]; - } - return t2; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md index abbeb39284..4d5092a3b5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-reactive-via-mutation-of-property-load.expect.md @@ -18,37 +18,21 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(7); - let items; + const $ = _c(2); + let t0; if ($[0] !== props.a) { - items = bar(); + const items = bar(); + + const count = foo(items.length + 1); + + t0 = { items, count }; mutate(items.a, props.a); $[0] = props.a; - $[1] = items; + $[1] = t0; } else { - items = $[1]; + t0 = $[1]; } - - const t0 = items.length + 1; - let t1; - if ($[2] !== t0) { - t1 = foo(t0); - $[2] = t0; - $[3] = t1; - } else { - t1 = $[3]; - } - const count = t1; - let t2; - if ($[4] !== items || $[5] !== count) { - t2 = { items, count }; - $[4] = items; - $[5] = count; - $[6] = t2; - } else { - t2 = $[6]; - } - return t2; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md index 579d7d206b..6307274071 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-readonly-alias-of-mutable-value.expect.md @@ -53,11 +53,10 @@ function Component(props) { const z = [y]; - y.push(props.input); - const a = [z]; let b = 0; + y.push(props.input); if (a[0][0][0] === 42) { b = 1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md index af846095c6..c9ec8c6d95 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-in-while-loop-condition.expect.md @@ -30,20 +30,30 @@ import { makeArray } from "shared-runtime"; // @flow function Component() { - const $ = _c(1); - let t0; + const $ = _c(4); + + let item; + let sum = 0; + let items; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - const items = makeArray(0, 1, 2); - let item; - let sum = 0; + items = makeArray(0, 1, 2); while ((item = items.pop())) { sum = sum + item; } - - t0 = [items, sum]; - $[0] = t0; + $[0] = items; + $[1] = item; + $[2] = sum; } else { - t0 = $[0]; + items = $[0]; + item = $[1]; + sum = $[2]; + } + let t0; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t0 = [items, sum]; + $[3] = t0; + } else { + t0 = $[3]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md index e081de311f..c0c8e3e98c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassign-object-in-context.expect.md @@ -24,19 +24,21 @@ export const FIXTURE_ENTRYPOINT = { 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")) { + let x; x = []; + + t0 = x; const foo = () => { x = {}; }; - foo(); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md index f42b92b596..d8093ccab4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-separate-scopes.expect.md @@ -41,60 +41,63 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function foo(a, b, c) { - const $ = _c(10); + const $ = _c(11); let x; - let t0; if ($[0] !== a) { x = []; if (a) { x.push(a); } - - t0 =
{x}
; $[0] = a; $[1] = x; - $[2] = t0; } else { x = $[1]; - t0 = $[2]; + } + let t0; + if ($[2] !== x) { + t0 =
{x}
; + $[2] = x; + $[3] = t0; + } else { + t0 = $[3]; } const y = t0; bb0: switch (b) { case 0: { - if ($[3] !== b) { + if ($[4] !== b) { x = []; x.push(b); - $[3] = b; - $[4] = x; + $[4] = b; + $[5] = x; } else { - x = $[4]; + x = $[5]; } break bb0; } default: { - if ($[5] !== c) { + if ($[6] !== c) { x = []; x.push(c); - $[5] = c; - $[6] = x; + $[6] = c; + $[7] = x; } else { - x = $[6]; + x = $[7]; } } } let t1; - if ($[7] !== y || $[8] !== x) { + if ($[8] !== y || $[9] !== x) { t1 = (
{y} {x}
); - $[7] = y; - $[8] = x; - $[9] = t1; + $[8] = y; + $[9] = x; + $[10] = t1; } else { - t1 = $[9]; + t1 = $[10]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md index ba53ac2a28..32262085a9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-break-in-scope.expect.md @@ -31,11 +31,11 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { - const $ = _c(3); - const { obj, objIsNull } = t0; + const $ = _c(2); let x; - if ($[0] !== objIsNull || $[1] !== obj) { + if ($[0] !== t0) { x = []; + const { obj, objIsNull } = t0; bb0: { if (objIsNull) { break bb0; @@ -45,11 +45,10 @@ function useFoo(t0) { x.push(obj.b); } - $[0] = objIsNull; - $[1] = obj; - $[2] = x; + $[0] = t0; + $[1] = x; } else { - x = $[2]; + x = $[1]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md index 59fea6bcd0..106598b36b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md @@ -31,33 +31,34 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(4); const { obj, objIsNull } = t0; - let x; let t1; + let t2; if ($[0] !== objIsNull || $[1] !== obj) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (objIsNull) { - t1 = undefined; + t2 = undefined; break bb0; } else { x.push(obj.a); } + t1 = x; x.push(obj.b); } $[0] = objIsNull; $[1] = obj; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md index 72929a92a6..d604bdcf1b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-ifelse.expect.md @@ -35,20 +35,28 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should be added a import { identity } from "shared-runtime"; function useCondDepInDirectIfElse(props, cond) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== cond) { + t0 = identity(cond); + $[0] = cond; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== cond || $[1] !== props.a.b) { + if ($[2] !== t0 || $[3] !== props.a.b) { x = {}; - if (identity(cond)) { + if (t0) { x.b = props.a.b; } else { x.c = props.a.b; } - $[0] = cond; - $[1] = props.a.b; - $[2] = x; + $[2] = t0; + $[3] = props.a.b; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md index a2addb662e..0eafd90b39 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse-missing.expect.md @@ -35,22 +35,30 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be add import { identity, getNull } from "shared-runtime"; function useCondDepInNestedIfElse(props, cond) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== cond) { + t0 = identity(cond); + $[0] = cond; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== cond || $[1] !== props) { + if ($[2] !== t0 || $[3] !== props) { x = {}; - if (identity(cond)) { + if (t0) { if (getNull()) { x.a = props.a.b; } } else { x.d = props.a.b; } - $[0] = cond; - $[1] = props; - $[2] = x; + $[2] = t0; + $[3] = props; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md index f4b9c909fb..4f32c6b8b2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-nested-ifelse.expect.md @@ -41,11 +41,19 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should be added a import { getNull, identity } from "shared-runtime"; function useCondDepInNestedIfElse(props, cond) { - const $ = _c(3); + const $ = _c(6); + let t0; + if ($[0] !== cond) { + t0 = identity(cond); + $[0] = cond; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== cond || $[1] !== props.a.b) { + if ($[2] !== t0 || $[3] !== props.a.b || $[4] !== cond) { x = {}; - if (identity(cond)) { + if (t0) { if (getNull()) { x.a = props.a.b; } else { @@ -58,11 +66,12 @@ function useCondDepInNestedIfElse(props, cond) { x.d = props.a.b; } } - $[0] = cond; - $[1] = props.a.b; - $[2] = x; + $[2] = t0; + $[3] = props.a.b; + $[4] = cond; + $[5] = x; } else { - x = $[2]; + x = $[5]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md index c5cfe530bb..0dc5394107 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-exhaustive.expect.md @@ -40,11 +40,19 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should be added a import { identity } from "shared-runtime"; function useCondDepInSwitch(props, other) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== other) { + t0 = identity(other); + $[0] = other; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== other || $[1] !== props.a.b) { + if ($[2] !== t0 || $[3] !== props.a.b) { x = {}; - bb0: switch (identity(other)) { + bb0: switch (t0) { case 1: { x.a = props.a.b; break bb0; @@ -57,11 +65,11 @@ function useCondDepInSwitch(props, other) { x.c = props.a.b; } } - $[0] = other; - $[1] = props.a.b; - $[2] = x; + $[2] = t0; + $[3] = props.a.b; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md index 0ae8786f57..0ed8bc1d67 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-case.expect.md @@ -39,11 +39,19 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be add import { identity } from "shared-runtime"; function useCondDepInSwitchMissingCase(props, other) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== other) { + t0 = identity(other); + $[0] = other; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== other || $[1] !== props) { + if ($[2] !== t0 || $[3] !== props) { x = {}; - bb0: switch (identity(other)) { + bb0: switch (t0) { case 1: { x.a = props.a.b; break bb0; @@ -56,11 +64,11 @@ function useCondDepInSwitchMissingCase(props, other) { x.c = props.a.b; } } - $[0] = other; - $[1] = props; - $[2] = x; + $[2] = t0; + $[3] = props; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md index 0132146fe7..6c48bd5687 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/cfg-switch-missing-default.expect.md @@ -36,11 +36,19 @@ import { c as _c } from "react/compiler-runtime"; // props.a.b should NOT be add import { identity } from "shared-runtime"; function useCondDepInSwitchMissingDefault(props, other) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== other) { + t0 = identity(other); + $[0] = other; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== other || $[1] !== props) { + if ($[2] !== t0 || $[3] !== props) { x = {}; - bb0: switch (identity(other)) { + bb0: switch (t0) { case 1: { x.a = props.a.b; break bb0; @@ -49,11 +57,11 @@ function useCondDepInSwitchMissingDefault(props, other) { x.b = props.a.b; } } - $[0] = other; - $[1] = props; - $[2] = x; + $[2] = t0; + $[3] = props; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md index be2c1c49cb..9b99d254ee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md @@ -28,16 +28,18 @@ import { c as _c } from "react/compiler-runtime"; // To preserve the nullthrows function Component(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = []; + const x = []; + + t0 = x; x.push(props.a?.b); $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md index 9657c47fc9..0349dbfe10 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/join-uncond-scopes-cond-deps.expect.md @@ -61,24 +61,17 @@ 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 x = {}; const y = {}; - let x; - if ($[2] !== props) { - x = {}; - if (CONST_TRUE) { - setProperty(x, props.a.b); - } - $[2] = props; - $[3] = x; - } else { - x = $[3]; + if (CONST_TRUE) { + setProperty(x, props.a.b); } - setProperty(y, props.a.b); t0 = [x, y]; + setProperty(y, props.a.b); $[0] = props.a.b; $[1] = t0; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md index 28357bd2c9..7178c4055c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-in-scope.expect.md @@ -33,11 +33,11 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { - const $ = _c(3); - const { obj, objIsNull } = t0; + const $ = _c(2); let x; - if ($[0] !== objIsNull || $[1] !== obj) { + if ($[0] !== t0) { x = []; + const { obj, objIsNull } = t0; bb0: { if (objIsNull) { break bb0; @@ -45,11 +45,10 @@ function useFoo(t0) { x.push(obj.a); } - $[0] = objIsNull; - $[1] = obj; - $[2] = x; + $[0] = t0; + $[1] = x; } else { - x = $[2]; + x = $[1]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md index b96ec49219..2e972a0a7d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/break-poisons-outer-scope.expect.md @@ -39,30 +39,29 @@ import { c as _c } from "react/compiler-runtime"; import { identity } from "shared-runtime"; function useFoo(t0) { - const $ = _c(5); - const { input, cond } = t0; + const $ = _c(4); let x; - if ($[0] !== cond || $[1] !== input) { + if ($[0] !== t0) { x = []; + const { input, cond } = t0; bb0: { if (cond) { break bb0; } let t1; - if ($[3] !== input.a.b) { + if ($[2] !== input.a.b) { t1 = identity(input.a.b); - $[3] = input.a.b; - $[4] = t1; + $[2] = input.a.b; + $[3] = t1; } else { - t1 = $[4]; + t1 = $[3]; } x.push(t1); } - $[0] = cond; - $[1] = input; - $[2] = x; + $[0] = t0; + $[1] = x; } else { - x = $[2]; + x = $[1]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md index 32adfa1491..374be47acb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/loop-break-in-scope.expect.md @@ -33,11 +33,11 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { - const $ = _c(3); - const { obj, objIsNull } = t0; + const $ = _c(2); let x; - if ($[0] !== objIsNull || $[1] !== obj) { + if ($[0] !== t0) { x = []; + const { obj, objIsNull } = t0; for (let i = 0; i < 5; i++) { if (objIsNull) { continue; @@ -45,11 +45,10 @@ function useFoo(t0) { x.push(obj.a); } - $[0] = objIsNull; - $[1] = obj; - $[2] = x; + $[0] = t0; + $[1] = x; } else { - x = $[2]; + x = $[1]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md index 258155e11c..29feb0e40c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md @@ -33,31 +33,32 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(4); const { obj, objIsNull } = t0; - let x; let t1; + let t2; if ($[0] !== objIsNull || $[1] !== obj) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (objIsNull) { - t1 = undefined; + t2 = undefined; break bb0; } + t1 = x; x.push(obj.b); } $[0] = objIsNull; $[1] = obj; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md index 5c41853c5d..39e776ca87 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md @@ -39,38 +39,40 @@ import { identity } from "shared-runtime"; function useFoo(t0) { const $ = _c(6); const { input, cond } = t0; - let x; let t1; + let t2; if ($[0] !== cond || $[1] !== input) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (cond) { - t1 = null; + t2 = null; break bb0; } - let t2; + + t1 = x; + let t3; if ($[4] !== input.a.b) { - t2 = identity(input.a.b); + t3 = identity(input.a.b); $[4] = input.a.b; - $[5] = t2; + $[5] = t3; } else { - t2 = $[5]; + t3 = $[5]; } - x.push(t2); + x.push(t3); } $[0] = cond; $[1] = input; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md index c110b42011..a11d690a8f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/else-branch-scope-unpoisoned.expect.md @@ -40,29 +40,28 @@ import { c as _c } from "react/compiler-runtime"; import { identity } from "shared-runtime"; function useFoo(t0) { - const $ = _c(5); - const { input, cond } = t0; + const $ = _c(4); let x; - if ($[0] !== cond || $[1] !== input) { + if ($[0] !== t0) { x = []; + const { input, cond } = t0; bb0: if (cond) { break bb0; } else { let t1; - if ($[3] !== input.a.b) { + if ($[2] !== input.a.b) { t1 = identity(input.a.b); - $[3] = input.a.b; - $[4] = t1; + $[2] = input.a.b; + $[3] = t1; } else { - t1 = $[4]; + t1 = $[3]; } x.push(t1); } - $[0] = cond; - $[1] = input; - $[2] = x; + $[0] = t0; + $[1] = x; } else { - x = $[2]; + x = $[1]; } return x[0]; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md index 65fd8710ed..7a152de446 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md @@ -35,23 +35,23 @@ export const FIXTURE_ENTRYPOINT = { ```javascript import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { - const $ = _c(3); - const { input, cond } = t0; - let x; - if ($[0] !== cond || $[1] !== input.a.b) { - x = []; + const $ = _c(2); + let t1; + if ($[0] !== t0) { + const x = []; + const { input, cond } = t0; bb0: if (cond) { break bb0; } + t1 = x; x.push(input.a.b); - $[0] = cond; - $[1] = input.a.b; - $[2] = x; + $[0] = t0; + $[1] = t1; } else { - x = $[2]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md index ba897d4938..3e662db319 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/reduce-if-exhaustive-nonpoisoned-deps.expect.md @@ -33,49 +33,51 @@ import { identity } from "shared-runtime"; function useFoo(t0) { const $ = _c(9); const { input, hasAB, returnNull } = t0; + + const t1 = !hasAB; let x; - let t1; - if ($[0] !== hasAB || $[1] !== input.a || $[2] !== returnNull) { - t1 = Symbol.for("react.early_return_sentinel"); + let t2; + if ($[0] !== t1 || $[1] !== returnNull || $[2] !== input.a) { + t2 = Symbol.for("react.early_return_sentinel"); bb0: { x = []; - if (!hasAB) { - let t2; + if (t1) { + let t3; if ($[5] !== input.a) { - t2 = identity(input.a); + t3 = identity(input.a); $[5] = input.a; - $[6] = t2; + $[6] = t3; } else { - t2 = $[6]; + t3 = $[6]; } - x.push(t2); + x.push(t3); if (!returnNull) { - t1 = null; + t2 = null; break bb0; } } else { - let t2; + let t3; if ($[7] !== input.a.b) { - t2 = identity(input.a.b); + t3 = identity(input.a.b); $[7] = input.a.b; - $[8] = t2; + $[8] = t3; } else { - t2 = $[8]; + t3 = $[8]; } - x.push(t2); + x.push(t3); } } - $[0] = hasAB; - $[1] = input.a; - $[2] = returnNull; + $[0] = t1; + $[1] = returnNull; + $[2] = input.a; $[3] = x; - $[4] = t1; + $[4] = t2; } else { x = $[3]; - t1 = $[4]; + t2 = $[4]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md index 5edc13dead..c95da73e8f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md @@ -51,16 +51,18 @@ function useFoo(t0) { } return t1; } - let x; + let t1; if ($[1] !== input.a.b) { - x = []; + const x = []; + + t1 = x; arrayPush(x, input.a.b); $[1] = input.a.b; - $[2] = x; + $[2] = t1; } else { - x = $[2]; + t1 = $[2]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md index 5751d26c94..8f638ac9fa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md @@ -44,16 +44,18 @@ function useFoo(t0) { if (cond) { throw new Error("throw with error!"); } - let x; + let t1; if ($[0] !== input.a.b) { - x = []; + const x = []; + + t1 = x; arrayPush(x, input.a.b); $[0] = input.a.b; - $[1] = x; + $[1] = t1; } else { - x = $[1]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md index ad5dc911af..1247ef1ac7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md @@ -22,17 +22,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.items) { - x = []; + const x = []; x.push(props.items?.length); + + t0 = x; x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []); $[0] = props.items; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md index 8cef42f2fe..465c940ed2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/no-uncond.expect.md @@ -41,20 +41,28 @@ import { identity } from "shared-runtime"; // track the base object as a dependency. function useOnlyConditionalDependencies(t0) { - const $ = _c(3); + const $ = _c(5); const { props, cond } = t0; - let x; - if ($[0] !== cond || $[1] !== props) { - x = {}; - if (identity(cond)) { - x.b = props.a.b; - x.c = props.a.b.c; - } + let t1; + if ($[0] !== cond) { + t1 = identity(cond); $[0] = cond; - $[1] = props; - $[2] = x; + $[1] = t1; } else { - x = $[2]; + t1 = $[1]; + } + let x; + if ($[2] !== t1 || $[3] !== props) { + x = {}; + if (t1) { + x.c = props.a.b.c; + x.b = props.a.b; + } + $[2] = t1; + $[3] = props; + $[4] = x; + } else { + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md index e7103b68f0..83c86dc09e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/promote-uncond.expect.md @@ -34,19 +34,27 @@ import { identity } from "shared-runtime"; // and promote it to an unconditional dependency. function usePromoteUnconditionalAccessToDependency(props, other) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== other) { + t0 = identity(other); + $[0] = other; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== props.a || $[1] !== other) { + if ($[2] !== props.a || $[3] !== t0) { x = {}; x.a = props.a.a.a; - if (identity(other)) { + if (t0) { x.c = props.a.b.c; } - $[0] = props.a; - $[1] = other; - $[2] = x; + $[2] = props.a; + $[3] = t0; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md index 5771b2a921..f31670a88a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/reduce-if-exhaustive-poisoned-deps.expect.md @@ -34,58 +34,60 @@ import { identity } from "shared-runtime"; function useFoo(t0) { const $ = _c(11); const { input, inputHasAB, inputHasABC } = t0; + + const t1 = !inputHasABC; let x; - let t1; - if ($[0] !== inputHasABC || $[1] !== input.a || $[2] !== inputHasAB) { - t1 = Symbol.for("react.early_return_sentinel"); + let t2; + if ($[0] !== t1 || $[1] !== inputHasAB || $[2] !== input.a) { + t2 = Symbol.for("react.early_return_sentinel"); bb0: { x = []; - if (!inputHasABC) { - let t2; - if ($[5] !== input.a) { - t2 = identity(input.a); - $[5] = input.a; - $[6] = t2; - } else { - t2 = $[6]; - } - x.push(t2); - if (!inputHasAB) { - t1 = null; - break bb0; - } + if (t1) { let t3; - if ($[7] !== input.a.b) { - t3 = identity(input.a.b); - $[7] = input.a.b; - $[8] = t3; + if ($[5] !== input.a) { + t3 = identity(input.a); + $[5] = input.a; + $[6] = t3; } else { - t3 = $[8]; + t3 = $[6]; } x.push(t3); - } else { - let t2; - if ($[9] !== input.a.b.c) { - t2 = identity(input.a.b.c); - $[9] = input.a.b.c; - $[10] = t2; - } else { - t2 = $[10]; + if (!inputHasAB) { + t2 = null; + break bb0; } - x.push(t2); + let t4; + if ($[7] !== input.a.b) { + t4 = identity(input.a.b); + $[7] = input.a.b; + $[8] = t4; + } else { + t4 = $[8]; + } + x.push(t4); + } else { + let t3; + if ($[9] !== input.a.b.c) { + t3 = identity(input.a.b.c); + $[9] = input.a.b.c; + $[10] = t3; + } else { + t3 = $[10]; + } + x.push(t3); } } - $[0] = inputHasABC; - $[1] = input.a; - $[2] = inputHasAB; + $[0] = t1; + $[1] = inputHasAB; + $[2] = input.a; $[3] = x; - $[4] = t1; + $[4] = t2; } else { x = $[3]; - t1 = $[4]; + t2 = $[4]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md index 4f650fafea..c14e3e0a8d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order1.expect.md @@ -38,19 +38,27 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSubpath1(props, cond) { - const $ = _c(3); + const $ = _c(5); + let t0; + if ($[0] !== cond) { + t0 = identity(cond); + $[0] = cond; + $[1] = t0; + } else { + t0 = $[1]; + } let x; - if ($[0] !== props.a || $[1] !== cond) { + if ($[2] !== props.a || $[3] !== t0) { x = {}; x.b = props.a.b; - if (identity(cond)) { + if (t0) { x.a = props.a; } - $[0] = props.a; - $[1] = cond; - $[2] = x; + $[2] = props.a; + $[3] = t0; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md index 66239c1c56..5035f3bb53 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md @@ -38,22 +38,31 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSubpath2(props, other) { - const $ = _c(3); - let x; - if ($[0] !== other || $[1] !== props.a) { - x = {}; - if (identity(other)) { + const $ = _c(5); + let t0; + if ($[0] !== other) { + t0 = identity(other); + $[0] = other; + $[1] = t0; + } else { + t0 = $[1]; + } + let t1; + if ($[2] !== t0 || $[3] !== props.a) { + const x = {}; + if (t0) { x.a = props.a; } + t1 = x; x.b = props.a.b; - $[0] = other; - $[1] = props.a; - $[2] = x; + $[2] = t0; + $[3] = props.a; + $[4] = t1; } else { - x = $[2]; + t1 = $[4]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md index b9047d03d4..e9f37c84f9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order1.expect.md @@ -45,20 +45,28 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSuperpath1(t0) { - const $ = _c(3); + const $ = _c(5); const { props, cond } = t0; + let t1; + if ($[0] !== cond) { + t1 = identity(cond); + $[0] = cond; + $[1] = t1; + } else { + t1 = $[1]; + } let x; - if ($[0] !== props.a || $[1] !== cond) { + if ($[2] !== props.a || $[3] !== t1) { x = {}; x.a = props.a; - if (identity(cond)) { + if (t1) { x.b = props.a.b; } - $[0] = props.a; - $[1] = cond; - $[2] = x; + $[2] = props.a; + $[3] = t1; + $[4] = x; } else { - x = $[2]; + x = $[4]; } return x; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md index 86d435d4cc..f77109c18f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md @@ -45,23 +45,32 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSuperpath2(t0) { - const $ = _c(3); + const $ = _c(5); const { props, cond } = t0; - let x; - if ($[0] !== cond || $[1] !== props.a) { - x = {}; - if (identity(cond)) { + let t1; + if ($[0] !== cond) { + t1 = identity(cond); + $[0] = cond; + $[1] = t1; + } else { + t1 = $[1]; + } + let t2; + if ($[2] !== t1 || $[3] !== props.a) { + const x = {}; + if (t1) { x.b = props.a.b; } + t2 = x; x.a = props.a; - $[0] = cond; - $[1] = props.a; - $[2] = x; + $[2] = t1; + $[3] = props.a; + $[4] = t2; } else { - x = $[2]; + t2 = $[4]; } - return x; + return t2; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md index ffdc707d1f..a1fd7de4a6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md @@ -26,20 +26,22 @@ import { c as _c } from "react/compiler-runtime"; // Test that we can track non- // (not needed for correctness but for dependency granularity) function TestNonOverlappingDescendantTracked(props) { const $ = _c(4); - let x; - if ($[0] !== props.a.x.y || $[1] !== props.a.c.x.y.z || $[2] !== props.b) { - x = {}; - x.a = props.a.x.y; - x.b = props.b; + let t0; + if ($[0] !== props.a.c.x.y.z || $[1] !== props.a.x.y || $[2] !== props.b) { + const x = {}; + + t0 = x; x.c = props.a.c.x.y.z; - $[0] = props.a.x.y; - $[1] = props.a.c.x.y.z; + x.b = props.b; + x.a = props.a.x.y; + $[0] = props.a.c.x.y.z; + $[1] = props.a.x.y; $[2] = props.b; - $[3] = x; + $[3] = t0; } else { - x = $[3]; + t0 = $[3]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md index d3c033aed4..1a41c0a2c2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-in-effect.expect.md @@ -35,24 +35,24 @@ function Component(props) { } const onChange = t0; let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => { + if ($[1] !== onChange) { + t1 = ; + $[1] = onChange; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { console.log(ref.current); }; - $[1] = t1; - } else { - t1 = $[1]; - } - useEffect(t1); - let t2; - if ($[2] !== onChange) { - t2 = ; - $[2] = onChange; $[3] = t2; } else { t2 = $[3]; } - return t2; + useEffect(t2); + return t1; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md index be8a4748c3..b0e04fb8a4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-parameter-mutate-in-effect.expect.md @@ -28,28 +28,28 @@ import { useEffect } from "react"; function Foo(props, ref) { const $ = _c(4); let t0; + if ($[0] !== props.bar) { + t0 =
{props.bar}
; + $[0] = props.bar; + $[1] = t0; + } else { + t0 = $[1]; + } let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + let t2; + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t1 = () => { ref.current = 2; }; - t1 = []; - $[0] = t0; - $[1] = t1; - } else { - t0 = $[0]; - t1 = $[1]; - } - useEffect(t0, t1); - let t2; - if ($[2] !== props.bar) { - t2 =
{props.bar}
; - $[2] = props.bar; + t2 = []; + $[2] = t1; $[3] = t2; } else { + t1 = $[2]; t2 = $[3]; } - return t2; + useEffect(t1, t2); + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md index 67e78bcc7e..cf2fdba4c6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-allocating-ternary-test-instruction-scope.expect.md @@ -33,7 +33,8 @@ import { identity, makeObject_Primitives } from "shared-runtime"; function useTest(t0) { const $ = _c(3); - const { cond } = t0; + + useHook(); let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = makeObject_Primitives(); @@ -42,8 +43,7 @@ function useTest(t0) { t1 = $[0]; } const val = t1; - - useHook(); + const { cond } = t0; let t2; if ($[1] !== cond) { t2 = identity(cond) ? val : null; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md index aea1dd5473..6bc80a0664 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-capturing-map-after-hook.expect.md @@ -39,47 +39,44 @@ import { useEffect, useState } from "react"; import { mutate } from "shared-runtime"; function Component(props) { - const $ = _c(6); - const x = [{ ...props.value }]; + const $ = _c(4); let t0; - let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => {}; - t1 = []; - $[0] = t0; - $[1] = t1; - } else { - t0 = $[0]; - t1 = $[1]; - } - useEffect(t0, t1); - const onClick = () => { - console.log(x.length); - }; + if ($[0] !== props.value) { + const x = [{ ...props.value }]; - let y; + const onClick = () => { + console.log(x.length); + }; - const t2 = x.map((item) => { - y = item; - return {item.text}; - }); - const t3 = mutate(y); - let t4; - if ($[2] !== onClick || $[3] !== t2 || $[4] !== t3) { - t4 = ( + let y; + + t0 = (
- {t2} - {t3} + {x.map((item) => { + y = item; + return {item.text}; + })} + {mutate(y)}
); - $[2] = onClick; - $[3] = t2; - $[4] = t3; - $[5] = t4; + $[0] = props.value; + $[1] = t0; } else { - t4 = $[5]; + t0 = $[1]; } - return t4; + let t1; + let t2; + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t1 = () => {}; + t2 = []; + $[2] = t1; + $[3] = t2; + } else { + t1 = $[2]; + t2 = $[3]; + } + useEffect(t1, t2); + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md index 1c96a67ea9..f7532e80c5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-dont-memoize-array-with-mutable-map-after-hook.expect.md @@ -39,52 +39,63 @@ import { useEffect, useState } from "react"; import { mutate } from "shared-runtime"; function Component(props) { - const $ = _c(6); - const x = [{ ...props.value }]; + const $ = _c(9); let t0; let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => {}; - t1 = []; - $[0] = t0; - $[1] = t1; - } else { - t0 = $[0]; - t1 = $[1]; - } - useEffect(t0, t1); - const onClick = () => { - console.log(x.length); - }; + if ($[0] !== props.value) { + const x = [{ ...props.value }]; + const onClick = () => { + console.log(x.length); + }; + + t0 = onClick; + t1 = x.map((item) => { + item.flag = true; + return {item.text}; + }); + $[0] = props.value; + $[1] = t0; + $[2] = t1; + } else { + t0 = $[1]; + t1 = $[2]; + } let y; - - const t2 = x.map((item) => { - item.flag = true; - return {item.text}; - }); - let t3; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t3 = mutate(y); - $[2] = t3; + let t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = mutate(y); + $[3] = t2; } else { - t3 = $[2]; + t2 = $[3]; } - let t4; - if ($[3] !== onClick || $[4] !== t2) { - t4 = ( -
+ let t3; + if ($[4] !== t0 || $[5] !== t1) { + t3 = ( +
+ {t1} {t2} - {t3}
); - $[3] = onClick; - $[4] = t2; - $[5] = t4; + $[4] = t0; + $[5] = t1; + $[6] = t3; } else { - t4 = $[5]; + t3 = $[6]; } - return t4; + let t4; + let t5; + if ($[7] === Symbol.for("react.memo_cache_sentinel")) { + t4 = () => {}; + t5 = []; + $[7] = t4; + $[8] = t5; + } else { + t4 = $[7]; + t5 = $[8]; + } + useEffect(t4, t5); + return t3; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md index 8415c0093e..d40acb8637 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-hoisting.expect.md @@ -27,6 +27,8 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(4); + + const pathname_0 = props.wat; let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = () => {}; @@ -35,9 +37,6 @@ function Component(props) { t0 = $[0]; } const wat = t0; - - const pathname_0 = props.wat; - const deeplinkItemId = pathname_0 ? props.itemID : null; let t1; if ($[1] === Symbol.for("react.memo_cache_sentinel")) { t1 = () => wat(); @@ -45,6 +44,7 @@ function Component(props) { } else { t1 = $[1]; } + const deeplinkItemId = pathname_0 ? props.itemID : null; let t2; if ($[2] !== deeplinkItemId) { t2 = ; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md index d0c2412b89..09617c47fa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-independently-memoized-property-load-for-method-call.expect.md @@ -55,42 +55,43 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(t0) { const $ = _c(8); - const { label, highlightedItem } = t0; const serverTime = useServerTime(); + + const time = serverTime.get(); + const { label, highlightedItem } = t0; let t1; - let timestampLabel; - if ($[0] !== highlightedItem || $[1] !== serverTime || $[2] !== label) { + let t2; + if ($[0] !== highlightedItem || $[1] !== time || $[2] !== label) { const highlight = new Highlight(highlightedItem); - const time = serverTime.get(); + t1 = time / 1000 || label; - timestampLabel = time / 1000 || label; - - t1 = highlight.render(); + t2 = highlight.render(); $[0] = highlightedItem; - $[1] = serverTime; + $[1] = time; $[2] = label; $[3] = t1; - $[4] = timestampLabel; + $[4] = t2; } else { t1 = $[3]; - timestampLabel = $[4]; + t2 = $[4]; } - let t2; - if ($[5] !== t1 || $[6] !== timestampLabel) { - t2 = ( + const timestampLabel = t1; + let t3; + if ($[5] !== t2 || $[6] !== timestampLabel) { + t3 = ( <> - {t1} + {t2} {timestampLabel} ); - $[5] = t1; + $[5] = t2; $[6] = timestampLabel; - $[7] = t2; + $[7] = t3; } else { - t2 = $[7]; + t3 = $[7]; } - return t2; + return t3; } function useServerTime() { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md index f1fc418d92..df31dd7948 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md @@ -35,74 +35,81 @@ import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRul import { Stringify, identity, useHook } from "shared-runtime"; function Component(t0) { - const $ = _c(17); - const { index } = t0; + const $ = _c(19); const data = useHook(); - let T0; + const { index } = t0; let t1; - let t2; - let t3; if ($[0] !== data || $[1] !== index) { - const a = identity(data, index); const b = identity(data, index); - const c = identity(data, index); - const t4 = identity(b); - if ($[6] !== t4) { - t2 = ; - $[6] = t4; - $[7] = t2; - } else { - t2 = $[7]; - } - const t5 = identity(a); - if ($[8] !== t5) { - t3 = ; - $[8] = t5; - $[9] = t3; - } else { - t3 = $[9]; - } - T0 = Stringify; - t1 = identity(c); + t1 = identity(b); $[0] = data; $[1] = index; - $[2] = T0; + $[2] = t1; + } else { + t1 = $[2]; + } + let t2; + if ($[3] !== t1) { + t2 = ; $[3] = t1; $[4] = t2; - $[5] = t3; } else { - T0 = $[2]; - t1 = $[3]; t2 = $[4]; - t3 = $[5]; + } + let t3; + if ($[5] !== data || $[6] !== index) { + const a = identity(data, index); + t3 = identity(a); + $[5] = data; + $[6] = index; + $[7] = t3; + } else { + t3 = $[7]; } let t4; - if ($[10] !== T0 || $[11] !== t1) { - t4 = ; - $[10] = T0; - $[11] = t1; - $[12] = t4; + if ($[8] !== t3) { + t4 = ; + $[8] = t3; + $[9] = t4; } else { - t4 = $[12]; + t4 = $[9]; } let t5; - if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) { - t5 = ( + if ($[10] !== data || $[11] !== index) { + const c = identity(data, index); + t5 = identity(c); + $[10] = data; + $[11] = index; + $[12] = t5; + } else { + t5 = $[12]; + } + let t6; + if ($[13] !== t5) { + t6 = ; + $[13] = t5; + $[14] = t6; + } else { + t6 = $[14]; + } + let t7; + if ($[15] !== t2 || $[16] !== t4 || $[17] !== t6) { + t7 = (
{t2} - {t3} {t4} + {t6}
); - $[13] = t2; - $[14] = t3; - $[15] = t4; - $[16] = t5; + $[15] = t2; + $[16] = t4; + $[17] = t6; + $[18] = t7; } else { - t5 = $[16]; + t7 = $[18]; } - return t5; + return t7; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md index c58986bbc8..18f0580980 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-invalid-scope-merging-value-blocks.expect.md @@ -40,6 +40,7 @@ export const FIXTURE_ENTRYPOINT = { ## Code ```javascript +import { c as _c } from "react/compiler-runtime"; import { CONST_TRUE, identity, @@ -57,14 +58,25 @@ import { * (3) mergeOverlappingScopes should merge the scopes of the above two instructions */ function Component(t0) { - const value = makeObject_Primitives(); + const $ = _c(1); + useHook(); - const mutatedValue = - identity(1) && CONST_TRUE ? mutateAndReturn(value) : null; - const result = []; + let t1; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + const value = makeObject_Primitives(); + + const result = []; + + t1 = result; + const mutatedValue = + identity(1) && CONST_TRUE ? mutateAndReturn(value) : null; + result.push(value, mutatedValue); + $[0] = t1; + } else { + t1 = $[0]; + } useHook(); - result.push(value, mutatedValue); - return result; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md index 33f1330d7e..940cb72c21 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-memoize-array-with-immutable-map-after-hook.expect.md @@ -45,46 +45,46 @@ function Component(props) { } const x = t0; let t1; - let t2; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => {}; - t2 = []; - $[2] = t1; - $[3] = t2; - } else { - t1 = $[2]; - t2 = $[3]; - } - useEffect(t1, t2); - let t3; - if ($[4] !== x.length) { - t3 = () => { + if ($[2] !== x.length) { + t1 = () => { console.log(x.length); }; - $[4] = x.length; - $[5] = t3; + $[2] = x.length; + $[3] = t1; } else { - t3 = $[5]; + t1 = $[3]; + } + const onClick = t1; + let t2; + if ($[4] !== x) { + t2 = x.map((item) => {item}); + $[4] = x; + $[5] = t2; + } else { + t2 = $[5]; + } + let t3; + if ($[6] !== onClick || $[7] !== t2) { + t3 =
{t2}
; + $[6] = onClick; + $[7] = t2; + $[8] = t3; + } else { + t3 = $[8]; } - const onClick = t3; let t4; - if ($[6] !== x) { - t4 = x.map((item) => {item}); - $[6] = x; - $[7] = t4; - } else { - t4 = $[7]; - } let t5; - if ($[8] !== onClick || $[9] !== t4) { - t5 =
{t4}
; - $[8] = onClick; + if ($[9] === Symbol.for("react.memo_cache_sentinel")) { + t4 = () => {}; + t5 = []; $[9] = t4; $[10] = t5; } else { + t4 = $[9]; t5 = $[10]; } - return t5; + useEffect(t4, t5); + return t3; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md index 6438a28fdb..7aed4346c6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-dependency-if-within-while.expect.md @@ -40,20 +40,21 @@ import { c as _c } from "react/compiler-runtime"; const someGlobal = true; export default function Component(props) { const $ = _c(2); - const { b } = props; + + let i = 0; let t0; - if ($[0] !== b) { + if ($[0] !== props) { const items = []; - let i = 0; + const { b } = props; while (i < 10) { if (someGlobal) { - items.push(
{b}
); i++; + items.push(
{b}
); } } t0 = <>{items}; - $[0] = b; + $[0] = props; $[1] = t0; } else { t0 = $[1]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md index 4b9822fdb8..2d54a8bbd0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutable-range-extending-into-ternary.expect.md @@ -55,8 +55,8 @@ export const FIXTURE_ENTRYPOINT = { import { useState } from "react"; function Component(props) { - const items = props.items ? props.items.slice() : []; const [state] = useState(""); + const items = props.items ? props.items.slice() : []; return props.cond ? (
{state}
) : ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md index ffd18500f1..e19c314971 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-declarations-in-reactive-scope-with-early-return.expect.md @@ -40,8 +40,8 @@ function Component() { import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRulesOfReact @enableTransitivelyFreezeFunctionExpressions function Component() { const $ = _c(9); - const items = useItems(); let t0; + const items = useItems(); let t1; let t2; if ($[0] !== items) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md index e75ea02545..9ed670f6e2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary-reactive-scope-with-early-return.expect.md @@ -39,13 +39,14 @@ import fbt from "fbt"; function Component(props) { const $ = _c(2); + + const cond = makeObject_Primitives(); let t0; let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t1 = Symbol.for("react.early_return_sentinel"); bb0: { const object = makeObject_Primitives(); - const cond = makeObject_Primitives(); if (!cond) { t1 = null; break bb0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md index 5eff1aa0fe..7e4c061a45 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md @@ -17,34 +17,26 @@ function Component(listItem, thread) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(listItem, thread) { - const $ = _c(7); + const $ = _c(5); let t0; - let t1; - let t2; if ($[0] !== thread.threadType || $[1] !== listItem) { const isFoo = isFooThread(thread.threadType); - t1 = useBar; - t2 = listItem; t0 = getBadgeText(listItem, isFoo); $[0] = thread.threadType; $[1] = listItem; $[2] = t0; - $[3] = t1; - $[4] = t2; } else { t0 = $[2]; - t1 = $[3]; - t2 = $[4]; } - let t3; - if ($[5] !== t0) { - t3 = [t0]; - $[5] = t0; - $[6] = t3; + let t1; + if ($[3] !== t0) { + t1 = [t0]; + $[3] = t0; + $[4] = t1; } else { - t3 = $[6]; + t1 = $[4]; } - const body = t1(t2, t3); + const body = useBar(listItem, t1); return body; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md index 719ef502af..03cc1f07fc 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-reassign-to-variable-without-mutable-range.expect.md @@ -21,55 +21,47 @@ function Component(a, b) { ```javascript import { c as _c } from "react/compiler-runtime"; // @debug function Component(a, b) { - const $ = _c(11); + const $ = _c(7); let t0; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[0] = t0; - } else { - t0 = $[0]; - } - let x = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = []; - $[1] = t1; - } else { - t1 = $[1]; - } - let y = t1; - if ($[2] !== a || $[3] !== b) { + if ($[0] !== a || $[1] !== b) { const z = foo(a); - if (FLAG) { - x = bar(z); - let t2; - if ($[6] !== b) { - t2 = baz(b); - $[6] = b; - $[7] = t2; - } else { - t2 = $[7]; - } - y = t2; + let t1; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[3] = t1; + } else { + t1 = $[3]; } - $[2] = a; - $[3] = b; - $[4] = x; - $[5] = y; + let y = t1; + let t2; + if ($[4] === Symbol.for("react.memo_cache_sentinel")) { + t2 = []; + $[4] = t2; + } else { + t2 = $[4]; + } + let x = t2; + if (FLAG) { + let t3; + if ($[5] !== b) { + t3 = baz(b); + $[5] = b; + $[6] = t3; + } else { + t3 = $[6]; + } + y = t3; + x = bar(z); + } + + t0 = [x, y]; + $[0] = a; + $[1] = b; + $[2] = t0; } else { - x = $[4]; - y = $[5]; + t0 = $[2]; } - let t2; - if ($[8] !== x || $[9] !== y) { - t2 = [x, y]; - $[8] = x; - $[9] = y; - $[10] = t2; - } else { - t2 = $[10]; - } - return t2; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md index 686752f9fd..297a5a4619 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md @@ -46,9 +46,10 @@ import { Stringify, identity, makeArray, toJSON } from "shared-runtime"; import { useMemo } from "react"; function Component(props) { - const $ = _c(13); + const $ = _c(17); let t0; let t1; + let T0; let t2; if ($[0] !== props) { t2 = Symbol.for("react.early_return_sentinel"); @@ -60,73 +61,79 @@ function Component(props) { break bb0; } + T0 = Stringify; t1 = identity(propsString); } $[0] = props; $[1] = t1; - $[2] = t2; - $[3] = t0; + $[2] = T0; + $[3] = t2; + $[4] = t0; } else { t1 = $[1]; - t2 = $[2]; - t0 = $[3]; + T0 = $[2]; + t2 = $[3]; + t0 = $[4]; } if (t2 !== Symbol.for("react.early_return_sentinel")) { return t2; } let t3; - if ($[4] !== t1) { + if ($[5] !== t1) { t3 = { url: t1 }; - $[4] = t1; - $[5] = t3; + $[5] = t1; + $[6] = t3; } else { - t3 = $[5]; + t3 = $[6]; } const linkProps = t3; let t4; - if ($[6] !== linkProps) { - const x = {}; - let t5; - let t6; - let t7; - let t8; - let t9; - if ($[8] === Symbol.for("react.memo_cache_sentinel")) { - t5 = [1]; - t6 = [2]; - t7 = [3]; - t8 = [4]; - t9 = [5]; - $[8] = t5; - $[9] = t6; - $[10] = t7; - $[11] = t8; - $[12] = t9; - } else { - t5 = $[8]; - t6 = $[9]; - t7 = $[10]; - t8 = $[11]; - t9 = $[12]; - } - t4 = ( - - {makeArray(x, 2)} - - ); - $[6] = linkProps; + let t5; + let t6; + let t7; + let t8; + if ($[7] === Symbol.for("react.memo_cache_sentinel")) { + t4 = [1]; + t5 = [2]; + t6 = [3]; + t7 = [4]; + t8 = [5]; $[7] = t4; + $[8] = t5; + $[9] = t6; + $[10] = t7; + $[11] = t8; } else { t4 = $[7]; + t5 = $[8]; + t6 = $[9]; + t7 = $[10]; + t8 = $[11]; } - return t4; + let t9; + if ($[12] === Symbol.for("react.memo_cache_sentinel")) { + const x = {}; + + t9 = makeArray(x, 2); + $[12] = t9; + } else { + t9 = $[12]; + } + let t10; + if ($[13] !== T0 || $[14] !== linkProps || $[15] !== t9) { + t10 = ( + + {t9} + + ); + $[13] = T0; + $[14] = linkProps; + $[15] = t9; + $[16] = t10; + } else { + t10 = $[16]; + } + return t10; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md index bb8c67482c..1da20792bd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-scope-missing-mutable-range.expect.md @@ -18,34 +18,16 @@ function HomeDiscoStoreItemTileRating(props) { ## Code ```javascript -import { c as _c } from "react/compiler-runtime"; function HomeDiscoStoreItemTileRating(props) { - const $ = _c(4); - const item = useFragment(); let count; - if ($[0] !== item) { - count = 0; - const aggregates = item?.aggregates || []; - aggregates.forEach((aggregate) => { - count = count + (aggregate.count || 0); - count; - }); - $[0] = item; - $[1] = count; - } else { - count = $[1]; - } - - const t0 = count; - let t1; - if ($[2] !== t0) { - t1 = {t0}; - $[2] = t0; - $[3] = t1; - } else { - t1 = $[3]; - } - return t1; + count = 0; + const item = useFragment(); + const aggregates = item?.aggregates || []; + aggregates.forEach((aggregate) => { + count = count + (aggregate.count || 0); + count; + }); + return {count}; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md index 732f11d311..8c1b0052d6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-unreachable-code-early-return-in-useMemo.expect.md @@ -46,8 +46,8 @@ import { ValidateMemoization, identity } from "shared-runtime"; function Component(t0) { const $ = _c(7); - const { value } = t0; let t1; + const { value } = t0; bb0: { if (value == null) { t1 = null; @@ -65,9 +65,9 @@ function Component(t0) { t1 = t3; } catch (t2) { t1 = null; + const e = t2; } } - const result = t1; let t2; if ($[2] !== value) { t2 = [value]; @@ -76,6 +76,7 @@ function Component(t0) { } else { t2 = $[3]; } + const result = t1; let t3; if ($[4] !== t2 || $[5] !== result) { t3 = ; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index 07e508b259..52be50f0dd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -25,11 +25,11 @@ function Component(props) { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(6); - const item = props.item; let baseVideos; let thumbnails; - if ($[0] !== item) { + if ($[0] !== props.item) { thumbnails = []; + const item = props.item; baseVideos = getBaseVideos(item); baseVideos.forEach((video) => { @@ -38,7 +38,7 @@ function Component(props) { thumbnails.push({ extraVideo: true }); } }); - $[0] = item; + $[0] = props.item; $[1] = baseVideos; $[2] = thumbnails; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md index 24b58ceff6..0acdaef8ff 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/rules-of-hooks-9a47e97b5d13.expect.md @@ -18,7 +18,6 @@ import { c as _c } from "react/compiler-runtime"; // Valid because hooks can be // forwardRef. const FancyButton = React.forwardRef(function (props, ref) { const $ = _c(3); - useHook(); let t0; if ($[0] !== props || $[1] !== ref) { t0 =