Skip to content

Commit 1e13b42

Browse files
sebmarkbagesebmarkbage
committed
Measure Updated ViewTransition Boundaries (#32653)
This does the same thing for that we did for in e3cbaff. If a boundary hasn't mutated and didn't change in size, we mark it for cancellation. Otherwise we add names to it. The different from the CommitViewTransition path is that the old names are added to the clones so this is the first time the new names. Now we also cancel any boundaries that were unchanged. So now the root no longer animates. We still have to clone them. There are other optimizations that can avoid cloning but once we've done all the layouts we can still cancel the running animation and let them just be the regular content if they didn't change. Just like the regular fire-and-forget path. This also fixes the measurement so that we measure clones by adjusting their position back into the viewport. This actually surfaces a bug in Safari that was already in #32612. It turns out that the old names aren't picked up for some reason and so in Safari they looked more like a cross-fade than what #32612 was supposed to fix. However, now that bug is even more apparent because they actually just disappear in Safari. I'm not sure what that bug is but it's unrelated to this PR so will fix that separately. DiffTrain build for [3c3696d](3c3696d)
1 parent 952df7f commit 1e13b42

20 files changed

+1614
-1464
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
90b511ec7a9f2f3fd2b7f0039d8fc52c23f573a1
1+
3c3696d5548c8a67f2332fd78332b9366abaf2f9

‎compiled/facebook-www/REVISION_TRANSFORMS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
90b511ec7a9f2f3fd2b7f0039d8fc52c23f573a1
1+
3c3696d5548c8a67f2332fd78332b9366abaf2f9

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

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10801,14 +10801,6 @@ __DEV__ &&
1080110801
restoreEnterOrExitViewTransitions(fiber), (fiber = fiber.sibling);
1080210802
else restorePairedViewTransitions(fiber);
1080310803
}
10804-
function restoreNestedViewTransitions(changedParent) {
10805-
for (changedParent = changedParent.child; null !== changedParent; )
10806-
30 === changedParent.tag
10807-
? (changedParent.memoizedState = null)
10808-
: 0 !== (changedParent.subtreeFlags & 33554432) &&
10809-
restoreNestedViewTransitions(changedParent),
10810-
(changedParent = changedParent.sibling);
10811-
}
1081210804
function commitBeforeMutationEffects(root, firstChild, committedLanes) {
1081310805
focusedInstanceHandle = null;
1081410806
shouldFireAfterActiveInstanceBlur = !1;
@@ -11921,6 +11913,7 @@ __DEV__ &&
1192111913
instance,
1192211914
lanes.memoizedProps
1192311915
);
11916+
trackHostMutation();
1192411917
} catch (error) {
1192511918
captureCommitPhaseError(lanes, lanes.return, error);
1192611919
}
@@ -12358,38 +12351,37 @@ __DEV__ &&
1235812351
committedTransitions,
1235912352
endTime
1236012353
) {
12361-
var isViewTransitionEligible =
12362-
enableViewTransition && (committedLanes & 335544064) === committedLanes;
1236312354
if (
12364-
parentFiber.subtreeFlags & (isViewTransitionEligible ? 10262 : 10256) ||
12355+
parentFiber.subtreeFlags &
12356+
(enableViewTransition &&
12357+
(committedLanes & 335544064) === committedLanes
12358+
? 10262
12359+
: 10256) ||
1236512360
(enableComponentPerformanceTrack &&
1236612361
0 !== parentFiber.actualDuration &&
1236712362
(null === parentFiber.alternate ||
1236812363
parentFiber.alternate.child !== parentFiber.child))
1236912364
)
1237012365
for (parentFiber = parentFiber.child; null !== parentFiber; )
12371-
enableComponentPerformanceTrack
12372-
? ((isViewTransitionEligible = parentFiber.sibling),
12373-
commitPassiveMountOnFiber(
12374-
root,
12375-
parentFiber,
12376-
committedLanes,
12377-
committedTransitions,
12378-
null !== isViewTransitionEligible
12379-
? isViewTransitionEligible.actualStartTime
12380-
: endTime
12381-
),
12382-
(parentFiber = isViewTransitionEligible))
12383-
: (commitPassiveMountOnFiber(
12384-
root,
12385-
parentFiber,
12386-
committedLanes,
12387-
committedTransitions,
12388-
0
12389-
),
12390-
(parentFiber = parentFiber.sibling));
12391-
else
12392-
isViewTransitionEligible && restoreNestedViewTransitions(parentFiber);
12366+
if (enableComponentPerformanceTrack) {
12367+
var nextSibling = parentFiber.sibling;
12368+
commitPassiveMountOnFiber(
12369+
root,
12370+
parentFiber,
12371+
committedLanes,
12372+
committedTransitions,
12373+
null !== nextSibling ? nextSibling.actualStartTime : endTime
12374+
);
12375+
parentFiber = nextSibling;
12376+
} else
12377+
commitPassiveMountOnFiber(
12378+
root,
12379+
parentFiber,
12380+
committedLanes,
12381+
committedTransitions,
12382+
0
12383+
),
12384+
(parentFiber = parentFiber.sibling);
1239312385
}
1239412386
function commitPassiveMountOnFiber(
1239512387
finishedRoot,
@@ -12691,10 +12683,6 @@ __DEV__ &&
1269112683
break;
1269212684
case 30:
1269312685
if (enableViewTransition) {
12694-
isViewTransitionEligible &&
12695-
null !== finishedWork.alternate &&
12696-
0 !== (finishedWork.subtreeFlags & 8246) &&
12697-
(finishedWork.memoizedState = null);
1269812686
recursivelyTraversePassiveMountEffects(
1269912687
finishedRoot,
1270012688
finishedWork,

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

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10619,14 +10619,6 @@ __DEV__ &&
1061910619
restoreEnterOrExitViewTransitions(fiber), (fiber = fiber.sibling);
1062010620
else restorePairedViewTransitions(fiber);
1062110621
}
10622-
function restoreNestedViewTransitions(changedParent) {
10623-
for (changedParent = changedParent.child; null !== changedParent; )
10624-
30 === changedParent.tag
10625-
? (changedParent.memoizedState = null)
10626-
: 0 !== (changedParent.subtreeFlags & 33554432) &&
10627-
restoreNestedViewTransitions(changedParent),
10628-
(changedParent = changedParent.sibling);
10629-
}
1063010622
function commitBeforeMutationEffects(root, firstChild, committedLanes) {
1063110623
focusedInstanceHandle = null;
1063210624
shouldFireAfterActiveInstanceBlur = !1;
@@ -11739,6 +11731,7 @@ __DEV__ &&
1173911731
instance,
1174011732
lanes.memoizedProps
1174111733
);
11734+
trackHostMutation();
1174211735
} catch (error) {
1174311736
captureCommitPhaseError(lanes, lanes.return, error);
1174411737
}
@@ -12176,38 +12169,37 @@ __DEV__ &&
1217612169
committedTransitions,
1217712170
endTime
1217812171
) {
12179-
var isViewTransitionEligible =
12180-
enableViewTransition && (committedLanes & 335544064) === committedLanes;
1218112172
if (
12182-
parentFiber.subtreeFlags & (isViewTransitionEligible ? 10262 : 10256) ||
12173+
parentFiber.subtreeFlags &
12174+
(enableViewTransition &&
12175+
(committedLanes & 335544064) === committedLanes
12176+
? 10262
12177+
: 10256) ||
1218312178
(enableComponentPerformanceTrack &&
1218412179
0 !== parentFiber.actualDuration &&
1218512180
(null === parentFiber.alternate ||
1218612181
parentFiber.alternate.child !== parentFiber.child))
1218712182
)
1218812183
for (parentFiber = parentFiber.child; null !== parentFiber; )
12189-
enableComponentPerformanceTrack
12190-
? ((isViewTransitionEligible = parentFiber.sibling),
12191-
commitPassiveMountOnFiber(
12192-
root,
12193-
parentFiber,
12194-
committedLanes,
12195-
committedTransitions,
12196-
null !== isViewTransitionEligible
12197-
? isViewTransitionEligible.actualStartTime
12198-
: endTime
12199-
),
12200-
(parentFiber = isViewTransitionEligible))
12201-
: (commitPassiveMountOnFiber(
12202-
root,
12203-
parentFiber,
12204-
committedLanes,
12205-
committedTransitions,
12206-
0
12207-
),
12208-
(parentFiber = parentFiber.sibling));
12209-
else
12210-
isViewTransitionEligible && restoreNestedViewTransitions(parentFiber);
12184+
if (enableComponentPerformanceTrack) {
12185+
var nextSibling = parentFiber.sibling;
12186+
commitPassiveMountOnFiber(
12187+
root,
12188+
parentFiber,
12189+
committedLanes,
12190+
committedTransitions,
12191+
null !== nextSibling ? nextSibling.actualStartTime : endTime
12192+
);
12193+
parentFiber = nextSibling;
12194+
} else
12195+
commitPassiveMountOnFiber(
12196+
root,
12197+
parentFiber,
12198+
committedLanes,
12199+
committedTransitions,
12200+
0
12201+
),
12202+
(parentFiber = parentFiber.sibling);
1221112203
}
1221212204
function commitPassiveMountOnFiber(
1221312205
finishedRoot,
@@ -12509,10 +12501,6 @@ __DEV__ &&
1250912501
break;
1251012502
case 30:
1251112503
if (enableViewTransition) {
12512-
isViewTransitionEligible &&
12513-
null !== finishedWork.alternate &&
12514-
0 !== (finishedWork.subtreeFlags & 8246) &&
12515-
(finishedWork.memoizedState = null);
1251612504
recursivelyTraversePassiveMountEffects(
1251712505
finishedRoot,
1251812506
finishedWork,

0 commit comments

Comments
 (0)