From c31e5fca31d1af7d79d2c199669735ad9f12bdf9 Mon Sep 17 00:00:00 2001 From: Luna Date: Thu, 9 Jun 2022 17:14:39 -0700 Subject: [PATCH 1/2] add marker complete callback --- .../ReactFiberTracingMarkerComponent.new.js | 16 +++++++++++++ .../src/ReactFiberWorkLoop.new.js | 23 +++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index a2d6e505d47..593ebfc2d7d 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/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 21f9d17850f..edf3c7ee767 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, }; } From 7cd41ccd74c4629e0f4ef2902c83376836c9facc Mon Sep 17 00:00:00 2001 From: Luna Date: Thu, 9 Jun 2022 17:15:32 -0700 Subject: [PATCH 2/2] old --- .../ReactFiberTracingMarkerComponent.old.js | 16 +++++++++++++ .../src/ReactFiberWorkLoop.old.js | 23 +++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 2c2ce96cda0..a632af8e1cb 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.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 4f0af438709..bfddf20a89c 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, }; }