Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Transition Tracing] Create/Process Marker Complete Callback (#24700)

Browse Source 
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
This commit is contained in:
Luna Ruan
2022-06-13 10:56:21 -07:00
committed by GitHub
parent 327e4a1f96
commit 7cf8dfd94f
4 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+16
View File
@@ -21,9 +21,11 @@ export type TransitionObject = {
startTime: number,
};
export type MarkerTransitionObject = TransitionObject & {markerName: string};
export type PendingTransitionCallbacks = {
transitionStart: Array<TransitionObject> | null,
transitionComplete: Array<TransitionObject> | null,
markerComplete: Array<MarkerTransitionObject> | null,
};
export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
});
}
const markerComplete = pendingTransitions.markerComplete;
if (markerComplete !== null) {
markerComplete.forEach(transition => {
if (callbacks.onMarkerComplete != null) {
callbacks.onMarkerComplete(
transition.transitionName,
transition.markerName,
transition.startTime,
endTime,
);
}
});
}
const transitionComplete = pendingTransitions.transitionComplete;
if (transitionComplete !== null) {
transitionComplete.forEach(transition => {
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+16
View File
@@ -21,9 +21,11 @@ export type TransitionObject = {
startTime: number,
};
export type MarkerTransitionObject = TransitionObject & {markerName: string};
export type PendingTransitionCallbacks = {
transitionStart: Array<TransitionObject> | null,
transitionComplete: Array<TransitionObject> | null,
markerComplete: Array<MarkerTransitionObject> | null,
};
export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
});
}
const markerComplete = pendingTransitions.markerComplete;
if (markerComplete !== null) {
markerComplete.forEach(transition => {
if (callbacks.onMarkerComplete != null) {
callbacks.onMarkerComplete(
transition.transitionName,
transition.markerName,
transition.startTime,
endTime,
);
}
});
}
const transitionComplete = pendingTransitions.transitionComplete;
if (transitionComplete !== null) {
transitionComplete.forEach(transition => {
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+23
View File
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
import type {
PendingTransitionCallbacks,
TransitionObject,
MarkerTransitionObject,
Transition,
} from './ReactFiberTracingMarkerComponent.new';
@@ -350,6 +351,7 @@ export function addTransitionStartCallbackToPendingTransition(
currentPendingTransitionCallbacks = {
transitionStart: [],
transitionComplete: null,
markerComplete: null,
};
}
@@ -361,6 +363,26 @@ export function addTransitionStartCallbackToPendingTransition(
}
}
export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionComplete: null,
markerComplete: [],
};
}
if (currentPendingTransitionCallbacks.markerComplete === null) {
currentPendingTransitionCallbacks.markerComplete = [];
}
currentPendingTransitionCallbacks.markerComplete.push(transition);
}
}
export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
) {
@@ -369,6 +391,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionComplete: [],
markerComplete: null,
};
}
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+23
View File
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
import type {
PendingTransitionCallbacks,
TransitionObject,
MarkerTransitionObject,
Transition,
} from './ReactFiberTracingMarkerComponent.old';
@@ -349,6 +350,7 @@ export function addTransitionStartCallbackToPendingTransition(
currentPendingTransitionCallbacks = {
transitionStart: [],
transitionComplete: null,
markerComplete: null,
};
}
@@ -360,6 +362,26 @@ export function addTransitionStartCallbackToPendingTransition(
}
}
export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionComplete: null,
markerComplete: [],
};
}
if (currentPendingTransitionCallbacks.markerComplete === null) {
currentPendingTransitionCallbacks.markerComplete = [];
}
currentPendingTransitionCallbacks.markerComplete.push(transition);
}
}
export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
) {
@@ -368,6 +390,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
currentPendingTransitionCallbacks = {
transitionStart: null,
transitionComplete: [],
markerComplete: null,
};
}