Ruslan Lesiutin
77df6e1db1
Introduces **`react-devtools-facade`**, a private, source-only package
of building blocks for React runtime state introspection. Integrates
with Reconciler through React DevTools global hook.
### Plan
The facade is the shared, low-level layer that public,
MCP-server–specific packages build on:
- **`react-devtools-facade` (private)** — installs the React DevTools
global hook and exposes a small, framework-agnostic API: install the
hook, then assemble a set of tools from the returned handle. It installs
*no* tool globals and makes no decision about how tools are surfaced.
- **Integration packages (public)**, e.g. `react-devtools-cdt-mcp` —
compose the facade's tools and target a specific MCP server
(chrome-devtools-mcp first).
This keeps all runtime-introspection logic in one reusable place while
each
integration owns its own protocol, packaging, serialisation and globals.
### This PR
- `installFacade(target = globalThis): Facade` — installs **only**
`__REACT_DEVTOOLS_GLOBAL_HOOK__` (the global React looks for at init)
and returns a `Facade` handle `{hook, fiberRoots, rendererInternals,
profilingState}`. The hook tracks fiber roots on commit and forwards
commits to the profiling state when a session is active; building blocks
read from the returned handle and never touch globals.
- Guards against double-install (mixing with the full DevTools backend).
*Temporary*, will later add compatibility for the RDT extension
scenario.
- Package scaffold: `package.json` (private, source-only), `index.js`,
`README.md`.
- Excluded from the general jest runners; runs under the build-devtools
project, matching `react-devtools-shared` / `react-devtools-extensions`.
> Tool building blocks and `createTools(facade)` land in the follow-ups.
1.5 KiB
react-devtools-facade
Experimental, private package that defines building blocks for querying React runtime state.
The facade installs the __REACT_DEVTOOLS_GLOBAL_HOOK__ that React looks for at
initialization time — enabling fiber-root tracking without the overhead of the
full DevTools backend — and exposes a small, framework-agnostic library API that
integrators compose into tools.
This package is intentionally low-level. It does not install any tool
globals and it does not decide how tools are surfaced. It installs the hook,
tracks fiber roots, and hands back building blocks; the integrator (for example,
a chrome-devtools-mcp integration) decides everything else — including whether
to expose anything else on globals.
API
installFacade(target = globalThis): Facade
Installs __REACT_DEVTOOLS_GLOBAL_HOOK__ on target and returns a Facade
handle holding the hook plus the runtime state it tracks (fiberRoots,
rendererInternals, profilingState). Building blocks read from the returned
Facade; they never reach for globals.
Call this before React initializes so the hook captures the first commit:
import {installFacade} from 'react-devtools-facade';
const facade = installFacade();
// ...load React, render your app...
installFacade installs only the DevTools hook. It does not install
__REACT_TOOLS__, __REACT_LLM_TOOLS__, or any other global. Once the tool
building blocks land, an integrator composes them from the returned Facade and
decides whether to expose anything on globals.