diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 2915d2cd30554..b59c0292942c6 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/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'; @@ -411,6 +413,13 @@ export function attach( pushOperation(0); // StrictMode supported? pushOperation(hasOwnerMetadata ? 1 : 0); pushOperation(supportsTogglingSuspense ? 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); @@ -449,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); } @@ -519,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, ); @@ -555,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; } } diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index bb540f09daf30..79e6957aecfe4 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -895,11 +895,11 @@ export default class Store extends EventEmitter<{ if (root === null) { return []; } - if (!this.supportsTogglingSuspense(root.id)) { + if (!this.supportsTogglingSuspense(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) {