{"commit":{"authorName":"Luna Ruan","subject":"[Transition Tracing] Add Tracing Markers (#24686)","shortRevision":"a4bed46969","revision":"a4bed469697a1e23c398fe80228df31ef6d4b612","authorEmail":"lunaris.ruan@gmail.com","authoredAt":"2022-06-27T12:46:43-04:00"},"parents":["167853026cb193f81c0474d3bf9ef9e03dde203e"],"body":"This PR adds support for Tracing Markers as well as onTracingMarkerComplete","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\/ReactFiberTracingMarkerComponent.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTransition.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTransition.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js"}],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex c5a5919494..e78db21baf 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -19,6 +19,7 @@ import type {\n OffscreenProps,\n OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n \n import {\n createRootStrictEffectsByDefault,\n@@ -757,6 +758,11 @@ export function createFiberFromTracingMarker(\n const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);\n fiber.elementType = REACT_TRACING_MARKER_TYPE;\n fiber.lanes = lanes;\n+ const tracingMarkerInstance: TracingMarkerInstance = {\n+ transitions: null,\n+ pendingSuspenseBoundaries: null,\n+ };\n+ fiber.stateNode = tracingMarkerInstance;\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex 9a4e3e2aa0..15019976d0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -19,6 +19,7 @@ import type {\n OffscreenProps,\n OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n \n import {\n createRootStrictEffectsByDefault,\n@@ -757,6 +758,11 @@ export function createFiberFromTracingMarker(\n const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);\n fiber.elementType = REACT_TRACING_MARKER_TYPE;\n fiber.lanes = lanes;\n+ const tracingMarkerInstance: TracingMarkerInstance = {\n+ transitions: null,\n+ pendingSuspenseBoundaries: null,\n+ };\n+ fiber.stateNode = tracingMarkerInstance;\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 0d575e1433..9f60e0ab22 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -35,6 +35,7 @@ import type {\n } from '.\/ReactFiberCacheComponent.new';\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.new';\n import type {RootState} from '.\/ReactFiberRoot.new';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n import {\n enableSuspenseAvoidThisFallback,\n enableCPUSuspense,\n@@ -255,9 +256,12 @@ import {\n getSuspendedCache,\n pushTransition,\n getOffscreenDeferredCache,\n- getSuspendedTransitions,\n+ getPendingTransitions,\n } from '.\/ReactFiberTransition.new';\n-import {pushTracingMarker} from '.\/ReactFiberTracingMarkerComponent.new';\n+import {\n+ getTracingMarkers,\n+ pushTracingMarker,\n+} from '.\/ReactFiberTracingMarkerComponent.new';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n \n@@ -891,6 +895,20 @@ function updateTracingMarkerComponent(\n return null;\n }\n \n+ \/\/ TODO: (luna) Only update the tracing marker if it's newly rendered or it's name changed.\n+ \/\/ A tracing marker is only associated with the transitions that rendered\n+ \/\/ or updated it, so we can create a new set of transitions each time\n+ if (current === null) {\n+ const currentTransitions = getPendingTransitions();\n+ if (currentTransitions !== null) {\n+ const markerInstance: TracingMarkerInstance = {\n+ transitions: new Set(currentTransitions),\n+ pendingSuspenseBoundaries: new Map(),\n+ };\n+ workInProgress.stateNode = markerInstance;\n+ }\n+ }\n+\n pushTracingMarker(workInProgress);\n const nextChildren = workInProgress.pendingProps.children;\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n@@ -2093,10 +2111,13 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n );\n workInProgress.memoizedState = SUSPENDED_MARKER;\n if (enableTransitionTracing) {\n- const currentTransitions = getSuspendedTransitions();\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 primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n+ tracingMarkers: currentTracingMarkers,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -2177,10 +2198,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n ? mountSuspenseOffscreenState(renderLanes)\n : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);\n if (enableTransitionTracing) {\n- const currentTransitions = getSuspendedTransitions();\n+ const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n+ const currentTracingMarkers = getTracingMarkers();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n+ tracingMarkers: currentTracingMarkers,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex 9bbaf40bd1..ca25b272e4 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -35,6 +35,7 @@ import type {\n } from '.\/ReactFiberCacheComponent.old';\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.old';\n import type {RootState} from '.\/ReactFiberRoot.old';\n+import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n import {\n enableSuspenseAvoidThisFallback,\n enableCPUSuspense,\n@@ -255,9 +256,12 @@ import {\n getSuspendedCache,\n pushTransition,\n getOffscreenDeferredCache,\n- getSuspendedTransitions,\n+ getPendingTransitions,\n } from '.\/ReactFiberTransition.old';\n-import {pushTracingMarker} from '.\/ReactFiberTracingMarkerComponent.old';\n+import {\n+ getTracingMarkers,\n+ pushTracingMarker,\n+} from '.\/ReactFiberTracingMarkerComponent.old';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n \n@@ -891,6 +895,20 @@ function updateTracingMarkerComponent(\n return null;\n }\n \n+ \/\/ TODO: (luna) Only update the tracing marker if it's newly rendered or it's name changed.\n+ \/\/ A tracing marker is only associated with the transitions that rendered\n+ \/\/ or updated it, so we can create a new set of transitions each time\n+ if (current === null) {\n+ const currentTransitions = getPendingTransitions();\n+ if (currentTransitions !== null) {\n+ const markerInstance: TracingMarkerInstance = {\n+ transitions: new Set(currentTransitions),\n+ pendingSuspenseBoundaries: new Map(),\n+ };\n+ workInProgress.stateNode = markerInstance;\n+ }\n+ }\n+\n pushTracingMarker(workInProgress);\n const nextChildren = workInProgress.pendingProps.children;\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n@@ -2093,10 +2111,13 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n );\n workInProgress.memoizedState = SUSPENDED_MARKER;\n if (enableTransitionTracing) {\n- const currentTransitions = getSuspendedTransitions();\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 primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n+ tracingMarkers: currentTracingMarkers,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\n@@ -2177,10 +2198,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {\n ? mountSuspenseOffscreenState(renderLanes)\n : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);\n if (enableTransitionTracing) {\n- const currentTransitions = getSuspendedTransitions();\n+ const currentTransitions = getPendingTransitions();\n if (currentTransitions !== null) {\n+ const currentTracingMarkers = getTracingMarkers();\n const primaryChildUpdateQueue: OffscreenQueue = {\n transitions: currentTransitions,\n+ tracingMarkers: currentTracingMarkers,\n };\n primaryChildFragment.updateQueue = primaryChildUpdateQueue;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex 6f983e8d24..da00d7761f 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -138,6 +138,7 @@ import {\n restorePendingUpdaters,\n addTransitionStartCallbackToPendingTransition,\n addTransitionCompleteCallbackToPendingTransition,\n+ addMarkerCompleteCallbackToPendingTransition,\n setIsRunningInsertionEffect,\n } from '.\/ReactFiberWorkLoop.new';\n import {\n@@ -2910,6 +2911,7 @@ 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@@ -2931,6 +2933,23 @@ function commitPassiveMountOnFiber(\n }\n });\n }\n+\n+ const tracingMarkers = queue.tracingMarkers;\n+ if (tracingMarkers !== null) {\n+ tracingMarkers.forEach(marker => {\n+ const markerInstance = marker.stateNode;\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+ });\n+ }\n }\n \n commitTransitionProgress(finishedWork);\n@@ -2967,6 +2986,28 @@ function commitPassiveMountOnFiber(\n }\n break;\n }\n+ case TracingMarkerComponent: {\n+ if (enableTransitionTracing) {\n+ \/\/ Get the transitions that were initiatized during the render\n+ \/\/ and add a start transition callback for each of them\n+ const instance = finishedWork.stateNode;\n+ if (\n+ instance.pendingSuspenseBoundaries === null ||\n+ instance.pendingSuspenseBoundaries.size === 0\n+ ) {\n+ instance.transitions.forEach(transition => {\n+ addMarkerCompleteCallbackToPendingTransition({\n+ transitionName: transition.name,\n+ startTime: transition.startTime,\n+ markerName: finishedWork.memoizedProps.name,\n+ });\n+ });\n+ instance.transitions = null;\n+ instance.pendingSuspenseBoundaries = null;\n+ }\n+ }\n+ break;\n+ }\n }\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 147a25d74a..677db2f10b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -138,6 +138,7 @@ import {\n restorePendingUpdaters,\n addTransitionStartCallbackToPendingTransition,\n addTransitionCompleteCallbackToPendingTransition,\n+ addMarkerCompleteCallbackToPendingTransition,\n setIsRunningInsertionEffect,\n } from '.\/ReactFiberWorkLoop.old';\n import {\n@@ -2910,6 +2911,7 @@ 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@@ -2931,6 +2933,23 @@ function commitPassiveMountOnFiber(\n }\n });\n }\n+\n+ const tracingMarkers = queue.tracingMarkers;\n+ if (tracingMarkers !== null) {\n+ tracingMarkers.forEach(marker => {\n+ const markerInstance = marker.stateNode;\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+ });\n+ }\n }\n \n commitTransitionProgress(finishedWork);\n@@ -2967,6 +2986,28 @@ function commitPassiveMountOnFiber(\n }\n break;\n }\n+ case TracingMarkerComponent: {\n+ if (enableTransitionTracing) {\n+ \/\/ Get the transitions that were initiatized during the render\n+ \/\/ and add a start transition callback for each of them\n+ const instance = finishedWork.stateNode;\n+ if (\n+ instance.pendingSuspenseBoundaries === null ||\n+ instance.pendingSuspenseBoundaries.size === 0\n+ ) {\n+ instance.transitions.forEach(transition => {\n+ addMarkerCompleteCallbackToPendingTransition({\n+ transitionName: transition.name,\n+ startTime: transition.startTime,\n+ markerName: finishedWork.memoizedProps.name,\n+ });\n+ });\n+ instance.transitions = null;\n+ instance.pendingSuspenseBoundaries = null;\n+ }\n+ }\n+ break;\n+ }\n }\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex c5230bce92..f6a54052f9 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -1581,9 +1581,18 @@ function completeWork(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- \/\/ Bubble subtree flags before so we can set the flag property\n popTracingMarker(workInProgress);\n bubbleProperties(workInProgress);\n+\n+ if (\n+ current === null ||\n+ (workInProgress.subtreeFlags & Visibility) !== NoFlags\n+ ) {\n+ \/\/ If any of our suspense children toggle visibility, this means that\n+ \/\/ the pending boundaries array needs to be updated, which we only\n+ \/\/ do in the passive phase.\n+ workInProgress.flags |= Passive;\n+ }\n }\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex 4dbc447dd9..b99d3451d3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -1581,9 +1581,18 @@ function completeWork(\n }\n case TracingMarkerComponent: {\n if (enableTransitionTracing) {\n- \/\/ Bubble subtree flags before so we can set the flag property\n popTracingMarker(workInProgress);\n bubbleProperties(workInProgress);\n+\n+ if (\n+ current === null ||\n+ (workInProgress.subtreeFlags & Visibility) !== NoFlags\n+ ) {\n+ \/\/ If any of our suspense children toggle visibility, this means that\n+ \/\/ the pending boundaries array needs to be updated, which we only\n+ \/\/ do in the passive phase.\n+ workInProgress.flags |= Passive;\n+ }\n }\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\nindex 3f5ef38424..00904d9fdd 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n@@ -8,6 +8,7 @@\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@@ -38,6 +39,7 @@ export type OffscreenState = {|\n \n export type OffscreenQueue = {|\n transitions: Array | null,\n+ tracingMarkers: Array | null,\n |} | null;\n \n export type OffscreenInstance = {|\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\nindex 593ebfc2d7..3a136cda68 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.new.js\n@@ -39,6 +39,11 @@ export type BatchConfigTransition = {\n _updatedFibers?: Set,\n };\n \n+export type TracingMarkerInstance = {|\n+ pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,\n+ transitions: Set | null,\n+|} | null;\n+\n export type PendingSuspenseBoundaries = Map;\n \n export function processTransitionCallbacks(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\nindex a632af8e1c..5f119b3a4b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTracingMarkerComponent.old.js\n@@ -39,6 +39,11 @@ export type BatchConfigTransition = {\n _updatedFibers?: Set,\n };\n \n+export type TracingMarkerInstance = {|\n+ pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,\n+ transitions: Set | null,\n+|} | null;\n+\n export type PendingSuspenseBoundaries = Map;\n \n export function processTransitionCallbacks(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTransition.new.js b\/packages\/react-reconciler\/src\/ReactFiberTransition.new.js\nindex bb5f5d93d2..527cb89877 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTransition.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTransition.new.js\n@@ -149,7 +149,7 @@ export function popTransition(workInProgress: Fiber, current: Fiber | null) {\n }\n }\n \n-export function getSuspendedTransitions(): Array | null {\n+export function getPendingTransitions(): Array | null {\n if (!enableTransitionTracing) {\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTransition.old.js b\/packages\/react-reconciler\/src\/ReactFiberTransition.old.js\nindex 1abb0e2180..8323559d58 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTransition.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTransition.old.js\n@@ -149,7 +149,7 @@ export function popTransition(workInProgress: Fiber, current: Fiber | null) {\n }\n }\n \n-export function getSuspendedTransitions(): Array | null {\n+export function getPendingTransitions(): Array | null {\n if (!enableTransitionTracing) {\n return null;\n }\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\nindex 9f5648b85b..2fd5a3633e 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactTransitionTracing-test.js\n@@ -477,4 +477,365 @@ describe('ReactInteractionTracing', () => {\n ]);\n });\n });\n+\n+ \/\/ @gate enableTransitionTracing\n+ it('should correctly trace interactions for tracing markers complete', async () => {\n+ const transitionCallbacks = {\n+ onTransitionStart: (name, startTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionStart(${name}, ${startTime})`,\n+ );\n+ },\n+ onTransitionComplete: (name, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ };\n+ let navigateToPageTwo;\n+ function App() {\n+ const [navigate, setNavigate] = useState(false);\n+ navigateToPageTwo = () => {\n+ setNavigate(true);\n+ };\n+\n+ return (\n+

\n+ {navigate ? (\n+ }\n+ name=\"suspense page\">\n+ \n+ \n+ \n+ }\n+ name=\"marker suspense\">\n+ \n+ <\/Suspense>\n+ <\/React.unstable_TracingMarker>\n+ <\/Suspense>\n+ ) : (\n+ \n+ )}\n+ <\/div>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot({transitionCallbacks});\n+ await act(async () => {\n+ root.render();\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+\n+ expect(Scheduler).toFlushAndYield(['Page One']);\n+ });\n+\n+ await act(async () => {\n+ startTransition(() => navigateToPageTwo(), {name: 'page transition'});\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Suspend [Page Two]',\n+ 'Suspend [Marker Text]',\n+ 'Loading...',\n+ 'Loading...',\n+ 'onTransitionStart(page transition, 1000)',\n+ ]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ await resolveText('Page Two');\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Page Two',\n+ 'Suspend [Marker Text]',\n+ 'Loading...',\n+ 'onMarkerComplete(page transition, sync marker, 1000, 3000)',\n+ ]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ await resolveText('Marker Text');\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Marker Text',\n+ 'onMarkerComplete(page transition, async marker, 1000, 4000)',\n+ 'onTransitionComplete(page transition, 1000, 4000)',\n+ ]);\n+ });\n+ });\n+\n+ \/\/ @gate enableTransitionTracing\n+ it('trace interaction with multiple tracing markers', async () => {\n+ const transitionCallbacks = {\n+ onTransitionStart: (name, startTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionStart(${name}, ${startTime})`,\n+ );\n+ },\n+ onTransitionComplete: (name, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ };\n+\n+ let navigateToPageTwo;\n+ function App() {\n+ const [navigate, setNavigate] = useState(false);\n+ navigateToPageTwo = () => {\n+ setNavigate(true);\n+ };\n+\n+ return (\n+

\n+ {navigate ? (\n+ \n+ }>\n+ \n+ }>\n+ \n+ \n+ <\/React.unstable_TracingMarker>\n+ <\/Suspense>\n+ }>\n+ \n+ \n+ <\/React.unstable_TracingMarker>\n+ <\/Suspense>\n+ <\/Suspense>\n+ <\/React.unstable_TracingMarker>\n+ ) : (\n+ \n+ )}\n+ <\/div>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot({transitionCallbacks});\n+ await act(async () => {\n+ root.render();\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+\n+ expect(Scheduler).toFlushAndYield(['Page One']);\n+ });\n+\n+ await act(async () => {\n+ startTransition(() => navigateToPageTwo(), {name: 'page transition'});\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'Suspend [Outer Text]',\n+ 'Suspend [Inner Text One]',\n+ 'Inner One...',\n+ 'Suspend [Inner Text Two]',\n+ 'Inner Two...',\n+ 'Outer...',\n+ 'onTransitionStart(page transition, 1000)',\n+ ]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ await resolveText('Inner Text Two');\n+ expect(Scheduler).toFlushAndYield([]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ await resolveText('Outer Text');\n+ expect(Scheduler).toFlushAndYield([\n+ 'Outer Text',\n+ 'Suspend [Inner Text One]',\n+ 'Inner One...',\n+ 'Inner Text Two',\n+ 'onMarkerComplete(page transition, marker two, 1000, 4000)',\n+ ]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ await resolveText('Inner Text One');\n+ expect(Scheduler).toFlushAndYield([\n+ 'Inner Text One',\n+ 'onMarkerComplete(page transition, marker one, 1000, 5000)',\n+ 'onMarkerComplete(page transition, outer marker, 1000, 5000)',\n+ 'onTransitionComplete(page transition, 1000, 5000)',\n+ ]);\n+ });\n+ });\n+\n+ \/\/ @gate enableTransitionTracing\n+ it.skip('marker interaction cancelled when name changes', async () => {\n+ const transitionCallbacks = {\n+ onTransitionStart: (name, startTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionStart(${name}, ${startTime})`,\n+ );\n+ },\n+ onTransitionComplete: (name, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ };\n+\n+ let navigateToPageTwo;\n+ let setMarkerNameFn;\n+ function App() {\n+ const [navigate, setNavigate] = useState(false);\n+ navigateToPageTwo = () => {\n+ setNavigate(true);\n+ };\n+\n+ const [markerName, setMarkerName] = useState('old marker');\n+ setMarkerNameFn = () => setMarkerName('new marker');\n+\n+ return (\n+

\n+ {navigate ? (\n+ \n+ }>\n+ \n+ <\/Suspense>\n+ <\/React.unstable_TracingMarker>\n+ ) : (\n+ \n+ )}\n+ <\/div>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot({transitionCallbacks});\n+ await act(async () => {\n+ root.render();\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+\n+ expect(Scheduler).toFlushAndYield(['Page One']);\n+\n+ startTransition(() => navigateToPageTwo(), {name: 'page transition'});\n+ expect(Scheduler).toFlushAndYield([\n+ 'Suspend [Page Two]',\n+ 'Loading...',\n+ 'onTransitionStart(page transition, 1000)',\n+ ]);\n+\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ setMarkerNameFn();\n+\n+ expect(Scheduler).toFlushAndYield(['Suspend [Page Two]', 'Loading...']);\n+ ReactNoop.expire(1000);\n+ await advanceTimers(1000);\n+ resolveText('Page Two');\n+\n+ \/\/ Marker complete is not called because the marker name changed\n+ expect(Scheduler).toFlushAndYield([\n+ 'Page Two',\n+ 'onTransitionComplete(page transition, 1000, 3000)',\n+ ]);\n+ });\n+ });\n+\n+ \/\/ @gate enableTransitionTracing\n+ it.skip('marker changes to new interaction when name changes', async () => {\n+ const transitionCallbacks = {\n+ onTransitionStart: (name, startTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionStart(${name}, ${startTime})`,\n+ );\n+ },\n+ onTransitionComplete: (name, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ onMarkerComplete: (transitioName, markerName, startTime, endTime) => {\n+ Scheduler.unstable_yieldValue(\n+ `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,\n+ );\n+ },\n+ };\n+\n+ let navigateToPageTwo;\n+ let setMarkerNameFn;\n+ function App() {\n+ const [navigate, setNavigate] = useState(false);\n+ navigateToPageTwo = () => {\n+ setNavigate(true);\n+ };\n+\n+ const [markerName, setMarkerName] = useState('old marker');\n+ setMarkerNameFn = () => setMarkerName('new marker');\n+\n+ return (\n+

dillon1000/react

Files changed