[MVP] Toggle suspense

shells/dev/app/SuspenseTree/index.js

@@ -0,0 +1,33 @@
+// @flow
+
+import React, { Suspense } from 'react';
+
+function SuspenseTree() {
+  return (
+    <>
+      <h1>Suspense</h1>
+      <Suspense fallback={<h2>Loading outer</h2>}>
+        <Parent />
+      </Suspense>
+    </>
+  );
+}
+
+function Parent() {
+  return (
+    <div>
+      <Suspense fallback={<h3>Loading inner 1</h3>}>
+        <Child>Hello</Child>
+      </Suspense>
+      <Suspense fallback={<h3>Loading inner 2</h3>}>
+        <Child>World</Child>
+      </Suspense>
+    </div>
+  );
+}
+
+function Child({ children }) {
+  return <p>{children}</p>;
+}
+
+export default SuspenseTree;

shells/dev/app/index.js

@@ -10,6 +10,7 @@ import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import ToDoList from './ToDoList';
+import SuspenseTree from './SuspenseTree';
 
 import './styles.css';
 
@@ -32,6 +33,7 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(DeeplyNestedComponents);
+  mountHelper(SuspenseTree);
 }
 
 function unmountTestApp() {

src/backend/agent.js

@@ -74,6 +74,7 @@ export default class Agent extends EventEmitter {
     bridge.addListener('startProfiling', this.startProfiling);
     bridge.addListener('stopInspectingDOM', this.stopInspectingDOM);
     bridge.addListener('stopProfiling', this.stopProfiling);
+    bridge.addListener('toggleSuspense', this.toggleSuspense);
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener('viewElementSource', this.viewElementSource);
 
@@ -307,6 +308,15 @@ export default class Agent extends EventEmitter {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  toggleSuspense = ({ id, rendererID }: InspectSelectParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.toggleSuspense(id);
+    }
+  };
+
   viewElementSource = ({ id, rendererID }: InspectSelectParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {

src/backend/renderer.js

@@ -1334,6 +1334,12 @@ export function attach(
       // Does the current renderer support editable function props?
       canEditFunctionProps: typeof overrideProps === 'function',
 
+      // Is this Suspense, and can we toggle it?
+      // TODO: this will incorrectly enable it on old versions.
+      canToggleSuspense:
+        typeof overrideProps === 'function' &&
+        tag === ReactTypeOfWork.SuspenseComponent,
+
       // Can view component source location.
       canViewSource,
 
@@ -1554,6 +1560,31 @@ export function attach(
     isProfiling = false;
   }
 
+  let suspendedIds = new Set();
+
+  function shouldSuspendFiber(fiber) {
+    if (suspendedIds.size === 0) {
+      return false;
+    }
+    // TODO: maybe optimize this.
+    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+    return suspendedIds.has(id);
+  }
+
+  function toggleSuspense(id) {
+    if (typeof overrideProps !== 'function') {
+      return;
+    }
+    if (suspendedIds.has(id)) {
+      suspendedIds.delete(id);
+    } else {
+      suspendedIds.add(id);
+    }
+    // Force a re-render.
+    const fiber = idToFiberMap.get(id);
+    overrideProps(fiber, [], null);
+  }
+
   return {
     cleanup,
     getCommitDetails,
@@ -1571,6 +1602,8 @@ export function attach(
     setInHook,
     setInProps,
     setInState,
+    shouldSuspendFiber,
+    toggleSuspense,
     startProfiling,
     stopProfiling,
     walkTree,

src/backend/types.js

@@ -105,6 +105,8 @@ export type RendererInterface = {
   ) => void,
   setInProps: (id: number, path: Array<string | number>, value: any) => void,
   setInState: (id: number, path: Array<string | number>, value: any) => void,
+  toggleSuspense: (id: number) => void,
+  shouldSuspendFiber: (fiber: Object) => boolean,
   startProfiling: () => void,
   stopProfiling: () => void,
   walkTree: () => void,

src/devtools/views/ButtonIcon.js

@@ -15,6 +15,7 @@ export type IconType =
   | 'record'
   | 'reload'
   | 'search'
+  | 'toggle-suspense'
   | 'undo'
   | 'up'
   | 'view-dom'
@@ -60,6 +61,8 @@ export default function ButtonIcon({ type }: Props) {
     case 'search':
       pathData = PATH_SEARCH;
       break;
+    case 'toggle-suspense':
+      return '🌀'; // TODO
     case 'undo':
       pathData = PATH_UNDO;
       break;

src/devtools/views/Elements/SelectedElement.js

@@ -15,7 +15,11 @@ import HooksTree from './HooksTree';
 import InspectedElementTree from './InspectedElementTree';
 import { hydrate } from 'src/hydration';
 import styles from './SelectedElement.css';
-import { ElementTypeClass, ElementTypeFunction } from '../../types';
+import {
+  ElementTypeClass,
+  ElementTypeFunction,
+  ElementTypeSuspense,
+} from '../../types';
 
 import type { InspectedElement } from './types';
 import type { DehydratedData, Element } from './types';
@@ -52,6 +56,17 @@ export default function SelectedElement(_: Props) {
     }
   }, [selectedElementID, viewElementSource]);
 
+  const toggleSuspense = useCallback(() => {
+    if (element === null) {
+      return;
+    }
+    const rendererID = store.getRendererIDForElement(element.id);
+    bridge.send('toggleSuspense', {
+      id: element.id,
+      rendererID,
+    });
+  }, [element]);
+
   if (element === null) {
     return (
       <div className={styles.SelectedElement}>
@@ -65,6 +80,9 @@ export default function SelectedElement(_: Props) {
     inspectedElement.canViewSource &&
     viewElementSource !== null;
 
+  const canToggleSuspense =
+    inspectedElement && inspectedElement.canToggleSuspense;
+
   return (
     <div className={styles.SelectedElement}>
       <div className={styles.TitleRow}>
@@ -74,6 +92,16 @@ export default function SelectedElement(_: Props) {
           </div>
         </div>
 
+        {canToggleSuspense && (
+          <Button
+            className={styles.IconButton}
+            onClick={toggleSuspense}
+            title="Toggle Suspense loading state"
+          >
+            <ButtonIcon type="toggle-suspense" />
+          </Button>
+        )}
+
         <Button
           className={styles.IconButton}
           onClick={highlightElement}

src/devtools/views/Elements/types.js

@@ -44,6 +44,9 @@ export type InspectedElement = {|
   // Can view component source location.
   canViewSource: boolean,
 
+  // Is this a Suspense, and can we toggle it?
+  canToggleSuspense: boolean,
+
   // Inspectable properties.
   context: Object | null,
   hooks: Object | null,

src/hook.js

@@ -149,6 +149,15 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
+  function shouldSuspendFiber(rendererID, fiber) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      // TODO: does this need a check?
+      return rendererInterface.shouldSuspendFiber(fiber);
+    }
+    return false;
+  }
+
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
   const rendererInterfaces = new Map();
@@ -175,6 +184,7 @@ export function installHook(target: any): DevToolsHook | null {
     checkDCE,
     onCommitFiberUnmount,
     onCommitFiberRoot,
+    shouldSuspendFiber,
   };
 
   Object.defineProperty(