[DevTools] Ignore renderers without support for a dedicated Suspense tree

Mostly so that we don't trigger unnecessary warnings in older React versions.

Author: eps1lon

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

@@ -1065,6 +1065,7 @@ export function attach(
     scheduleUpdate,
     getCurrentFiber,
   } = renderer;
+  const supportsSuspenseTree = true;
   const supportsTogglingError =
     typeof setErrorHandler === 'function' &&
     typeof scheduleUpdate === 'function';
@@ -2394,6 +2395,7 @@ 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

@@ -181,6 +181,7 @@ export function attach(
   }
 
   const supportsTogglingSuspense = false;
+  const supportsSuspenseTree = false;
 
   function getDisplayNameForElementID(id: number): string | null {
     const internalInstance = idToInternalInstanceMap.get(id);
@@ -411,6 +412,7 @@ export function attach(
       pushOperation(0); // StrictMode supported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
       pushOperation(supportsTogglingSuspense ? 1 : 0);
+      pushOperation(supportsSuspenseTree ? 1 : 0);
     } else {
       const type = getElementType(internalInstance);
       const {displayName, key} = getData(internalInstance);

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

@@ -90,6 +90,7 @@ export type Capabilities = {
   supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
   supportsStrictMode: boolean,
+  supportsSuspenseTree: boolean,
   supportsTogglingSuspense: boolean,
   supportsTimeline: boolean,
 };
@@ -493,6 +494,14 @@ 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) {
@@ -895,11 +904,14 @@ export default class Store extends EventEmitter<{
     if (root === null) {
       return [];
     }
-    if (!this.supportsTogglingSuspense(root.id)) {
+    if (
+      !this.supportsTogglingSuspense(rootID) ||
+      !this.supportsSuspenseTree(rootID)
+    ) {
       return [];
     }
     const list: SuspenseNode['id'][] = [];
-    const suspense = this.getSuspenseByID(root.id);
+    const suspense = this.getSuspenseByID(rootID);
     if (suspense !== null) {
       const stack = [suspense];
       while (stack.length > 0) {
@@ -1170,6 +1182,7 @@ 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.
@@ -1185,6 +1198,9 @@ export default class Store extends EventEmitter<{
 
               supportsTogglingSuspense = operations[i] > 0;
               i++;
+
+              supportsSuspenseTree = operations[i] > 0;
+              i++;
             }
 
             this._roots = this._roots.concat(id);
@@ -1193,6 +1209,7 @@ 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) {
+      if (includeSuspense && store.supportsSuspenseTree(rootID)) {
         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,6 +210,7 @@ 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,7 +190,9 @@ function getDocumentBoundingRect(
 
   for (let i = 0; i < roots.length; i++) {
     const rootID = roots[i];
-    const root = store.getSuspenseByID(rootID);
+    const root = store.supportsSuspenseTree(rootID)
+      ? store.getSuspenseByID(rootID)
+      : null;
     if (root === null) {
       continue;
     }

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

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

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

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

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

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