feat: ownership tree panel

[lxsmnsyc]

Adds a panel to the dev toolbar that shows the app as a tree of owners, and a demo app whose component tree changes while you use it.

The panel

Two modes:

• Component mode lists components only and folds the scopes between them into the component above, so a component shows the signals, memos and effects created inside it.
• Owner mode shows every owner, including roots, memos and effects. In the fixture that is 4 rows versus 15.

Selecting a row lists its prop names, the signals it holds with their values, the scopes folded into it, its children, and its ancestry. Ancestry frames run nearest first like a stack trace, and clicking a frame selects that owner so you can walk back up the tree. Rows flash when an owner is created, and the tree can be searched by component, scope or signal, which keeps the ancestors of a match visible so the row stays reachable.

How it finds components

The dev build of solid-js wraps every component in devComponent, which stamps the root it creates with _component = { fn, props, name }. That gives real component names and the live props object with no compiler support.

Source locations come from the hot reload transform, which records file:line:column on the wrapper it creates. @solidjs/vite-plugin runs that transform in development, so locations appear without extra setup, and clicking one calls Vite's /__open-in-editor. Components compiled without the transform simply have no location. Names also drop the [solid-refresh] tag the wrapper adds.

Prop values are getters, so the panel lists prop names and never reads them. Reading would run app code and could throw from inside a devtool.

Details worth review

• The toolbar wraps the app, so excluding the toolbar's own owner would exclude the app with it. AppScope marks the scope holding props.children as app code, the nearest marker wins during the walk, and the marker itself never becomes a row.
• Each snapshot carries a fingerprint. An unchanged fingerprint is not written to state, which stops the panel's own renders from feeding it another update.
• The runtime keeps the newest child first, so the walk reverses children into creation order.
• The panel installs the dev hooks only while it is open, and reads the tree through them, so it stays empty in a production build of the runtime.

The demo

examples/explorer is a file explorer, run with pnpm demo. FolderNode renders itself for every nested folder, so opening one mounts a component per child and the tree takes the shape of the folder. SelectionProvider owns the selection signals every row reads out of context, and PreviewPane sits behind a toggle so hiding it disposes an owner and its scopes.

Testing

• 21 unit tests over the pure tree builder, covering folding, signal attribution, exclusion and the include marker, disposed owners, shared subtrees, name cleanup, locations and fingerprint stability.
• An end to end test covering both modes, the detail pane, the ancestry frames and search.
• pnpm build, pnpm typecheck and pnpm format:check are clean.
• The demo was driven by hand: expanding a folder took the tree from 26 to 32 owners, hiding the preview dropped <PreviewPane>, and the page hydrates with no console warnings.

Note on the other branch

reactivity-graph (#18) carries its own copy of the dev hook install, the toolbar exclusion with the AppScope marker, and a value preview formatter. This branch reimplements them because it starts from main. Whichever lands second should drop its copy in favour of a shared registry.

🤖 Generated with Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​solidjs/​vite-plugin@​3.0.0-next.35

View full report

[lxsmnsyc]