Skip to content

Commit

Permalink
[Transition Tracing] Add onTransitionProgress Callback (#24833)
Browse files Browse the repository at this point in the history 
This PR adds support for `onTransitionProgress` (`onTransitionProgress(transitionName: string, startTime: number, currentTime: number, pending: Array<{name: null | string}>)`)

We call this callback when:
    * When **a child suspense boundary of the transition commits in a fallback state**. Only the suspense boundaries that are triggered and commit in a fallback state when the transition first occurs (and all subsequent suspense boundaries in the initial suspense boundary's subtree) are considered a part of the transition
    * **A child suspense boundary of the transition resolves**
   
When we call `onTransitionProgress`, we call the function with a `pending` array. This array contains the names of the transition's suspense boundaries that are still in a fallback state
  • Loading branch information
@lunaruan
lunaruan committed Jul 8, 2022
1 parent 30eb267 commit 80208e7
Show file tree
Hide file tree
Showing 8 changed files with 498 additions and 51 deletions.
61 changes: 41 additions & 20 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ import {
enqueuePendingPassiveProfilerEffect,
restorePendingUpdaters,
addTransitionStartCallbackToPendingTransition,
addTransitionProgressCallbackToPendingTransition,
addTransitionCompleteCallbackToPendingTransition,
addMarkerCompleteCallbackToPendingTransition,
setIsRunningInsertionEffect,
Expand Down Expand Up @@ -1119,20 +1120,46 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
// The suspense boundaries was just hidden. Add the boundary
// to the pending boundary set if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
pendingBoundaries.set(offscreenInstance, {
name,
});
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (
pendingBoundaries !== null &&
!pendingBoundaries.has(offscreenInstance)
) {
pendingBoundaries.set(offscreenInstance, {
name,
});
if (markerInstance.transitions !== null) {
markerInstance.transitions.forEach(transition => {
addTransitionProgressCallbackToPendingTransition(
transition,
pendingBoundaries,
);
});
}
}
});
}
} else if (wasHidden && !isHidden) {
// The suspense boundary went from hidden to visible. Remove
// the boundary from the pending suspense boundaries set
// if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
if (pendingBoundaries.has(offscreenInstance)) {
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (
pendingBoundaries !== null &&
pendingBoundaries.has(offscreenInstance)
) {
pendingBoundaries.delete(offscreenInstance);
if (markerInstance.transitions !== null) {
markerInstance.transitions.forEach(transition => {
addTransitionProgressCallbackToPendingTransition(
transition,
pendingBoundaries,
);
});
}
}
});
}
Expand Down Expand Up @@ -2888,17 +2915,13 @@ function commitPassiveMountOnFiber(
clearTransitionsForLanes(finishedRoot, committedLanes);
}

incompleteTransitions.forEach(
({pendingSuspenseBoundaries}, transition) => {
if (
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
);
incompleteTransitions.forEach((markerInstance, transition) => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (pendingBoundaries === null || pendingBoundaries.size === 0) {
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
});

clearTransitionsForLanes(finishedRoot, committedLanes);
}
Expand Down Expand Up @@ -2975,9 +2998,7 @@ function commitPassiveMountOnFiber(
instance.pendingMarkers = new Set();
}

instance.pendingMarkers.add(
markerInstance.pendingSuspenseBoundaries,
);
instance.pendingMarkers.add(markerInstance);
}
});
}
Expand Down
61 changes: 41 additions & 20 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ import {
enqueuePendingPassiveProfilerEffect,
restorePendingUpdaters,
addTransitionStartCallbackToPendingTransition,
addTransitionProgressCallbackToPendingTransition,
addTransitionCompleteCallbackToPendingTransition,
addMarkerCompleteCallbackToPendingTransition,
setIsRunningInsertionEffect,
Expand Down Expand Up @@ -1119,20 +1120,46 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
// The suspense boundaries was just hidden. Add the boundary
// to the pending boundary set if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
pendingBoundaries.set(offscreenInstance, {
name,
});
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (
pendingBoundaries !== null &&
!pendingBoundaries.has(offscreenInstance)
) {
pendingBoundaries.set(offscreenInstance, {
name,
});
if (markerInstance.transitions !== null) {
markerInstance.transitions.forEach(transition => {
addTransitionProgressCallbackToPendingTransition(
transition,
pendingBoundaries,
);
});
}
}
});
}
} else if (wasHidden && !isHidden) {
// The suspense boundary went from hidden to visible. Remove
// the boundary from the pending suspense boundaries set
// if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
if (pendingBoundaries.has(offscreenInstance)) {
pendingMarkers.forEach(markerInstance => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (
pendingBoundaries !== null &&
pendingBoundaries.has(offscreenInstance)
) {
pendingBoundaries.delete(offscreenInstance);
if (markerInstance.transitions !== null) {
markerInstance.transitions.forEach(transition => {
addTransitionProgressCallbackToPendingTransition(
transition,
pendingBoundaries,
);
});
}
}
});
}
Expand Down Expand Up @@ -2888,17 +2915,13 @@ function commitPassiveMountOnFiber(
clearTransitionsForLanes(finishedRoot, committedLanes);
}

incompleteTransitions.forEach(
({pendingSuspenseBoundaries}, transition) => {
if (
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
);
incompleteTransitions.forEach((markerInstance, transition) => {
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
if (pendingBoundaries === null || pendingBoundaries.size === 0) {
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
});

clearTransitionsForLanes(finishedRoot, committedLanes);
}
Expand Down Expand Up @@ -2975,9 +2998,7 @@ function commitPassiveMountOnFiber(
instance.pendingMarkers = new Set();
}

instance.pendingMarkers.add(
markerInstance.pendingSuspenseBoundaries,
);
instance.pendingMarkers.add(markerInstance);
}
});
}
Expand Down
3 changes: 1 addition & 2 deletions packages/react-reconciler/src/ReactFiberOffscreenComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import type {Lanes} from './ReactFiberLane.old';
import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
import type {
Transition,
PendingSuspenseBoundaries,
TracingMarkerInstance,
} from './ReactFiberTracingMarkerComponent.new';

Expand Down Expand Up @@ -45,7 +44,7 @@ export type OffscreenQueue = {|

export type OffscreenInstance = {|
isHidden: boolean,
pendingMarkers: Set<PendingSuspenseBoundaries> | null,
pendingMarkers: Set<TracingMarkerInstance> | null,
transitions: Set<Transition> | null,
retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
|};
19 changes: 17 additions & 2 deletions packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export type MarkerTransition = {

export type PendingTransitionCallbacks = {
transitionStart: Array<Transition> | null,
transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
transitionComplete: Array<Transition> | null,
markerComplete: Array<MarkerTransition> | null,
};
Expand Down Expand Up @@ -76,6 +77,19 @@ export function processTransitionCallbacks(
});
}

const transitionProgress = pendingTransitions.transitionProgress;
const onTransitionProgress = callbacks.onTransitionProgress;
if (onTransitionProgress != null && transitionProgress !== null) {
transitionProgress.forEach((pending, transition) => {
onTransitionProgress(
transition.name,
transition.startTime,
endTime,
Array.from(pending.values()),
);
});
}

const transitionComplete = pendingTransitions.transitionComplete;
if (transitionComplete !== null) {
transitionComplete.forEach(transition => {
Expand Down Expand Up @@ -117,10 +131,11 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
if (transitions !== null) {
transitions.forEach(transition => {
if (!root.incompleteTransitions.has(transition)) {
root.incompleteTransitions.set(transition, {
const markerInstance: TracingMarkerInstance = {
transitions: new Set([transition]),
pendingSuspenseBoundaries: null,
});
};
root.incompleteTransitions.set(transition, markerInstance);
}
});
}
Expand Down
19 changes: 17 additions & 2 deletions packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export type MarkerTransition = {

export type PendingTransitionCallbacks = {
transitionStart: Array<Transition> | null,
transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
transitionComplete: Array<Transition> | null,
markerComplete: Array<MarkerTransition> | null,
};
Expand Down Expand Up @@ -76,6 +77,19 @@ export function processTransitionCallbacks(
});
}

const transitionProgress = pendingTransitions.transitionProgress;
const onTransitionProgress = callbacks.onTransitionProgress;
if (onTransitionProgress != null && transitionProgress !== null) {
transitionProgress.forEach((pending, transition) => {
onTransitionProgress(
transition.name,
transition.startTime,
endTime,
Array.from(pending.values()),
);
});
}

const transitionComplete = pendingTransitions.transitionComplete;
if (transitionComplete !== null) {
transitionComplete.forEach(transition => {
Expand Down Expand Up @@ -117,10 +131,11 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
if (transitions !== null) {
transitions.forEach(transition => {
if (!root.incompleteTransitions.has(transition)) {
root.incompleteTransitions.set(transition, {
const markerInstance: TracingMarkerInstance = {
transitions: new Set([transition]),
pendingSuspenseBoundaries: null,
});
};
root.incompleteTransitions.set(transition, markerInstance);
}
});
}
Expand Down
29 changes: 29 additions & 0 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
import type {
PendingTransitionCallbacks,
MarkerTransition,
PendingSuspenseBoundaries,
Transition,
} from './ReactFiberTracingMarkerComponent.new';
import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
Expand Down Expand Up @@ -339,6 +340,7 @@ export function addTransitionStartCallbackToPendingTransition(
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: [],
transitionProgress: null,
transitionComplete: null,
markerComplete: null,
};
Expand All @@ -359,6 +361,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionProgress: null,
transitionComplete: null,
markerComplete: [],
};
Expand All @@ -372,13 +375,39 @@ export function addMarkerCompleteCallbackToPendingTransition(
}
}

export function addTransitionProgressCallbackToPendingTransition(
transition: Transition,
boundaries: PendingSuspenseBoundaries,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionProgress: new Map(),
transitionComplete: null,
markerComplete: null,
};
}

if (currentPendingTransitionCallbacks.transitionProgress === null) {
currentPendingTransitionCallbacks.transitionProgress = new Map();
}

currentPendingTransitionCallbacks.transitionProgress.set(
transition,
boundaries,
);
}
}

export function addTransitionCompleteCallbackToPendingTransition(
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionProgress: null,
transitionComplete: [],
markerComplete: null,
};
Expand Down
Loading

0 comments on commit 80208e7

Please sign in to comment.