From 6ea1df3c121fc547435b3c9acae935753d516914 Mon Sep 17 00:00:00 2001 From: Luna Date: Thu, 7 Jul 2022 17:30:54 -0400 Subject: [PATCH] old --- .../src/ReactFiberBeginWork.old.js | 1 + .../src/ReactFiberCommitWork.old.js | 63 ++++++++++++------- .../ReactFiberTracingMarkerComponent.old.js | 24 +++++++ .../src/ReactFiberWorkLoop.old.js | 31 +++++++++ 4 files changed, 98 insertions(+), 21 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index a4fccc0bbd73d..a88f9383847ed 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -909,6 +909,7 @@ function updateTracingMarkerComponent( const markerInstance: TracingMarkerInstance = { transitions: new Set(currentTransitions), pendingSuspenseBoundaries: new Map(), + name: workInProgress.pendingProps.name, }; workInProgress.stateNode = markerInstance; } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index a50b0dae4df6e..fb7dc16648817 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -140,6 +140,7 @@ import { addTransitionStartCallbackToPendingTransition, addTransitionProgressCallbackToPendingTransition, addTransitionCompleteCallbackToPendingTransition, + addMarkerProgressCallbackToPendingTransition, addMarkerCompleteCallbackToPendingTransition, setIsRunningInsertionEffect, } from './ReactFiberWorkLoop.old'; @@ -1113,6 +1114,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) { if (pendingMarkers !== null) { pendingMarkers.forEach(markerInstance => { const pendingBoundaries = markerInstance.pendingSuspenseBoundaries; + const transitions = markerInstance.transitions; if ( pendingBoundaries !== null && !pendingBoundaries.has(offscreenInstance) @@ -1120,13 +1122,21 @@ function commitTransitionProgress(offscreenFiber: Fiber) { pendingBoundaries.set(offscreenInstance, { name, }); - if (markerInstance.transitions !== null) { - markerInstance.transitions.forEach(transition => { - addTransitionProgressCallbackToPendingTransition( - transition, + if (transitions !== null) { + if (markerInstance.name) { + addMarkerProgressCallbackToPendingTransition( + markerInstance.name, + transitions, pendingBoundaries, ); - }); + } else { + markerInstance.transitions.forEach(transition => { + addTransitionProgressCallbackToPendingTransition( + transition, + pendingBoundaries, + ); + }); + } } } }); @@ -1138,18 +1148,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) { if (pendingMarkers !== null) { pendingMarkers.forEach(markerInstance => { const pendingBoundaries = markerInstance.pendingSuspenseBoundaries; + const transitions = markerInstance.transitions; if ( pendingBoundaries !== null && pendingBoundaries.has(offscreenInstance) ) { pendingBoundaries.delete(offscreenInstance); - if (markerInstance.transitions !== null) { - markerInstance.transitions.forEach(transition => { - addTransitionProgressCallbackToPendingTransition( - transition, + if (transitions !== null) { + if (markerInstance.name) { + addMarkerProgressCallbackToPendingTransition( + markerInstance.name, + transitions, pendingBoundaries, ); - }); + } else { + markerInstance.transitions.forEach(transition => { + addTransitionProgressCallbackToPendingTransition( + transition, + pendingBoundaries, + ); + }); + } } } }); @@ -2974,18 +2993,20 @@ function commitPassiveMountOnFiber( // Get the transitions that were initiatized during the render // and add a start transition callback for each of them const instance = finishedWork.stateNode; - if ( - instance.pendingSuspenseBoundaries === null || - instance.pendingSuspenseBoundaries.size === 0 - ) { - instance.transitions.forEach(transition => { - addMarkerCompleteCallbackToPendingTransition({ - transition, - name: finishedWork.memoizedProps.name, + if (instance.transitions !== null) { + if ( + instance.pendingSuspenseBoundaries === null || + instance.pendingSuspenseBoundaries.size === 0 + ) { + instance.transitions.forEach(transition => { + addMarkerCompleteCallbackToPendingTransition({ + transition, + name: finishedWork.memoizedProps.name, + }); }); - }); - instance.transitions = null; - instance.pendingSuspenseBoundaries = null; + instance.transitions = null; + instance.pendingSuspenseBoundaries = null; + } } } break; diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 0a5693823edad..bf9268445a062 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js @@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = { transitionStart: Array | null, transitionProgress: Map | null, transitionComplete: Array | null, + markerProgress: Map | null, markerComplete: Array | null, }; @@ -43,6 +44,7 @@ export type BatchConfigTransition = { export type TracingMarkerInstance = {| pendingSuspenseBoundaries: PendingSuspenseBoundaries | null, transitions: Set | null, + name?: string, |}; export type PendingSuspenseBoundaries = Map; @@ -63,6 +65,28 @@ export function processTransitionCallbacks( }); } + const markerProgress = pendingTransitions.markerProgress; + const onMarkerProgress = callbacks.onMarkerProgress; + if (onMarkerProgress != null && markerProgress !== null) { + markerProgress.forEach((markerInstance, markerName) => { + if (markerInstance.transitions !== null) { + const pending = + markerInstance.pendingSuspenseBoundaries !== null + ? Array.from(markerInstance.pendingSuspenseBoundaries.values()) + : []; + markerInstance.transitions.forEach(transition => { + onMarkerProgress( + transition.name, + markerName, + transition.startTime, + endTime, + pending, + ); + }); + } + }); + } + const markerComplete = pendingTransitions.markerComplete; if (markerComplete !== null) { markerComplete.forEach(marker => { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 860df96831c31..aaffd46632702 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -352,6 +352,7 @@ export function addTransitionStartCallbackToPendingTransition( transitionStart: [], transitionProgress: null, transitionComplete: null, + markerProgress: null, markerComplete: null, }; } @@ -364,6 +365,33 @@ export function addTransitionStartCallbackToPendingTransition( } } +export function addMarkerProgressCallbackToPendingTransition( + markerName: string, + transitions: Set, + pendingSuspenseBoundaries: PendingSuspenseBoundaries | null, +) { + if (enableTransitionTracing) { + if (currentPendingTransitionCallbacks === null) { + currentPendingTransitionCallbacks = { + transitionStart: null, + transitionProgress: null, + transitionComplete: null, + markerProgress: new Map(), + markerComplete: null, + }; + } + + if (currentPendingTransitionCallbacks.markerProgress === null) { + currentPendingTransitionCallbacks.markerProgress = new Map(); + } + + currentPendingTransitionCallbacks.markerProgress.set(markerName, { + pendingSuspenseBoundaries, + transitions, + }); + } +} + export function addMarkerCompleteCallbackToPendingTransition( transition: MarkerTransition, ) { @@ -373,6 +401,7 @@ export function addMarkerCompleteCallbackToPendingTransition( transitionStart: null, transitionProgress: null, transitionComplete: null, + markerProgress: null, markerComplete: [], }; } @@ -395,6 +424,7 @@ export function addTransitionProgressCallbackToPendingTransition( transitionStart: null, transitionProgress: new Map(), transitionComplete: null, + markerProgress: null, markerComplete: null, }; } @@ -419,6 +449,7 @@ export function addTransitionCompleteCallbackToPendingTransition( transitionStart: null, transitionProgress: null, transitionComplete: [], + markerProgress: null, markerComplete: null, }; }