[DevTools] Record Suspense node for roots in legacy renderers

Author: eps1lon

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -1065,7 +1065,6 @@ export function attach(
     scheduleUpdate,
     getCurrentFiber,
   } = renderer;
-  const supportsSuspenseTree = true;
   const supportsTogglingError =
     typeof setErrorHandler === 'function' &&
     typeof scheduleUpdate === 'function';
@@ -2395,7 +2394,6 @@ export function attach(
       );
       pushOperation(hasOwnerMetadata ? 1 : 0);
       pushOperation(supportsTogglingSuspense ? 1 : 0);
-      pushOperation(supportsSuspenseTree ? 1 : 0);
 
       if (isProfiling) {
         if (displayNamesByRootID !== null) {

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -34,6 +34,8 @@ import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REORDER_CHILDREN,
+  SUSPENSE_TREE_OPERATION_ADD,
+  SUSPENSE_TREE_OPERATION_REMOVE,
   UNKNOWN_SUSPENDERS_NONE,
 } from '../../constants';
 import {decorateMany, forceUpdate, restoreMany} from './utils';
@@ -181,7 +183,6 @@ export function attach(
   }
 
   const supportsTogglingSuspense = false;
-  const supportsSuspenseTree = false;
 
   function getDisplayNameForElementID(id: number): string | null {
     const internalInstance = idToInternalInstanceMap.get(id);
@@ -412,7 +413,13 @@ export function attach(
       pushOperation(0); // StrictMode supported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
       pushOperation(supportsTogglingSuspense ? 1 : 0);
-      pushOperation(supportsSuspenseTree ? 1 : 0);
+
+      pushOperation(SUSPENSE_TREE_OPERATION_ADD);
+      pushOperation(id);
+      pushOperation(parentID);
+      pushOperation(getStringID(null)); // name
+      // TODO: Measure rect of root
+      pushOperation(-1);
     } else {
       const type = getElementType(internalInstance);
       const {displayName, key} = getData(internalInstance);
@@ -451,7 +458,12 @@ export function attach(
   }
 
   function recordUnmount(internalInstance: InternalInstance, id: number) {
-    pendingUnmountedIDs.push(id);
+    const isRoot = parentIDStack.length === 0;
+    if (isRoot) {
+      pendingUnmountedRootID = id;
+    } else {
+      pendingUnmountedIDs.push(id);
+    }
     idToInternalInstanceMap.delete(id);
   }
 
@@ -521,6 +533,8 @@ export function attach(
         // All unmounts are batched in a single message.
         // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
         (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
+        // [SUSPENSE_TREE_OPERATION_REMOVE, 1, pendingUnmountedRootID]
+        (pendingUnmountedRootID === null ? 0 : 3) +
         // Mount operations
         pendingOperations.length,
     );
@@ -557,6 +571,10 @@ export function attach(
       if (pendingUnmountedRootID !== null) {
         operations[i] = pendingUnmountedRootID;
         i++;
+
+        operations[i++] = SUSPENSE_TREE_OPERATION_REMOVE;
+        operations[i++] = 1;
+        operations[i++] = pendingUnmountedRootID;
       }
     }
 

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

@@ -90,7 +90,6 @@ export type Capabilities = {
   supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
   supportsStrictMode: boolean,
-  supportsSuspenseTree: boolean,
   supportsTogglingSuspense: boolean,
   supportsTimeline: boolean,
 };
@@ -494,14 +493,6 @@ export default class Store extends EventEmitter<{
     );
   }
 
-  supportsSuspenseTree(rootID: Element['id']): boolean {
-    const capabilities = this._rootIDToCapabilities.get(rootID);
-    if (capabilities === undefined) {
-      throw new Error(`No capabilities registered for root ${rootID}`);
-    }
-    return capabilities.supportsSuspenseTree;
-  }
-
   supportsTogglingSuspense(rootID: Element['id']): boolean {
     const capabilities = this._rootIDToCapabilities.get(rootID);
     if (capabilities === undefined) {
@@ -904,10 +895,7 @@ export default class Store extends EventEmitter<{
     if (root === null) {
       return [];
     }
-    if (
-      !this.supportsTogglingSuspense(rootID) ||
-      !this.supportsSuspenseTree(rootID)
-    ) {
+    if (!this.supportsTogglingSuspense(rootID)) {
       return [];
     }
     const list: SuspenseNode['id'][] = [];
@@ -1182,7 +1170,6 @@ export default class Store extends EventEmitter<{
             let supportsStrictMode = false;
             let hasOwnerMetadata = false;
             let supportsTogglingSuspense = false;
-            let supportsSuspenseTree = false;
 
             // If we don't know the bridge protocol, guess that we're dealing with the latest.
             // If we do know it, we can take it into consideration when parsing operations.
@@ -1198,9 +1185,6 @@ export default class Store extends EventEmitter<{
 
               supportsTogglingSuspense = operations[i] > 0;
               i++;
-
-              supportsSuspenseTree = operations[i] > 0;
-              i++;
             }
 
             this._roots = this._roots.concat(id);
@@ -1209,7 +1193,6 @@ export default class Store extends EventEmitter<{
               supportsBasicProfiling,
               hasOwnerMetadata,
               supportsStrictMode,
-              supportsSuspenseTree,
               supportsTogglingSuspense,
               supportsTimeline,
             });

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

@@ -176,7 +176,7 @@ export function printStore(
 
       rootWeight += weight;
 
-      if (includeSuspense && store.supportsSuspenseTree(rootID)) {
+      if (includeSuspense) {
         const root = store.getSuspenseByID(rootID);
         // Roots from legacy renderers don't have a separate Suspense tree
         if (root !== null) {

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -210,7 +210,6 @@ function updateTree(
           i++; // supportsStrictMode flag
           i++; // hasOwnerMetadata flag
           i++; // supportsTogglingSuspense flag
-          i++; // supportsSuspenseTree flag
 
           if (__DEBUG__) {
             debug('Add', `new root fiber ${id}`);

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

@@ -190,9 +190,7 @@ function getDocumentBoundingRect(
 
   for (let i = 0; i < roots.length; i++) {
     const rootID = roots[i];
-    const root = store.supportsSuspenseTree(rootID)
-      ? store.getSuspenseByID(rootID)
-      : null;
+    const root = store.getSuspenseByID(rootID);
     if (root === null) {
       continue;
     }

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

@@ -243,10 +243,7 @@ export default function SuspenseTimeline(): React$Node {
             const name = '#' + rootID;
             // TODO: Highlight host on hover
             return (
-              <option
-                key={rootID}
-                value={rootID}
-                disabled={!store.supportsSuspenseTree(rootID)}>
+              <option key={rootID} value={rootID}>
                 {name}
               </option>
             );

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

@@ -82,9 +82,7 @@ type Props = {
 
 function getDefaultRootID(store: Store): Element['id'] | null {
   const designatedRootID = store.roots.find(rootID => {
-    const suspense = store.supportsSuspenseTree(rootID)
-      ? store.getSuspenseByID(rootID)
-      : null;
+    const suspense = store.getSuspenseByID(rootID);
     return (
       store.supportsTogglingSuspense(rootID) &&
       suspense !== null &&

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

@@ -263,7 +263,6 @@ export function printOperationsArray(operations: Array<number>) {
           i++; // supportsStrictMode
           i++; // hasOwnerMetadata
           i++; // supportsTogglingSuspense
-          i++; // supportsSuspenseTree
         } else {
           const parentID = ((operations[i]: any): number);
           i++;