diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index f1f5913b01..295f626087 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -253,6 +253,7 @@ import { getOffscreenDeferredCache, getSuspendedTransitions, } from './ReactFiberTransition.new'; +import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.new'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; @@ -882,6 +883,7 @@ function updateTracingMarkerComponent( return null; } + pushTracingMarker(workInProgress); const nextChildren = workInProgress.pendingProps.children; reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -3645,6 +3647,11 @@ function attemptEarlyBailoutIfNoScheduledUpdate( } break; } + case TracingMarkerComponent: { + if (enableTransitionTracing) { + pushTracingMarker(workInProgress); + } + } } return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes); } diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index 39ff126166..13cc557f07 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -165,6 +165,7 @@ import {transferActualDuration} from './ReactProfilerTimer.new'; import {popCacheProvider} from './ReactFiberCacheComponent.new'; import {popTreeContext} from './ReactFiberTreeContext.new'; import {popRootTransition, popTransition} from './ReactFiberTransition.new'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new'; function markUpdate(workInProgress: Fiber) { // Tag the fiber with an update effect. This turns a Placement into @@ -1585,6 +1586,7 @@ function completeWork( case TracingMarkerComponent: { if (enableTransitionTracing) { // Bubble subtree flags before so we can set the flag property + popTracingMarker(workInProgress); bubbleProperties(workInProgress); } return null; diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index 29018efc96..08789966d2 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js @@ -9,8 +9,10 @@ import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes'; import type {OffscreenInstance} from './ReactFiberOffscreenComponent'; +import type {StackCursor} from './ReactFiberStack.new'; import {enableTransitionTracing} from 'shared/ReactFeatureFlags'; +import {createCursor, push, pop} from './ReactFiberStack.new'; export type SuspenseInfo = {name: string | null}; @@ -65,9 +67,36 @@ export function processTransitionCallbacks( transition.startTime, endTime, ); - } - }); - } +// For every tracing marker, store a pointer to it. We will later access it +// to get the set of suspense boundaries that need to resolve before the +// tracing marker can be logged as complete +// This code lives separate from the ReactFiberTransition code because +// we push and pop on the tracing marker, not the suspense boundary +const tracingMarkerStack: StackCursor | null> = createCursor(null); + +export function pushTracingMarker(workInProgress: Fiber): void { + if (enableTransitionTracing) { + if (tracingMarkerStack.current === null) { + push(tracingMarkerStack, [workInProgress], workInProgress); + } else { + push( + tracingMarkerStack, + tracingMarkerStack.current.concat(workInProgress), + workInProgress, + ); } } } + +export function popTracingMarker(workInProgress: Fiber): void { + if (enableTransitionTracing) { + pop(tracingMarkerStack, workInProgress); + } +} + +export function getTracingMarkers(): Array | null { + if (enableTransitionTracing) { + return tracingMarkerStack.current; + } + return null; +} diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js index c97c3e2ebc..03788ff2c9 100644 --- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js +++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js @@ -25,10 +25,15 @@ import { OffscreenComponent, LegacyHiddenComponent, CacheComponent, + TracingMarkerComponent, } from './ReactWorkTags'; import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags'; import {NoMode, ProfileMode} from './ReactTypeOfMode'; -import {enableProfilerTimer, enableCache} from 'shared/ReactFeatureFlags'; +import { + enableProfilerTimer, + enableCache, + enableTransitionTracing, +} from 'shared/ReactFeatureFlags'; import {popHostContainer, popHostContext} from './ReactFiberHostContext.new'; import {popSuspenseContext} from './ReactFiberSuspenseContext.new'; @@ -44,6 +49,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new'; import {transferActualDuration} from './ReactProfilerTimer.new'; import {popTreeContext} from './ReactFiberTreeContext.new'; import {popRootTransition, popTransition} from './ReactFiberTransition.new'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new'; function unwindWork( current: Fiber | null, @@ -154,6 +160,11 @@ function unwindWork( popCacheProvider(workInProgress, cache); } return null; + case TracingMarkerComponent: + if (enableTransitionTracing) { + popTracingMarker(workInProgress); + } + return null; default: return null; } @@ -217,6 +228,11 @@ function unwindInterruptedWork( popCacheProvider(interruptedWork, cache); } break; + case TracingMarkerComponent: + if (enableTransitionTracing) { + popTracingMarker(interruptedWork); + } + break; default: break; }