{"body":"","files":[{"path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/constants.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/store.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeList.js","status":"A"},{"path":"packages\/react-devtools-shared\/src\/frontend\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/utils.js","status":"M"},{"path":"packages\/react-devtools-shell\/src\/app\/SuspenseTree\/index.js","status":"M"}],"parents":["cf6e502ed23ab3357e58965789324ddfa0e12821"],"commit":{"authorEmail":"sebastian.silbermann@vercel.com","shortRevision":"98286cf8e3","subject":"[DevTools] Send suspense nodes to frontend store (#34070)","authorName":"Sebastian \"Sebbie\" Silbermann","authoredAt":"2025-08-10T10:12:20+02:00","revision":"98286cf8e36d67fdef2a225c212cc0f6e62b920e"},"patch":"diff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex b26da3530b..236b31a3d9 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -78,6 +78,9 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+ SUSPENSE_TREE_OPERATION_ADD,\n+ SUSPENSE_TREE_OPERATION_REMOVE,\n+ SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n } from '..\/..\/constants';\n import {inspectHooksOfFiber} from 'react-debug-tools';\n import {\n@@ -824,8 +827,12 @@ const rootToFiberInstanceMap: Map = new Map();\n \/\/ Map of id to FiberInstance or VirtualInstance.\n \/\/ This Map is used to e.g. get the display name for a Fiber or schedule an update,\n \/\/ operations that should be the same whether the current and work-in-progress Fiber is used.\n-const idToDevToolsInstanceMap: Map =\n- new Map();\n+const idToDevToolsInstanceMap: Map<\n+ FiberInstance['id'] | VirtualInstance['id'],\n+ FiberInstance | VirtualInstance,\n+> = new Map();\n+\n+const idToSuspenseNodeMap: Map = new Map();\n \n \/\/ Map of canonical HostInstances to the nearest parent DevToolsInstance.\n const publicInstanceToDevToolsInstanceMap: Map =\n@@ -1960,11 +1967,12 @@ export function attach(\n };\n \n const pendingOperations: OperationsArray = [];\n- const pendingRealUnmountedIDs: Array = [];\n+ const pendingRealUnmountedIDs: Array = [];\n+ const pendingRealUnmountedSuspenseIDs: Array = [];\n let pendingOperationsQueue: Array | null = [];\n const pendingStringTable: Map = new Map();\n let pendingStringTableLength: number = 0;\n- let pendingUnmountedRootID: number | null = null;\n+ let pendingUnmountedRootID: FiberInstance['id'] | null = null;\n \n function pushOperation(op: number): void {\n if (__DEV__) {\n@@ -1991,6 +1999,7 @@ export function attach(\n return (\n pendingOperations.length === 0 &&\n pendingRealUnmountedIDs.length === 0 &&\n+ pendingRealUnmountedSuspenseIDs.length === 0 &&\n pendingUnmountedRootID === null\n );\n }\n@@ -2056,6 +2065,7 @@ export function attach(\n const numUnmountIDs =\n pendingRealUnmountedIDs.length +\n (pendingUnmountedRootID === null ? 0 : 1);\n+ const numUnmountSuspenseIDs = pendingRealUnmountedSuspenseIDs.length;\n \n const operations = new Array(\n \/\/ Identify which renderer this update is coming from.\n@@ -2064,6 +2074,9 @@ export function attach(\n 1 + \/\/ [stringTableLength]\n \/\/ Then goes the actual string table.\n pendingStringTableLength +\n+ \/\/ All unmounts of Suspense boundaries are batched in a single message.\n+ \/\/ [TREE_OPERATION_REMOVE_SUSPENSE, removedSuspenseIDLength, ...ids]\n+ (numUnmountSuspenseIDs > 0 ? 2 + numUnmountSuspenseIDs : 0) +\n \/\/ All unmounts are batched in a single message.\n \/\/ [TREE_OPERATION_REMOVE, removedIDLength, ...ids]\n (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +\n@@ -2101,6 +2114,19 @@ export function attach(\n i += length;\n });\n \n+ if (numUnmountSuspenseIDs > 0) {\n+ \/\/ All unmounts of Suspense boundaries are batched in a single message.\n+ operations[i++] = SUSPENSE_TREE_OPERATION_REMOVE;\n+ \/\/ The first number is how many unmounted IDs we're gonna send.\n+ operations[i++] = numUnmountSuspenseIDs;\n+ \/\/ Fill in the real unmounts in the reverse order.\n+ \/\/ They were inserted parents-first by React, but we want children-first.\n+ \/\/ So we traverse our array backwards.\n+ for (let j = 0; j < pendingRealUnmountedSuspenseIDs.length; j++) {\n+ operations[i++] = pendingRealUnmountedSuspenseIDs[j];\n+ }\n+ }\n+\n if (numUnmountIDs > 0) {\n \/\/ All unmounts except roots are batched in a single message.\n operations[i++] = TREE_OPERATION_REMOVE;\n@@ -2130,6 +2156,7 @@ export function attach(\n \/\/ Reset all of the pending state now that we've told the frontend about it.\n pendingOperations.length = 0;\n pendingRealUnmountedIDs.length = 0;\n+ pendingRealUnmountedSuspenseIDs.length = 0;\n pendingUnmountedRootID = null;\n pendingStringTable.clear();\n pendingStringTableLength = 0;\n@@ -2467,6 +2494,54 @@ export function attach(\n recordConsoleLogs(instance, componentLogsEntry);\n }\n \n+ function recordSuspenseMount(\n+ suspenseInstance: SuspenseNode,\n+ parentSuspenseInstance: SuspenseNode | null,\n+ ): void {\n+ const fiberInstance = suspenseInstance.instance;\n+ if (fiberInstance.kind === FILTERED_FIBER_INSTANCE) {\n+ throw new Error('Cannot record a mount for a filtered Fiber instance.');\n+ }\n+ const fiberID = fiberInstance.id;\n+\n+ let unfilteredParent = parentSuspenseInstance;\n+ while (\n+ unfilteredParent !== null &&\n+ unfilteredParent.instance.kind === FILTERED_FIBER_INSTANCE\n+ ) {\n+ unfilteredParent = unfilteredParent.parent;\n+ }\n+ const unfilteredParentInstance =\n+ unfilteredParent !== null ? unfilteredParent.instance : null;\n+ if (\n+ unfilteredParentInstance !== null &&\n+ unfilteredParentInstance.kind === FILTERED_FIBER_INSTANCE\n+ ) {\n+ throw new Error(\n+ 'Should not have a filtered instance at this point. This is a bug.',\n+ );\n+ }\n+ const parentID =\n+ unfilteredParentInstance === null ? 0 : unfilteredParentInstance.id;\n+\n+ const fiber = fiberInstance.data;\n+ const props = fiber.memoizedProps;\n+ \/\/ TODO: Compute a fallback name based on Owner, key etc.\n+ const name = props === null ? null : props.name || null;\n+ const nameStringID = getStringID(name);\n+\n+ if (__DEBUG__) {\n+ console.log('recordSuspenseMount()', suspenseInstance);\n+ }\n+\n+ idToSuspenseNodeMap.set(fiberID, suspenseInstance);\n+\n+ pushOperation(SUSPENSE_TREE_OPERATION_ADD);\n+ pushOperation(fiberID);\n+ pushOperation(parentID);\n+ pushOperation(nameStringID);\n+ }\n+\n function recordUnmount(fiberInstance: FiberInstance): void {\n if (__DEBUG__) {\n debug('recordUnmount()', fiberInstance, reconcilingParent);\n@@ -2474,6 +2549,11 @@ export function attach(\n \n recordDisconnect(fiberInstance);\n \n+ const suspenseNode = fiberInstance.suspenseNode;\n+ if (suspenseNode !== null) {\n+ recordSuspenseUnmount(suspenseNode);\n+ }\n+\n idToDevToolsInstanceMap.delete(fiberInstance.id);\n \n untrackFiber(fiberInstance, fiberInstance.data);\n@@ -2511,6 +2591,30 @@ export function attach(\n \/\/ TODO: Notify the front end of the change.\n }\n \n+ function recordSuspenseUnmount(suspenseInstance: SuspenseNode): void {\n+ if (__DEBUG__) {\n+ console.log(\n+ 'recordSuspenseUnmount()',\n+ suspenseInstance,\n+ reconcilingParentSuspenseNode,\n+ );\n+ }\n+\n+ const devtoolsInstance = suspenseInstance.instance;\n+ if (devtoolsInstance.kind !== FIBER_INSTANCE) {\n+ throw new Error(\"Can't unmount a filtered SuspenseNode. This is a bug.\");\n+ }\n+ const fiberInstance = devtoolsInstance;\n+ const id = fiberInstance.id;\n+\n+ \/\/ To maintain child-first ordering,\n+ \/\/ we'll push it into one of these queues,\n+ \/\/ and later arrange them in the correct order.\n+ pendingRealUnmountedSuspenseIDs.push(id);\n+\n+ idToSuspenseNodeMap.delete(id);\n+ }\n+\n \/\/ Running state of the remaining children from the previous version of this parent that\n \/\/ we haven't yet added back. This should be reset anytime we change parent.\n \/\/ Any remaining ones at the end will be deleted.\n@@ -3181,6 +3285,7 @@ export function attach(\n \/\/ inserted the new children but since we know this is a FiberInstance we'll\n \/\/ just use the Fiber anyway.\n newSuspenseNode.rects = measureInstance(newInstance);\n+ recordSuspenseMount(newSuspenseNode, reconcilingParentSuspenseNode);\n }\n insertChild(newInstance);\n if (__DEBUG__) {\n@@ -3609,6 +3714,56 @@ export function attach(\n }\n }\n \n+ function addUnfilteredSuspenseChildrenIDs(\n+ parentInstance: SuspenseNode,\n+ nextChildren: Array,\n+ ): void {\n+ let child: null | SuspenseNode = parentInstance.firstChild;\n+ while (child !== null) {\n+ if (child.instance.kind === FILTERED_FIBER_INSTANCE) {\n+ addUnfilteredSuspenseChildrenIDs(child, nextChildren);\n+ } else {\n+ nextChildren.push(child.instance.id);\n+ }\n+ child = child.nextSibling;\n+ }\n+ }\n+\n+ function recordResetSuspenseChildren(parentInstance: SuspenseNode) {\n+ if (__DEBUG__) {\n+ if (parentInstance.firstChild !== null) {\n+ console.log(\n+ 'recordResetSuspenseChildren()',\n+ parentInstance.firstChild,\n+ parentInstance,\n+ );\n+ }\n+ }\n+ \/\/ The frontend only really cares about the name, and children.\n+ \/\/ The first two don't really change, so we are only concerned with the order of children here.\n+ \/\/ This is trickier than a simple comparison though, since certain types of fibers are filtered.\n+ const nextChildren: Array = [];\n+\n+ addUnfilteredSuspenseChildrenIDs(parentInstance, nextChildren);\n+\n+ const numChildren = nextChildren.length;\n+ if (numChildren < 2) {\n+ \/\/ No need to reorder.\n+ return;\n+ }\n+ pushOperation(SUSPENSE_TREE_OPERATION_REORDER_CHILDREN);\n+ \/\/ $FlowFixMe[incompatible-call] TODO: Allow filtering SuspenseNode\n+ pushOperation(parentInstance.instance.id);\n+ pushOperation(numChildren);\n+ for (let i = 0; i < nextChildren.length; i++) {\n+ pushOperation(nextChildren[i]);\n+ }\n+ }\n+\n+ const NoUpdate = \/* *\/ 0b00;\n+ const ShouldResetChildren = \/* *\/ 0b01;\n+ const ShouldResetSuspenseChildren = \/* *\/ 0b10;\n+\n function updateVirtualInstanceRecursively(\n virtualInstance: VirtualInstance,\n nextFirstChild: Fiber,\n@@ -3616,7 +3771,7 @@ export function attach(\n prevFirstChild: null | Fiber,\n traceNearestHostComponentUpdate: boolean,\n virtualLevel: number, \/\/ the nth level of virtual instances\n- ): void {\n+ ): number {\n const stashedParent = reconcilingParent;\n const stashedPrevious = previouslyReconciledSibling;\n const stashedRemaining = remainingReconcilingChildren;\n@@ -3630,16 +3785,16 @@ export function attach(\n virtualInstance.firstChild = null;\n virtualInstance.suspendedBy = null;\n try {\n- if (\n- updateVirtualChildrenRecursively(\n- nextFirstChild,\n- nextLastChild,\n- prevFirstChild,\n- traceNearestHostComponentUpdate,\n- virtualLevel + 1,\n- )\n- ) {\n+ let updateFlags = updateVirtualChildrenRecursively(\n+ nextFirstChild,\n+ nextLastChild,\n+ prevFirstChild,\n+ traceNearestHostComponentUpdate,\n+ virtualLevel + 1,\n+ );\n+ if ((updateFlags & ShouldResetChildren) !== NoUpdate) {\n recordResetChildren(virtualInstance);\n+ updateFlags &= ~ShouldResetChildren;\n }\n removePreviousSuspendedBy(virtualInstance, previousSuspendedBy);\n \/\/ Update the errors\/warnings count. If this Instance has switched to a different\n@@ -3652,6 +3807,8 @@ export function attach(\n recordConsoleLogs(virtualInstance, componentLogsEntry);\n \/\/ Must be called after all children have been appended.\n recordVirtualProfilingDurations(virtualInstance);\n+\n+ return updateFlags;\n } finally {\n unmountRemainingChildren();\n reconcilingParent = stashedParent;\n@@ -3666,8 +3823,8 @@ export function attach(\n prevFirstChild: null | Fiber,\n traceNearestHostComponentUpdate: boolean,\n virtualLevel: number, \/\/ the nth level of virtual instances\n- ): boolean {\n- let shouldResetChildren = false;\n+ ): number {\n+ let updateFlags = NoUpdate;\n \/\/ If the first child is different, we need to traverse them.\n \/\/ Each next child will be either a new child (mount) or an alternate (update).\n let nextChild: null | Fiber = nextFirstChild;\n@@ -3727,8 +3884,10 @@ export function attach(\n traceNearestHostComponentUpdate,\n virtualLevel,\n );\n+ updateFlags |=\n+ ShouldResetChildren | ShouldResetSuspenseChildren;\n } else {\n- updateVirtualInstanceRecursively(\n+ updateFlags |= updateVirtualInstanceRecursively(\n previousVirtualInstance,\n previousVirtualInstanceNextFirstFiber,\n nextChild,\n@@ -3779,7 +3938,7 @@ export function attach(\n insertChild(newVirtualInstance);\n previousVirtualInstance = newVirtualInstance;\n previousVirtualInstanceWasMount = true;\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren;\n }\n \/\/ Existing children might be reparented into this new virtual instance.\n \/\/ TODO: This will cause the front end to error which needs to be fixed.\n@@ -3806,8 +3965,9 @@ export function attach(\n traceNearestHostComponentUpdate,\n virtualLevel,\n );\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n } else {\n- updateVirtualInstanceRecursively(\n+ updateFlags |= updateVirtualInstanceRecursively(\n previousVirtualInstance,\n previousVirtualInstanceNextFirstFiber,\n nextChild,\n@@ -3857,44 +4017,36 @@ export function attach(\n \/\/ They are always different referentially, but if the instances line up\n \/\/ conceptually we'll want to know that.\n if (prevChild !== prevChildAtSameIndex) {\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n \n moveChild(fiberInstance, previousSiblingOfExistingInstance);\n \n- if (\n- updateFiberRecursively(\n- fiberInstance,\n- nextChild,\n- (prevChild: any),\n- traceNearestHostComponentUpdate,\n- )\n- ) {\n- \/\/ If a nested tree child order changed but it can't handle its own\n- \/\/ child order invalidation (e.g. because it's filtered out like host nodes),\n- \/\/ propagate the need to reset child order upwards to this Fiber.\n- shouldResetChildren = true;\n- }\n+ \/\/ If a nested tree child order changed but it can't handle its own\n+ \/\/ child order invalidation (e.g. because it's filtered out like host nodes),\n+ \/\/ propagate the need to reset child order upwards to this Fiber.\n+ updateFlags |= updateFiberRecursively(\n+ fiberInstance,\n+ nextChild,\n+ (prevChild: any),\n+ traceNearestHostComponentUpdate,\n+ );\n } else if (prevChild !== null && shouldFilterFiber(nextChild)) {\n \/\/ The filtered instance could've reordered.\n if (prevChild !== prevChildAtSameIndex) {\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n \n \/\/ If this Fiber should be filtered, we need to still update its children.\n \/\/ This relies on an alternate since we don't have an Instance with the previous\n \/\/ child on it. Ideally, the reconciliation wouldn't need previous Fibers that\n \/\/ are filtered from the tree.\n- if (\n- updateFiberRecursively(\n- null,\n- nextChild,\n- prevChild,\n- traceNearestHostComponentUpdate,\n- )\n- ) {\n- shouldResetChildren = true;\n- }\n+ updateFlags |= updateFiberRecursively(\n+ null,\n+ nextChild,\n+ prevChild,\n+ traceNearestHostComponentUpdate,\n+ );\n } else {\n \/\/ It's possible for a FiberInstance to be reparented when virtual parents\n \/\/ get their sequence split or change structure with the same render result.\n@@ -3906,14 +4058,17 @@ export function attach(\n \n mountFiberRecursively(nextChild, traceNearestHostComponentUpdate);\n \/\/ Need to mark the parent set to remount the new instance.\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n }\n \/\/ Try the next child.\n nextChild = nextChild.sibling;\n \/\/ Advance the pointer in the previous list so that we can\n \/\/ keep comparing if they line up.\n- if (!shouldResetChildren && prevChildAtSameIndex !== null) {\n+ if (\n+ (updateFlags & ShouldResetChildren) === NoUpdate &&\n+ prevChildAtSameIndex !== null\n+ ) {\n prevChildAtSameIndex = prevChildAtSameIndex.sibling;\n }\n }\n@@ -3926,8 +4081,9 @@ export function attach(\n traceNearestHostComponentUpdate,\n virtualLevel,\n );\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n } else {\n- updateVirtualInstanceRecursively(\n+ updateFlags |= updateVirtualInstanceRecursively(\n previousVirtualInstance,\n previousVirtualInstanceNextFirstFiber,\n null,\n@@ -3939,9 +4095,9 @@ export function attach(\n }\n \/\/ If we have no more children, but used to, they don't line up.\n if (prevChildAtSameIndex !== null) {\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n- return shouldResetChildren;\n+ return updateFlags;\n }\n \n \/\/ Returns whether closest unfiltered fiber parent needs to reset its child list.\n@@ -3949,9 +4105,9 @@ export function attach(\n nextFirstChild: null | Fiber,\n prevFirstChild: null | Fiber,\n traceNearestHostComponentUpdate: boolean,\n- ): boolean {\n+ ): number {\n if (nextFirstChild === null) {\n- return prevFirstChild !== null;\n+ return prevFirstChild !== null ? ShouldResetChildren : NoUpdate;\n }\n return updateVirtualChildrenRecursively(\n nextFirstChild,\n@@ -3968,7 +4124,7 @@ export function attach(\n nextFiber: Fiber,\n prevFiber: Fiber,\n traceNearestHostComponentUpdate: boolean,\n- ): boolean {\n+ ): number {\n if (__DEBUG__) {\n if (fiberInstance !== null) {\n debug('updateFiberRecursively()', fiberInstance, reconcilingParent);\n@@ -4067,7 +4223,7 @@ export function attach(\n aquireHostInstance(nearestInstance, nextFiber.stateNode);\n }\n \n- let shouldResetChildren = false;\n+ let updateFlags = NoUpdate;\n \n \/\/ The behavior of timed-out legacy Suspense trees is unique. Without the Offscreen wrapper.\n \/\/ Rather than unmount the timed out content (and possibly lose important state),\n@@ -4110,20 +4266,18 @@ export function attach(\n traceNearestHostComponentUpdate,\n );\n \n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n \n- if (\n- nextFallbackChildSet != null &&\n- prevFallbackChildSet != null &&\n- updateChildrenRecursively(\n- nextFallbackChildSet,\n- prevFallbackChildSet,\n- traceNearestHostComponentUpdate,\n- )\n- ) {\n- shouldResetChildren = true;\n- }\n+ const childrenUpdateFlags =\n+ nextFallbackChildSet != null && prevFallbackChildSet != null\n+ ? updateChildrenRecursively(\n+ nextFallbackChildSet,\n+ prevFallbackChildSet,\n+ traceNearestHostComponentUpdate,\n+ )\n+ : NoUpdate;\n+ updateFlags |= childrenUpdateFlags;\n } else if (prevDidTimeout && !nextDidTimeOut) {\n \/\/ Fallback -> Primary:\n \/\/ 1. Unmount fallback set\n@@ -4135,8 +4289,8 @@ export function attach(\n nextPrimaryChildSet,\n traceNearestHostComponentUpdate,\n );\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n- shouldResetChildren = true;\n } else if (!prevDidTimeout && nextDidTimeOut) {\n \/\/ Primary -> Fallback:\n \/\/ 1. Hide primary set\n@@ -4152,7 +4306,7 @@ export function attach(\n nextFallbackChildSet,\n traceNearestHostComponentUpdate,\n );\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n } else if (nextIsHidden) {\n if (!prevWasHidden) {\n@@ -4165,7 +4319,11 @@ export function attach(\n const stashedDisconnected = isInDisconnectedSubtree;\n isInDisconnectedSubtree = true;\n try {\n- updateChildrenRecursively(nextFiber.child, prevFiber.child, false);\n+ updateFlags |= updateChildrenRecursively(\n+ nextFiber.child,\n+ prevFiber.child,\n+ false,\n+ );\n } finally {\n isInDisconnectedSubtree = stashedDisconnected;\n }\n@@ -4177,7 +4335,11 @@ export function attach(\n isInDisconnectedSubtree = true;\n try {\n if (nextFiber.child !== null) {\n- updateChildrenRecursively(nextFiber.child, prevFiber.child, false);\n+ updateFlags |= updateChildrenRecursively(\n+ nextFiber.child,\n+ prevFiber.child,\n+ false,\n+ );\n }\n \/\/ Ensure we unmount any remaining children inside the isInDisconnectedSubtree flag\n \/\/ since they should not trigger real deletions.\n@@ -4189,7 +4351,7 @@ export function attach(\n if (fiberInstance !== null && !isInDisconnectedSubtree) {\n reconnectChildrenRecursively(fiberInstance);\n \/\/ Children may have reordered while they were hidden.\n- shouldResetChildren = true;\n+ updateFlags |= ShouldResetChildren | ShouldResetSuspenseChildren;\n }\n } else if (\n nextFiber.tag === SuspenseComponent &&\n@@ -4209,17 +4371,13 @@ export function attach(\n const nextFallbackFiber = nextContentFiber.sibling;\n \n \/\/ First update only the Offscreen boundary. I.e. the main content.\n- if (\n- updateVirtualChildrenRecursively(\n- nextContentFiber,\n- nextFallbackFiber,\n- prevContentFiber,\n- traceNearestHostComponentUpdate,\n- 0,\n- )\n- ) {\n- shouldResetChildren = true;\n- }\n+ updateFlags |= updateVirtualChildrenRecursively(\n+ nextContentFiber,\n+ nextFallbackFiber,\n+ prevContentFiber,\n+ traceNearestHostComponentUpdate,\n+ 0,\n+ );\n \n \/\/ Next, we'll pop back out of the SuspenseNode that we added above and now we'll\n \/\/ reconcile the fallback, reconciling anything by inserting into the parent SuspenseNode.\n@@ -4229,17 +4387,13 @@ export function attach(\n remainingReconcilingChildrenSuspenseNodes = stashedSuspenseRemaining;\n shouldPopSuspenseNode = false;\n if (nextFallbackFiber !== null) {\n- if (\n- updateVirtualChildrenRecursively(\n- nextFallbackFiber,\n- null,\n- prevFallbackFiber,\n- traceNearestHostComponentUpdate,\n- 0,\n- )\n- ) {\n- shouldResetChildren = true;\n- }\n+ updateFlags |= updateVirtualChildrenRecursively(\n+ nextFallbackFiber,\n+ null,\n+ prevFallbackFiber,\n+ traceNearestHostComponentUpdate,\n+ 0,\n+ );\n } else if (\n nextFiber.memoizedState === null &&\n fiberInstance.suspenseNode !== null\n@@ -4262,15 +4416,11 @@ export function attach(\n \/\/ Common case: Primary -> Primary.\n \/\/ This is the same code path as for non-Suspense fibers.\n if (nextFiber.child !== prevFiber.child) {\n- if (\n- updateChildrenRecursively(\n- nextFiber.child,\n- prevFiber.child,\n- traceNearestHostComponentUpdate,\n- )\n- ) {\n- shouldResetChildren = true;\n- }\n+ updateFlags |= updateChildrenRecursively(\n+ nextFiber.child,\n+ prevFiber.child,\n+ traceNearestHostComponentUpdate,\n+ );\n } else {\n \/\/ Children are unchanged.\n if (fiberInstance !== null) {\n@@ -4293,15 +4443,19 @@ export function attach(\n }\n }\n } else {\n+ const childrenUpdateFlags = updateChildrenRecursively(\n+ nextFiber.child,\n+ prevFiber.child,\n+ false,\n+ );\n \/\/ If this fiber is filtered there might be changes to this set elsewhere so we have\n \/\/ to visit each child to place it back in the set. We let the child bail out instead.\n- if (\n- updateChildrenRecursively(nextFiber.child, prevFiber.child, false)\n- ) {\n+ if ((childrenUpdateFlags & ShouldResetChildren) !== NoUpdate) {\n throw new Error(\n 'The children should not have changed if we pass in the same set.',\n );\n }\n+ updateFlags |= childrenUpdateFlags;\n }\n }\n }\n@@ -4330,21 +4484,35 @@ export function attach(\n }\n }\n }\n- if (shouldResetChildren) {\n+\n+ if ((updateFlags & ShouldResetChildren) !== NoUpdate) {\n \/\/ We need to crawl the subtree for closest non-filtered Fibers\n \/\/ so that we can display them in a flat children set.\n if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {\n recordResetChildren(fiberInstance);\n+\n \/\/ We've handled the child order change for this Fiber.\n \/\/ Since it's included, there's no need to invalidate parent child order.\n- return false;\n+ updateFlags &= ~ShouldResetChildren;\n } else {\n \/\/ Let the closest unfiltered parent Fiber reset its child order instead.\n- return true;\n }\n } else {\n- return false;\n }\n+\n+ if ((updateFlags & ShouldResetSuspenseChildren) !== NoUpdate) {\n+ if (fiberInstance !== null && fiberInstance.kind === FIBER_INSTANCE) {\n+ const suspenseNode = fiberInstance.suspenseNode;\n+ if (suspenseNode !== null) {\n+ recordResetSuspenseChildren(suspenseNode);\n+ updateFlags &= ~ShouldResetSuspenseChildren;\n+ }\n+ } else {\n+ \/\/ Let the closest unfiltered parent Fiber reset its child order instead.\n+ }\n+ }\n+\n+ return updateFlags;\n } finally {\n if (fiberInstance !== null) {\n unmountRemainingChildren();\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex fa32ead1e9..391eea6b23 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -24,6 +24,9 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;\n export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;\n export const TREE_OPERATION_REMOVE_ROOT = 6;\n export const TREE_OPERATION_SET_SUBTREE_MODE = 7;\n+export const SUSPENSE_TREE_OPERATION_ADD = 8;\n+export const SUSPENSE_TREE_OPERATION_REMOVE = 9;\n+export const SUSPENSE_TREE_OPERATION_REORDER_CHILDREN = 10;\n \n export const PROFILING_FLAG_BASIC_SUPPORT = 0b01;\n export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 3035c0ae4a..622c9a4754 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -20,6 +20,9 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n+ SUSPENSE_TREE_OPERATION_ADD,\n+ SUSPENSE_TREE_OPERATION_REMOVE,\n+ SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n } from '..\/constants';\n import {ElementTypeRoot} from '..\/frontend\/types';\n import {\n@@ -44,6 +47,7 @@ import type {\n Element,\n ComponentFilter,\n ElementType,\n+ SuspenseNode,\n } from 'react-devtools-shared\/src\/frontend\/types';\n import type {\n FrontendBridge,\n@@ -100,11 +104,12 @@ export default class Store extends EventEmitter<{\n hookSettings: [$ReadOnly],\n hostInstanceSelected: [Element['id']],\n settingsUpdated: [$ReadOnly],\n- mutated: [[Array, Map]],\n+ mutated: [[Array, Map]],\n recordChangeDescriptions: [],\n roots: [],\n rootSupportsBasicProfiling: [],\n rootSupportsTimelineProfiling: [],\n+ suspenseTreeMutated: [],\n supportsNativeStyleEditor: [],\n supportsReloadAndProfile: [],\n unsupportedBridgeProtocolDetected: [],\n@@ -127,8 +132,10 @@ export default class Store extends EventEmitter<{\n _componentFilters: Array;\n \n \/\/ Map of ID to number of recorded error and warning message IDs.\n- _errorsAndWarnings: Map =\n- new Map();\n+ _errorsAndWarnings: Map<\n+ Element['id'],\n+ {errorCount: number, warningCount: number},\n+ > = new Map();\n \n \/\/ At least one of the injected renderers contains (DEV only) owner metadata.\n _hasOwnerMetadata: boolean = false;\n@@ -136,7 +143,9 @@ export default class Store extends EventEmitter<{\n \/\/ Map of ID to (mutable) Element.\n \/\/ Elements are mutated to avoid excessive cloning during tree updates.\n \/\/ The InspectedElement Suspense cache also relies on this mutability for its WeakMap usage.\n- _idToElement: Map = new Map();\n+ _idToElement: Map = new Map();\n+\n+ _idToSuspense: Map = new Map();\n \n \/\/ Should the React Native style editor panel be shown?\n _isNativeStyleEditorSupported: boolean = false;\n@@ -149,7 +158,7 @@ export default class Store extends EventEmitter<{\n \n \/\/ Map of element (id) to the set of elements (ids) it owns.\n \/\/ This map enables getOwnersListForElement() to avoid traversing the entire tree.\n- _ownersMap: Map> = new Map();\n+ _ownersMap: Map> = new Map();\n \n _profilerStore: ProfilerStore;\n \n@@ -158,15 +167,16 @@ export default class Store extends EventEmitter<{\n \/\/ Incremented each time the store is mutated.\n \/\/ This enables a passive effect to detect a mutation between render and commit phase.\n _revision: number = 0;\n+ _revisionSuspense: number = 0;\n \n \/\/ This Array must be treated as immutable!\n \/\/ Passive effects will check it for changes between render and mount.\n- _roots: $ReadOnlyArray = [];\n+ _roots: $ReadOnlyArray = [];\n \n- _rootIDToCapabilities: Map = new Map();\n+ _rootIDToCapabilities: Map = new Map();\n \n \/\/ Renderer ID is needed to support inspection fiber props, state, and hooks.\n- _rootIDToRendererID: Map = new Map();\n+ _rootIDToRendererID: Map = new Map();\n \n \/\/ These options may be initially set by a configuration option when constructing the Store.\n _supportsInspectMatchingDOMElement: boolean = false;\n@@ -439,6 +449,9 @@ export default class Store extends EventEmitter<{\n get revision(): number {\n return this._revision;\n }\n+ get revisionSuspense(): number {\n+ return this._revisionSuspense;\n+ }\n \n get rootIDToRendererID(): Map {\n return this._rootIDToRendererID;\n@@ -595,6 +608,16 @@ export default class Store extends EventEmitter<{\n return element;\n }\n \n+ getSuspenseByID(id: SuspenseNode['id']): SuspenseNode | null {\n+ const suspense = this._idToSuspense.get(id);\n+ if (suspense === undefined) {\n+ console.warn(`No suspense found with id \"${id}\"`);\n+ return null;\n+ }\n+\n+ return suspense;\n+ }\n+\n \/\/ Returns a tuple of [id, index]\n getElementsWithErrorsAndWarnings(): ErrorAndWarningTuples {\n if (!this._shouldShowWarningsAndErrors) {\n@@ -989,6 +1012,7 @@ export default class Store extends EventEmitter<{\n \n let haveRootsChanged = false;\n let haveErrorsOrWarningsChanged = false;\n+ let hasSuspenseTreeChanged = false;\n \n \/\/ The first two values are always rendererID and rootID\n const rendererID = operations[0];\n@@ -1369,7 +1393,7 @@ export default class Store extends EventEmitter<{\n \/\/ The profiler UI uses them lazily in order to generate the tree.\n i += 3;\n break;\n- case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:\n+ case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {\n const id = operations[i + 1];\n const errorCount = operations[i + 2];\n const warningCount = operations[i + 3];\n@@ -1383,6 +1407,184 @@ export default class Store extends EventEmitter<{\n }\n haveErrorsOrWarningsChanged = true;\n break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_ADD: {\n+ const id = operations[i + 1];\n+ const parentID = operations[i + 2];\n+ const nameStringID = operations[i + 3];\n+ let name = stringTable[nameStringID];\n+\n+ if (this._idToSuspense.has(id)) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot add suspense node \"${id}\" because a suspense node with that id is already in the Store.`,\n+ ),\n+ );\n+ }\n+\n+ const element = this._idToElement.get(id);\n+ if (element === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot add suspense node \"${id}\" because no matching element was found in the Store.`,\n+ ),\n+ );\n+ } else {\n+ if (name === null) {\n+ \/\/ The boundary isn't explicitly named.\n+ \/\/ Pick a sensible default.\n+ \/\/ TODO: Use key\n+ const owner = this._idToElement.get(element.ownerID);\n+ if (owner !== undefined) {\n+ \/\/ TODO: This is clowny\n+ name = `${owner.displayName || 'Unknown'}>?`;\n+ }\n+ }\n+ }\n+\n+ if (__DEBUG__) {\n+ debug('Suspense Add', `node ${id} as child of ${parentID}`);\n+ }\n+\n+ if (parentID !== 0) {\n+ const parentSuspense = this._idToSuspense.get(parentID);\n+ if (parentSuspense === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot add suspense child \"${id}\" to parent suspense \"${parentID}\" because parent suspense node was not found in the Store.`,\n+ ),\n+ );\n+\n+ break;\n+ }\n+\n+ parentSuspense.children.push(id);\n+ }\n+\n+ if (name === null) {\n+ name = 'Unknown';\n+ }\n+\n+ this._idToSuspense.set(id, {\n+ id,\n+ parentID,\n+ children: [],\n+ name,\n+ });\n+\n+ i += 4;\n+\n+ hasSuspenseTreeChanged = true;\n+ break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_REMOVE: {\n+ const removeLength = operations[i + 1];\n+ i += 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = operations[i];\n+ const suspense = this._idToSuspense.get(id);\n+\n+ if (suspense === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot remove suspense node \"${id}\" because no matching node was found in the Store.`,\n+ ),\n+ );\n+\n+ break;\n+ }\n+\n+ i += 1;\n+\n+ const {children, parentID} = suspense;\n+ if (children.length > 0) {\n+ this._throwAndEmitError(\n+ Error(`Suspense node \"${id}\" was removed before its children.`),\n+ );\n+ }\n+\n+ this._idToSuspense.delete(id);\n+\n+ let parentSuspense: ?SuspenseNode = null;\n+ if (parentID === 0) {\n+ if (__DEBUG__) {\n+ debug('Suspense remove', `node ${id} root`);\n+ }\n+ } else {\n+ if (__DEBUG__) {\n+ debug('Suspense Remove', `node ${id} from parent ${parentID}`);\n+ }\n+\n+ parentSuspense = this._idToSuspense.get(parentID);\n+ if (parentSuspense === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot remove suspense node \"${id}\" from parent \"${parentID}\" because no matching node was found in the Store.`,\n+ ),\n+ );\n+\n+ break;\n+ }\n+\n+ const index = parentSuspense.children.indexOf(id);\n+ parentSuspense.children.splice(index, 1);\n+ }\n+ }\n+\n+ hasSuspenseTreeChanged = true;\n+ break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = operations[i + 1];\n+ const numChildren = operations[i + 2];\n+ i += 3;\n+\n+ const suspense = this._idToSuspense.get(id);\n+ if (suspense === undefined) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Cannot reorder children for suspense node \"${id}\" because no matching node was found in the Store.`,\n+ ),\n+ );\n+\n+ break;\n+ }\n+\n+ const children = suspense.children;\n+ if (children.length !== numChildren) {\n+ this._throwAndEmitError(\n+ Error(\n+ `Suspense children cannot be added or removed during a reorder operation.`,\n+ ),\n+ );\n+ }\n+\n+ for (let j = 0; j < numChildren; j++) {\n+ const childID = operations[i + j];\n+ children[j] = childID;\n+ if (__DEV__) {\n+ \/\/ This check is more expensive so it's gated by __DEV__.\n+ const childSuspense = this._idToSuspense.get(childID);\n+ if (childSuspense == null || childSuspense.parentID !== id) {\n+ console.error(\n+ `Suspense children cannot be added or removed during a reorder operation.`,\n+ );\n+ }\n+ }\n+ }\n+ i += numChildren;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Re-order',\n+ `Suspense node ${id} children ${children.join(',')}`,\n+ );\n+ }\n+\n+ hasSuspenseTreeChanged = true;\n+ break;\n+ }\n default:\n this._throwAndEmitError(\n new UnsupportedBridgeOperationError(\n@@ -1393,6 +1595,9 @@ export default class Store extends EventEmitter<{\n }\n \n this._revision++;\n+ if (hasSuspenseTreeChanged) {\n+ this._revisionSuspense++;\n+ }\n \n \/\/ Any time the tree changes (e.g. elements added, removed, or reordered) cached indices may be invalid.\n this._cachedErrorAndWarningTuples = null;\n@@ -1451,6 +1656,10 @@ export default class Store extends EventEmitter<{\n }\n }\n \n+ if (hasSuspenseTreeChanged) {\n+ this.emit('suspenseTreeMutated');\n+ }\n+\n if (__DEBUG__) {\n console.log(printStore(this, true));\n console.groupEnd();\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex fa02555e4c..91a17dcad2 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -33,6 +33,7 @@ import FetchFileWithCachingContext from '.\/Components\/FetchFileWithCachingContex\n import {InspectedElementContextController} from '.\/Components\/InspectedElementContext';\n import HookNamesModuleLoaderContext from 'react-devtools-shared\/src\/devtools\/views\/Components\/HookNamesModuleLoaderContext';\n import {ProfilerContextController} from '.\/Profiler\/ProfilerContext';\n+import {SuspenseTreeContextController} from '.\/SuspenseTab\/SuspenseTreeContext';\n import {TimelineContextController} from 'react-devtools-timeline\/src\/TimelineContext';\n import {ModalDialogContextController} from '.\/ModalDialog';\n import ReactLogo from '.\/ReactLogo';\n@@ -319,58 +320,65 @@ export default function DevTools({\n \n \n \n- \n- \n- {showTabBar && (\n-

\n- \n- \n- {process.env.DEVTOOLS_VERSION}\n- <\/span>\n-

\n- \n+ \n+ \n+ {showTabBar && (\n+

\n+ \n+ \n+ {process.env.DEVTOOLS_VERSION}\n+ <\/span>\n+

\n+ \n+ <\/div>\n+ )}\n+ \n+ \n+ <\/div>\n+ \n+ \n+ <\/div>\n+ \n+ \n <\/div>\n- )}\n- \n- \n- <\/div>\n- \n- \n <\/div>\n- \n- \n- <\/div>\n- <\/div>\n- {editorPortalContainer ? (\n- \n- ) : null}\n- <\/ThemeProvider>\n+ ) : null}\n+ <\/ThemeProvider>\n+ <\/SuspenseTreeContextController>\n <\/InspectedElementContextController>\n <\/TimelineContextController>\n <\/ProfilerContextController>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\nindex 75c9b8a6d9..dfa515fffa 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/CommitTreeBuilder.js\n@@ -16,6 +16,9 @@ import {\n TREE_OPERATION_SET_SUBTREE_MODE,\n TREE_OPERATION_UPDATE_TREE_BASE_DURATION,\n TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,\n+ SUSPENSE_TREE_OPERATION_ADD,\n+ SUSPENSE_TREE_OPERATION_REMOVE,\n+ SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n } from 'react-devtools-shared\/src\/constants';\n import {\n parseElementDisplayNameFromBackend,\n@@ -366,6 +369,50 @@ function updateTree(\n break;\n }\n \n+ case SUSPENSE_TREE_OPERATION_ADD: {\n+ const fiberID = operations[i + 1];\n+ const parentID = operations[i + 2];\n+ const nameStringID = operations[i + 3];\n+ const name = stringTable[nameStringID];\n+\n+ i += 4;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Add suspense',\n+ `node ${fiberID} (${String(name)}) under ${parentID}`,\n+ );\n+ }\n+ break;\n+ }\n+\n+ case SUSPENSE_TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i += 2 + removeLength;\n+\n+ break;\n+ }\n+\n+ case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {\n+ const suspenseID = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ const children = ((operations.slice(\n+ i + 3,\n+ i + 3 + numChildren,\n+ ): any): Array);\n+\n+ i = i + 3 + numChildren;\n+\n+ if (__DEBUG__) {\n+ debug(\n+ 'Suspense re-order',\n+ `suspense ${suspenseID} children ${children.join(',')}`,\n+ );\n+ }\n+\n+ break;\n+ }\n+\n default:\n throw Error(`Unsupported Bridge operation \"${operation}\"`);\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\nindex a920b6dabd..d113fd3901 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n@@ -19,6 +19,7 @@ import InspectedElementErrorBoundary from '..\/Components\/InspectedElementErrorBo\n import InspectedElement from '..\/Components\/InspectedElement';\n import portaledContent from '..\/portaledContent';\n import styles from '.\/SuspenseTab.css';\n+import SuspenseTreeList from '.\/SuspenseTreeList';\n import Button from '..\/Button';\n \n type Orientation = 'horizontal' | 'vertical';\n@@ -43,10 +44,6 @@ type LayoutState = {\n };\n type LayoutDispatch = (action: LayoutAction) => void;\n \n-function SuspenseTreeList() {\n- return

tree list<\/div>;\n-}\n-\n function SuspenseTimeline() {\n return

timeline<\/div>;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js\nnew file mode 100644\nindex 0000000000..8441a99497\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeContext.js\n@@ -0,0 +1,111 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+import type {ReactContext} from 'shared\/ReactTypes';\n+\n+import * as React from 'react';\n+import {\n+ createContext,\n+ startTransition,\n+ useContext,\n+ useEffect,\n+ useMemo,\n+ useReducer,\n+} from 'react';\n+import {StoreContext} from '..\/context';\n+\n+export type SuspenseTreeState = {};\n+\n+type ACTION_HANDLE_SUSPENSE_TREE_MUTATION = {\n+ type: 'HANDLE_SUSPENSE_TREE_MUTATION',\n+};\n+export type SuspenseTreeAction = ACTION_HANDLE_SUSPENSE_TREE_MUTATION;\n+export type SuspenseTreeDispatch = (action: SuspenseTreeAction) => void;\n+\n+const SuspenseTreeStateContext: ReactContext =\n+ createContext(((null: any): SuspenseTreeState));\n+SuspenseTreeStateContext.displayName = 'SuspenseTreeStateContext';\n+\n+const SuspenseTreeDispatcherContext: ReactContext =\n+ createContext(((null: any): SuspenseTreeDispatch));\n+SuspenseTreeDispatcherContext.displayName = 'SuspenseTreeDispatcherContext';\n+\n+type Props = {\n+ children: React$Node,\n+};\n+\n+function SuspenseTreeContextController({children}: Props): React.Node {\n+ const store = useContext(StoreContext);\n+\n+ const initialRevision = useMemo(() => store.revisionSuspense, [store]);\n+\n+ \/\/ This reducer is created inline because it needs access to the Store.\n+ \/\/ The store is mutable, but the Store itself is global and lives for the lifetime of the DevTools,\n+ \/\/ so it's okay for the reducer to have an empty dependencies array.\n+ const reducer = useMemo(\n+ () =>\n+ (\n+ state: SuspenseTreeState,\n+ action: SuspenseTreeAction,\n+ ): SuspenseTreeState => {\n+ const {type} = action;\n+ switch (type) {\n+ case 'HANDLE_SUSPENSE_TREE_MUTATION':\n+ return {...state};\n+ default:\n+ throw new Error(`Unrecognized action \"${type}\"`);\n+ }\n+ },\n+ [],\n+ );\n+\n+ const [state, dispatch] = useReducer(reducer, {});\n+ const transitionDispatch = useMemo(\n+ () => (action: SuspenseTreeAction) =>\n+ startTransition(() => {\n+ dispatch(action);\n+ }),\n+ [dispatch],\n+ );\n+\n+ useEffect(() => {\n+ const handleSuspenseTreeMutated = () => {\n+ transitionDispatch({\n+ type: 'HANDLE_SUSPENSE_TREE_MUTATION',\n+ });\n+ };\n+\n+ \/\/ Since this is a passive effect, the tree may have been mutated before our initial subscription.\n+ if (store.revisionSuspense !== initialRevision) {\n+ \/\/ At the moment, we can treat this as a mutation.\n+ \/\/ We don't know which Elements were newly added\/removed, but that should be okay in this case.\n+ \/\/ It would only impact the search state, which is unlikely to exist yet at this point.\n+ transitionDispatch({\n+ type: 'HANDLE_SUSPENSE_TREE_MUTATION',\n+ });\n+ }\n+\n+ store.addListener('suspenseTreeMutated', handleSuspenseTreeMutated);\n+ return () =>\n+ store.removeListener('suspenseTreeMutated', handleSuspenseTreeMutated);\n+ }, [dispatch, initialRevision, store]);\n+\n+ return (\n+ \n+ \n+ {children}\n+ <\/SuspenseTreeDispatcherContext.Provider>\n+ <\/SuspenseTreeStateContext.Provider>\n+ );\n+}\n+\n+export {\n+ SuspenseTreeDispatcherContext,\n+ SuspenseTreeStateContext,\n+ SuspenseTreeContextController,\n+};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeList.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeList.js\nnew file mode 100644\nindex 0000000000..43bee6eb12\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTreeList.js\n@@ -0,0 +1,90 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+import type {SuspenseNode} from '..\/..\/..\/frontend\/types';\n+import type Store from '..\/..\/store';\n+\n+import * as React from 'react';\n+import {useContext} from 'react';\n+import {StoreContext} from '..\/context';\n+import {SuspenseTreeStateContext} from '.\/SuspenseTreeContext';\n+import {TreeDispatcherContext} from '..\/Components\/TreeContext';\n+\n+function getDocumentOrderSuspenseTreeList(store: Store): Array {\n+ const suspenseTreeList: SuspenseNode[] = [];\n+ for (let i = 0; i < store.roots.length; i++) {\n+ const root = store.getElementByID(store.roots[i]);\n+ if (root === null) {\n+ continue;\n+ }\n+ const suspense = store.getSuspenseByID(root.id);\n+ if (suspense !== null) {\n+ const stack = [suspense];\n+ while (stack.length > 0) {\n+ const current = stack.pop();\n+ if (current === undefined) {\n+ continue;\n+ }\n+ suspenseTreeList.push(current);\n+ \/\/ Add children in reverse order to maintain document order\n+ for (let j = current.children.length - 1; j >= 0; j--) {\n+ const childSuspense = store.getSuspenseByID(current.children[j]);\n+ if (childSuspense !== null) {\n+ stack.push(childSuspense);\n+ }\n+ }\n+ }\n+ }\n+ }\n+\n+ return suspenseTreeList;\n+}\n+\n+export default function SuspenseTreeList(_: {}): React$Node {\n+ const store = useContext(StoreContext);\n+ const treeDispatch = useContext(TreeDispatcherContext);\n+ useContext(SuspenseTreeStateContext);\n+\n+ const suspenseTreeList = getDocumentOrderSuspenseTreeList(store);\n+\n+ return (\n+

\n+

Suspense Tree List<\/p>\n+

\n+
\n+ {\n+ treeDispatch({\n+ type: 'SELECT_ELEMENT_BY_ID',\n+ payload: id,\n+ });\n+ }}>\n+ inspect {name || 'N\/A'} ({id})\n+ <\/button>\n+ <\/div>\n+
\n+ Suspense ID:<\/strong> {id}\n+ <\/div>\n+
\n+ Parent ID:<\/strong> {parentID}\n+ <\/div>\n+
\n+ Children:<\/strong>{' '}\n+ {children.length === 0 ? '∅' : children.join(', ')}\n+ <\/div>\n+ <\/li>\n+ );\n+ })}\n+ <\/ul>\n+ <\/div>\n+ );\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/frontend\/types.js b\/packages\/react-devtools-shared\/src\/frontend\/types.js\nindex e4a4c5400b..3fff08877c 100644\n--- a\/packages\/react-devtools-shared\/src\/frontend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/frontend\/types.js\n@@ -184,6 +184,13 @@ export type Element = {\n compiledWithForget: boolean,\n };\n \n+export type SuspenseNode = {\n+ id: Element['id'],\n+ parentID: SuspenseNode['id'] | 0,\n+ children: Array,\n+ name: string | null,\n+};\n+\n \/\/ Serialized version of ReactIOInfo\n export type SerializedIOInfo = {\n name: string,\ndiff --git a\/packages\/react-devtools-shared\/src\/utils.js b\/packages\/react-devtools-shared\/src\/utils.js\nindex 325224844d..ef5e7450ac 100644\n--- a\/packages\/react-devtools-shared\/src\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/utils.js\n@@ -40,6 +40,9 @@ import {\n SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,\n SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,\n SESSION_STORAGE_RECORD_TIMELINE_KEY,\n+ SUSPENSE_TREE_OPERATION_ADD,\n+ SUSPENSE_TREE_OPERATION_REMOVE,\n+ SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,\n } from '.\/constants';\n import {\n ComponentFilterElementType,\n@@ -318,7 +321,7 @@ export function printOperationsArray(operations: Array) {\n \/\/ The profiler UI uses them lazily in order to generate the tree.\n i += 3;\n break;\n- case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:\n+ case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {\n const id = operations[i + 1];\n const numErrors = operations[i + 2];\n const numWarnings = operations[i + 3];\n@@ -329,6 +332,45 @@ export function printOperationsArray(operations: Array) {\n `Node ${id} has ${numErrors} errors and ${numWarnings} warnings`,\n );\n break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_ADD: {\n+ const fiberID = operations[i + 1];\n+ const parentID = operations[i + 2];\n+ const nameStringID = operations[i + 3];\n+ const name = stringTable[nameStringID];\n+\n+ i += 4;\n+\n+ logs.push(\n+ `Add suspense node ${fiberID} (${String(name)}) under ${parentID}`,\n+ );\n+ break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_REMOVE: {\n+ const removeLength = ((operations[i + 1]: any): number);\n+ i += 2;\n+\n+ for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {\n+ const id = ((operations[i]: any): number);\n+ i += 1;\n+\n+ logs.push(`Remove suspense node ${id}`);\n+ }\n+\n+ break;\n+ }\n+ case SUSPENSE_TREE_OPERATION_REORDER_CHILDREN: {\n+ const id = ((operations[i + 1]: any): number);\n+ const numChildren = ((operations[i + 2]: any): number);\n+ i += 3;\n+ const children = operations.slice(i, i + numChildren);\n+ i += numChildren;\n+\n+ logs.push(\n+ `Re-order suspense node ${id} children ${children.join(',')}`,\n+ );\n+ break;\n+ }\n default:\n throw Error(`Unsupported Bridge operation \"${operation}\"`);\n }\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/SuspenseTree\/index.js b\/packages\/react-devtools-shell\/src\/app\/SuspenseTree\/index.js\nindex 846e3f8ef6..c18a6315a6 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/SuspenseTree\/index.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/SuspenseTree\/index.js\n@@ -12,6 +12,7 @@ import {\n Fragment,\n Suspense,\n unstable_SuspenseList as SuspenseList,\n+ useReducer,\n useState,\n } from 'react';\n \n@@ -26,10 +27,156 @@ function SuspenseTree(): React.Node {\n \n \n \n+ \n <\/Fragment>\n );\n }\n \n+function IgnoreMePassthrough({children}: {children: React$Node}) {\n+ return {children}<\/span>;\n+}\n+\n+const suspenseTreeOperationsChildren = {\n+ a: (\n+ \n+
A<\/p>\n+ <\/Suspense>\n+ ),\n+ b: (\n+
\n+ B<\/Suspense>\n+ <\/div>\n+ ),\n+ c: (\n+
\n+ \n+ C\n+ <\/Suspense>\n+ <\/p>\n+ ),\n+ d: (\n+ \n+
D<\/div>\n+ <\/Suspense>\n+ ),\n+ e: (\n+ \n+ \n+ \n+
e1<\/p>\n+ <\/Suspense>\n+ <\/IgnoreMePassthrough>\n+ \n+ \n+
e2<\/div>\n+ <\/Suspense>\n+ <\/IgnoreMePassthrough>\n+ <\/Suspense>\n+ ),\n+ eReordered: (\n+ \n+ \n+ \n+
e2<\/div>\n+ <\/Suspense>\n+ <\/IgnoreMePassthrough>\n+ \n+ \n+
e1<\/p>\n+ <\/Suspense>\n+ <\/IgnoreMePassthrough>\n+ <\/Suspense>\n+ ),\n+};\n+\n+function SuspenseTreeOperations() {\n+ const initialChildren: any[] = [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.e,\n+ ];\n+ const [children, dispatch] = useReducer(\n+ (\n+ pendingState: any[],\n+ action: 'toggle-mount' | 'reorder' | 'reorder-within-filtered',\n+ ): React$Node[] => {\n+ switch (action) {\n+ case 'toggle-mount':\n+ if (pendingState.length === 5) {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ ];\n+ } else {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.e,\n+ ];\n+ }\n+ case 'reorder':\n+ if (pendingState[1] === suspenseTreeOperationsChildren.b) {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.e,\n+ ];\n+ } else {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.e,\n+ ];\n+ }\n+ case 'reorder-within-filtered':\n+ if (pendingState[4] === suspenseTreeOperationsChildren.e) {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.eReordered,\n+ ];\n+ } else {\n+ return [\n+ suspenseTreeOperationsChildren.a,\n+ suspenseTreeOperationsChildren.b,\n+ suspenseTreeOperationsChildren.c,\n+ suspenseTreeOperationsChildren.d,\n+ suspenseTreeOperationsChildren.e,\n+ ];\n+ }\n+ default:\n+ return pendingState;\n+ }\n+ },\n+ initialChildren,\n+ );\n+\n+ return (\n+ <>\n+

dillon1000/react

Files changed