From 9550528a2e9036cd949ab92fcf61796b7c6d517d Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Wed, 12 Jun 2024 16:36:30 -0700 Subject: [PATCH] [compiler] Optimize emission in normal (non-value) blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In #29863 I tried to find a clean way to share code for emitting instructions between value blocks and regular blocks. The catch is that value blocks have special meaning for their final instruction — that's the value of the block — so reordering can't change the last instruction. However, in finding a clean way to share code for these two categories of code, i also inadvertently reduced the effectiveness of the optimization. This PR updates to use different strategies for these two kinds of blocks: value blocks use the code from #29863 where we first emit all non-reorderable instructions in their original order, _then_ try to emit reorderable values. The reason this is suboptimal, though, is that we want to move instructions closer to their dependencies so that they can invalidate (merge) together. Emitting the reorderable values last prevents this. So for normal blocks, we now emit terminal operands first. This will invariably cause _some_ of the non-reorderable instructions to be emitted, but it will intersperse reoderable instructions in between, right after their dependencies. This maximizes our ability to merge scopes. I think the complexity cost of two strategies is worth the benefit, though i still need to double-check all the output changes. [ghstack-poisoned] --- .../src/HIR/Environment.ts | 2 +- .../src/Optimization/InstructionReordering.ts | 169 ++++++++++++------ .../compiler/alias-computed-load.expect.md | 11 +- .../alias-nested-member-path-mutate.expect.md | 12 +- .../alias-nested-member-path.expect.md | 12 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- ...obal-mutation-in-effect-indirect.expect.md | 52 +++--- ...-reassignment-in-effect-indirect.expect.md | 52 +++--- ...-callback-passed-to-jsx-indirect.expect.md | 20 +-- ...ng-ref-in-callback-passed-to-jsx.expect.md | 20 +-- ...-callback-passed-to-jsx-indirect.expect.md | 20 +-- ...operty-in-callback-passed-to-jsx.expect.md | 20 +-- .../array-at-mutate-after-capture.expect.md | 12 +- .../compiler/array-push-effect.expect.md | 22 +-- .../assignment-expression-computed.expect.md | 12 +- ...ssignment-expression-nested-path.expect.md | 12 +- ...-variations-complex-lvalue-array.expect.md | 12 +- ...gnment-variations-complex-lvalue.expect.md | 12 +- .../await-side-effecting-promise.expect.md | 12 +- .../compiler/call-args-assignment.expect.md | 12 +- ...ll-args-destructuring-assignment.expect.md | 12 +- .../capture-indirect-mutate-alias.expect.md | 14 +- .../capture_mutate-across-fns.expect.md | 14 +- ...fun-alias-captured-mutate-2-iife.expect.md | 11 +- ...ring-fun-alias-captured-mutate-2.expect.md | 13 +- ...alias-captured-mutate-arr-2-iife.expect.md | 11 +- ...-fun-alias-captured-mutate-arr-2.expect.md | 13 +- ...c-alias-captured-mutate-arr-iife.expect.md | 11 +- ...g-func-alias-captured-mutate-arr.expect.md | 12 +- ...-func-alias-captured-mutate-iife.expect.md | 11 +- ...uring-func-alias-captured-mutate.expect.md | 12 +- ...-func-alias-computed-mutate-iife.expect.md | 11 +- ...uring-func-alias-computed-mutate.expect.md | 12 +- ...capturing-func-alias-mutate-iife.expect.md | 11 +- .../capturing-func-alias-mutate.expect.md | 12 +- ...as-receiver-computed-mutate-iife.expect.md | 11 +- ...c-alias-receiver-computed-mutate.expect.md | 12 +- ...-func-alias-receiver-mutate-iife.expect.md | 11 +- ...uring-func-alias-receiver-mutate.expect.md | 12 +- .../capturing-func-mutate-2.expect.md | 13 +- .../capturing-func-mutate-nested.expect.md | 13 +- .../compiler/capturing-func-mutate.expect.md | 13 +- .../capturing-function-decl.expect.md | 11 +- .../chained-assignment-expressions.expect.md | 12 +- .../codegen-emit-make-read-only.expect.md | 12 +- .../computed-call-evaluation-order.expect.md | 11 +- .../compiler/computed-store-alias.expect.md | 12 +- .../conditional-break-labeled.expect.md | 11 +- .../conditional-early-return.expect.md | 80 +++++---- .../compiler/constant-computed.expect.md | 12 +- .../compiler/debugger-memoized.expect.md | 11 +- .../delete-computed-property.expect.md | 12 +- .../compiler/delete-property.expect.md | 12 +- ...-while-early-unconditional-break.expect.md | 11 +- ...er-declaration-of-previous-scope.expect.md | 32 ++-- ...rycatch-nested-overlapping-range.expect.md | 2 +- ...rror.repro-bug-ref-mutable-range.expect.md | 2 +- ...fe-return-modified-later-logical.expect.md | 2 +- ...do-reactive-scope-overlaps-label.expect.md | 2 +- ...todo-reactive-scope-overlaps-try.expect.md | 2 +- ...nterleaved-allocating-dependency.expect.md | 12 +- ...ved-allocating-nested-dependency.expect.md | 12 +- ...interleaved-primitive-dependency.expect.md | 12 +- ...no-whitespace-btw-text-and-param.expect.md | 7 +- .../fbt/fbt-preserve-whitespace.expect.md | 7 +- ...-single-space-btw-param-and-text.expect.md | 7 +- ...bt-whitespace-around-param-value.expect.md | 7 +- .../fbt/fbt-whitespace-within-text.expect.md | 7 +- ...btparam-with-jsx-element-content.expect.md | 15 +- .../compiler/fbt/lambda-with-fbt.expect.md | 20 +-- ...onmutating-loop-local-collection.expect.md | 32 ++-- .../function-declaration-simple.expect.md | 21 +-- ...pression-with-store-to-parameter.expect.md | 12 +- .../iife-return-modified-later.expect.md | 11 +- ...rtent-mutability-readonly-lambda.expect.md | 12 +- ...endently-memoize-object-property.expect.md | 22 +-- ...-promoted-to-outer-scope-dynamic.expect.md | 65 +++---- ...ue933-disjoint-set-infinite-loop.expect.md | 12 +- .../fixtures/compiler/jsx-freeze.expect.md | 12 +- .../jsx-preserve-whitespace.expect.md | 32 ++-- .../lambda-capture-returned-alias.expect.md | 12 +- ...merge-consecutive-scopes-objects.expect.md | 39 ++-- ...ge-consecutive-scopes-reordering.expect.md | 54 +++--- .../merge-consecutive-scopes.expect.md | 46 +++-- ...e-nested-scopes-with-same-inputs.expect.md | 12 +- .../compiler/merge-scopes-callback.expect.md | 32 ++-- ...ged-scopes-are-valid-effect-deps.expect.md | 14 +- .../mutable-lifetime-with-aliasing.expect.md | 11 +- ...mutation-during-jsx-construction.expect.md | 11 +- ...-within-capture-and-mutablerange.expect.md | 11 +- ...opes-begin-same-instr-valueblock.expect.md | 11 +- ...bj-literal-mutated-after-if-else.expect.md | 10 +- ...mutated-after-if-else-with-alias.expect.md | 10 +- .../obj-mutated-after-if-else.expect.md | 10 +- ...-after-nested-if-else-with-alias.expect.md | 10 +- ...d-shorthand-aliased-mutate-after.expect.md | 11 +- ...t-method-shorthand-mutated-after.expect.md | 11 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- ...-within-capture-and-mutablerange.expect.md | 25 +-- .../compiler/phi-reference-effects.expect.md | 11 +- .../property-call-evaluation-order.expect.md | 11 +- .../reactive-scope-grouping.expect.md | 12 +- ...active-cond-deps-return-in-scope.expect.md | 23 +-- .../conditional-member-expr.expect.md | 12 +- .../jump-poisoned/return-in-scope.expect.md | 23 +-- .../return-poisons-outer-scope.expect.md | 34 ++-- .../jump-target-within-scope-label.expect.md | 11 +- ...p-target-within-scope-loop-break.expect.md | 12 +- .../return-before-scope-starts.expect.md | 12 +- .../throw-before-scope-starts.expect.md | 12 +- .../memberexpr-join-optional-chain.expect.md | 12 +- .../memberexpr-join-optional-chain2.expect.md | 12 +- .../subpath-order2.expect.md | 11 +- .../superpath-order2.expect.md | 11 +- .../uncond-nonoverlap-descendant.expect.md | 12 +- .../uncond-nonoverlap-direct.expect.md | 12 +- .../uncond-overlap-descendant.expect.md | 12 +- .../uncond-overlap-direct.expect.md | 12 +- .../uncond-subpath-order1.expect.md | 12 +- .../uncond-subpath-order2.expect.md | 12 +- .../uncond-subpath-order3.expect.md | 12 +- ...on-from-merge-consecutive-scopes.expect.md | 37 ++-- ...ion-part-of-already-closed-scope.expect.md | 83 +++++---- .../repro-no-value-for-temporary.expect.md | 22 +-- .../repro-separate-scopes-for-divs.expect.md | 24 +-- .../fixtures/compiler/simple-alias.expect.md | 12 +- .../ssa-cascading-eliminated-phis.expect.md | 11 +- ...a-property-alias-alias-mutate-if.expect.md | 11 +- .../ssa-property-alias-mutate-if.expect.md | 11 +- .../ssa-property-alias-mutate.expect.md | 13 +- .../compiler/ssa-property-call.expect.md | 12 +- .../compiler/ssa-property-mutate-2.expect.md | 12 +- .../ssa-property-mutate-alias.expect.md | 12 +- .../compiler/ssa-property-mutate.expect.md | 12 +- .../fixtures/compiler/ssa-property.expect.md | 12 +- ...ernary-destruction-with-mutation.expect.md | 12 +- ...a-renaming-ternary-with-mutation.expect.md | 12 +- ...onditional-ternary-with-mutation.expect.md | 12 +- ...ming-unconditional-with-mutation.expect.md | 11 +- ...-via-destructuring-with-mutation.expect.md | 11 +- .../ssa-renaming-with-mutation.expect.md | 11 +- .../compiler/store-via-call.expect.md | 12 +- .../fixtures/compiler/store-via-new.expect.md | 12 +- .../try-catch-alias-try-values.expect.md | 15 +- .../try-catch-in-nested-scope.expect.md | 24 +-- .../try-catch-within-mutable-range.expect.md | 31 ++-- .../compiler/useEffect-arg-memoized.expect.md | 44 ++--- .../useEffect-nested-lambdas.expect.md | 57 +++--- ...-preserve-memoization-guarantees.expect.md | 12 +- ...tion-with-mutable-range-is-valid.expect.md | 2 +- 150 files changed, 1375 insertions(+), 1201 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 45344e72662..e4e537094f6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -269,7 +269,7 @@ const EnvironmentConfigSchema = z.object({ * Enable instruction reordering. See InstructionReordering.ts for the details * of the approach. */ - enableInstructionReordering: z.boolean().default(false), + enableInstructionReordering: z.boolean().default(true), /* * Enables instrumentation codegen. This emits a dev-mode only call to an diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts index 9a12a0e077b..0db813b0160 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts @@ -245,67 +245,131 @@ function reorderBlock( DEBUG && console.log(`bb${block.id}`); - // First emit everything that can't be reordered - if (previous !== null) { - DEBUG && console.log(`(last non-reorderable instruction)`); - DEBUG && print(env, locals, shared, seen, previous); - emit(env, locals, shared, nextInstructions, previous); - } - /* - * For "value" blocks the final instruction represents its value, so we have to be - * careful to not change the ordering. Emit the last instruction explicitly. - * Any non-reorderable instructions will get emitted first, and any unused - * reorderable instructions can be deferred to the shared node list. + /** + * The ideal order for emitting instructions may change the final instruction, + * but value blocks have special semantics for the final instruction of a block - + * that's the expression's value!. So we choose between a less optimal strategy + * for value blocks which preserves the final instruction order OR a more optimal + * ordering for statement-y blocks. */ - if (isExpressionBlockKind(block.kind) && block.instructions.length !== 0) { - DEBUG && console.log(`(block value)`); - DEBUG && - print( + if (isExpressionBlockKind(block.kind)) { + // First emit everything that can't be reordered + if (previous !== null) { + DEBUG && console.log(`(last non-reorderable instruction)`); + DEBUG && print(env, locals, shared, seen, previous); + emit(env, locals, shared, nextInstructions, previous); + } + /* + * For "value" blocks the final instruction represents its value, so we have to be + * careful to not change the ordering. Emit the last instruction explicitly. + * Any non-reorderable instructions will get emitted first, and any unused + * reorderable instructions can be deferred to the shared node list. + */ + if (block.instructions.length !== 0) { + DEBUG && console.log(`(block value)`); + DEBUG && + print( + env, + locals, + shared, + seen, + block.instructions.at(-1)!.lvalue.identifier.id + ); + emit( env, locals, shared, - seen, + nextInstructions, block.instructions.at(-1)!.lvalue.identifier.id ); - emit( - env, - locals, - shared, - nextInstructions, - block.instructions.at(-1)!.lvalue.identifier.id - ); - } - /* - * Then emit the dependencies of the terminal operand. In many cases they will have - * already been emitted in the previous step and this is a no-op. - * TODO: sort the dependencies based on weight, like we do for other nodes. Not a big - * deal though since most terminals have a single operand - */ - for (const operand of eachTerminalOperand(block.terminal)) { - DEBUG && console.log(`(terminal operand)`); - DEBUG && print(env, locals, shared, seen, operand.identifier.id); - emit(env, locals, shared, nextInstructions, operand.identifier.id); - } - // Anything not emitted yet is globally reorderable - for (const [id, node] of locals) { - if (node.instruction == null) { - continue; } - CompilerError.invariant( - node.instruction != null && + /* + * Then emit the dependencies of the terminal operand. In many cases they will have + * already been emitted in the previous step and this is a no-op. + * TODO: sort the dependencies based on weight, like we do for other nodes. Not a big + * deal though since most terminals have a single operand + */ + for (const operand of eachTerminalOperand(block.terminal)) { + DEBUG && console.log(`(terminal operand)`); + DEBUG && print(env, locals, shared, seen, operand.identifier.id); + emit(env, locals, shared, nextInstructions, operand.identifier.id); + } + // Anything not emitted yet is globally reorderable + for (const [id, node] of locals) { + if (node.instruction == null) { + continue; + } + CompilerError.invariant( + node.instruction != null && + getReoderability(node.instruction, references) === + Reorderability.Reorderable, + { + reason: `Expected all remaining instructions to be reorderable`, + loc: node.instruction?.loc ?? block.terminal.loc, + description: + node.instruction != null + ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable` + : `Lvalue $${id} was not emitted yet but is not reorderable`, + } + ); + + DEBUG && console.log(`save shared: $${id}`); + shared.set(id, node); + } + } else { + /** + * If this is not a value block, then the order within the block doesn't matter + * and we can optimize more. The observation is that blocks often have instructions + * such as: + * + * ``` + * t$0 = nonreorderable + * t$1 = nonreorderable <-- this gets in the way of merging t$0 and t$2 + * t$2 = reorderable deps[ t$0 ] + * return t$2 + * ``` + * + * Ie where there is some pair of nonreorderable+reorderable values, with some intervening + * also non-reorderable instruction. If we emit all non-reorderable instructions first, + * then we'll keep the original order. But reordering instructions don't just mean moving + * them later: we can also move then _earlier_. By starting from terminal operands, we + * end up emitting: + * + * ``` + * t$0 = nonreorderable // dep of t$2 + * t$2 = reorderable deps[ t$0 ] + * t$1 = nonreorderable <-- not in the way of merging anymore! + * return t$2 + * ``` + * + * Ie all nonreorderable transitive deps of the terminal operands will get emitted first, + * but we'll be able to intersperse the depending reorderable instructions in between + * them in a way that works better with scope merging. + */ + for (const operand of eachTerminalOperand(block.terminal)) { + DEBUG && console.log(`(terminal operand)`); + DEBUG && print(env, locals, shared, seen, operand.identifier.id); + emit(env, locals, shared, nextInstructions, operand.identifier.id); + } + // Anything not emitted yet is globally reorderable + for (const id of Array.from(locals.keys()).reverse()) { + const node = locals.get(id); + if (node === undefined) { + continue; + } + if ( + node.instruction !== null && getReoderability(node.instruction, references) === - Reorderability.Reorderable, - { - reason: `Expected all remaining instructions to be reorderable`, - loc: node.instruction?.loc ?? block.terminal.loc, - description: - node.instruction != null - ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable` - : `Lvalue $${id} was not emitted yet but is not reorderable`, + Reorderability.Reorderable + ) { + DEBUG && console.log(`save shared: $${id}`); + shared.set(id, node); + } else { + DEBUG && console.log("leftover"); + DEBUG && print(env, locals, shared, seen, id); + emit(env, locals, shared, nextInstructions, id); } - ); - DEBUG && console.log(`save shared: $${id}`); - shared.set(id, node); + } } block.instructions = nextInstructions; @@ -434,7 +498,6 @@ function getReoderability( range !== undefined && range.end === range.start // this LoadLocal is used exactly once ) { - console.log(`reorderable: ${name.value}`); return Reorderability.Reorderable; } } 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 f76e98b6c3e..aecb50b8432 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,19 +19,20 @@ 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 x = { a }; const y = {}; + t0 = x; y.x = x.a; mutate(y); $[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/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 f320d630713..6a4392ab935 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 = {}; + const x = {}; x.y = y; + + t0 = x; mutate(x.y.z); - $[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/alias-nested-member-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md index 100567a3385..d7a1d0c7aab 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 y = {}; y.z = z; - x = {}; + const x = {}; + + t0 = x; 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/align-scopes-within-nested-valueblock-in-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md index 0d1a54af35f..62be10a822b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md @@ -52,11 +52,12 @@ import { Stringify, identity, makeArray, mutate } from "shared-runtime"; * handles this correctly. */ function Foo(t0) { - const $ = _c(4); + const $ = _c(3); const { cond1, cond2 } = t0; - const arr = makeArray({ a: 2 }, 2, []); let t1; - if ($[0] !== cond1 || $[1] !== cond2 || $[2] !== arr) { + if ($[0] !== cond1 || $[1] !== cond2) { + const arr = makeArray({ a: 2 }, 2, []); + t1 = cond1 ? ( <>
{identity("foo")}
@@ -65,10 +66,9 @@ function Foo(t0) { ) : null; $[0] = cond1; $[1] = cond2; - $[2] = arr; - $[3] = t1; + $[2] = t1; } else { - t1 = $[3]; + t1 = $[2]; } return t1; } 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 43503170c20..b79635c8408 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 @@ -39,57 +39,51 @@ import { useEffect, useState } from "react"; let someGlobal = {}; function Component() { - const $ = _c(7); + const $ = _c(6); const [state, setState] = useState(someGlobal); let t0; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const setGlobal = () => { someGlobal.value = true; }; - $[0] = t0; - } else { - t0 = $[0]; - } - const setGlobal = t0; - let t1; - let t2; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => { + + t0 = () => { setGlobal(); }; - t2 = []; + t1 = []; + $[0] = t0; $[1] = t1; - $[2] = t2; } else { + t0 = $[0]; t1 = $[1]; - t2 = $[2]; } - useEffect(t1, t2); + useEffect(t0, t1); + let t2; let t3; - let t4; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal.value); }; - t4 = [someGlobal]; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; - $[4] = t4; } else { + t2 = $[2]; t3 = $[3]; - t4 = $[4]; } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{t5}
; + const t4 = String(state); + let t5; + if ($[4] !== t4) { + t5 =
{t4}
; + $[4] = t4; $[5] = t5; - $[6] = t6; } else { - t6 = $[6]; + t5 = $[5]; } - return t6; + return t5; } export const FIXTURE_ENTRYPOINT = { 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 fec286b265a..0a4527a0a47 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 @@ -39,57 +39,51 @@ import { useEffect, useState } from "react"; let someGlobal = false; function Component() { - const $ = _c(7); + const $ = _c(6); const [state, setState] = useState(someGlobal); let t0; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const setGlobal = () => { someGlobal = true; }; - $[0] = t0; - } else { - t0 = $[0]; - } - const setGlobal = t0; - let t1; - let t2; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => { + + t0 = () => { setGlobal(); }; - t2 = []; + t1 = []; + $[0] = t0; $[1] = t1; - $[2] = t2; } else { + t0 = $[0]; t1 = $[1]; - t2 = $[2]; } - useEffect(t1, t2); + useEffect(t0, t1); + let t2; let t3; - let t4; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal); }; - t4 = [someGlobal]; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; - $[4] = t4; } else { + t2 = $[2]; t3 = $[3]; - t4 = $[4]; } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{t5}
; + const t4 = String(state); + let t5; + if ($[4] !== t4) { + t5 =
{t4}
; + $[4] = t4; $[5] = t5; - $[6] = t6; } else { - t6 = $[6]; + t5 = $[5]; } - return t6; + return t5; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md index 539c9e71ec8..a7efcbe0e52 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md @@ -66,31 +66,31 @@ function Component() { } const onClick = t1; let t2; - if ($[3] !== ref) { - t2 = ; - $[3] = ref; + if ($[3] !== onClick) { + t2 = + ); + t1 = {state}; $[0] = state; $[1] = t0; - } else { - t0 = $[1]; - } - let t1; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; $[2] = t1; } else { + t0 = $[1]; t1 = $[2]; } let t2; - if ($[3] !== state) { - t2 = {state}; - $[3] = state; - $[4] = t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = ; + $[3] = t2; } else { - t2 = $[4]; + t2 = $[3]; } let t3; - if ($[5] !== t0) { + if ($[4] !== t1 || $[5] !== t0) { t3 = ( - - ); - $[5] = t0; - $[6] = t3; - } else { - t3 = $[6]; - } - let t4; - if ($[7] !== t2 || $[8] !== t3) { - t4 = (
- {t1} {t2} - {t3} + {t1} + {t0}
); - $[7] = t2; - $[8] = t3; - $[9] = t4; + $[4] = t1; + $[5] = t0; + $[6] = t3; } else { - t4 = $[9]; + t3 = $[6]; } - return t4; + return t3; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md index c893ac64573..e0acb4ed143 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md @@ -33,49 +33,45 @@ import { useState } from "react"; import { Stringify } from "shared-runtime"; function Component() { - const $ = _c(8); + const $ = _c(7); const [state, setState] = useState(0); let t0; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } let t1; - if ($[1] !== state) { + if ($[0] !== state) { + t0 = ( + + ); t1 = {state}; - $[1] = state; + $[0] = state; + $[1] = t0; $[2] = t1; } else { + t0 = $[1]; t1 = $[2]; } let t2; - if ($[3] !== state) { - t2 = ( - - ); - $[3] = state; - $[4] = t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = ; + $[3] = t2; } else { - t2 = $[4]; + t2 = $[3]; } let t3; - if ($[5] !== t1 || $[6] !== t2) { + if ($[4] !== t1 || $[5] !== t0) { t3 = (
- {t0} - {t1} {t2} + {t1} + {t0}
); - $[5] = t1; - $[6] = t2; - $[7] = t3; + $[4] = t1; + $[5] = t0; + $[6] = t3; } else { - t3 = $[7]; + t3 = $[6]; } return t3; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md index 6a7c8a5a28a..a9e4dc1435b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md @@ -35,21 +35,23 @@ import { setProperty } from "shared-runtime"; function Component(props) { const $ = _c(2); - let y; + let t0; if ($[0] !== props.a) { - y = {}; + const y = {}; const x = {}; setProperty(x, props.a); y.a = props.a; + + t0 = y; y.x = x; $[0] = props.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/merge-scopes-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md index a2e79ad67f0..49558eb0e43 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md @@ -27,7 +27,7 @@ import { c as _c } from "react/compiler-runtime"; // @enableInstructionReorderin import { useState } from "react"; function Component() { - const $ = _c(6); + const $ = _c(4); const [state, setState] = useState(0); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { @@ -40,34 +40,26 @@ function Component() { } const onClick = t0; let t1; - if ($[1] !== state) { - t1 = Count: {state}; - $[1] = state; - $[2] = t1; + if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t1 = ; + $[1] = t1; } else { - t1 = $[2]; + t1 = $[1]; } let t2; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t2 = ; - $[3] = t2; - } else { - t2 = $[3]; - } - let t3; - if ($[4] !== t1) { - t3 = ( + if ($[2] !== state) { + t2 = ( <> + Count: {state} {t1} - {t2} ); - $[4] = t1; - $[5] = t3; + $[2] = state; + $[3] = t2; } else { - t3 = $[5]; + t2 = $[3]; } - return t3; + return t2; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md index a699e901500..b1d693288b2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md @@ -32,7 +32,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateMemoizedEffectDepe import { useEffect } from "react"; function Component(props) { - const $ = _c(5); + const $ = _c(6); let t0; if ($[0] !== props.value) { t0 = [[props.value]]; @@ -43,18 +43,22 @@ function Component(props) { } const y = t0; let t1; - let t2; if ($[2] !== y) { t1 = () => { console.log(y); }; - t2 = [y]; $[2] = y; $[3] = t1; - $[4] = t2; } else { t1 = $[3]; - t2 = $[4]; + } + let t2; + if ($[4] !== y) { + t2 = [y]; + $[4] = y; + $[5] = t2; + } else { + t2 = $[5]; } useEffect(t1, t2); return y; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md index 0fd482ea4d0..3aab273f8e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md @@ -68,14 +68,14 @@ function mutate(x, y) { function Component(props) { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; const b = [a]; const c = {}; const d = { c }; - x = {}; + const x = {}; x.b = b; const y = mutate(x, d); if (a) { @@ -89,12 +89,13 @@ function Component(props) { if (y) { } + t0 = x; mutate(x, null); - $[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/mutation-during-jsx-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md index d1f8165d61b..d29bebd1c1f 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 79370f87135..1972d9a9d17 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 @@ -53,22 +53,23 @@ import { mutate } from "shared-runtime"; function useFoo(t0) { const $ = _c(3); const { a, b } = t0; - let z; + let t1; if ($[0] !== a || $[1] !== b) { const x = { a }; const y = [b]; mutate(x); - z = [mutate(y)]; + const z = [mutate(y)]; + t1 = z; mutate(y); $[0] = a; $[1] = b; - $[2] = z; + $[2] = t1; } else { - z = $[2]; + t1 = $[2]; } - return z; + return t1; } export const FIXTURE_ENTRYPOINT = { 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 b962759ef34..4dccaf3a9e2 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/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 a3bf0e5ee8a..b62d7517ad6 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 52077b6b894..47c22c1694d 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 933e05d1554..db1ea1b788a 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 8c4a8b1a3cc..0c1c88cd40a 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-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 3ad02df0305..c9dbcf057b9 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,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 value; }, }; + t1 = obj; mutate(x); $[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-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 46d532308bb..89ce380c589 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/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md index 0d1a54af35f..62be10a822b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md @@ -52,11 +52,12 @@ import { Stringify, identity, makeArray, mutate } from "shared-runtime"; * handles this correctly. */ function Foo(t0) { - const $ = _c(4); + const $ = _c(3); const { cond1, cond2 } = t0; - const arr = makeArray({ a: 2 }, 2, []); let t1; - if ($[0] !== cond1 || $[1] !== cond2 || $[2] !== arr) { + if ($[0] !== cond1 || $[1] !== cond2) { + const arr = makeArray({ a: 2 }, 2, []); + t1 = cond1 ? ( <>
{identity("foo")}
@@ -65,10 +66,9 @@ function Foo(t0) { ) : null; $[0] = cond1; $[1] = cond2; - $[2] = arr; - $[3] = t1; + $[2] = t1; } else { - t1 = $[3]; + t1 = $[2]; } return t1; } 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 f3278e91bad..e0de2ea29ab 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 @@ -54,31 +54,32 @@ import { mutate } from "shared-runtime"; function useFoo(t0) { const $ = _c(5); const { a, b } = t0; - let z; + let t1; if ($[0] !== a || $[1] !== b) { const x = { a }; 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 ($[3] !== t2) { + t3 = [t2]; + $[3] = t2; + $[4] = t3; } else { - t2 = $[4]; + t3 = $[4]; } - z = t2; + const z = t3; + t1 = z; mutate(y); $[0] = a; $[1] = b; - $[2] = z; + $[2] = t1; } else { - z = $[2]; + t1 = $[2]; } - return z; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md index bef1d7b8368..68665870e22 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md @@ -32,20 +32,21 @@ import { arrayPush } from "shared-runtime"; function Foo(cond) { const $ = _c(2); - let x; + let t0; if ($[0] !== cond) { - x = null; + let x = null; if (cond) { x = []; } + t0 = x; arrayPush(x, 2); $[0] = cond; - $[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/property-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md index d097ee0fad0..0f0a336c4ee 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 @@ -41,16 +41,17 @@ function Component() { t0 = $[0]; } const changeF = t0; - let x; + let t1; if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - x = { f: () => console.log("original") }; + const x = { f: () => console.log("original") }; + t1 = x; (console.log("A"), x).f((changeF(x), console.log("arg"), 1)); - $[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/reactive-scope-grouping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md index 71cd4e526a2..8c82efef52c 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 = {}; const y = []; const z = {}; y.push(z); + + t0 = x; 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/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 59fea6bcd0f..106598b36bf 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/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 be2c1c49cb0..9b99d254ee4 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/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 258155e11c9..29feb0e40c7 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 5c41853c5db..39e776ca87e 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/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 65fd8710ed0..f9fd27f1d49 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 @@ -37,21 +37,22 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(3); const { input, cond } = t0; - let x; + let t1; if ($[0] !== cond || $[1] !== input.a.b) { - x = []; + const x = []; bb0: if (cond) { break bb0; } + t1 = x; x.push(input.a.b); $[0] = cond; $[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/jump-target-within-scope-loop-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md index 97142a36f49..6babca961b2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md @@ -39,9 +39,9 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(3); const { input, max } = t0; - let x; + let t1; if ($[0] !== max || $[1] !== input.a.b) { - x = []; + const x = []; let i = 0; while (true) { i = i + 1; @@ -51,14 +51,16 @@ function useFoo(t0) { } x.push(i); + + t1 = x; x.push(input.a.b); $[0] = max; $[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/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 5edc13dead3..c95da73e8f6 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 5751d26c941..8f638ac9fa3 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-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md index fcb9926c22f..dc70682f703 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md @@ -43,17 +43,19 @@ 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 = []; x.push(props.a?.b); + + t0 = x; x.push(props.a.b.c); $[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/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 ad5dc911af5..1247ef1ac78 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/subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md index 66239c1c56c..a5bf4d3af9b 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 @@ -39,21 +39,22 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSubpath2(props, other) { const $ = _c(3); - let x; + let t0; if ($[0] !== other || $[1] !== props.a) { - x = {}; + const x = {}; if (identity(other)) { x.a = props.a; } + t0 = x; x.b = props.a.b; $[0] = other; $[1] = props.a; - $[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/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 86d435d4ccc..21ec0568dac 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 @@ -47,21 +47,22 @@ import { identity } from "shared-runtime"; function useConditionalSuperpath2(t0) { const $ = _c(3); const { props, cond } = t0; - let x; + let t1; if ($[0] !== cond || $[1] !== props.a) { - x = {}; + const x = {}; if (identity(cond)) { x.b = props.a.b; } + t1 = x; x.a = props.a; $[0] = cond; $[1] = props.a; - $[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/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 ffdc707d1f2..ed0d6b859a3 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; + let t0; if ($[0] !== props.a.x.y || $[1] !== props.a.c.x.y.z || $[2] !== props.b) { - x = {}; + const x = {}; x.a = props.a.x.y; x.b = props.b; + + t0 = x; x.c = props.a.c.x.y.z; $[0] = props.a.x.y; $[1] = props.a.c.x.y.z; $[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/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md index 21db959c98a..683a5796040 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md @@ -25,18 +25,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we can track non- // (not needed for correctness but for dependency granularity) function TestNonOverlappingTracked(props) { const $ = _c(3); - let x; + let t0; if ($[0] !== props.a.b || $[1] !== props.a.c) { - x = {}; + const x = {}; x.b = props.a.b; + + t0 = x; x.c = props.a.c; $[0] = props.a.b; $[1] = props.a.c; - $[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/reduce-reactive-deps/uncond-overlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md index 13fa6d680eb..d325a2021ab 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we correctly trac // a dependency function TestOverlappingDescendantTracked(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b.c; x.c = props.a.b.c.x.y; + + t0 = x; x.a = props.a; $[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/uncond-overlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md index d0f9d45fa79..375443080d5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we correctly trac // a dependency function TestOverlappingTracked(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b; x.c = props.a.c; + + t0 = x; x.a = props.a; $[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/uncond-subpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md index a2855ad305b..f7dc9fa2506 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder1(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b; x.a = props.a; + + t0 = x; x.c = props.a.b.c; $[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/uncond-subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md index c731aeb9075..50ca47d18e2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder2(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.a = props.a; x.b = props.a.b; + + t0 = x; x.c = props.a.b.c; $[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/uncond-subpath-order3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md index bd9df044ec5..ca06c200aae 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder3(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.c = props.a.b.c; x.a = props.a; + + t0 = x; x.b = 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/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md index 75627f01a70..0c731395e2a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md @@ -29,30 +29,39 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function Component(t0) { - const $ = _c(3); + const $ = _c(5); const { id } = t0; - let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; + + const t1 = id ? true : false; + let t2; + if ($[0] !== t1) { + t2 = ; $[0] = t1; + $[1] = t2; } else { - t1 = $[0]; + t2 = $[1]; } - const t2 = id ? true : false; let t3; - if ($[1] !== t2) { - t3 = ( + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t3 = ; + $[2] = t3; + } else { + t3 = $[2]; + } + let t4; + if ($[3] !== t2) { + t4 = ( <> - {t1} - + {t3} + {t2} ); - $[1] = t2; - $[2] = t3; + $[3] = t2; + $[4] = t4; } else { - t3 = $[2]; + t4 = $[4]; } - return t3; + return t4; } export const FIXTURE_ENTRYPOINT = { 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 f1fc418d92c..7465af20323 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,10 +35,9 @@ import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRul import { Stringify, identity, useHook } from "shared-runtime"; function Component(t0) { - const $ = _c(17); + const $ = _c(15); const { index } = t0; const data = useHook(); - let T0; let t1; let t2; let t3; @@ -47,62 +46,60 @@ function Component(t0) { 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; + t3 = identity(b); + t2 = identity(a); t1 = identity(c); $[0] = data; $[1] = index; - $[2] = T0; - $[3] = t1; - $[4] = t2; - $[5] = t3; + $[2] = t1; + $[3] = t2; + $[4] = t3; } else { - T0 = $[2]; - t1 = $[3]; - t2 = $[4]; - t3 = $[5]; + t1 = $[2]; + t2 = $[3]; + t3 = $[4]; } let t4; - if ($[10] !== T0 || $[11] !== t1) { - t4 = ; - $[10] = T0; - $[11] = t1; - $[12] = t4; + if ($[5] !== t1) { + t4 = ; + $[5] = t1; + $[6] = t4; } else { - t4 = $[12]; + t4 = $[6]; } let t5; - if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) { - t5 = ( + if ($[7] !== t2) { + t5 = ; + $[7] = t2; + $[8] = t5; + } else { + t5 = $[8]; + } + let t6; + if ($[9] !== t3) { + t6 = ; + $[9] = t3; + $[10] = t6; + } else { + t6 = $[10]; + } + let t7; + if ($[11] !== t6 || $[12] !== t5 || $[13] !== t4) { + t7 = (
- {t2} - {t3} + {t6} + {t5} {t4}
); - $[13] = t2; - $[14] = t3; - $[15] = t4; - $[16] = t5; + $[11] = t6; + $[12] = t5; + $[13] = t4; + $[14] = t7; } else { - t5 = $[16]; + t7 = $[14]; } - return t5; + return t7; } export const FIXTURE_ENTRYPOINT = { 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 5eff1aa0fe5..8c6eae7b845 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,30 @@ function Component(listItem, thread) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(listItem, thread) { - const $ = _c(7); + const $ = _c(6); let t0; let t1; - let t2; if ($[0] !== thread.threadType || $[1] !== listItem) { const isFoo = isFooThread(thread.threadType); - t1 = useBar; - t2 = listItem; + t1 = 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 t2; + if ($[4] !== t0) { + t2 = [t0]; + $[4] = t0; + $[5] = t2; } else { - t3 = $[6]; + t2 = $[5]; } - const body = t1(t2, t3); + const body = useBar(t1, t2); return body; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md index 0a38e47b34e..19d5fbdf8c3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md @@ -56,33 +56,33 @@ function Component(t0) { t2 = $[1]; } let t3; - if ($[2] !== t2) { - t3 =
; - $[2] = t2; + if ($[2] !== cond) { + t3 = cond === false && ( +
+ ); + $[2] = cond; $[3] = t3; } else { t3 = $[3]; } let t4; - if ($[4] !== cond) { - t4 = cond === false && ( -
- ); - $[4] = cond; + if ($[4] !== t2) { + t4 =
; + $[4] = t2; $[5] = t4; } else { t4 = $[5]; } let t5; - if ($[6] !== t3 || $[7] !== t4) { + if ($[6] !== t4 || $[7] !== t3) { t5 = ( <> - {t3} {t4} + {t3} ); - $[6] = t3; - $[7] = t4; + $[6] = t4; + $[7] = t3; $[8] = t5; } else { t5 = $[8]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md index 8e4e6a61e62..dee6ee9a40a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md @@ -24,21 +24,23 @@ function mutate() {} function foo() { const $ = _c(2); let a; - let c; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let b = {}; - c = {}; + let c = {}; a = b; b = c; c = a; + + t0 = c; mutate(a, b); - $[0] = c; + $[0] = t0; $[1] = a; } else { - c = $[0]; + t0 = $[0]; a = $[1]; } - return c; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md index 061aa03c085..533ca70732e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md @@ -33,9 +33,9 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(4); let x = 0; - let values; + let t0; if ($[0] !== props || $[1] !== x) { - values = []; + const values = []; const y = props.a || props.b; values.push(y); if (props.c) { @@ -47,16 +47,17 @@ function Component(props) { x = 2; } + t0 = values; values.push(x); $[0] = props; $[1] = x; - $[2] = values; + $[2] = t0; $[3] = x; } else { - values = $[2]; + t0 = $[2]; x = $[3]; } - return values; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md index 7e6f28953c3..df57d4a6ea0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md @@ -24,10 +24,10 @@ function foo(a) { import { c as _c } from "react/compiler-runtime"; function foo(a) { const $ = _c(2); - let x; + let t0; if ($[0] !== a) { const b = {}; - x = b; + const x = b; if (a) { const y = {}; x.y = y; @@ -36,13 +36,14 @@ function foo(a) { x.z = z; } + t0 = x; mutate(b); $[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/ssa-property-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md index d303dedec28..691ef9283a5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md @@ -23,9 +23,9 @@ function foo(a) { import { c as _c } from "react/compiler-runtime"; function foo(a) { const $ = _c(2); - let x; + let t0; if ($[0] !== a) { - x = {}; + const x = {}; if (a) { const y = {}; x.y = y; @@ -34,13 +34,14 @@ function foo(a) { x.z = z; } + t0 = x; mutate(x); $[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/ssa-property-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md index ae0daf1213d..dfc5f11976f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md @@ -21,20 +21,21 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; const x = a; - y = {}; - y.x = x; + const y = {}; + t0 = y; + y.x = x; mutate(a); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md index b4bab7cfb9a..29732b6f67a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md @@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = { x }; + const y = { x }; + + t0 = y; y.x.push([]); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md index 3709a298cb6..e1ae7b6d26a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md @@ -18,17 +18,19 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; + + t0 = y; y.x = x; mutate(x); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md index f01d01f63bf..a26a542f784 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md @@ -21,20 +21,20 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; - y = a; + const y = a; const x = []; + t0 = y; y.x = x; - mutate(a); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md index 46f974ef429..6af912dbcf2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md @@ -18,17 +18,19 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; y.x = x; + + t0 = y; mutate(y); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md index 565313fc0d9..1ca3d8c72f7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md @@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; + + t0 = y; y.x = x; - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md index 11d328201ea..0250927df97 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md @@ -18,18 +18,20 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? (([x] = [[]]), x.push(props.foo)) : null; + + t0 = x; mut(x); $[0] = props; - $[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/ssa-renaming-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md index 3ec90ca8879..263e3428aa1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md @@ -18,18 +18,20 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? ((x = []), x.push(props.foo)) : null; + + t0 = x; mut(x); $[0] = props; - $[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/ssa-renaming-unconditional-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md index 598d9677aae..a56211b41c7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md @@ -32,18 +32,20 @@ import { c as _c } from "react/compiler-runtime"; import { arrayPush } from "shared-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar)); + + t0 = x; arrayPush(x, 4); $[0] = props; - $[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/ssa-renaming-unconditional-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md index e27e00db70f..cf4ddc6e057 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md @@ -26,9 +26,9 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); if (props.cond) { x = []; @@ -38,13 +38,14 @@ function foo(props) { x.push(props.bar); } + t0 = x; mut(x); $[0] = props; - $[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/ssa-renaming-via-destructuring-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md index b202302d65a..1b1d3cd76b6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md @@ -22,22 +22,23 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - ({ x } = { x: [] }); + let { x } = { x: [] }; x.push(props.bar); if (props.cond) { ({ x } = { x: [] }); x.push(props.foo); } + t0 = x; mut(x); $[0] = props; - $[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/ssa-renaming-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md index 76ccbae06a9..4687acb6108 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md @@ -22,22 +22,23 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); if (props.cond) { x = []; x.push(props.foo); } + t0 = x; mut(x); $[0] = props; - $[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/store-via-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md index 31bb71ca029..af9f891777a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md @@ -17,16 +17,18 @@ function foo() { 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 = foo(x); y.mutate(); - $[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/store-via-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md index 2d7b0d455ed..d1e81cc22f2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md @@ -17,16 +17,18 @@ function Foo() { 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 = new Foo(x); y.mutate(); - $[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/try-catch-alias-try-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md index afae9ba9d7c..5eb1804d168 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md @@ -33,24 +33,25 @@ const { throwInput } = require("shared-runtime"); function Component(props) { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let y; - x = []; + const x = []; try { throwInput(x); - } catch (t0) { - const e = t0; + } catch (t1) { + const e = t1; y = e; } + t0 = x; y.push(null); - $[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/try-catch-in-nested-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md index ccbcae1636f..d504a478567 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md @@ -42,12 +42,12 @@ import { mutate, setProperty, throwErrorWithMessageIf } from "shared-runtime"; function useFoo(t0) { const $ = _c(6); const { value, cond } = t0; - let y; let t1; + let t2; if ($[0] !== value || $[1] !== cond) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - y = [value]; + const y = [value]; let x; if ($[4] !== cond) { x = { cond }; @@ -56,7 +56,7 @@ function useFoo(t0) { throwErrorWithMessageIf(x.cond, "error"); } catch { setProperty(x, "henderson"); - t1 = x; + t2 = x; break bb0; } @@ -66,20 +66,22 @@ function useFoo(t0) { } else { x = $[5]; } + + t1 = y; y.push(x); } $[0] = value; $[1] = cond; - $[2] = y; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - y = $[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 y; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md index 1a1b048ab76..5aa81d1829f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md @@ -30,36 +30,37 @@ const { throwErrorWithMessage, shallowCopy } = require("shared-runtime"); function Component(props) { const $ = _c(4); - let x; + let t0; if ($[0] !== props.value) { - x = []; + const x = []; try { - let t0; + let t1; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t0 = throwErrorWithMessage("oops"); - $[2] = t0; + t1 = throwErrorWithMessage("oops"); + $[2] = t1; } else { - t0 = $[2]; + t1 = $[2]; } - x.push(t0); + x.push(t1); } catch { - let t0; + let t1; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t0 = shallowCopy({}); - $[3] = t0; + t1 = shallowCopy({}); + $[3] = t1; } else { - t0 = $[3]; + t1 = $[3]; } - x.push(t0); + x.push(t1); } + t0 = x; x.push(props.value); $[0] = props.value; - $[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/useEffect-arg-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md index eadd8b7de8b..af4bab363b2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md @@ -27,42 +27,42 @@ function Component(props) { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(6); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 =
; + $[0] = t0; + } else { + t0 = $[0]; + } const dispatch = useDispatch(); useFreeze(dispatch); - let t0; - if ($[0] !== dispatch) { - t0 = () => { + let t1; + if ($[1] !== dispatch) { + t1 = () => { dispatch({ kind: "update" }); }; - $[0] = dispatch; - $[1] = t0; + $[1] = dispatch; + $[2] = t1; } else { - t0 = $[1]; + t1 = $[2]; } - const onUpdate = t0; - let t1; + const onUpdate = t1; let t2; - if ($[2] !== onUpdate) { - t1 = () => { + let t3; + if ($[3] !== onUpdate) { + t2 = () => { onUpdate(); }; - t2 = [onUpdate]; - $[2] = onUpdate; - $[3] = t1; + t3 = [onUpdate]; + $[3] = onUpdate; $[4] = t2; - } else { - t1 = $[3]; - t2 = $[4]; - } - useEffect(t1, t2); - let t3; - if ($[5] === Symbol.for("react.memo_cache_sentinel")) { - t3 =
; $[5] = t3; } else { + t2 = $[4]; t3 = $[5]; } - return t3; + useEffect(t2, t3); + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md index 90847235ffd..fe99e2ddb6b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md @@ -36,23 +36,30 @@ import { c as _c } from "react/compiler-runtime"; // @enableTransitivelyFreezeFu function Component(props) { const $ = _c(9); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 =
; + $[0] = t0; + } else { + t0 = $[0]; + } const item = useMutable(props.itemId); const dispatch = useDispatch(); useFreeze(dispatch); - let t0; - if ($[0] !== dispatch) { - t0 = () => { + let t1; + if ($[1] !== dispatch) { + t1 = () => { dispatch(createExitAction()); }; - $[0] = dispatch; - $[1] = t0; + $[1] = dispatch; + $[2] = t1; } else { - t0 = $[1]; + t1 = $[2]; } - const exit = t0; - let t1; - if ($[2] !== item.value || $[3] !== exit) { - t1 = () => { + const exit = t1; + let t2; + if ($[3] !== item.value || $[4] !== exit) { + t2 = () => { const cleanup = GlobalEventEmitter.addListener("onInput", () => { if (item.value) { exit(); @@ -60,32 +67,24 @@ function Component(props) { }); return () => cleanup.remove(); }; - $[2] = item.value; - $[3] = exit; - $[4] = t1; - } else { - t1 = $[4]; - } - let t2; - if ($[5] !== exit || $[6] !== item) { - t2 = [exit, item]; - $[5] = exit; - $[6] = item; - $[7] = t2; + $[3] = item.value; + $[4] = exit; + $[5] = t2; } else { - t2 = $[7]; + t2 = $[5]; } - useEffect(t1, t2); - - maybeMutate(item); let t3; - if ($[8] === Symbol.for("react.memo_cache_sentinel")) { - t3 =
; + if ($[6] !== exit || $[7] !== item) { + t3 = [exit, item]; + $[6] = exit; + $[7] = item; $[8] = t3; } else { t3 = $[8]; } - return t3; + useEffect(t2, t3); + maybeMutate(item); + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md index c033932b31a..03814217820 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md @@ -29,18 +29,20 @@ import { identity, makeObject_Primitives, mutate } from "shared-runtime"; function Component(props) { const $ = _c(2); let t0; - let object; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = makeObject_Primitives(); - object = t0; + const object = t0; + + t1 = object; identity(object); - $[0] = object; + $[0] = t1; $[1] = t0; } else { - object = $[0]; + t1 = $[0]; t0 = $[1]; } - return object; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md index 017b282205d..3405bd8cf6d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md @@ -80,7 +80,6 @@ function Component(props) { return t2; } default: { - logEvent("Invalid step"); let t1; if ($[6] === Symbol.for("react.memo_cache_sentinel")) { t1 = ; @@ -88,6 +87,7 @@ function Component(props) { } else { t1 = $[6]; } + logEvent("Invalid step"); return t1; } }