Skip to content

Commit 5e8c196

Browse files
lunaruanlunaruan
authored
[Transition Tracing] onMarkerProgress (#24861)
This PR adds support for `onMarkerProgress` (`onTransitionProgress(transitionName: string, markerName: string, startTime: number, currentTime: number, pending: Array<{name: null | string}>)`) We call this callback when: * When **a child suspense boundary of the marker 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 marker resolves** When we call `onMarkerProgress`, 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
1 parent b641d02 commit 5e8c196

9 files changed

+344
-48
lines changed

‎packages/react-reconciler/src/ReactFiberBeginWork.new.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
978978
const markerInstance: TracingMarkerInstance = {
979979
transitions: new Set(currentTransitions),
980980
pendingSuspenseBoundaries: new Map(),
981+
name: workInProgress.pendingProps.name,
981982
};
982983
workInProgress.stateNode = markerInstance;
983984
}

‎packages/react-reconciler/src/ReactFiberBeginWork.old.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
978978
const markerInstance: TracingMarkerInstance = {
979979
transitions: new Set(currentTransitions),
980980
pendingSuspenseBoundaries: new Map(),
981+
name: workInProgress.pendingProps.name,
981982
};
982983
workInProgress.stateNode = markerInstance;
983984
}

‎packages/react-reconciler/src/ReactFiberCommitWork.new.js

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ import {
145145
addTransitionStartCallbackToPendingTransition,
146146
addTransitionProgressCallbackToPendingTransition,
147147
addTransitionCompleteCallbackToPendingTransition,
148+
addMarkerProgressCallbackToPendingTransition,
148149
addMarkerCompleteCallbackToPendingTransition,
149150
setIsRunningInsertionEffect,
150151
} from './ReactFiberWorkLoop.new';
@@ -1250,20 +1251,29 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12501251
if (pendingMarkers !== null) {
12511252
pendingMarkers.forEach(markerInstance => {
12521253
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
1254+
const transitions = markerInstance.transitions;
12531255
if (
12541256
pendingBoundaries !== null &&
12551257
!pendingBoundaries.has(offscreenInstance)
12561258
) {
12571259
pendingBoundaries.set(offscreenInstance, {
12581260
name,
12591261
});
1260-
if (markerInstance.transitions !== null) {
1261-
markerInstance.transitions.forEach(transition => {
1262-
addTransitionProgressCallbackToPendingTransition(
1263-
transition,
1262+
if (transitions !== null) {
1263+
if (markerInstance.name) {
1264+
addMarkerProgressCallbackToPendingTransition(
1265+
markerInstance.name,
1266+
transitions,
12641267
pendingBoundaries,
12651268
);
1266-
});
1269+
} else {
1270+
transitions.forEach(transition => {
1271+
addTransitionProgressCallbackToPendingTransition(
1272+
transition,
1273+
pendingBoundaries,
1274+
);
1275+
});
1276+
}
12671277
}
12681278
}
12691279
});
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12751285
if (pendingMarkers !== null) {
12761286
pendingMarkers.forEach(markerInstance => {
12771287
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
1288+
const transitions = markerInstance.transitions;
12781289
if (
12791290
pendingBoundaries !== null &&
12801291
pendingBoundaries.has(offscreenInstance)
12811292
) {
12821293
pendingBoundaries.delete(offscreenInstance);
1283-
if (markerInstance.transitions !== null) {
1284-
markerInstance.transitions.forEach(transition => {
1285-
addTransitionProgressCallbackToPendingTransition(
1286-
transition,
1294+
if (transitions !== null) {
1295+
if (markerInstance.name) {
1296+
addMarkerProgressCallbackToPendingTransition(
1297+
markerInstance.name,
1298+
transitions,
12871299
pendingBoundaries,
12881300
);
1289-
});
1301+
} else {
1302+
transitions.forEach(transition => {
1303+
addTransitionProgressCallbackToPendingTransition(
1304+
transition,
1305+
pendingBoundaries,
1306+
);
1307+
});
1308+
}
12901309
}
12911310
}
12921311
});
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
30833102
// and add a start transition callback for each of them
30843103
const instance = finishedWork.stateNode;
30853104
if (
3086-
instance.pendingSuspenseBoundaries === null ||
3087-
instance.pendingSuspenseBoundaries.size === 0
3105+
instance.transitions !== null &&
3106+
(instance.pendingSuspenseBoundaries === null ||
3107+
instance.pendingSuspenseBoundaries.size === 0)
30883108
) {
3089-
if (instance.transitions !== null) {
3090-
instance.transitions.forEach(transition => {
3091-
addMarkerCompleteCallbackToPendingTransition({
3092-
transition,
3093-
name: finishedWork.memoizedProps.name,
3094-
});
3109+
instance.transitions.forEach(transition => {
3110+
addMarkerCompleteCallbackToPendingTransition({
3111+
transition,
3112+
name: finishedWork.memoizedProps.name,
30953113
});
3096-
instance.transitions = null;
3097-
instance.pendingSuspenseBoundaries = null;
3098-
}
3114+
});
3115+
instance.transitions = null;
3116+
instance.pendingSuspenseBoundaries = null;
30993117
}
31003118
}
31013119
break;

‎packages/react-reconciler/src/ReactFiberCommitWork.old.js

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ import {
145145
addTransitionStartCallbackToPendingTransition,
146146
addTransitionProgressCallbackToPendingTransition,
147147
addTransitionCompleteCallbackToPendingTransition,
148+
addMarkerProgressCallbackToPendingTransition,
148149
addMarkerCompleteCallbackToPendingTransition,
149150
setIsRunningInsertionEffect,
150151
} from './ReactFiberWorkLoop.old';
@@ -1250,20 +1251,29 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12501251
if (pendingMarkers !== null) {
12511252
pendingMarkers.forEach(markerInstance => {
12521253
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
1254+
const transitions = markerInstance.transitions;
12531255
if (
12541256
pendingBoundaries !== null &&
12551257
!pendingBoundaries.has(offscreenInstance)
12561258
) {
12571259
pendingBoundaries.set(offscreenInstance, {
12581260
name,
12591261
});
1260-
if (markerInstance.transitions !== null) {
1261-
markerInstance.transitions.forEach(transition => {
1262-
addTransitionProgressCallbackToPendingTransition(
1263-
transition,
1262+
if (transitions !== null) {
1263+
if (markerInstance.name) {
1264+
addMarkerProgressCallbackToPendingTransition(
1265+
markerInstance.name,
1266+
transitions,
12641267
pendingBoundaries,
12651268
);
1266-
});
1269+
} else {
1270+
transitions.forEach(transition => {
1271+
addTransitionProgressCallbackToPendingTransition(
1272+
transition,
1273+
pendingBoundaries,
1274+
);
1275+
});
1276+
}
12671277
}
12681278
}
12691279
});
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
12751285
if (pendingMarkers !== null) {
12761286
pendingMarkers.forEach(markerInstance => {
12771287
const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
1288+
const transitions = markerInstance.transitions;
12781289
if (
12791290
pendingBoundaries !== null &&
12801291
pendingBoundaries.has(offscreenInstance)
12811292
) {
12821293
pendingBoundaries.delete(offscreenInstance);
1283-
if (markerInstance.transitions !== null) {
1284-
markerInstance.transitions.forEach(transition => {
1285-
addTransitionProgressCallbackToPendingTransition(
1286-
transition,
1294+
if (transitions !== null) {
1295+
if (markerInstance.name) {
1296+
addMarkerProgressCallbackToPendingTransition(
1297+
markerInstance.name,
1298+
transitions,
12871299
pendingBoundaries,
12881300
);
1289-
});
1301+
} else {
1302+
transitions.forEach(transition => {
1303+
addTransitionProgressCallbackToPendingTransition(
1304+
transition,
1305+
pendingBoundaries,
1306+
);
1307+
});
1308+
}
12901309
}
12911310
}
12921311
});
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
30833102
// and add a start transition callback for each of them
30843103
const instance = finishedWork.stateNode;
30853104
if (
3086-
instance.pendingSuspenseBoundaries === null ||
3087-
instance.pendingSuspenseBoundaries.size === 0
3105+
instance.transitions !== null &&
3106+
(instance.pendingSuspenseBoundaries === null ||
3107+
instance.pendingSuspenseBoundaries.size === 0)
30883108
) {
3089-
if (instance.transitions !== null) {
3090-
instance.transitions.forEach(transition => {
3091-
addMarkerCompleteCallbackToPendingTransition({
3092-
transition,
3093-
name: finishedWork.memoizedProps.name,
3094-
});
3109+
instance.transitions.forEach(transition => {
3110+
addMarkerCompleteCallbackToPendingTransition({
3111+
transition,
3112+
name: finishedWork.memoizedProps.name,
30953113
});
3096-
instance.transitions = null;
3097-
instance.pendingSuspenseBoundaries = null;
3098-
}
3114+
});
3115+
instance.transitions = null;
3116+
instance.pendingSuspenseBoundaries = null;
30993117
}
31003118
}
31013119
break;

‎packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
2626
transitionStart: Array<Transition> | null,
2727
transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
2828
transitionComplete: Array<Transition> | null,
29+
markerProgress: Map<string, TracingMarkerInstance> | null,
2930
markerComplete: Array<MarkerTransition> | null,
3031
};
3132

@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
4344
export type TracingMarkerInstance = {|
4445
pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
4546
transitions: Set<Transition> | null,
47+
name?: string,
4648
|};
4749

4850
export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
6365
});
6466
}
6567

68+
const markerProgress = pendingTransitions.markerProgress;
69+
const onMarkerProgress = callbacks.onMarkerProgress;
70+
if (onMarkerProgress != null && markerProgress !== null) {
71+
markerProgress.forEach((markerInstance, markerName) => {
72+
if (markerInstance.transitions !== null) {
73+
const pending =
74+
markerInstance.pendingSuspenseBoundaries !== null
75+
? Array.from(markerInstance.pendingSuspenseBoundaries.values())
76+
: [];
77+
markerInstance.transitions.forEach(transition => {
78+
onMarkerProgress(
79+
transition.name,
80+
markerName,
81+
transition.startTime,
82+
endTime,
83+
pending,
84+
);
85+
});
86+
}
87+
});
88+
}
89+
6690
const markerComplete = pendingTransitions.markerComplete;
6791
if (markerComplete !== null) {
6892
markerComplete.forEach(marker => {

‎packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
2626
transitionStart: Array<Transition> | null,
2727
transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
2828
transitionComplete: Array<Transition> | null,
29+
markerProgress: Map<string, TracingMarkerInstance> | null,
2930
markerComplete: Array<MarkerTransition> | null,
3031
};
3132

@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
4344
export type TracingMarkerInstance = {|
4445
pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
4546
transitions: Set<Transition> | null,
47+
name?: string,
4648
|};
4749

4850
export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
6365
});
6466
}
6567

68+
const markerProgress = pendingTransitions.markerProgress;
69+
const onMarkerProgress = callbacks.onMarkerProgress;
70+
if (onMarkerProgress != null && markerProgress !== null) {
71+
markerProgress.forEach((markerInstance, markerName) => {
72+
if (markerInstance.transitions !== null) {
73+
const pending =
74+
markerInstance.pendingSuspenseBoundaries !== null
75+
? Array.from(markerInstance.pendingSuspenseBoundaries.values())
76+
: [];
77+
markerInstance.transitions.forEach(transition => {
78+
onMarkerProgress(
79+
transition.name,
80+
markerName,
81+
transition.startTime,
82+
endTime,
83+
pending,
84+
);
85+
});
86+
}
87+
});
88+
}
89+
6690
const markerComplete = pendingTransitions.markerComplete;
6791
if (markerComplete !== null) {
6892
markerComplete.forEach(marker => {

‎packages/react-reconciler/src/ReactFiberWorkLoop.new.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,7 @@ export function addTransitionStartCallbackToPendingTransition(
342342
transitionStart: [],
343343
transitionProgress: null,
344344
transitionComplete: null,
345+
markerProgress: null,
345346
markerComplete: null,
346347
};
347348
}
@@ -354,6 +355,33 @@ export function addTransitionStartCallbackToPendingTransition(
354355
}
355356
}
356357

358+
export function addMarkerProgressCallbackToPendingTransition(
359+
markerName: string,
360+
transitions: Set<Transition>,
361+
pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
362+
) {
363+
if (enableTransitionTracing) {
364+
if (currentPendingTransitionCallbacks === null) {
365+
currentPendingTransitionCallbacks = {
366+
transitionStart: null,
367+
transitionProgress: null,
368+
transitionComplete: null,
369+
markerProgress: new Map(),
370+
markerComplete: null,
371+
};
372+
}
373+
374+
if (currentPendingTransitionCallbacks.markerProgress === null) {
375+
currentPendingTransitionCallbacks.markerProgress = new Map();
376+
}
377+
378+
currentPendingTransitionCallbacks.markerProgress.set(markerName, {
379+
pendingSuspenseBoundaries,
380+
transitions,
381+
});
382+
}
383+
}
384+
357385
export function addMarkerCompleteCallbackToPendingTransition(
358386
transition: MarkerTransition,
359387
) {
@@ -363,6 +391,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
363391
transitionStart: null,
364392
transitionProgress: null,
365393
transitionComplete: null,
394+
markerProgress: null,
366395
markerComplete: [],
367396
};
368397
}
@@ -385,6 +414,7 @@ export function addTransitionProgressCallbackToPendingTransition(
385414
transitionStart: null,
386415
transitionProgress: new Map(),
387416
transitionComplete: null,
417+
markerProgress: null,
388418
markerComplete: null,
389419
};
390420
}
@@ -409,6 +439,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
409439
transitionStart: null,
410440
transitionProgress: null,
411441
transitionComplete: [],
442+
markerProgress: null,
412443
markerComplete: null,
413444
};
414445
}

0 commit comments

Comments
 (0)