[Transition Tracing] Create/Process Marker Complete Callback (#24700)
This PR adds code to add a marker complete callback to the queue. It also adds code to process marker complete callback. Marker complete callbacks, in addition to the fields that transition complete callbacks need, also have a `markerName` field
Luna Ruan committed
Jun 13, 2022 at 10:56 UTC
7cf8dfd94f29a42102e5e553395d9bb1b1710c42
4 files changed
+78
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+16
@@ -21,9 +21,11 @@ export type TransitionObject = {
21
startTime: number,
22
};
23
24
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
25
export type PendingTransitionCallbacks = {
26
transitionStart: Array<TransitionObject> | null,
27
transitionComplete: Array<TransitionObject> | null,
28
+ markerComplete: Array<MarkerTransitionObject> | null,
29
};
30
31
export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
60
});
61
}
62
63
+ const markerComplete = pendingTransitions.markerComplete;
64
+ if (markerComplete !== null) {
65
+ markerComplete.forEach(transition => {
66
+ if (callbacks.onMarkerComplete != null) {
67
+ callbacks.onMarkerComplete(
68
+ transition.transitionName,
69
+ transition.markerName,
70
+ transition.startTime,
71
+ endTime,
72
+ );
73
+ }
74
+ });
75
+ }
76
+
77
const transitionComplete = pendingTransitions.transitionComplete;
78
if (transitionComplete !== null) {
79
transitionComplete.forEach(transition => {
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+16
@@ -21,9 +21,11 @@ export type TransitionObject = {
21
startTime: number,
22
};
23
24
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
25
export type PendingTransitionCallbacks = {
26
transitionStart: Array<TransitionObject> | null,
27
transitionComplete: Array<TransitionObject> | null,
28
+ markerComplete: Array<MarkerTransitionObject> | null,
29
};
30
31
export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
60
});
61
}
62
63
+ const markerComplete = pendingTransitions.markerComplete;
64
+ if (markerComplete !== null) {
65
+ markerComplete.forEach(transition => {
66
+ if (callbacks.onMarkerComplete != null) {
67
+ callbacks.onMarkerComplete(
68
+ transition.transitionName,
69
+ transition.markerName,
70
+ transition.startTime,
71
+ endTime,
72
+ );
73
+ }
74
+ });
75
+ }
76
+
77
const transitionComplete = pendingTransitions.transitionComplete;
78
if (transitionComplete !== null) {
79
transitionComplete.forEach(transition => {
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+23
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
18
import type {
19
PendingTransitionCallbacks,
20
TransitionObject,
21
+ MarkerTransitionObject,
22
Transition,
23
} from './ReactFiberTracingMarkerComponent.new';
24
@@ -350,6 +351,7 @@ export function addTransitionStartCallbackToPendingTransition(
351
currentPendingTransitionCallbacks = {
352
transitionStart: [],
353
transitionComplete: null,
354
+ markerComplete: null,
355
};
356
}
357
@@ -361,6 +363,26 @@ export function addTransitionStartCallbackToPendingTransition(
363
}
364
}
365
366
+export function addMarkerCompleteCallbackToPendingTransition(
367
+ transition: MarkerTransitionObject,
368
+) {
369
+ if (enableTransitionTracing) {
370
+ if (currentPendingTransitionCallbacks === null) {
371
+ currentPendingTransitionCallbacks = {
372
+ transitionStart: null,
373
+ transitionComplete: null,
374
+ markerComplete: [],
375
+ };
376
+ }
377
+
378
+ if (currentPendingTransitionCallbacks.markerComplete === null) {
379
+ currentPendingTransitionCallbacks.markerComplete = [];
380
+ }
381
+
382
+ currentPendingTransitionCallbacks.markerComplete.push(transition);
383
+ }
384
+}
385
+
386
export function addTransitionCompleteCallbackToPendingTransition(
387
transition: TransitionObject,
388
) {
@@ -369,6 +391,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
391
currentPendingTransitionCallbacks = {
392
transitionStart: null,
393
transitionComplete: [],
394
+ markerComplete: null,
395
};
396
}
397
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+23
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
18
import type {
19
PendingTransitionCallbacks,
20
TransitionObject,
21
+ MarkerTransitionObject,
22
Transition,
23
} from './ReactFiberTracingMarkerComponent.old';
24
@@ -349,6 +350,7 @@ export function addTransitionStartCallbackToPendingTransition(
350
currentPendingTransitionCallbacks = {
351
transitionStart: [],
352
transitionComplete: null,
353
+ markerComplete: null,
354
};
355
}
356
@@ -360,6 +362,26 @@ export function addTransitionStartCallbackToPendingTransition(
362
}
363
}
364
365
+export function addMarkerCompleteCallbackToPendingTransition(
366
+ transition: MarkerTransitionObject,
367
+) {
368
+ if (enableTransitionTracing) {
369
+ if (currentPendingTransitionCallbacks === null) {
370
+ currentPendingTransitionCallbacks = {
371
+ transitionStart: null,
372
+ transitionComplete: null,
373
+ markerComplete: [],
374
+ };
375
+ }
376
+
377
+ if (currentPendingTransitionCallbacks.markerComplete === null) {
378
+ currentPendingTransitionCallbacks.markerComplete = [];
379
+ }
380
+
381
+ currentPendingTransitionCallbacks.markerComplete.push(transition);
382
+ }
383
+}
384
+
385
export function addTransitionCompleteCallbackToPendingTransition(
386
transition: TransitionObject,
387
) {
@@ -368,6 +390,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
390
currentPendingTransitionCallbacks = {
391
transitionStart: null,
392
transitionComplete: [],
393
+ markerComplete: null,
394
};
395
}
396