{"body":"* refactor root\r\n\r\n* old\r\n\r\n* Add comments and push actual marker instance in pushMarkerInstance\r\n\r\n* old\r\n\r\n* refactor pushRootMarkerInstance\r\n\r\n* old\r\n\r\n* fix test","parents":["e61fd91f5c523adb63a3b97375ac95ac657dc07f"],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex e81801ad5c..6865ef0b67 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(\n fiber.lanes = lanes;\n \/\/ Adding a stateNode for legacy hidden because it's currently using\n \/\/ the offscreen implementation, which depends on a state node\n- fiber.stateNode = {};\n+ const instance: OffscreenInstance = {\n+ isHidden: false,\n+ pendingMarkers: null,\n+ transitions: null,\n+ };\n+ fiber.stateNode = instance;\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex 75fcba88bb..1dac6117df 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(\n fiber.lanes = lanes;\n \/\/ Adding a stateNode for legacy hidden because it's currently using\n \/\/ the offscreen implementation, which depends on a state node\n- fiber.stateNode = {};\n+ const instance: OffscreenInstance = {\n+ isHidden: false,\n+ pendingMarkers: null,\n+ transitions: null,\n+ };\n+ fiber.stateNode = instance;\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex e4f4d7173b..2816e72c60 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -27,6 +27,7 @@ import type {\n OffscreenProps,\n OffscreenState,\n OffscreenQueue,\n+ OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n import type {\n Cache,\n@@ -262,8 +263,9 @@ import {\n getPendingTransitions,\n } from '.\/ReactFiberTransition.new';\n import {\n- getTracingMarkers,\n- pushTracingMarker,\n+ getMarkerInstances,\n+ pushMarkerInstance,\n+ pushRootMarkerInstance,\n } from '.\/ReactFiberTracingMarkerComponent.new';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n@@ -779,7 +781,10 @@ function updateOffscreenComponent(\n if (enableTransitionTracing) {\n \/\/ We have now gone from hidden to visible, so any transitions should\n \/\/ be added to the stack to get added to any Offscreen\/suspense children\n- transitions = workInProgress.stateNode.transitions;\n+ const instance: OffscreenInstance | null = workInProgress.stateNode;\n+ if (instance !== null && instance.transitions != null) {\n+ transitions = Array.from(instance.transitions);\n+ }\n }\n \n pushTransition(workInProgress, prevCachePool, transitions);\n@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(\n }\n }\n \n- pushTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ pushMarkerInstance(workInProgress, instance);\n+ }\n const nextChildren = workInProgress.pendingProps.children;\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n return workInProgress.child;\n@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n const root: FiberRoot = workInProgress.stateNode;\n pushRootTransition(workInProgress, root, renderLanes);\n \n+ if (enableTransitionTracing) {\n+ pushRootMarkerInstance(workInProgress);\n+ }\n+\n if (enableCache) {\n const nextCache: Cache = nextState.cache;\n pushCacheProvider(workInProgress, nextCache);\n@@ -2098,10 +2110,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n \/\/ If there are no transitions, we don't need to keep track of tracing markers\n- const currentTracingMarkers = getTracingMarkers();\n+ const parentMarkerInstances = getMarkerInstances();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n- tracingMarkers: currentTracingMarkers,\n+ markerInstances: parentMarkerInstances,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -2188,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n if (enableTransitionTracing) {\n const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n- const currentTracingMarkers = getTracingMarkers();\n+ const parentMarkerInstances = getMarkerInstances();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n- tracingMarkers: currentTracingMarkers,\n+ markerInstances: parentMarkerInstances,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -3509,6 +3521,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n const root: FiberRoot = workInProgress.stateNode;\n pushRootTransition(workInProgress, root, renderLanes);\n \n+ if (enableTransitionTracing) {\n+ pushRootMarkerInstance(workInProgress);\n+ }\n+\n if (enableCache) {\n const cache: Cache = current.memoizedState.cache;\n pushCacheProvider(workInProgress, cache);\n@@ -3694,7 +3710,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- pushTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ pushMarkerInstance(workInProgress, instance);\n+ }\n }\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex ca25b272e4..8b19780af3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -27,6 +27,7 @@ import type {\n OffscreenProps,\n OffscreenState,\n OffscreenQueue,\n+ OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n import type {\n Cache,\n@@ -259,8 +260,9 @@ import {\n getPendingTransitions,\n } from '.\/ReactFiberTransition.old';\n import {\n- getTracingMarkers,\n- pushTracingMarker,\n+ getMarkerInstances,\n+ pushMarkerInstance,\n+ pushRootMarkerInstance,\n } from '.\/ReactFiberTracingMarkerComponent.old';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n@@ -784,7 +786,10 @@ function updateOffscreenComponent(\n if (enableTransitionTracing) {\n \/\/ We have now gone from hidden to visible, so any transitions should\n \/\/ be added to the stack to get added to any Offscreen\/suspense children\n- transitions = workInProgress.stateNode.transitions;\n+ const instance: OffscreenInstance | null = workInProgress.stateNode;\n+ if (instance !== null && instance.transitions != null) {\n+ transitions = Array.from(instance.transitions);\n+ }\n }\n \n pushTransition(workInProgress, prevCachePool, transitions);\n@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(\n }\n }\n \n- pushTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ pushMarkerInstance(workInProgress, instance);\n+ }\n const nextChildren = workInProgress.pendingProps.children;\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n return workInProgress.child;\n@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n const root: FiberRoot = workInProgress.stateNode;\n pushRootTransition(workInProgress, root, renderLanes);\n \n+ if (enableTransitionTracing) {\n+ pushRootMarkerInstance(workInProgress);\n+ }\n+\n if (enableCache) {\n const nextCache: Cache = nextState.cache;\n pushCacheProvider(workInProgress, nextCache);\n@@ -2114,10 +2126,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n \/\/ If there are no transitions, we don't need to keep track of tracing markers\n- const currentTracingMarkers = getTracingMarkers();\n+ const parentMarkerInstances = getMarkerInstances();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n- tracingMarkers: currentTracingMarkers,\n+ markerInstances: parentMarkerInstances,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -2200,10 +2212,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n if (enableTransitionTracing) {\n const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n- const currentTracingMarkers = getTracingMarkers();\n+ const parentMarkerInstances = getMarkerInstances();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n- tracingMarkers: currentTracingMarkers,\n+ markerInstances: parentMarkerInstances,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -3510,6 +3522,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n const root: FiberRoot = workInProgress.stateNode;\n pushRootTransition(workInProgress, root, renderLanes);\n \n+ if (enableTransitionTracing) {\n+ pushRootMarkerInstance(workInProgress);\n+ }\n+\n if (enableCache) {\n const cache: Cache = current.memoizedState.cache;\n pushCacheProvider(workInProgress, cache);\n@@ -3702,7 +3718,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- pushTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ pushMarkerInstance(workInProgress, instance);\n+ }\n }\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex da00d7761f..30709cffa5 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(\n \/\/ Get the transitions that were initiatized during the render\n \/\/ and add a start transition callback for each of them\n const root = finishedWork.stateNode;\n- let incompleteTransitions = root.incompleteTransitions;\n+ const incompleteTransitions = root.incompleteTransitions;\n \/\/ Initial render\n if (committedTransitions !== null) {\n- if (incompleteTransitions === null) {\n- root.incompleteTransitions = incompleteTransitions = new Map();\n- }\n-\n committedTransitions.forEach(transition => {\n addTransitionStartCallbackToPendingTransition({\n transitionName: transition.name,\n startTime: transition.startTime,\n });\n-\n- if (!incompleteTransitions.has(transition)) {\n- incompleteTransitions.set(transition, null);\n- }\n });\n \n clearTransitionsForLanes(finishedRoot, committedLanes);\n }\n \n- if (incompleteTransitions !== null) {\n- incompleteTransitions.forEach((pendingBoundaries, transition) => {\n- if (pendingBoundaries === null || pendingBoundaries.size === 0) {\n+ incompleteTransitions.forEach(\n+ ({pendingSuspenseBoundaries}, transition) => {\n+ if (\n+ pendingSuspenseBoundaries === null ||\n+ pendingSuspenseBoundaries.size === 0\n+ ) {\n addTransitionCompleteCallbackToPendingTransition({\n transitionName: transition.name,\n startTime: transition.startTime,\n });\n incompleteTransitions.delete(transition);\n }\n- });\n- }\n+ },\n+ );\n \n- \/\/ If there are no more pending suspense boundaries we\n- \/\/ clear the transitions because they are all complete.\n- if (\n- incompleteTransitions === null ||\n- incompleteTransitions.size === 0\n- ) {\n- root.incompleteTransitions = null;\n- }\n+ clearTransitionsForLanes(finishedRoot, committedLanes);\n }\n break;\n }\n@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(\n if (isFallback) {\n const transitions = queue.transitions;\n let prevTransitions = instance.transitions;\n- let rootIncompleteTransitions = finishedRoot.incompleteTransitions;\n-\n- \/\/ We lazily instantiate transition tracing relevant maps\n- \/\/ and sets in the commit phase as we need to use them. We only\n- \/\/ instantiate them in the fallback phase on an as needed basis\n- if (rootIncompleteTransitions === null) {\n- finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();\n- }\n if (instance.pendingMarkers === null) {\n instance.pendingMarkers = new Set();\n }\n@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(\n instance.transitions = prevTransitions = new Set();\n }\n \n- \/\/ TODO(luna): Combine the root code with the tracing marker code\n if (transitions !== null) {\n transitions.forEach(transition => {\n \/\/ Add all the transitions saved in the update queue during\n \/\/ the render phase (ie the transitions associated with this boundary)\n \/\/ into the transitions set.\n prevTransitions.add(transition);\n-\n- \/\/ Add the root transition's pending suspense boundary set to\n- \/\/ the queue's marker set. We will iterate through the marker\n- \/\/ set when we toggle state on the suspense boundary and\n- \/\/ add or remove the pending suspense boundaries as needed.\n- if (rootIncompleteTransitions !== null) {\n- if (!rootIncompleteTransitions.has(transition)) {\n- rootIncompleteTransitions.set(transition, new Map());\n- }\n- instance.pendingMarkers.add(\n- rootIncompleteTransitions.get(transition),\n- );\n- }\n });\n }\n \n- const tracingMarkers = queue.tracingMarkers;\n- if (tracingMarkers !== null) {\n- tracingMarkers.forEach(marker => {\n- const markerInstance = marker.stateNode;\n+ const markerInstances = queue.markerInstances;\n+ if (markerInstances !== null) {\n+ markerInstances.forEach(markerInstance => {\n+ if (markerInstance.pendingSuspenseBoundaries === null) {\n+ markerInstance.pendingSuspenseBoundaries = new Map();\n+ }\n+\n+ const markerTransitions = markerInstance.transitions;\n \/\/ There should only be a few tracing marker transitions because\n \/\/ they should be only associated with the transition that\n \/\/ caused them\n- markerInstance.transitions.forEach(transition => {\n- if (instance.transitions.has(transition)) {\n- instance.pendingMarkers.add(\n- markerInstance.pendingSuspenseBoundaries,\n- );\n- }\n- });\n+ if (markerTransitions !== null) {\n+ markerTransitions.forEach(transition => {\n+ if (instance.transitions.has(transition)) {\n+ instance.pendingMarkers.add(\n+ markerInstance.pendingSuspenseBoundaries,\n+ );\n+ }\n+ });\n+ }\n });\n }\n }\n \n- commitTransitionProgress(finishedWork);\n-\n- if (\n- instance.pendingMarkers === null ||\n- instance.pendingMarkers.size === 0\n- ) {\n- finishedWork.updateQueue = null;\n- }\n+ finishedWork.updateQueue = null;\n }\n+\n+ commitTransitionProgress(finishedWork);\n }\n \n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 677db2f10b..7f596a1264 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(\n \/\/ Get the transitions that were initiatized during the render\n \/\/ and add a start transition callback for each of them\n const root = finishedWork.stateNode;\n- let incompleteTransitions = root.incompleteTransitions;\n+ const incompleteTransitions = root.incompleteTransitions;\n \/\/ Initial render\n if (committedTransitions !== null) {\n- if (incompleteTransitions === null) {\n- root.incompleteTransitions = incompleteTransitions = new Map();\n- }\n-\n committedTransitions.forEach(transition => {\n addTransitionStartCallbackToPendingTransition({\n transitionName: transition.name,\n startTime: transition.startTime,\n });\n-\n- if (!incompleteTransitions.has(transition)) {\n- incompleteTransitions.set(transition, null);\n- }\n });\n \n clearTransitionsForLanes(finishedRoot, committedLanes);\n }\n \n- if (incompleteTransitions !== null) {\n- incompleteTransitions.forEach((pendingBoundaries, transition) => {\n- if (pendingBoundaries === null || pendingBoundaries.size === 0) {\n+ incompleteTransitions.forEach(\n+ ({pendingSuspenseBoundaries}, transition) => {\n+ if (\n+ pendingSuspenseBoundaries === null ||\n+ pendingSuspenseBoundaries.size === 0\n+ ) {\n addTransitionCompleteCallbackToPendingTransition({\n transitionName: transition.name,\n startTime: transition.startTime,\n });\n incompleteTransitions.delete(transition);\n }\n- });\n- }\n+ },\n+ );\n \n- \/\/ If there are no more pending suspense boundaries we\n- \/\/ clear the transitions because they are all complete.\n- if (\n- incompleteTransitions === null ||\n- incompleteTransitions.size === 0\n- ) {\n- root.incompleteTransitions = null;\n- }\n+ clearTransitionsForLanes(finishedRoot, committedLanes);\n }\n break;\n }\n@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(\n if (isFallback) {\n const transitions = queue.transitions;\n let prevTransitions = instance.transitions;\n- let rootIncompleteTransitions = finishedRoot.incompleteTransitions;\n-\n- \/\/ We lazily instantiate transition tracing relevant maps\n- \/\/ and sets in the commit phase as we need to use them. We only\n- \/\/ instantiate them in the fallback phase on an as needed basis\n- if (rootIncompleteTransitions === null) {\n- finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();\n- }\n if (instance.pendingMarkers === null) {\n instance.pendingMarkers = new Set();\n }\n@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(\n instance.transitions = prevTransitions = new Set();\n }\n \n- \/\/ TODO(luna): Combine the root code with the tracing marker code\n if (transitions !== null) {\n transitions.forEach(transition => {\n \/\/ Add all the transitions saved in the update queue during\n \/\/ the render phase (ie the transitions associated with this boundary)\n \/\/ into the transitions set.\n prevTransitions.add(transition);\n-\n- \/\/ Add the root transition's pending suspense boundary set to\n- \/\/ the queue's marker set. We will iterate through the marker\n- \/\/ set when we toggle state on the suspense boundary and\n- \/\/ add or remove the pending suspense boundaries as needed.\n- if (rootIncompleteTransitions !== null) {\n- if (!rootIncompleteTransitions.has(transition)) {\n- rootIncompleteTransitions.set(transition, new Map());\n- }\n- instance.pendingMarkers.add(\n- rootIncompleteTransitions.get(transition),\n- );\n- }\n });\n }\n \n- const tracingMarkers = queue.tracingMarkers;\n- if (tracingMarkers !== null) {\n- tracingMarkers.forEach(marker => {\n- const markerInstance = marker.stateNode;\n+ const markerInstances = queue.markerInstances;\n+ if (markerInstances !== null) {\n+ markerInstances.forEach(markerInstance => {\n+ if (markerInstance.pendingSuspenseBoundaries === null) {\n+ markerInstance.pendingSuspenseBoundaries = new Map();\n+ }\n+\n+ const markerTransitions = markerInstance.transitions;\n \/\/ There should only be a few tracing marker transitions because\n \/\/ they should be only associated with the transition that\n \/\/ caused them\n- markerInstance.transitions.forEach(transition => {\n- if (instance.transitions.has(transition)) {\n- instance.pendingMarkers.add(\n- markerInstance.pendingSuspenseBoundaries,\n- );\n- }\n- });\n+ if (markerTransitions !== null) {\n+ markerTransitions.forEach(transition => {\n+ if (instance.transitions.has(transition)) {\n+ instance.pendingMarkers.add(\n+ markerInstance.pendingSuspenseBoundaries,\n+ );\n+ }\n+ });\n+ }\n });\n }\n }\n \n- commitTransitionProgress(finishedWork);\n-\n- if (\n- instance.pendingMarkers === null ||\n- instance.pendingMarkers.size === 0\n- ) {\n- finishedWork.updateQueue = null;\n- }\n+ finishedWork.updateQueue = null;\n }\n+\n+ commitTransitionProgress(finishedWork);\n }\n \n break;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex 913abb20c4..3fb9f8dfb1 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -28,6 +28,7 @@ import type {\n SuspenseListRenderState,\n } from '.\/ReactFiberSuspenseComponent.new';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n import type {Cache} from '.\/ReactFiberCacheComponent.new';\n import {\n enableSuspenseAvoidThisFallback,\n@@ -164,7 +165,10 @@ import {transferActualDuration} from '.\/ReactProfilerTimer.new';\n import {popCacheProvider} from '.\/ReactFiberCacheComponent.new';\n import {popTreeContext} from '.\/ReactFiberTreeContext.new';\n import {popRootTransition, popTransition} from '.\/ReactFiberTransition.new';\n-import {popTracingMarker} from '.\/ReactFiberTracingMarkerComponent.new';\n+import {\n+ popMarkerInstance,\n+ popRootMarkerInstance,\n+} from '.\/ReactFiberTracingMarkerComponent.new';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -900,6 +904,11 @@ function completeWork(\n }\n popCacheProvider(workInProgress, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(workInProgress);\n+ }\n+\n popRootTransition(workInProgress, fiberRoot, renderLanes);\n popHostContainer(workInProgress);\n popTopLevelLegacyContextObject(workInProgress);\n@@ -1579,7 +1588,10 @@ function completeWork(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- popTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ popMarkerInstance(workInProgress);\n+ }\n bubbleProperties(workInProgress);\n \n if (\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex 1fc8a388ea..6dd8fb07ab 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -29,6 +29,7 @@ import type {\n } from '.\/ReactFiberSuspenseComponent.old';\n import type {SuspenseContext} from '.\/ReactFiberSuspenseContext.old';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n import type {Cache} from '.\/ReactFiberCacheComponent.old';\n import {\n enableSuspenseAvoidThisFallback,\n@@ -164,7 +165,10 @@ import {transferActualDuration} from '.\/ReactProfilerTimer.old';\n import {popCacheProvider} from '.\/ReactFiberCacheComponent.old';\n import {popTreeContext} from '.\/ReactFiberTreeContext.old';\n import {popRootTransition, popTransition} from '.\/ReactFiberTransition.old';\n-import {popTracingMarker} from '.\/ReactFiberTracingMarkerComponent.old';\n+import {\n+ popMarkerInstance,\n+ popRootMarkerInstance,\n+} from '.\/ReactFiberTracingMarkerComponent.old';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -900,6 +904,11 @@ function completeWork(\n }\n popCacheProvider(workInProgress, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(workInProgress);\n+ }\n+\n popRootTransition(workInProgress, fiberRoot, renderLanes);\n popHostContainer(workInProgress);\n popTopLevelLegacyContextObject(workInProgress);\n@@ -1579,7 +1588,10 @@ function completeWork(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- popTracingMarker(workInProgress);\n+ const instance: TracingMarkerInstance | null = workInProgress.stateNode;\n+ if (instance !== null) {\n+ popMarkerInstance(workInProgress);\n+ }\n bubbleProperties(workInProgress);\n \n if (\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\nindex 00904d9fdd..4fdff5c8df 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n@@ -8,12 +8,12 @@\n *\/\n \n import type {ReactNodeList, OffscreenMode} from 'shared\/ReactTypes';\n-import type {Fiber} from '.\/ReactInternalTypes';\n import type {Lanes} from '.\/ReactFiberLane.old';\n import type {SpawnedCachePool} from '.\/ReactFiberCacheComponent.new';\n import type {\n Transition,\n PendingSuspenseBoundaries,\n+ TracingMarkerInstance,\n } from '.\/ReactFiberTracingMarkerComponent.new';\n \n export type OffscreenProps = {|\n@@ -39,7 +39,7 @@ export type OffscreenState = {|\n \n export type OffscreenQueue = {|\n transitions: Array | null,\n- tracingMarkers: Array | null,\n+ markerInstances: Array | null,\n |} | null;\n \n export type OffscreenInstance = {|\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\nindex d8ac576f4f..f171ca0de3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n@@ -92,13 +92,13 @@ function FiberRootNode(\n this.hydrationCallbacks = null;\n }\n \n+ this.incompleteTransitions = new Map();\n if (enableTransitionTracing) {\n this.transitionCallbacks = null;\n const transitionLanesMap = (this.transitionLanes = []);\n for (let i = 0; i < TotalLanes; i++) {\n transitionLanesMap.push(null);\n }\n- this.incompleteTransitions = null;\n }\n \n if (enableProfilerTimer && enableProfilerCommitHooks) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\nindex 7bf68ae5d2..9b37cee41e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n@@ -92,13 +92,13 @@ function FiberRootNode(\n this.hydrationCallbacks = null;\n }\n \n+ this.incompleteTransitions = new Map();\n if (enableTransitionTracing) {\n this.transitionCallbacks = null;\n const transitionLanesMap = (this.transitionLanes = []);\n for (let i = 0; i < TotalLanes; i++) {\n transitionLanesMap.push(null);\n }\n- this.incompleteTransitions = null;\n }\n \n if (enableProfilerTimer && enableProfilerCommitHooks) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\nindex 3a136cda68..0eb87bc3d6 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\n@@ -13,6 +13,7 @@ import type {StackCursor} from '.\/ReactFiberStack.new';\n \n import {enableTransitionTracing} from 'shared\/ReactFeatureFlags';\n import {createCursor, push, pop} from '.\/ReactFiberStack.new';\n+import {getWorkInProgressTransitions} from '.\/ReactFiberWorkLoop.new';\n \n export type SuspenseInfo = {name: string | null};\n \n@@ -100,31 +101,77 @@ export function processTransitionCallbacks(\n \/\/ tracing marker can be logged as complete\n \/\/ This code lives separate from the ReactFiberTransition code because\n \/\/ we push and pop on the tracing marker, not the suspense boundary\n-const tracingMarkerStack: StackCursor | null> = createCursor(null);\n+const markerInstanceStack: StackCursor | null> = createCursor(\n+ null,\n+);\n \n-export function pushTracingMarker(workInProgress: Fiber): void {\n+export function pushRootMarkerInstance(workInProgress: Fiber): void {\n if (enableTransitionTracing) {\n- if (tracingMarkerStack.current === null) {\n- push(tracingMarkerStack, [workInProgress], workInProgress);\n+ \/\/ On the root, every transition gets mapped to it's own map of\n+ \/\/ suspense boundaries. The transition is marked as complete when\n+ \/\/ the suspense boundaries map is empty. We do this because every\n+ \/\/ transition completes at different times and depends on different\n+ \/\/ suspense boundaries to complete. We store all the transitions\n+ \/\/ along with its map of suspense boundaries in the root incomplete\n+ \/\/ transitions map. Each entry in this map functions like a tracing\n+ \/\/ marker does, so we can push it onto the marker instance stack\n+ const transitions = getWorkInProgressTransitions();\n+ const root = workInProgress.stateNode;\n+\n+ if (transitions !== null) {\n+ transitions.forEach(transition => {\n+ if (!root.incompleteTransitions.has(transition)) {\n+ root.incompleteTransitions.set(transition, {\n+ transitions: new Set([transition]),\n+ pendingSuspenseBoundaries: null,\n+ });\n+ }\n+ });\n+ }\n+\n+ const markerInstances = [];\n+ \/\/ For ever transition on the suspense boundary, we push the transition\n+ \/\/ along with its map of pending suspense boundaries onto the marker\n+ \/\/ instance stack.\n+ root.incompleteTransitions.forEach(markerInstance => {\n+ markerInstances.push(markerInstance);\n+ });\n+ push(markerInstanceStack, markerInstances, workInProgress);\n+ }\n+}\n+\n+export function popRootMarkerInstance(workInProgress: Fiber) {\n+ if (enableTransitionTracing) {\n+ pop(markerInstanceStack, workInProgress);\n+ }\n+}\n+\n+export function pushMarkerInstance(\n+ workInProgress: Fiber,\n+ markerInstance: TracingMarkerInstance,\n+): void {\n+ if (enableTransitionTracing) {\n+ if (markerInstanceStack.current === null) {\n+ push(markerInstanceStack, [markerInstance], workInProgress);\n } else {\n push(\n- tracingMarkerStack,\n- tracingMarkerStack.current.concat(workInProgress),\n+ markerInstanceStack,\n+ markerInstanceStack.current.concat(markerInstance),\n workInProgress,\n );\n }\n }\n }\n \n-export function popTracingMarker(workInProgress: Fiber): void {\n+export function popMarkerInstance(workInProgress: Fiber): void {\n if (enableTransitionTracing) {\n- pop(tracingMarkerStack, workInProgress);\n+ pop(markerInstanceStack, workInProgress);\n }\n }\n \n-export function getTracingMarkers(): Array | null {\n+export function getMarkerInstances(): Array | null {\n if (enableTransitionTracing) {\n- return tracingMarkerStack.current;\n+ return markerInstanceStack.current;\n }\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\nindex 5f119b3a4b..6f25d1f72b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\n@@ -13,6 +13,7 @@ import type {StackCursor} from '.\/ReactFiberStack.old';\n \n import {enableTransitionTracing} from 'shared\/ReactFeatureFlags';\n import {createCursor, push, pop} from '.\/ReactFiberStack.old';\n+import {getWorkInProgressTransitions} from '.\/ReactFiberWorkLoop.old';\n \n export type SuspenseInfo = {name: string | null};\n \n@@ -100,31 +101,77 @@ export function processTransitionCallbacks(\n \/\/ tracing marker can be logged as complete\n \/\/ This code lives separate from the ReactFiberTransition code because\n \/\/ we push and pop on the tracing marker, not the suspense boundary\n-const tracingMarkerStack: StackCursor | null> = createCursor(null);\n+const markerInstanceStack: StackCursor | null> = createCursor(\n+ null,\n+);\n \n-export function pushTracingMarker(workInProgress: Fiber): void {\n+export function pushRootMarkerInstance(workInProgress: Fiber): void {\n if (enableTransitionTracing) {\n- if (tracingMarkerStack.current === null) {\n- push(tracingMarkerStack, [workInProgress], workInProgress);\n+ \/\/ On the root, every transition gets mapped to it's own map of\n+ \/\/ suspense boundaries. The transition is marked as complete when\n+ \/\/ the suspense boundaries map is empty. We do this because every\n+ \/\/ transition completes at different times and depends on different\n+ \/\/ suspense boundaries to complete. We store all the transitions\n+ \/\/ along with its map of suspense boundaries in the root incomplete\n+ \/\/ transitions map. Each entry in this map functions like a tracing\n+ \/\/ marker does, so we can push it onto the marker instance stack\n+ const transitions = getWorkInProgressTransitions();\n+ const root = workInProgress.stateNode;\n+\n+ if (transitions !== null) {\n+ transitions.forEach(transition => {\n+ if (!root.incompleteTransitions.has(transition)) {\n+ root.incompleteTransitions.set(transition, {\n+ transitions: new Set([transition]),\n+ pendingSuspenseBoundaries: null,\n+ });\n+ }\n+ });\n+ }\n+\n+ const markerInstances = [];\n+ \/\/ For ever transition on the suspense boundary, we push the transition\n+ \/\/ along with its map of pending suspense boundaries onto the marker\n+ \/\/ instance stack.\n+ root.incompleteTransitions.forEach(markerInstance => {\n+ markerInstances.push(markerInstance);\n+ });\n+ push(markerInstanceStack, markerInstances, workInProgress);\n+ }\n+}\n+\n+export function popRootMarkerInstance(workInProgress: Fiber) {\n+ if (enableTransitionTracing) {\n+ pop(markerInstanceStack, workInProgress);\n+ }\n+}\n+\n+export function pushMarkerInstance(\n+ workInProgress: Fiber,\n+ markerInstance: TracingMarkerInstance,\n+): void {\n+ if (enableTransitionTracing) {\n+ if (markerInstanceStack.current === null) {\n+ push(markerInstanceStack, [markerInstance], workInProgress);\n } else {\n push(\n- tracingMarkerStack,\n- tracingMarkerStack.current.concat(workInProgress),\n+ markerInstanceStack,\n+ markerInstanceStack.current.concat(markerInstance),\n workInProgress,\n );\n }\n }\n }\n \n-export function popTracingMarker(workInProgress: Fiber): void {\n+export function popMarkerInstance(workInProgress: Fiber): void {\n if (enableTransitionTracing) {\n- pop(tracingMarkerStack, workInProgress);\n+ pop(markerInstanceStack, workInProgress);\n }\n }\n \n-export function getTracingMarkers(): Array | null {\n+export function getMarkerInstances(): Array | null {\n if (enableTransitionTracing) {\n- return tracingMarkerStack.current;\n+ return markerInstanceStack.current;\n }\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\nindex 6b2dca917d..2659a74d80 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from '.\/ReactInternalTypes';\n import type {Lanes} from '.\/ReactFiberLane.new';\n import type {SuspenseState} from '.\/ReactFiberSuspenseComponent.new';\n import type {Cache} from '.\/ReactFiberCacheComponent.new';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n \n import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from '.\/ReactMutableSource.new';\n import {\n@@ -52,7 +53,10 @@ import {popCacheProvider} from '.\/ReactFiberCacheComponent.new';\n import {transferActualDuration} from '.\/ReactProfilerTimer.new';\n import {popTreeContext} from '.\/ReactFiberTreeContext.new';\n import {popRootTransition, popTransition} from '.\/ReactFiberTransition.new';\n-import {popTracingMarker} from '.\/ReactFiberTracingMarkerComponent.new';\n+import {\n+ popMarkerInstance,\n+ popRootMarkerInstance,\n+} from '.\/ReactFiberTracingMarkerComponent.new';\n \n function unwindWork(\n current: Fiber | null,\n@@ -89,6 +93,11 @@ function unwindWork(\n const cache: Cache = workInProgress.memoizedState.cache;\n popCacheProvider(workInProgress, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(workInProgress);\n+ }\n+\n popRootTransition(workInProgress, root, renderLanes);\n popHostContainer(workInProgress);\n popTopLevelLegacyContextObject(workInProgress);\n@@ -165,7 +174,9 @@ function unwindWork(\n return null;\n case TracingMarkerComponent:\n if (enableTransitionTracing) {\n- popTracingMarker(workInProgress);\n+ if (workInProgress.stateNode !== null) {\n+ popMarkerInstance(workInProgress);\n+ }\n }\n return null;\n default:\n@@ -197,6 +208,11 @@ function unwindInterruptedWork(\n const cache: Cache = interruptedWork.memoizedState.cache;\n popCacheProvider(interruptedWork, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(interruptedWork);\n+ }\n+\n popRootTransition(interruptedWork, root, renderLanes);\n popHostContainer(interruptedWork);\n popTopLevelLegacyContextObject(interruptedWork);\n@@ -233,7 +249,11 @@ function unwindInterruptedWork(\n break;\n case TracingMarkerComponent:\n if (enableTransitionTracing) {\n- popTracingMarker(interruptedWork);\n+ const instance: TracingMarkerInstance | null =\n+ interruptedWork.stateNode;\n+ if (instance !== null) {\n+ popMarkerInstance(interruptedWork);\n+ }\n }\n break;\n default:\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\nindex ba2e202dd5..f56c8ce5d2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from '.\/ReactInternalTypes';\n import type {Lanes} from '.\/ReactFiberLane.old';\n import type {SuspenseState} from '.\/ReactFiberSuspenseComponent.old';\n import type {Cache} from '.\/ReactFiberCacheComponent.old';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n \n import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from '.\/ReactMutableSource.old';\n import {\n@@ -49,7 +50,10 @@ import {popCacheProvider} from '.\/ReactFiberCacheComponent.old';\n import {transferActualDuration} from '.\/ReactProfilerTimer.old';\n import {popTreeContext} from '.\/ReactFiberTreeContext.old';\n import {popRootTransition, popTransition} from '.\/ReactFiberTransition.old';\n-import {popTracingMarker} from '.\/ReactFiberTracingMarkerComponent.old';\n+import {\n+ popMarkerInstance,\n+ popRootMarkerInstance,\n+} from '.\/ReactFiberTracingMarkerComponent.old';\n \n function unwindWork(\n current: Fiber | null,\n@@ -86,6 +90,11 @@ function unwindWork(\n const cache: Cache = workInProgress.memoizedState.cache;\n popCacheProvider(workInProgress, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(workInProgress);\n+ }\n+\n popRootTransition(workInProgress, root, renderLanes);\n popHostContainer(workInProgress);\n popTopLevelLegacyContextObject(workInProgress);\n@@ -162,7 +171,9 @@ function unwindWork(\n return null;\n case TracingMarkerComponent:\n if (enableTransitionTracing) {\n- popTracingMarker(workInProgress);\n+ if (workInProgress.stateNode !== null) {\n+ popMarkerInstance(workInProgress);\n+ }\n }\n return null;\n default:\n@@ -194,6 +205,11 @@ function unwindInterruptedWork(\n const cache: Cache = interruptedWork.memoizedState.cache;\n popCacheProvider(interruptedWork, cache);\n }\n+\n+ if (enableTransitionTracing) {\n+ popRootMarkerInstance(interruptedWork);\n+ }\n+\n popRootTransition(interruptedWork, root, renderLanes);\n popHostContainer(interruptedWork);\n popTopLevelLegacyContextObject(interruptedWork);\n@@ -230,7 +246,11 @@ function unwindInterruptedWork(\n break;\n case TracingMarkerComponent:\n if (enableTransitionTracing) {\n- popTracingMarker(interruptedWork);\n+ const instance: TracingMarkerInstance | null =\n+ interruptedWork.stateNode;\n+ if (instance !== null) {\n+ popMarkerInstance(interruptedWork);\n+ }\n }\n break;\n default:\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex 0f6e9bcaf7..8aad50f4bf 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|\n \/\/ are considered complete when the pending suspense boundaries set is\n \/\/ empty. We can represent this as a Map of transitions to suspense\n \/\/ boundary sets\n- incompleteTransitions: Map | null,\n+ incompleteTransitions: Map,\n |};\n \n \/\/ Exported FiberRoot type includes all properties,\n","files":[{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactInternalTypes.js"}],"commit":{"subject":"Revert \"Revert [Transition Tracing] Refactor Transition Tracing Root Code\" (#24830)","authorName":"Luna Ruan","authoredAt":"2022-06-30T13:16:08-04:00","authorEmail":"lunaris.ruan@gmail.com","revision":"4cd788aef03d8f32c03e4dac4d0cf28b220cedfb","shortRevision":"4cd788aef0"}}

dillon1000/react

Files changed