diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index a2d6e505d4739..593ebfc2d7da3 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js @@ -21,9 +21,11 @@ export type TransitionObject = { startTime: number, }; +export type MarkerTransitionObject = TransitionObject & {markerName: string}; export type PendingTransitionCallbacks = { transitionStart: Array | null, transitionComplete: Array | null, + markerComplete: Array | 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 => { diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 2c2ce96cda0a6..a632af8e1cb91 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js @@ -21,9 +21,11 @@ export type TransitionObject = { startTime: number, }; +export type MarkerTransitionObject = TransitionObject & {markerName: string}; export type PendingTransitionCallbacks = { transitionStart: Array | null, transitionComplete: Array | null, + markerComplete: Array | 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 => { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 21f9d17850f1c..edf3c7ee76745 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -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, }; } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 4f0af4387098e..bfddf20a89cdf 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -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, }; }