[react-devtools-facade] 5/ support an already-installed DevTools hook#36682
Draft
hoxyq wants to merge 7 commits into
Draft
[react-devtools-facade] 5/ support an already-installed DevTools hook#36682hoxyq wants to merge 7 commits into
hoxyq wants to merge 7 commits into
Conversation
inspectHooks/inspectHooksOfFiber default currentDispatcher to ReactSharedInternals, and shared/ReactSharedInternals imports React — so bundling them drags all of React in, even for callers that always pass the renderer's injected dispatcher (e.g. react-devtools-facade). Extract the shared logic into private inspectHooksImpl / inspectHooksOfFiberImpl, which require an explicit dispatcher and never reference ReactSharedInternals. inspectHooks and inspectHooksOfFiber keep their existing behavior as thin wrappers that supply the ReactSharedInternals default. Add exported inspectHooksWithoutDefaultDispatcher and inspectHooksOfFiberWithoutDefaultDispatcher that delegate to the Impls directly, so a bundle importing only them references no React.
Move getDispatcherRef out of backend/fiber/renderer.js into backend/shared/DevToolsReactDispatcher.js and import it back. This lets other consumers (e.g. react-devtools-facade) reuse the renderer-dispatcher adapter without importing the whole renderer module.
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): getComponentTree, getComponentByLabel, findComponents, getComponentSource, getOwnersStack, getOwnersBranch. Tools return typed plain JavaScript values (see DevToolsFacadeTreeTools); serialization is left to the integration package. getComponentByLabel includes the component's props and, for function components, its inspected hooks tree, obtained via react-debug-tools' inspectHooksOfFiberWithoutDefaultDispatcher with the renderer's injected dispatcher (normalized by getDispatcherRef), so the facade never falls back to (and bundles) React's shared internals.
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 - getComponentTree 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.
installFacade previously threw if __REACT_DEVTOOLS_GLOBAL_HOOK__ was already present, so the facade could not be used on a page that has the React DevTools browser extension (or any other DevTools backend) installed. Now, when a hook is already installed, installFacade attaches to it instead of replacing it: it back-fills the renderers and fiber roots the hook is already tracking, and wraps the hook's inject / onCommitFiberRoot / onPostCommitFiberRoot (always calling through to the originals) so future renderers, commits, and passive passes also feed the facade's fiberRoots / rendererInternals / profilingState. When no hook is present it installs its own minimal hook as before. The shared commit- and renderer-bookkeeping is factored into helpers used by both paths.
|
Comparing: 63e95c2...3e28bba 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
|
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.