[react-devtools-facade] 2/ implement component tree tools (#36597)
[react-devtools-facade] 2/ implement component tree tools (#36597) Adds the component-tree building blocks and the `createTools(facade)` assembler - the first tools layered on top of the `installFacade` hook from commit 1. ### `createTools(facade): Tools` Reads the facade's tracked state (fiber roots + per-renderer internals) and returns a plain `Tools` object - no globals; the integrator decides what to do with it. Tools return **typed, plain JavaScript values** (or `{error}`); serialization (to an integration package's wire format) is left to the caller. ### Tools - **`getComponentTree(depth?, rootUid?)`** - the component tree as a flat array of `{uid, type, name, key, firstChild, nextSibling}` nodes (an adjacency list referencing other nodes by label). - **`getComponentByUid(uid)`** - one component's `{type, name, key?, props?, hooks?}`. For function components, `hooks` is the inspected hooks tree (nested `subHooks`), obtained via `react-debug-tools'` `inspectHooksOfFiberWithoutDefaultDispatcher` with the renderer's injected dispatcher (normalized by `getDispatcherRef`) - so hooks introspection never falls back to, or bundles, React's shared internals. - **`findComponents(name, rootUid?, page?, pageSize?)`** - paginated, case-insensitive name search. - **`getComponentSource(uid)`** - the component's definition location `{name, fileName, line, column}` (or `null`). - **`getOwnersStack(uid)`** - the raw JSX owner-stack string (DEV only). - **`getOwnersBranch(uid)`** - the structured owner chain `[{uid, name, type}]`, ordered immediate owner → root (DEV only). ### UIDs Components are addressed by stable `rN` uids, assigned lazily and memoized per fiber (and its alternate), so a component keeps the same uid across re-renders and across every tool. These uids don't survive page reloads.
createTools(facade): Tools
Reads the facade's tracked state (fiber roots + per-renderer internals) and returns a plain Tools object - no globals; the integrator decides what to do with it. Tools return typed, plain JavaScript values (or {error}); serialization (to an integration package's wire format) is left to the caller.
Tools
getComponentTree(depth?, rootUid?)- the component tree as a flat array of{uid, type, name, key, firstChild, nextSibling}nodes (an adjacency list referencing other nodes by label).getComponentByUid(uid)- one component's{type, name, key?, props?, hooks?}. For function components,hooksis the inspected hooks tree (nestedsubHooks), obtained viareact-debug-tools'inspectHooksOfFiberWithoutDefaultDispatcherwith the renderer's injected dispatcher (normalized bygetDispatcherRef) - so hooks introspection never falls back to, or bundles, React's shared internals.findComponents(name, rootUid?, page?, pageSize?)- paginated, case-insensitive name search.getComponentSource(uid)- the component's definition location{name, fileName, line, column}(ornull).getOwnersStack(uid)- the raw JSX owner-stack string (DEV only).getOwnersBranch(uid)- the structured owner chain[{uid, name, type}], ordered immediate owner → root (DEV only).
UIDs
Components are addressed by stable rN uids, assigned lazily and memoized per fiber (and its alternate), so a component keeps the same uid across re-renders and across every tool. These uids don't survive page reloads.
Comments
No comments yet. Start the discussion.