[react-devtools-cdt-mcp] chrome-devtools-mcp integration#36600
Draft
hoxyq wants to merge 5 commits into
Draft
Conversation
Introduces react-devtools-facade, a private, source-only library of building
blocks for querying React runtime state.
This first commit adds installFacade(target): it installs only
__REACT_DEVTOOLS_GLOBAL_HOOK__ (the global React looks for at init) and returns
a Facade handle {hook, fiberRoots, rendererInternals, profilingState}. It
installs no tool globals — integrators (e.g. a chrome-devtools-mcp package)
compose the Facade into tools and decide what to expose.
Its tests rely on the devtools build/dev setup, so the package is excluded from
the general test runners and runs only under the build-devtools jest project —
matching react-devtools-shared and react-devtools-extensions.
Tool building blocks and a createTools(facade) assembler land in follow-ups.
Adds the component-tree building blocks and the createTools assembler. createTools(facade) reads the facade's tracked state and returns the tools object (no globals): getTreeSnapshot, getComponentByLabel, findComponents, getComponentSource, getOwnersStack, getOwnersBranch. Tools return typed plain JavaScript values (see ReactDevToolsFacadeTree); serialization is left to the integration package. getComponentByLabel includes the component's props and, for function components, its inspected hooks tree (via react-debug-tools).
Adds the profiler building blocks to createTools: startProfiling, stopProfiling, getTraceOverview, getCommitReport. A profiling session records per-commit render timing (via the hook's onCommit/onPostCommit, wired in the scaffold commit) and reports per-component actual/self durations, sorted descending. Tools return typed plain JavaScript values; serialization is left to the integration package.
Adds cross-cutting tests that exercise the tools across multiple React roots: - inject() registers additional renderers and initializes their internals - getTreeSnapshot and findComponents aggregate across roots with globally unique labels - getComponentByLabel resolves labels from any root - profiling records one commit per root with correctly attributed components Completes the react-devtools-facade building-block package.
|
Comparing: 63e95c2...f50a741 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
Adds react-devtools-cdt-mcp, a public package integrating React tools with chrome-devtools-mcp. On import it installs the react-devtools-facade hook eagerly (before React); the tools are built lazily inside the devtoolstooldiscovery handler and registered via chrome-devtools-mcp's __dtmcp third-party-tool protocol, so the React tools become discoverable and callable in a chrome-devtools-mcp session. Each tool maps a JSON-Schema param object onto a facade tool and returns its result directly. A Rollup build bundles the facade into a self-contained CommonJS module (React is left external); a root index.js re-exports the built bundle, matching the structure of other React packages. The package runs under the build-devtools jest project and is excluded from the general test runners. A fixtures/ folder (not published) provides a webpack app that renders assorted React components against React from source (like react-devtools-shell) for testing the tools with chrome-devtools-mcp.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #36599, see this commit.