| 1 | # react-devtools-facade |
| 2 | |
| 3 | Experimental, private package that defines building blocks for querying React runtime state. |
| 4 | |
| 5 | The facade installs the `__REACT_DEVTOOLS_GLOBAL_HOOK__` that React looks for at |
| 6 | initialization time — enabling fiber-root tracking without the overhead of the |
| 7 | full DevTools backend — and exposes a small, framework-agnostic library API that |
| 8 | integrators compose into tools. |
| 9 | |
| 10 | This package is intentionally low-level. It does **not** install any tool |
| 11 | globals and it does **not** decide how tools are surfaced. It installs the hook, |
| 12 | tracks fiber roots, and hands back building blocks; the integrator (for example, |
| 13 | a `chrome-devtools-mcp` integration) decides everything else — including whether |
| 14 | to expose anything else on globals. |
| 15 | |
| 16 | ## API |
| 17 | |
| 18 | ### `installFacade(target = globalThis): Facade` |
| 19 | |
| 20 | Installs `__REACT_DEVTOOLS_GLOBAL_HOOK__` on `target` and returns a `Facade` |
| 21 | handle holding the hook plus the runtime state it tracks (`fiberRoots`, |
| 22 | `rendererInternals`, `profilingState`). Building blocks read from the returned |
| 23 | `Facade`; they never reach for globals. |
| 24 | |
| 25 | Call this **before** React initializes so the hook captures the first commit: |
| 26 | |
| 27 | ```js |
| 28 | import {installFacade} from 'react-devtools-facade'; |
| 29 | |
| 30 | const facade = installFacade(); |
| 31 | // ...load React, render your app... |
| 32 | ``` |
| 33 | |
| 34 | `installFacade` installs **only** the DevTools hook. It does not install |
| 35 | `__REACT_TOOLS__`, `__REACT_LLM_TOOLS__`, or any other global. Once the tool |
| 36 | building blocks land, an integrator composes them from the returned `Facade` and |
| 37 | decides whether to expose anything on globals. |