[DevTools] Record Suspense node for roots in legacy renderers (#34516)

This commit is contained in:
Sebastian "Sebbie" Silbermann 2025-09-18 18:50:23 +02:00 committed by GitHub
parent 755cebad6b
commit 03a96c75db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 3 deletions

View File

@ -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) {
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;
}
}

View File

@ -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) {