GitHub Commits - Example: React

[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, 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.

Comments

No comments yet. Start the discussion.