[DevTools] Preserve Suspense lineage when clicking through breadcrumbs

Author: eps1lon

packages/react-devtools-shared/src/devtools/store.js

@@ -111,7 +111,9 @@ export default class Store extends EventEmitter<{
   roots: [],
   rootSupportsBasicProfiling: [],
   rootSupportsTimelineProfiling: [],
-  suspenseTreeMutated: [],
+  suspenseTreeMutated: [
+    [Array<SuspenseNode['id']>, Map<SuspenseNode['id'], SuspenseNode['id']>],
+  ],
   supportsNativeStyleEditor: [],
   supportsReloadAndProfile: [],
   unsupportedBridgeProtocolDetected: [],
@@ -847,6 +849,76 @@ export default class Store extends EventEmitter<{
     return list;
   }
 
+  getSuspenseLineage(
+    suspenseID: SuspenseNode['id'],
+  ): $ReadOnlyArray<SuspenseNode['id']> {
+    const lineage: Array<SuspenseNode['id']> = [];
+    let next: null | SuspenseNode = this.getSuspenseByID(suspenseID);
+    while (next !== null) {
+      if (next.parentID === 0) {
+        next = null;
+      } else {
+        lineage.unshift(next.id);
+        next = this.getSuspenseByID(next.parentID);
+      }
+    }
+
+    return lineage;
+  }
+
+  /**
+   * Like {@link getRootIDForElement} but should be used for traversing Suspense since it works with disconnected nodes.
+   */
+  getSuspenseRootIDForSuspense(id: SuspenseNode['id']): number | null {
+    let current = this._idToSuspense.get(id);
+    while (current !== undefined) {
+      if (current.parentID === 0) {
+        return current.id;
+      } else {
+        current = this._idToSuspense.get(current.parentID);
+      }
+    }
+    return null;
+  }
+
+  getSuspendableDocumentOrderSuspense(
+    rootID: Element['id'] | void,
+  ): $ReadOnlyArray<SuspenseNode['id']> {
+    if (rootID === undefined) {
+      return [];
+    }
+    const root = this.getElementByID(rootID);
+    if (root === null) {
+      return [];
+    }
+    if (!this.supportsTogglingSuspense(root.id)) {
+      return [];
+    }
+    const suspenseTreeList: SuspenseNode['id'][] = [];
+    const suspense = this.getSuspenseByID(root.id);
+    if (suspense !== null) {
+      const stack = [suspense];
+      while (stack.length > 0) {
+        const current = stack.pop();
+        if (current === undefined) {
+          continue;
+        }
+        // Include the root even if we won't suspend it.
+        // You should be able to see what suspended the shell.
+        suspenseTreeList.push(current.id);
+        // Add children in reverse order to maintain document order
+        for (let j = current.children.length - 1; j >= 0; j--) {
+          const childSuspense = this.getSuspenseByID(current.children[j]);
+          if (childSuspense !== null) {
+            stack.push(childSuspense);
+          }
+        }
+      }
+    }
+
+    return suspenseTreeList;
+  }
+
   getRendererIDForElement(id: number): number | null {
     let current = this._idToElement.get(id);
     while (current !== undefined) {
@@ -1028,8 +1100,11 @@ export default class Store extends EventEmitter<{
     const rendererID = operations[0];
 
     const addedElementIDs: Array<number> = [];
+    const addedSuspenseIDs: Array<SuspenseNode['id']> = [];
     // This is a mapping of removed ID -> parent ID:
     const removedElementIDs: Map<number, number> = new Map();
+    const removedSuspenseIDs: Map<SuspenseNode['id'], SuspenseNode['id']> =
+      new Map();
     // We'll use the parent ID to adjust selection if it gets deleted.
 
     let i = 2;
@@ -1509,6 +1584,7 @@ export default class Store extends EventEmitter<{
             name,
             rects,
           });
+          addedSuspenseIDs.push(id);
 
           hasSuspenseTreeChanged = true;
           break;
@@ -1541,6 +1617,7 @@ export default class Store extends EventEmitter<{
             }
 
             this._idToSuspense.delete(id);
+            removedSuspenseIDs.set(id, parentID);
 
             let parentSuspense: ?SuspenseNode = null;
             if (parentID === 0) {
@@ -1748,7 +1825,7 @@ export default class Store extends EventEmitter<{
     }
 
     if (hasSuspenseTreeChanged) {
-      this.emit('suspenseTreeMutated');
+      this.emit('suspenseTreeMutated', [addedSuspenseIDs, removedSuspenseIDs]);
     }
 
     if (__DEBUG__) {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css

@@ -19,6 +19,8 @@
   background: var(--color-button-background);
   border: none;
   border-radius: 0.25rem;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
   padding: 0.25rem;
   white-space: nowrap;
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js

@@ -12,68 +12,52 @@ import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/Syntheti
 
 import * as React from 'react';
 import {useContext} from 'react';
-import {
-  TreeDispatcherContext,
-  TreeStateContext,
-} from '../Components/TreeContext';
+import {TreeDispatcherContext} from '../Components/TreeContext';
+import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseBreadcrumbs.css';
-import {useSuspenseStore} from './SuspenseTreeContext';
+import {
+  SuspenseTreeStateContext,
+  SuspenseTreeDispatcherContext,
+} from './SuspenseTreeContext';
 
 export default function SuspenseBreadcrumbs(): React$Node {
-  const store = useSuspenseStore();
-  const dispatch = useContext(TreeDispatcherContext);
-  const {inspectedElementID} = useContext(TreeStateContext);
+  const store = useContext(StoreContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
+  const {inspectedSuspenseID, lineage} = useContext(SuspenseTreeStateContext);
 
   const {highlightHostInstance, clearHighlightHostInstance} =
     useHighlightHostInstance();
 
-  // TODO: Use the nearest Suspense boundary
-  const inspectedSuspenseID = inspectedElementID;
-  if (inspectedSuspenseID === null) {
-    return null;
-  }
-
-  const suspense = store.getSuspenseByID(inspectedSuspenseID);
-  if (suspense === null) {
-    return null;
-  }
-
-  const lineage: SuspenseNode[] = [];
-  let next: null | SuspenseNode = suspense;
-  while (next !== null) {
-    if (next.parentID === 0) {
-      next = null;
-    } else {
-      lineage.unshift(next);
-      next = store.getSuspenseByID(next.parentID);
-    }
-  }
-
-  function handleClick(node: SuspenseNode, event: SyntheticMouseEvent) {
+  function handleClick(id: SuspenseNode['id'], event: SyntheticMouseEvent) {
     event.preventDefault();
-    dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: node.id});
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
+    suspenseTreeDispatch({type: 'SELECT_SUSPENSE_BY_ID', payload: id});
   }
 
   return (
     <ol className={styles.SuspenseBreadcrumbsList}>
-      {lineage.map((node, index) => {
-        return (
-          <li
-            key={node.id}
-            className={styles.SuspenseBreadcrumbsListItem}
-            aria-current={index === lineage.length - 1}
-            onPointerEnter={highlightHostInstance.bind(null, node.id)}
-            onPointerLeave={clearHighlightHostInstance}>
-            <button
-              className={styles.SuspenseBreadcrumbsButton}
-              onClick={handleClick.bind(null, node)}
-              type="button">
-              {node.name}
-            </button>
-          </li>
-        );
-      })}
+      {lineage !== null &&
+        lineage.map((id, index) => {
+          const node = store.getSuspenseByID(id);
+
+          return (
+            <li
+              key={id}
+              className={styles.SuspenseBreadcrumbsListItem}
+              aria-current={inspectedSuspenseID === id}
+              onPointerEnter={highlightHostInstance.bind(null, id)}
+              onPointerLeave={clearHighlightHostInstance}>
+              <button
+                className={styles.SuspenseBreadcrumbsButton}
+                onClick={handleClick.bind(null, id)}
+                type="button">
+                {node === null ? 'Unknown' : node.name}
+              </button>
+            </li>
+          );
+        })}
     </ol>
   );
 }

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

@@ -19,9 +19,13 @@ import {
   TreeDispatcherContext,
   TreeStateContext,
 } from '../Components/TreeContext';
+import {StoreContext} from '../context';
 import {useHighlightHostInstance} from '../hooks';
 import styles from './SuspenseRects.css';
-import {useSuspenseStore} from './SuspenseTreeContext';
+import {
+  SuspenseTreeStateContext,
+  SuspenseTreeDispatcherContext,
+} from './SuspenseTreeContext';
 import typeof {
   SyntheticMouseEvent,
   SyntheticPointerEvent,
@@ -44,8 +48,9 @@ function SuspenseRects({
 }: {
   suspenseID: SuspenseNode['id'],
 }): React$Node {
-  const dispatch = useContext(TreeDispatcherContext);
-  const store = useSuspenseStore();
+  const store = useContext(StoreContext);
+  const treeDispatch = useContext(TreeDispatcherContext);
+  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
 
   const {inspectedElementID} = useContext(TreeStateContext);
 
@@ -64,7 +69,11 @@ function SuspenseRects({
       return;
     }
     event.preventDefault();
-    dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: suspenseID});
+    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: suspenseID});
+    suspenseTreeDispatch({
+      type: 'SET_SUSPENSE_LINEAGE',
+      payload: suspenseID,
+    });
   }
 
   function handlePointerOver(event: SyntheticPointerEvent) {
@@ -157,7 +166,7 @@ function SuspenseRectsShell({
 }: {
   rootID: SuspenseNode['id'],
 }): React$Node {
-  const store = useSuspenseStore();
+  const store = useContext(StoreContext);
   const root = store.getSuspenseByID(rootID);
   if (root === null) {
     console.warn(`<Element> Could not find suspense node id ${rootID}`);
@@ -174,9 +183,9 @@ function SuspenseRectsShell({
 }
 
 function SuspenseRectsContainer(): React$Node {
-  const store = useSuspenseStore();
+  const store = useContext(StoreContext);
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
-  const roots = store.roots;
+  const {roots} = useContext(SuspenseTreeStateContext);
 
   const boundingRect = getDocumentBoundingRect(store, roots);