OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/react-devtools-shared/src/backend/legacy/renderer.js vendored
View File

@ -34,6 +34,8 @@ import {
TREE_OPERATION_ADD, TREE_OPERATION_ADD,
TREE_OPERATION_REMOVE, TREE_OPERATION_REMOVE,
TREE_OPERATION_REORDER_CHILDREN, TREE_OPERATION_REORDER_CHILDREN,
SUSPENSE_TREE_OPERATION_ADD,
SUSPENSE_TREE_OPERATION_REMOVE,
UNKNOWN_SUSPENDERS_NONE, UNKNOWN_SUSPENDERS_NONE,
} from '../../constants'; } from '../../constants';
import {decorateMany, forceUpdate, restoreMany} from './utils'; import {decorateMany, forceUpdate, restoreMany} from './utils';
@ -411,6 +413,13 @@ export function attach(
pushOperation(0); // StrictMode supported? pushOperation(0); // StrictMode supported?
pushOperation(hasOwnerMetadata ? 1 : 0); pushOperation(hasOwnerMetadata ? 1 : 0);
pushOperation(supportsTogglingSuspense ? 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 { } else {
const type = getElementType(internalInstance); const type = getElementType(internalInstance);
const {displayName, key} = getData(internalInstance); const {displayName, key} = getData(internalInstance);
@ -449,7 +458,12 @@ export function attach(
} }
function recordUnmount(internalInstance: InternalInstance, id: number) { 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); idToInternalInstanceMap.delete(id);
} }
@ -519,6 +533,8 @@ export function attach(
// All unmounts are batched in a single message. // All unmounts are batched in a single message.
// [TREE_OPERATION_REMOVE, removedIDLength, ...ids] // [TREE_OPERATION_REMOVE, removedIDLength, ...ids]
(numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) + (numUnmountIDs > 0 ? 2 + numUnmountIDs : 0) +
// [SUSPENSE_TREE_OPERATION_REMOVE, 1, pendingUnmountedRootID]
(pendingUnmountedRootID === null ? 0 : 3) +
// Mount operations // Mount operations
pendingOperations.length, pendingOperations.length,
); );
@ -555,6 +571,10 @@ export function attach(
if (pendingUnmountedRootID !== null) { if (pendingUnmountedRootID !== null) {
operations[i] = pendingUnmountedRootID; operations[i] = pendingUnmountedRootID;
i++; i++;
operations[i++] = SUSPENSE_TREE_OPERATION_REMOVE;
operations[i++] = 1;
operations[i++] = pendingUnmountedRootID;
} }
} }

4
packages/react-devtools-shared/src/devtools/store.js vendored
View File

@ -895,11 +895,11 @@ export default class Store extends EventEmitter<{
if (root === null) { if (root === null) {
return []; return [];
} }
if (!this.supportsTogglingSuspense(root.id)) { if (!this.supportsTogglingSuspense(rootID)) {
return []; return [];
} }
const list: SuspenseNode['id'][] = []; const list: SuspenseNode['id'][] = [];
const suspense = this.getSuspenseByID(root.id); const suspense = this.getSuspenseByID(rootID);
if (suspense !== null) { if (suspense !== null) {
const stack = [suspense]; const stack = [suspense];
while (stack.length > 0) { while (stack.length > 0) {