{"body":"","commit":{"authorEmail":"sebastian.silbermann@vercel.com","revision":"cb1e73be043513fd52fdf21366aa35c141ec5f1a","authoredAt":"2025-08-26T17:22:30+02:00","subject":"[DevTools] Batch Suspense toggles when advancing the Suspense timeline (#34251)","shortRevision":"cb1e73be04","authorName":"Sebastian \"Sebbie\" Silbermann"},"parents":["cacc20e37c9ec320b5d2aa13f86cfc999d269d6b"],"files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/__tests__\/store-test.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/agent.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/flight\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/bridge.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/store.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.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/utils.js"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\nindex 330c8ab89c..2d092ceb0f 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/store-test.js\n@@ -901,6 +901,94 @@ describe('Store', () => {\n `);\n });\n \n+ \/\/ @reactVersion >= 18.0\n+ it('can override multiple Suspense simultaneously', async () => {\n+ const Component = () => {\n+ return

Hello<\/div>;\n+ };\n+ const App = () => (\n+ \n+ \n+ }>\n+ \n+ }>\n+ \n+ <\/React.Suspense>\n+ }>\n+ \n+ <\/React.Suspense>\n+ }>\n+ \n+ <\/React.Suspense>\n+ \n+ <\/React.Suspense>\n+ <\/React.Fragment>\n+ );\n+\n+ await actAsync(() => render());\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ [shell]\n+ \n+ \n+ \n+ \n+ `);\n+\n+ const rendererID = getRendererID();\n+ const rootID = store.getRootIDForElement(store.getElementIDAtIndex(0));\n+ await actAsync(() => {\n+ agent.overrideSuspenseMilestone({\n+ rendererID,\n+ rootID,\n+ suspendedSet: [\n+ store.getElementIDAtIndex(4),\n+ store.getElementIDAtIndex(8),\n+ ],\n+ });\n+ });\n+\n+ expect(store).toMatchInlineSnapshot(`\n+ [root]\n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ ▾ \n+ \n+ \n+ [shell]\n+ \n+ \n+ \n+ \n+ `);\n+ });\n+\n it('should display a partially rendered SuspenseList', async () => {\n const Loading = () =>

Loading...<\/div>;\n const SuspendingComponent = () => {\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/agent.js b\/packages\/react-devtools-shared\/src\/backend\/agent.js\nindex 1ae7f5dfb1..98091a06d6 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/agent.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/agent.js\n@@ -130,6 +130,12 @@ type OverrideSuspenseParams = {\n forceFallback: boolean,\n };\n \n+type OverrideSuspenseMilestoneParams = {\n+ rendererID: number,\n+ rootID: number,\n+ suspendedSet: Array,\n+};\n+\n type PersistedSelection = {\n rendererID: number,\n path: Array,\n@@ -198,6 +204,10 @@ export default class Agent extends EventEmitter<{\n bridge.addListener('logElementToConsole', this.logElementToConsole);\n bridge.addListener('overrideError', this.overrideError);\n bridge.addListener('overrideSuspense', this.overrideSuspense);\n+ bridge.addListener(\n+ 'overrideSuspenseMilestone',\n+ this.overrideSuspenseMilestone,\n+ );\n bridge.addListener('overrideValueAtPath', this.overrideValueAtPath);\n bridge.addListener('reloadAndProfile', this.reloadAndProfile);\n bridge.addListener('renamePath', this.renamePath);\n@@ -556,6 +566,21 @@ export default class Agent extends EventEmitter<{\n }\n };\n \n+ overrideSuspenseMilestone: OverrideSuspenseMilestoneParams => void = ({\n+ rendererID,\n+ rootID,\n+ suspendedSet,\n+ }) => {\n+ const renderer = this._rendererInterfaces[rendererID];\n+ if (renderer == null) {\n+ console.warn(\n+ `Invalid renderer id \"${rendererID}\" to override suspense milestone`,\n+ );\n+ } else {\n+ renderer.overrideSuspenseMilestone(rootID, suspendedSet);\n+ }\n+ };\n+\n overrideValueAtPath: OverrideValueAtPathParams => void = ({\n hookID,\n id,\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\nindex d2f5c801aa..7fd7000d44 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/fiber\/renderer.js\n@@ -2366,6 +2366,7 @@ export function attach(\n !isProductionBuildOfRenderer && StrictModeBits !== 0 ? 1 : 0,\n );\n pushOperation(hasOwnerMetadata ? 1 : 0);\n+ pushOperation(supportsTogglingSuspense ? 1 : 0);\n \n if (isProfiling) {\n if (displayNamesByRootID !== null) {\n@@ -7455,13 +7456,6 @@ export function attach(\n }\n \n function overrideSuspense(id: number, forceFallback: boolean) {\n- if (!supportsTogglingSuspense) {\n- \/\/ TODO:: Add getter to decide if overrideSuspense is available.\n- \/\/ Currently only available on inspectElement.\n- \/\/ Probably need a different affordance to batch since the timeline\n- \/\/ fallback is not the same as resuspending.\n- return;\n- }\n if (\n typeof setSuspenseHandler !== 'function' ||\n typeof scheduleUpdate !== 'function'\n@@ -7506,6 +7500,58 @@ export function attach(\n scheduleUpdate(fiber);\n }\n \n+ \/**\n+ * Resets the all other roots of this renderer.\n+ * @param rootID The root that contains this milestone\n+ * @param suspendedSet List of IDs of SuspenseComponent Fibers\n+ *\/\n+ function overrideSuspenseMilestone(\n+ rootID: FiberInstance['id'],\n+ suspendedSet: Array,\n+ ) {\n+ if (\n+ typeof setSuspenseHandler !== 'function' ||\n+ typeof scheduleUpdate !== 'function'\n+ ) {\n+ throw new Error(\n+ 'Expected overrideSuspenseMilestone() to not get called for earlier React versions.',\n+ );\n+ }\n+\n+ \/\/ TODO: Allow overriding the timeline for the specified root.\n+ forceFallbackForFibers.clear();\n+\n+ for (let i = 0; i < suspendedSet.length; ++i) {\n+ const instance = idToDevToolsInstanceMap.get(suspendedSet[i]);\n+ if (instance === undefined) {\n+ console.warn(\n+ `Could not suspend ID '${suspendedSet[i]}' since the instance can't be found.`,\n+ );\n+ continue;\n+ }\n+\n+ if (instance.kind === FIBER_INSTANCE) {\n+ const fiber = instance.data;\n+ forceFallbackForFibers.add(fiber);\n+ \/\/ We could find a minimal set that covers all the Fibers in this suspended set.\n+ \/\/ For now we rely on React's batching of updates.\n+ scheduleUpdate(fiber);\n+ } else {\n+ console.warn(`Cannot not suspend ID '${suspendedSet[i]}'.`);\n+ }\n+ }\n+\n+ if (forceFallbackForFibers.size > 0) {\n+ \/\/ First override is added. Switch React to slower path.\n+ \/\/ TODO: Semantics for suspending a timeline are different. We want a suspended\n+ \/\/ timeline to act like a first reveal which is relevant for SuspenseList.\n+ \/\/ Resuspending would not affect rows in SuspenseList\n+ setSuspenseHandler(shouldSuspendFiberAccordingToSet);\n+ } else {\n+ setSuspenseHandler(shouldSuspendFiberAlwaysFalse);\n+ }\n+ }\n+\n \/\/ Remember if we're trying to restore the selection after reload.\n \/\/ In that case, we'll do some extra checks for matching mounts.\n let trackedPath: Array | null = null;\n@@ -8006,6 +8052,7 @@ export function attach(\n onErrorOrWarning,\n overrideError,\n overrideSuspense,\n+ overrideSuspenseMilestone,\n overrideValueAtPath,\n renamePath,\n renderer,\n@@ -8014,6 +8061,7 @@ export function attach(\n startProfiling,\n stopProfiling,\n storeAsGlobal,\n+ supportsTogglingSuspense,\n updateComponentFilters,\n getEnvironmentNames,\n ...internalMcpFunctions,\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/flight\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/flight\/renderer.js\nindex 9cdd63e150..75763b1f18 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/flight\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/flight\/renderer.js\n@@ -140,6 +140,8 @@ export function attach(\n \/\/ The changes will be flushed later when we commit this tree to Fiber.\n }\n \n+ const supportsTogglingSuspense = false;\n+\n return {\n cleanup() {},\n clearErrorsAndWarnings() {},\n@@ -202,6 +204,7 @@ export function attach(\n onErrorOrWarning,\n overrideError() {},\n overrideSuspense() {},\n+ overrideSuspenseMilestone() {},\n overrideValueAtPath() {},\n renamePath() {},\n renderer,\n@@ -210,6 +213,7 @@ export function attach(\n startProfiling() {},\n stopProfiling() {},\n storeAsGlobal() {},\n+ supportsTogglingSuspense,\n updateComponentFilters() {},\n getEnvironmentNames() {\n return [];\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\nindex d1623ff24b..2915d2cd30 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/legacy\/renderer.js\n@@ -180,6 +180,8 @@ export function attach(\n };\n }\n \n+ const supportsTogglingSuspense = false;\n+\n function getDisplayNameForElementID(id: number): string | null {\n const internalInstance = idToInternalInstanceMap.get(id);\n return internalInstance ? getData(internalInstance).displayName : null;\n@@ -408,6 +410,7 @@ export function attach(\n pushOperation(0); \/\/ Profiling flag\n pushOperation(0); \/\/ StrictMode supported?\n pushOperation(hasOwnerMetadata ? 1 : 0);\n+ pushOperation(supportsTogglingSuspense ? 1 : 0);\n } else {\n const type = getElementType(internalInstance);\n const {displayName, key} = getData(internalInstance);\n@@ -1070,6 +1073,9 @@ export function attach(\n const overrideSuspense = () => {\n throw new Error('overrideSuspense not supported by this renderer');\n };\n+ const overrideSuspenseMilestone = () => {\n+ throw new Error('overrideSuspenseMilestone not supported by this renderer');\n+ };\n const startProfiling = () => {\n \/\/ Do not throw, since this would break a multi-root scenario where v15 and v16 were both present.\n };\n@@ -1153,6 +1159,7 @@ export function attach(\n logElementToConsole,\n overrideError,\n overrideSuspense,\n+ overrideSuspenseMilestone,\n overrideValueAtPath,\n renamePath,\n getElementAttributeByPath,\n@@ -1163,6 +1170,7 @@ export function attach(\n startProfiling,\n stopProfiling,\n storeAsGlobal,\n+ supportsTogglingSuspense,\n updateComponentFilters,\n getEnvironmentNames,\n };\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 12b082aeb2..9d3e5a0d04 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -437,6 +437,10 @@ export type RendererInterface = {\n onErrorOrWarning?: OnErrorOrWarning,\n overrideError: (id: number, forceError: boolean) => void,\n overrideSuspense: (id: number, forceFallback: boolean) => void,\n+ overrideSuspenseMilestone: (\n+ rootID: number,\n+ suspendedSet: Array,\n+ ) => void,\n overrideValueAtPath: (\n type: Type,\n id: number,\n@@ -469,6 +473,7 @@ export type RendererInterface = {\n path: Array,\n count: number,\n ) => void,\n+ supportsTogglingSuspense: boolean,\n updateComponentFilters: (componentFilters: Array) => void,\n getEnvironmentNames: () => Array,\n \ndiff --git a\/packages\/react-devtools-shared\/src\/bridge.js b\/packages\/react-devtools-shared\/src\/bridge.js\nindex ccc66744a7..616f2d3d3e 100644\n--- a\/packages\/react-devtools-shared\/src\/bridge.js\n+++ b\/packages\/react-devtools-shared\/src\/bridge.js\n@@ -27,7 +27,7 @@ export type BridgeProtocol = {\n \/\/ Version supported by the current frontend\/backend.\n version: number,\n \n- \/\/ NPM version range that also supports this version.\n+ \/\/ NPM version range of `react-devtools-inline` that also supports this version.\n \/\/ Note that 'maxNpmVersion' is only set when the version is bumped.\n minNpmVersion: string,\n maxNpmVersion: string | null,\n@@ -65,6 +65,12 @@ export const BRIDGE_PROTOCOL: Array = [\n {\n version: 2,\n minNpmVersion: '4.22.0',\n+ maxNpmVersion: '6.2.0',\n+ },\n+ \/\/ Version 3 adds supports-toggling-suspense bit to add-root\n+ {\n+ version: 3,\n+ minNpmVersion: '6.2.0',\n maxNpmVersion: null,\n },\n ];\n@@ -134,6 +140,12 @@ type OverrideSuspense = {\n forceFallback: boolean,\n };\n \n+type OverrideSuspenseMilestone = {\n+ rendererID: number,\n+ rootID: number,\n+ suspendedSet: Array,\n+};\n+\n type CopyElementPathParams = {\n ...ElementAndRendererID,\n path: Array,\n@@ -231,6 +243,7 @@ type FrontendEvents = {\n logElementToConsole: [ElementAndRendererID],\n overrideError: [OverrideError],\n overrideSuspense: [OverrideSuspense],\n+ overrideSuspenseMilestone: [OverrideSuspenseMilestone],\n overrideValueAtPath: [OverrideValueAtPath],\n profilingData: [ProfilingDataBackend],\n reloadAndProfile: [ReloadAndProfilingParams],\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/store.js b\/packages\/react-devtools-shared\/src\/devtools\/store.js\nindex 664b65bf7d..02e60a080a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/store.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/store.js\n@@ -89,6 +89,7 @@ export type Capabilities = {\n supportsBasicProfiling: boolean,\n hasOwnerMetadata: boolean,\n supportsStrictMode: boolean,\n+ supportsTogglingSuspense: boolean,\n supportsTimeline: boolean,\n };\n \n@@ -491,6 +492,14 @@ export default class Store extends EventEmitter<{\n );\n }\n \n+ supportsTogglingSuspense(rootID: Element['id']): boolean {\n+ const capabilities = this._rootIDToCapabilities.get(rootID);\n+ if (capabilities === undefined) {\n+ throw new Error(`No capabilities registered for root ${rootID}`);\n+ }\n+ return capabilities.supportsTogglingSuspense;\n+ }\n+\n \/\/ This build of DevTools supports the Timeline profiler.\n \/\/ This is a static flag, controlled by the Store config.\n get supportsTimeline(): boolean {\n@@ -1080,6 +1089,7 @@ export default class Store extends EventEmitter<{\n \n let supportsStrictMode = false;\n let hasOwnerMetadata = false;\n+ let supportsTogglingSuspense = false;\n \n \/\/ If we don't know the bridge protocol, guess that we're dealing with the latest.\n \/\/ If we do know it, we can take it into consideration when parsing operations.\n@@ -1092,6 +1102,9 @@ export default class Store extends EventEmitter<{\n \n hasOwnerMetadata = operations[i] > 0;\n i++;\n+\n+ supportsTogglingSuspense = operations[i] > 0;\n+ i++;\n }\n \n this._roots = this._roots.concat(id);\n@@ -1100,6 +1113,7 @@ export default class Store extends EventEmitter<{\n supportsBasicProfiling,\n hasOwnerMetadata,\n supportsStrictMode,\n+ supportsTogglingSuspense,\n supportsTimeline,\n });\n \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 e0bd4e7c73..4b4e721ced 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@@ -208,6 +208,7 @@ function updateTree(\n i++; \/\/ Profiling flag\n i++; \/\/ supportsStrictMode flag\n i++; \/\/ hasOwnerMetadata flag\n+ i++; \/\/ supportsTogglingSuspense flag\n \n if (__DEBUG__) {\n debug('Add', `new root fiber ${id}`);\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.css\nindex 3a7bb07350..dc82b25da2 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.css\n@@ -115,4 +115,5 @@\n \n .Timeline {\n flex-grow: 1;\n+ align-self: anchor-center;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\nindex f07f4efb2c..5c053d9c73 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.css\n@@ -1,5 +1,18 @@\n-.SuspenseTimelineSlider {\n+.SuspenseTimelineContainer {\n width: 100%;\n+ display: flex;\n+ flex-direction: row;\n+}\n+\n+.SuspenseTimelineInput {\n+ display: flex;\n+ flex-direction: column;\n+ flex-grow: 1;\n+}\n+\n+.SuspenseTimelineRootSwitcher {\n+ height: fit-content;\n+ max-width: 3rem;\n }\n \n .SuspenseTimelineMarkers {\n@@ -18,3 +31,4 @@\n .SuspenseTimelineActiveMarker {\n visibility: visible;\n }\n+\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\nindex 413760d078..78a2bd1135 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTimeline.js\n@@ -29,34 +29,38 @@ import typeof {\n SyntheticPointerEvent,\n } from 'react-dom-bindings\/src\/events\/SyntheticEvent';\n \n-\/\/ TODO: This returns the roots which would mean we attempt to suspend the shell.\n-\/\/ Suspending the shell is currently not supported and we don't have a good view\n-\/\/ for inspecting the root. But we probably should?\n-function getDocumentOrderSuspense(\n+function getSuspendableDocumentOrderSuspense(\n store: Store,\n- roots: $ReadOnlyArray,\n+ rootID: Element['id'] | void,\n ): Array {\n+ if (rootID === undefined) {\n+ return [];\n+ }\n+ const root = store.getElementByID(rootID);\n+ if (root === null) {\n+ return [];\n+ }\n+ if (!store.supportsTogglingSuspense(root.id)) {\n+ return [];\n+ }\n const suspenseTreeList: SuspenseNode[] = [];\n- for (let i = 0; i < roots.length; i++) {\n- const root = store.getElementByID(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+ 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+ \/\/ Don't include the root. It's currently not supported to suspend the shell.\n+ if (current !== suspense) {\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+ \/\/ 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@@ -65,22 +69,24 @@ function getDocumentOrderSuspense(\n return suspenseTreeList;\n }\n \n-export default function SuspenseTimeline(): React$Node {\n+function SuspenseTimelineInput({rootID}: {rootID: Element['id'] | void}) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n const dispatch = useContext(TreeDispatcherContext);\n- const {shells} = useContext(SuspenseTreeStateContext);\n-\n- const timeline = useMemo(() => {\n- return getDocumentOrderSuspense(store, shells);\n- }, [store, shells]);\n-\n const {highlightHostInstance, clearHighlightHostInstance} =\n useHighlightHostInstance();\n \n+ const timeline = useMemo(() => {\n+ return getSuspendableDocumentOrderSuspense(store, rootID);\n+ }, [store, rootID]);\n+\n const inputRef = useRef(null);\n const inputBBox = useRef(null);\n useLayoutEffect(() => {\n+ if (timeline.length === 0) {\n+ return;\n+ }\n+\n const input = inputRef.current;\n if (input === null) {\n throw new Error('Expected an input HTML element to be present.');\n@@ -95,12 +101,12 @@ export default function SuspenseTimeline(): React$Node {\n inputBBox.current = null;\n observer.disconnect();\n };\n- }, []);\n+ }, [timeline.length]);\n \n const min = 0;\n const max = timeline.length > 0 ? timeline.length - 1 : 0;\n-\n const [value, setValue] = useState(max);\n+\n if (value > max) {\n \/\/ TODO: Handle timeline changes\n setValue(max);\n@@ -130,6 +136,26 @@ export default function SuspenseTimeline(): React$Node {\n });\n }, [timeline, value]);\n \n+ if (rootID === undefined) {\n+ return

Root not found.<\/div>;\n+ }\n+\n+ if (!store.supportsTogglingSuspense(rootID)) {\n+ return (\n+

\n+ Can't step through Suspense in production apps.\n+ <\/div>\n+ );\n+ }\n+\n+ if (timeline.length === 0) {\n+ return (\n+

\n+ Root contains no Suspense nodes.\n+ <\/div>\n+ );\n+ }\n+\n function handleChange(event: SyntheticEvent) {\n const pendingValue = +event.currentTarget.value;\n for (let i = 0; i < timeline.length; i++) {\n@@ -193,7 +219,7 @@ export default function SuspenseTimeline(): React$Node {\n }\n \n return (\n-

\n+

\n \n );\n }\n+\n+export default function SuspenseTimeline(): React$Node {\n+ const store = useContext(StoreContext);\n+ const {shells} = useContext(SuspenseTreeStateContext);\n+\n+ const defaultSelectedRootID = shells.find(rootID => {\n+ const suspense = store.getSuspenseByID(rootID);\n+ return (\n+ store.supportsTogglingSuspense(rootID) &&\n+ suspense !== null &&\n+ suspense.children.length > 1\n+ );\n+ });\n+ const [selectedRootID, setSelectedRootID] = useState(defaultSelectedRootID);\n+\n+ if (selectedRootID === undefined && defaultSelectedRootID !== undefined) {\n+ setSelectedRootID(defaultSelectedRootID);\n+ }\n+\n+ function handleChange(event: SyntheticEvent) {\n+ const newRootID = +event.currentTarget.value;\n+ \/\/ TODO: scrollIntoView both suspense rects and host instance.\n+ setSelectedRootID(newRootID);\n+ }\n+\n+ return (\n+

\n+ \n+ {shells.length > 0 && (\n+ \n+ {shells.map(rootID => {\n+ \/\/ TODO: Use name\n+ const name = '#' + rootID;\n+ \/\/ TODO: Highlight host on hover\n+ return (\n+ \n+ {name}\n+ <\/option>\n+ );\n+ })}\n+ <\/select>\n+ )}\n+ <\/div>\n+ );\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/utils.js b\/packages\/react-devtools-shared\/src\/utils.js\nindex 34c258ebe2..b404608e55 100644\n--- a\/packages\/react-devtools-shared\/src\/utils.js\n+++ b\/packages\/react-devtools-shared\/src\/utils.js\n@@ -261,6 +261,7 @@ export function printOperationsArray(operations: Array) {\n i++; \/\/ supportsProfiling\n i++; \/\/ supportsStrictMode\n i++; \/\/ hasOwnerMetadata\n+ i++; \/\/ supportsTogglingSuspense\n } else {\n const parentID = ((operations[i]: any): number);\n i++;\n"}

dillon1000/react

Files changed