Skip to content

Commit 75b6e8f

Browse files
committed
[Fiber] Track Appearing Named ViewTransition in the accumulateSuspenseyCommit Phase (facebook#32254)
When a named ViewTransition component unmounts in one place and mounts in a different place we need to match these up so we know a pair has been created. Since the unmounts are tracked in the snapshot phase we need some way to track the mounts before that. Originally the way I did that is by reusing the render phase since there was no other phase in the commit before that. However, that's not quite correct. Just because something is visited in render doesn't mean it'll commit. E.g. if that tree ends up suspending or erroring. Which would lead to a false positive on match. The unmount shouldn't animate in that case. (Un)fortunately we have already added a traversal before the snapshot phase for tracking suspensey CSS. The `accumulateSuspenseyCommit` phase. This needs to find new mounts of Suspensey CSS or if there was a reappearing Offscreen boundary it needs to find any Suspensey CSS already inside that tree. This is exactly the same traversal we need to find newly appearing View Transition components. So we can just reuse that. DiffTrain build for [4b3728f](facebook@4b3728f)
1 parent d27b809 commit 75b6e8f

34 files changed

+978
-1274
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
c492f97541486458ce21653d2669d53d380f0538
1+
4b3728f05efbab9624e981339d8a0992a58f9a41
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
c492f97541486458ce21653d2669d53d380f0538
1+
4b3728f05efbab9624e981339d8a0992a58f9a41

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1957,7 +1957,7 @@ __DEV__ &&
19571957
exports.useTransition = function () {
19581958
return resolveDispatcher().useTransition();
19591959
};
1960-
exports.version = "19.1.0-www-classic-c492f975-20250128";
1960+
exports.version = "19.1.0-www-classic-4b3728f0-20250130";
19611961
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19621962
"function" ===
19631963
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1957,7 +1957,7 @@ __DEV__ &&
19571957
exports.useTransition = function () {
19581958
return resolveDispatcher().useTransition();
19591959
};
1960-
exports.version = "19.1.0-www-modern-c492f975-20250128";
1960+
exports.version = "19.1.0-www-modern-4b3728f0-20250130";
19611961
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
19621962
"function" ===
19631963
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-classic-c492f975-20250128";
633+
exports.version = "19.1.0-www-classic-4b3728f0-20250130";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,4 +630,4 @@ exports.useSyncExternalStore = function (
630630
exports.useTransition = function () {
631631
return ReactSharedInternals.H.useTransition();
632632
};
633-
exports.version = "19.1.0-www-modern-c492f975-20250128";
633+
exports.version = "19.1.0-www-modern-4b3728f0-20250130";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-classic-c492f975-20250128";
637+
exports.version = "19.1.0-www-classic-4b3728f0-20250130";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -634,7 +634,7 @@ exports.useSyncExternalStore = function (
634634
exports.useTransition = function () {
635635
return ReactSharedInternals.H.useTransition();
636636
};
637-
exports.version = "19.1.0-www-modern-c492f975-20250128";
637+
exports.version = "19.1.0-www-modern-4b3728f0-20250130";
638638
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
639639
"function" ===
640640
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12469,7 +12469,6 @@ __DEV__ &&
1246912469
lanes,
1247012470
workInProgressRootRecoverableErrors,
1247112471
workInProgressTransitions,
12472-
workInProgressAppearingViewTransitions,
1247312472
workInProgressRootDidIncludeRecursiveRenderUpdate,
1247412473
workInProgressDeferredLane,
1247512474
workInProgressRootInterleavedUpdatedLanes,
@@ -12499,7 +12498,6 @@ __DEV__ &&
1249912498
forceSync,
1250012499
workInProgressRootRecoverableErrors,
1250112500
workInProgressTransitions,
12502-
workInProgressAppearingViewTransitions,
1250312501
workInProgressRootDidIncludeRecursiveRenderUpdate,
1250412502
lanes,
1250512503
workInProgressDeferredLane,
@@ -12520,7 +12518,6 @@ __DEV__ &&
1252012518
forceSync,
1252112519
workInProgressRootRecoverableErrors,
1252212520
workInProgressTransitions,
12523-
workInProgressAppearingViewTransitions,
1252412521
workInProgressRootDidIncludeRecursiveRenderUpdate,
1252512522
lanes,
1252612523
workInProgressDeferredLane,
@@ -12544,7 +12541,6 @@ __DEV__ &&
1254412541
finishedWork,
1254512542
recoverableErrors,
1254612543
transitions,
12547-
appearingViewTransitions,
1254812544
didIncludeRenderPhaseUpdate,
1254912545
lanes,
1255012546
spawnedLane,
@@ -12553,17 +12549,14 @@ __DEV__ &&
1255312549
) {
1255412550
root.timeoutHandle = -1;
1255512551
var subtreeFlags = finishedWork.subtreeFlags;
12556-
(subtreeFlags =
12557-
subtreeFlags & 8192 || 16785408 === (subtreeFlags & 16785408)) &&
12558-
subtreeFlags &&
12552+
(subtreeFlags & 8192 || 16785408 === (subtreeFlags & 16785408)) &&
1255912553
accumulateSuspenseyCommitOnFiber(finishedWork);
1256012554
commitRoot(
1256112555
root,
1256212556
finishedWork,
1256312557
lanes,
1256412558
recoverableErrors,
1256512559
transitions,
12566-
appearingViewTransitions,
1256712560
didIncludeRenderPhaseUpdate,
1256812561
spawnedLane,
1256912562
updatedLanes,
@@ -12688,7 +12681,6 @@ __DEV__ &&
1268812681
workInProgressRootRecoverableErrors = workInProgressRootConcurrentErrors =
1268912682
null;
1269012683
workInProgressRootDidIncludeRecursiveRenderUpdate = !1;
12691-
workInProgressAppearingViewTransitions = null;
1269212684
0 !== (lanes & 8) && (lanes |= lanes & 32);
1269312685
var allEntangledLanes = root.entangledLanes;
1269412686
if (0 !== allEntangledLanes)
@@ -13306,7 +13298,6 @@ __DEV__ &&
1330613298
lanes,
1330713299
recoverableErrors,
1330813300
transitions,
13309-
appearingViewTransitions,
1331013301
didIncludeRenderPhaseUpdate,
1331113302
spawnedLane,
1331213303
updatedLanes,
@@ -13375,12 +13366,7 @@ __DEV__ &&
1337513366
didIncludeRenderPhaseUpdate = executionContext;
1337613367
executionContext |= CommitContext;
1337713368
try {
13378-
commitBeforeMutationEffects(
13379-
root,
13380-
finishedWork,
13381-
lanes,
13382-
appearingViewTransitions
13383-
);
13369+
commitBeforeMutationEffects(root, finishedWork, lanes);
1338413370
} finally {
1338513371
(executionContext = didIncludeRenderPhaseUpdate),
1338613372
(currentUpdatePriority = transitions),
@@ -16691,7 +16677,6 @@ __DEV__ &&
1669116677
workInProgressSuspendedRetryLanes = 0,
1669216678
workInProgressRootConcurrentErrors = null,
1669316679
workInProgressRootRecoverableErrors = null,
16694-
workInProgressAppearingViewTransitions = null,
1669516680
workInProgressRootDidIncludeRecursiveRenderUpdate = !1,
1669616681
didIncludeCommitPhaseUpdate = !1,
1669716682
globalMostRecentFallbackTime = 0,
@@ -16950,10 +16935,10 @@ __DEV__ &&
1695016935
(function () {
1695116936
var internals = {
1695216937
bundleType: 1,
16953-
version: "19.1.0-www-classic-c492f975-20250128",
16938+
version: "19.1.0-www-classic-4b3728f0-20250130",
1695416939
rendererPackageName: "react-art",
1695516940
currentDispatcherRef: ReactSharedInternals,
16956-
reconcilerVersion: "19.1.0-www-classic-c492f975-20250128"
16941+
reconcilerVersion: "19.1.0-www-classic-4b3728f0-20250130"
1695716942
};
1695816943
internals.overrideHookState = overrideHookState;
1695916944
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16987,7 +16972,7 @@ __DEV__ &&
1698716972
exports.Shape = Shape;
1698816973
exports.Surface = Surface;
1698916974
exports.Text = Text;
16990-
exports.version = "19.1.0-www-classic-c492f975-20250128";
16975+
exports.version = "19.1.0-www-classic-4b3728f0-20250130";
1699116976
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1699216977
"function" ===
1699316978
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12287,7 +12287,6 @@ __DEV__ &&
1228712287
lanes,
1228812288
workInProgressRootRecoverableErrors,
1228912289
workInProgressTransitions,
12290-
workInProgressAppearingViewTransitions,
1229112290
workInProgressRootDidIncludeRecursiveRenderUpdate,
1229212291
workInProgressDeferredLane,
1229312292
workInProgressRootInterleavedUpdatedLanes,
@@ -12317,7 +12316,6 @@ __DEV__ &&
1231712316
forceSync,
1231812317
workInProgressRootRecoverableErrors,
1231912318
workInProgressTransitions,
12320-
workInProgressAppearingViewTransitions,
1232112319
workInProgressRootDidIncludeRecursiveRenderUpdate,
1232212320
lanes,
1232312321
workInProgressDeferredLane,
@@ -12338,7 +12336,6 @@ __DEV__ &&
1233812336
forceSync,
1233912337
workInProgressRootRecoverableErrors,
1234012338
workInProgressTransitions,
12341-
workInProgressAppearingViewTransitions,
1234212339
workInProgressRootDidIncludeRecursiveRenderUpdate,
1234312340
lanes,
1234412341
workInProgressDeferredLane,
@@ -12362,7 +12359,6 @@ __DEV__ &&
1236212359
finishedWork,
1236312360
recoverableErrors,
1236412361
transitions,
12365-
appearingViewTransitions,
1236612362
didIncludeRenderPhaseUpdate,
1236712363
lanes,
1236812364
spawnedLane,
@@ -12371,17 +12367,14 @@ __DEV__ &&
1237112367
) {
1237212368
root.timeoutHandle = -1;
1237312369
var subtreeFlags = finishedWork.subtreeFlags;
12374-
(subtreeFlags =
12375-
subtreeFlags & 8192 || 16785408 === (subtreeFlags & 16785408)) &&
12376-
subtreeFlags &&
12370+
(subtreeFlags & 8192 || 16785408 === (subtreeFlags & 16785408)) &&
1237712371
accumulateSuspenseyCommitOnFiber(finishedWork);
1237812372
commitRoot(
1237912373
root,
1238012374
finishedWork,
1238112375
lanes,
1238212376
recoverableErrors,
1238312377
transitions,
12384-
appearingViewTransitions,
1238512378
didIncludeRenderPhaseUpdate,
1238612379
spawnedLane,
1238712380
updatedLanes,
@@ -12506,7 +12499,6 @@ __DEV__ &&
1250612499
workInProgressRootRecoverableErrors = workInProgressRootConcurrentErrors =
1250712500
null;
1250812501
workInProgressRootDidIncludeRecursiveRenderUpdate = !1;
12509-
workInProgressAppearingViewTransitions = null;
1251012502
0 !== (lanes & 8) && (lanes |= lanes & 32);
1251112503
var allEntangledLanes = root.entangledLanes;
1251212504
if (0 !== allEntangledLanes)
@@ -13120,7 +13112,6 @@ __DEV__ &&
1312013112
lanes,
1312113113
recoverableErrors,
1312213114
transitions,
13123-
appearingViewTransitions,
1312413115
didIncludeRenderPhaseUpdate,
1312513116
spawnedLane,
1312613117
updatedLanes,
@@ -13189,12 +13180,7 @@ __DEV__ &&
1318913180
didIncludeRenderPhaseUpdate = executionContext;
1319013181
executionContext |= CommitContext;
1319113182
try {
13192-
commitBeforeMutationEffects(
13193-
root,
13194-
finishedWork,
13195-
lanes,
13196-
appearingViewTransitions
13197-
);
13183+
commitBeforeMutationEffects(root, finishedWork, lanes);
1319813184
} finally {
1319913185
(executionContext = didIncludeRenderPhaseUpdate),
1320013186
(currentUpdatePriority = transitions),
@@ -16463,7 +16449,6 @@ __DEV__ &&
1646316449
workInProgressSuspendedRetryLanes = 0,
1646416450
workInProgressRootConcurrentErrors = null,
1646516451
workInProgressRootRecoverableErrors = null,
16466-
workInProgressAppearingViewTransitions = null,
1646716452
workInProgressRootDidIncludeRecursiveRenderUpdate = !1,
1646816453
didIncludeCommitPhaseUpdate = !1,
1646916454
globalMostRecentFallbackTime = 0,
@@ -16722,10 +16707,10 @@ __DEV__ &&
1672216707
(function () {
1672316708
var internals = {
1672416709
bundleType: 1,
16725-
version: "19.1.0-www-modern-c492f975-20250128",
16710+
version: "19.1.0-www-modern-4b3728f0-20250130",
1672616711
rendererPackageName: "react-art",
1672716712
currentDispatcherRef: ReactSharedInternals,
16728-
reconcilerVersion: "19.1.0-www-modern-c492f975-20250128"
16713+
reconcilerVersion: "19.1.0-www-modern-4b3728f0-20250130"
1672916714
};
1673016715
internals.overrideHookState = overrideHookState;
1673116716
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -16759,7 +16744,7 @@ __DEV__ &&
1675916744
exports.Shape = Shape;
1676016745
exports.Surface = Surface;
1676116746
exports.Text = Text;
16762-
exports.version = "19.1.0-www-modern-c492f975-20250128";
16747+
exports.version = "19.1.0-www-modern-4b3728f0-20250130";
1676316748
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1676416749
"function" ===
1676516750
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)