dillon1000/react

Commit

[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.
Browse files
Changed paths4 files
First-parent comparison
M packages/react-devtools-facade/src/DevToolsFacade.js ModifiedA packages/react-devtools-facade/src/DevToolsFacadeTools.js AddedA packages/react-devtools-facade/src/DevToolsFacadeTreeTools.js AddedM packages/react-devtools-facade/src/__tests__/DevToolsFacade-test.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…