From ed8dd2036bfd228638e40f0559f652d062ce0689 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Wed, 12 Jun 2024 15:40:49 -0700 Subject: [PATCH] [compiler] Allow more instruction kinds btw merged scopes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updates our scope merging pass to allow more types of instructions to intervene btw scopes. This includes all the non-allocating kinds of nodes that are considered reorderable in #29863. It's already safe to merge scopes with these instructions — we only merge if the lvalue is not used past the next scope. Additionally, without changing this pass reordering isn't very effective, since we would reorder to add these types of intervening instructions and then not be able to merge scopes. Sequencing this first helps to see the win just from reordering alone. ghstack-source-id: 79263576d8eaeb45ef4d1ec4951478459853a287 Pull Request resolved: https://github.com/facebook/react/pull/29881 --- ...rgeReactiveScopesThatInvalidateTogether.ts | 6 +- ...n-in-effect-indirect-usecallback.expect.md | 9 +-- ...obal-mutation-in-effect-indirect.expect.md | 9 +-- ...-reassignment-in-effect-indirect.expect.md | 9 +-- ...ow-global-reassignment-in-effect.expect.md | 9 +-- ...mutate-global-in-effect-fixpoint.expect.md | 9 +-- .../compiler/concise-arrow-expr.expect.md | 15 ++-- .../compiler/conditional-on-mutable.expect.md | 52 +++++--------- ...gation-into-function-expressions.expect.md | 16 ++--- ...ble-reassigned-outside-of-lambda.expect.md | 16 ++--- ...variable-in-function-declaration.expect.md | 15 ++-- ...and-local-variables-with-default.expect.md | 71 ++++++++----------- ...ed-scope-declarations-and-locals.expect.md | 34 +++------ ...sting-computed-member-expression.expect.md | 22 ++---- .../hoisting-member-expression.expect.md | 17 ++--- ...-expr-export-default-gating-test.expect.md | 23 +++--- ...ti-arrow-expr-export-gating-test.expect.md | 23 +++--- .../multi-arrow-expr-gating-test.expect.md | 23 +++--- .../compiler/property-assignment.expect.md | 25 ++----- .../reassignment-conditional.expect.md | 38 ++++------ .../fixtures/compiler/reassignment.expect.md | 38 ++++------ .../fixtures/compiler/repro.expect.md | 26 +++---- .../compiler/ssa-leave-case.expect.md | 25 +++---- .../switch-non-final-default.expect.md | 44 +++++------- .../fixtures/compiler/switch.expect.md | 34 ++++----- ...sion-captures-value-later-frozen.expect.md | 19 ++--- .../type-test-field-load-binary-op.expect.md | 13 +--- 27 files changed, 223 insertions(+), 417 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts index 0509a3c65b..e26fca1353 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts @@ -186,11 +186,15 @@ class Transform extends ReactiveFunctionTransform { setState(someGlobal.value); }; - $[3] = t3; - } else { - t3 = $[3]; - } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { t4 = [someGlobal]; + $[3] = t3; $[4] = t4; } else { + t3 = $[3]; t4 = $[4]; } useEffect(t3, t4); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md index 44813be9f1..43503170c2 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 @@ -66,19 +66,16 @@ function Component() { } useEffect(t1, t2); let t3; + let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = () => { setState(someGlobal.value); }; - $[3] = t3; - } else { - t3 = $[3]; - } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { t4 = [someGlobal]; + $[3] = t3; $[4] = t4; } else { + t3 = $[3]; t4 = $[4]; } useEffect(t3, t4); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md index 27e2d3b3a4..fec286b265 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 @@ -66,19 +66,16 @@ function Component() { } useEffect(t1, t2); let t3; + let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = () => { setState(someGlobal); }; - $[3] = t3; - } else { - t3 = $[3]; - } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { t4 = [someGlobal]; + $[3] = t3; $[4] = t4; } else { + t3 = $[3]; t4 = $[4]; } useEffect(t3, t4); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md index 293e32f4a1..e4cd0e22c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md @@ -54,19 +54,16 @@ function Component() { } useEffect(t0, t1); let t2; + let t3; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { t2 = () => { setState(someGlobal); }; - $[2] = t2; - } else { - t2 = $[2]; - } - let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } useEffect(t2, t3); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md index 3f212a4add..d5f8643d5b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md @@ -70,19 +70,16 @@ function Component() { } useEffect(t0, t1); let t2; + let t3; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { t2 = () => { setState(someGlobal.value); }; - $[2] = t2; - } else { - t2 = $[2]; - } - let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } useEffect(t2, t3); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md index b993630ce9..5b88a40644 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md @@ -15,24 +15,17 @@ function component() { ```javascript import { c as _c } from "react/compiler-runtime"; function component() { - const $ = _c(2); + const $ = _c(1); const [x, setX] = useState(0); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = (v) => setX(v); + const handler = (v) => setX(v); + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const handler = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md index cd2fbc1011..ad638cf28d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md @@ -36,65 +36,45 @@ function mayMutate() {} ```javascript import { c as _c } from "react/compiler-runtime"; function ComponentA(props) { - const $ = _c(6); - let a; - let b; + const $ = _c(2); + let t0; if ($[0] !== props) { - a = []; - b = []; + const a = []; + const b = []; if (b) { a.push(props.p0); } if (props.p1) { b.push(props.p2); } - $[0] = props; - $[1] = a; - $[2] = b; - } else { - a = $[1]; - b = $[2]; - } - let t0; - if ($[3] !== a || $[4] !== b) { + t0 = ; - $[3] = a; - $[4] = b; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } function ComponentB(props) { - const $ = _c(6); - let a; - let b; + const $ = _c(2); + let t0; if ($[0] !== props) { - a = []; - b = []; + const a = []; + const b = []; if (mayMutate(b)) { a.push(props.p0); } if (props.p1) { b.push(props.p2); } - $[0] = props; - $[1] = a; - $[2] = b; - } else { - a = $[1]; - b = $[2]; - } - let t0; - if ($[3] !== a || $[4] !== b) { + t0 = ; - $[3] = a; - $[4] = b; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md index 7be6b15a88..8ea2190480 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md @@ -17,25 +17,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const onEvent = () => { console.log(42); }; + + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const onEvent = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md index 9b70b18c24..8d53b0cc42 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md @@ -27,26 +27,20 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function Component(props) { - const $ = _c(2); - let callback; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; x = null; - callback = () => { + const callback = () => { console.log(x); }; x = {}; - $[0] = callback; - } else { - callback = $[0]; - } - let t0; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { t0 = ; - $[1] = t0; + $[0] = t0; } else { - t0 = $[1]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md index 4c6faaaad2..b9fc15ea0a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md @@ -18,7 +18,7 @@ function Component() { ```javascript import { c as _c } from "react/compiler-runtime"; function Component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; @@ -27,20 +27,13 @@ function Component() { x = 9; }; - t0 = bar(foo); + const y = bar(foo); + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const y = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md index e93fbb3b45..d8be3af6cb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md @@ -56,7 +56,7 @@ function useFragment(_arg1, _arg2) { } function Component(props) { - const $ = _c(15); + const $ = _c(9); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = graphql`...`; @@ -65,67 +65,52 @@ function Component(props) { t0 = $[0]; } const post = useFragment(t0, props.post); - let media; - let allUrls; - let onClick; + let t1; if ($[1] !== post) { - allUrls = []; + const allUrls = []; - const { media: t1, comments: t2, urls: t3 } = post; - media = t1 === undefined ? null : t1; - let t4; - if ($[5] !== t2) { - t4 = t2 === undefined ? [] : t2; - $[5] = t2; - $[6] = t4; - } else { - t4 = $[6]; - } - const comments = t4; + const { media: t2, comments: t3, urls: t4 } = post; + const media = t2 === undefined ? null : t2; let t5; - if ($[7] !== t3) { + if ($[3] !== t3) { t5 = t3 === undefined ? [] : t3; - $[7] = t3; - $[8] = t5; + $[3] = t3; + $[4] = t5; } else { - t5 = $[8]; + t5 = $[4]; } - const urls = t5; + const comments = t5; let t6; - if ($[9] !== comments.length) { - t6 = (e) => { + if ($[5] !== t4) { + t6 = t4 === undefined ? [] : t4; + $[5] = t4; + $[6] = t6; + } else { + t6 = $[6]; + } + const urls = t6; + let t7; + if ($[7] !== comments.length) { + t7 = (e) => { if (!comments.length) { return; } console.log(comments.length); }; - $[9] = comments.length; - $[10] = t6; + $[7] = comments.length; + $[8] = t7; } else { - t6 = $[10]; + t7 = $[8]; } - onClick = t6; + const onClick = t7; allUrls.push(...urls); - $[1] = post; - $[2] = media; - $[3] = allUrls; - $[4] = onClick; - } else { - media = $[2]; - allUrls = $[3]; - onClick = $[4]; - } - let t1; - if ($[11] !== media || $[12] !== allUrls || $[13] !== onClick) { t1 = ; - $[11] = media; - $[12] = allUrls; - $[13] = onClick; - $[14] = t1; + $[1] = post; + $[2] = t1; } else { - t1 = $[14]; + t1 = $[2]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md index 665b4a65fd..69e0f07088 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md @@ -30,17 +30,15 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); + const $ = _c(4); const post = useFragment(graphql`...`, props.post); - let media; - let onClick; + let t0; if ($[0] !== post) { const allUrls = []; - const { media: t0, comments, urls } = post; - media = t0; + const { media, comments, urls } = post; let t1; - if ($[3] !== comments.length) { + if ($[2] !== comments.length) { t1 = (e) => { if (!comments.length) { return; @@ -48,29 +46,19 @@ function Component(props) { console.log(comments.length); }; - $[3] = comments.length; - $[4] = t1; + $[2] = comments.length; + $[3] = t1; } else { - t1 = $[4]; + t1 = $[3]; } - onClick = t1; + const onClick = t1; allUrls.push(...urls); - $[0] = post; - $[1] = media; - $[2] = onClick; - } else { - media = $[1]; - onClick = $[2]; - } - let t0; - if ($[5] !== media || $[6] !== onClick) { t0 = ; - $[5] = media; - $[6] = onClick; - $[7] = t0; + $[0] = post; + $[1] = t0; } else { - t0 = $[7]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md index 305ff6539d..081a10e967 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md @@ -33,34 +33,26 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function hoisting() { - const $ = _c(3); - let onClick; - let onClick2; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - onClick = function onClick() { + const onClick = function onClick() { return bar.baz; }; - onClick2 = function onClick2() { + const onClick2 = function onClick2() { return bar[baz]; }; const baz = "baz"; const bar = { baz: 1 }; - $[0] = onClick; - $[1] = onClick2; - } else { - onClick = $[0]; - onClick2 = $[1]; - } - let t0; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ( ); - $[2] = t0; + $[0] = t0; } else { - t0 = $[2]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md index 3410a1c119..54c3cf3a24 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md @@ -28,24 +28,19 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function hoisting() { - const $ = _c(2); - let onClick; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - onClick = function onClick(x) { + const onClick = function onClick(x) { return x + bar.baz; }; const bar = { baz: 1 }; - $[0] = onClick; - } else { - onClick = $[0]; - } - let t0; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ; - $[1] = t0; + $[0] = t0; } else { - t0 = $[1]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md index b7685a3d40..4bbc85df89 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export default Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; + t0 = ( + + + + + ); $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( - - {t0} - - - ); - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md index 6056b8f378..e7bf6b327e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; + t0 = ( + + + + + ); $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( - - {t0} - - - ); - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md index e830d72ed9..4ce7ec0fc4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md @@ -38,27 +38,20 @@ const ErrorView = isForgetEnabled_Fixtures() const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; + t0 = ( + + + + + ); $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( - - {t0} - - - ); - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md index 65b2c46abf..523b5b29bd 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md @@ -18,30 +18,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let child; + const $ = _c(2); + let t0; if ($[0] !== props.p0) { - x = {}; + const x = {}; const y = []; x.y = y; - child = ; + const child = ; x.y.push(props.p0); - $[0] = props.p0; - $[1] = x; - $[2] = child; - } else { - x = $[1]; - child = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== child) { t0 = {child}; - $[3] = x; - $[4] = child; - $[5] = t0; + $[0] = props.p0; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md index 0cda46f5a0..9358d39cf4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md @@ -23,42 +23,32 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; - let y; + const $ = _c(5); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) { - x = []; + let x = []; x.push(props.p0); - y = x; + const y = x; if (props.p1) { - let t0; - if ($[5] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[5] = t0; + let t1; + if ($[4] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[4] = t1; } else { - t0 = $[5]; + t1 = $[4]; } - x = t0; + x = t1; } y.push(props.p2); + + t0 = ; $[0] = props.p0; $[1] = props.p1; $[2] = props.p2; - $[3] = x; - $[4] = y; + $[3] = t0; } else { - x = $[3]; - y = $[4]; - } - let t0; - if ($[6] !== x || $[7] !== y) { - t0 = ; - $[6] = x; - $[7] = y; - $[8] = t0; - } else { - t0 = $[8]; + t0 = $[3]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md index 82cb494c9e..3804326553 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md @@ -22,39 +22,29 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; - let y; + const $ = _c(4); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1) { - x = []; + let x = []; x.push(props.p0); - y = x; - let t0; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[4] = t0; + const y = x; + let t1; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[3] = t1; } else { - t0 = $[4]; + t1 = $[3]; } - x = t0; + x = t1; y.push(props.p1); + + t0 = ; $[0] = props.p0; $[1] = props.p1; - $[2] = x; - $[3] = y; + $[2] = t0; } else { - x = $[2]; - y = $[3]; - } - let t0; - if ($[5] !== x || $[6] !== y) { - t0 = ; - $[5] = x; - $[6] = y; - $[7] = t0; - } else { - t0 = $[7]; + t0 = $[2]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index 07e508b259..6ca1483fad 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -24,13 +24,12 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); + const $ = _c(2); const item = props.item; - let baseVideos; - let thumbnails; + let t0; if ($[0] !== item) { - thumbnails = []; - baseVideos = getBaseVideos(item); + const thumbnails = []; + const baseVideos = getBaseVideos(item); baseVideos.forEach((video) => { const baseVideo = video.hasBaseVideo; @@ -38,21 +37,12 @@ function Component(props) { thumbnails.push({ extraVideo: true }); } }); - $[0] = item; - $[1] = baseVideos; - $[2] = thumbnails; - } else { - baseVideos = $[1]; - thumbnails = $[2]; - } - let t0; - if ($[3] !== baseVideos || $[4] !== thumbnails) { + t0 = ; - $[3] = baseVideos; - $[4] = thumbnails; - $[5] = t0; + $[0] = item; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md index 0dbe08c710..a7389041bb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md @@ -24,35 +24,26 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let y; + const $ = _c(2); + let t0; if ($[0] !== props) { - x = []; + const x = []; + let y; if (props.p0) { x.push(props.p1); y = x; } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== y) { + t0 = ( {x} {y} ); - $[3] = x; - $[4] = y; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md index a3e6dfeb85..915218fcfa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md @@ -33,25 +33,25 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; + const $ = _c(7); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; bb0: switch (props.p0) { case 1: { break bb0; } case true: { x.push(props.p2); - let t0; + let t1; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[3] = t0; + t1 = []; + $[3] = t1; } else { - t0 = $[3]; + t1 = $[3]; } - y = t0; + y = t1; } default: { break bb0; @@ -60,31 +60,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[4] !== x) { + t0 = ; - $[4] = x; - $[5] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[5]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[6] !== y || $[7] !== child) { + if ($[4] !== y || $[5] !== child) { t1 = {child}; - $[6] = y; - $[7] = child; - $[8] = t1; + $[4] = y; + $[5] = child; + $[6] = t1; } else { - t1 = $[8]; + t1 = $[6]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md index 14ac820af7..0c5aea9c7d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md @@ -28,11 +28,11 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; + const $ = _c(6); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; switch (props.p0) { case true: { x.push(props.p2); @@ -42,31 +42,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x) { + t0 = ; - $[3] = x; - $[4] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[4]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[5] !== y || $[6] !== child) { + if ($[3] !== y || $[4] !== child) { t1 = {child}; - $[5] = y; - $[6] = child; - $[7] = t1; + $[3] = y; + $[4] = child; + $[5] = t1; } else { - t1 = $[7]; + t1 = $[5]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md index 2fdb888230..9f8fed44f0 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md @@ -24,10 +24,10 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(4); - let x; + const $ = _c(2); + let t0; if ($[0] !== props.cond) { - x = {}; + const x = {}; const onChange = (e) => { maybeMutate(x, e.target.value); @@ -36,18 +36,11 @@ function Component(props) { } onChange(); - $[0] = props.cond; - $[1] = x; - } else { - x = $[1]; - } - let t0; - if ($[2] !== x) { t0 = ; - $[2] = x; - $[3] = t0; + $[0] = props.cond; + $[1] = t0; } else { - t0 = $[3]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md index 6f6ab2e3a1..3bb448d26d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md @@ -21,22 +21,15 @@ function component() { ```javascript import { c as _c } from "react/compiler-runtime"; function component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = makeSomePrimitive(); + t0 = { u: makeSomePrimitive(), v: makeSomePrimitive() }; $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = { u: t0, v: makeSomePrimitive() }; - $[1] = t1; - } else { - t1 = $[1]; - } - const x = t1; + const x = t0; const u = x.u; const v = x.v; if (u > v) {