feat: show where a component is declared

The ownership panel shows a component's source location under its name, and
clicking it asks the dev server to open the file.

- The location comes from the hot reload transform, which records `file:line:column` on the wrapper it creates. `@solidjs/vite-plugin` runs that transform in development, so no extra setup is needed. Components compiled without it simply have no location.
- Clicking calls Vite's `/__open-in-editor` endpoint.
- Names now drop the `[solid-refresh]` tag everywhere, not just on components, so the memo the wrapper creates reads as the component it wraps.
- Long names in the signal and scope lists are clipped instead of overlapping their value.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: lxsmnsyc

.changeset/ownership-tree.md

@@ -6,4 +6,5 @@ Add an ownership tree panel to the dev toolbar.
 
 The panel shows the app as a tree of owners. 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.
 Selecting a row lists its prop names, the signals it holds with their values, the scopes folded into it and its children.
+Components show where they are declared, and clicking the location opens the file in your editor.
 Rows flash when an owner is created, and the tree can be searched by component, scope or signal.

README.md

@@ -49,6 +49,10 @@ Selecting a row lists its prop names, the signals it holds with their values, th
 folded into it and its children. Prop values are getters, so the panel lists their names
 and never reads them.
 
+A component also shows where it is declared. The location comes from the hot reload
+transform, which `@solidjs/vite-plugin` runs in development, so it is there without any
+extra setup. Clicking it asks the dev server to open the file in your editor.
+
 The panel reads the tree through the development hooks in `solid-js`, so it is empty in a
 production build of the runtime. It only watches while it is open.
 

examples/explorer/README.md

@@ -26,5 +26,6 @@ and mounts the toolbar itself. `examples/explorer/src/App.tsx` is the whole app.
 1. Open the ownership panel and expand `routes` in the app. New rows appear and flash.
 2. Hide the preview. `<PreviewPane>` and the memo and effect it owns leave the tree.
 3. Select `<SelectionProvider>` and see the two signals every row depends on.
-4. Switch to owner mode to see the roots, memos and effects that component mode folds away.
-5. Search for `folder-stats` to find every folder memo at once.
+4. Click the file location under a component name to open it in your editor.
+5. Switch to owner mode to see the roots, memos and effects that component mode folds away.
+6. Search for `folder-stats` to find every folder memo at once.

src/dev-toolbar/ownership/index.tsx

@@ -16,6 +16,14 @@ import {
 import { ancestorsOf, EMPTY_TREE, type OwnershipTree, type TreeNode } from './tree.js';
 import './styles.css';
 
+/**
+ * Asks the dev server to open the file. Vite serves this endpoint in
+ * development. A failure is ignored, since the panel has nowhere to report it.
+ */
+function openInEditor(location: string): void {
+  void fetch(`/__open-in-editor?file=${encodeURIComponent(location)}`).catch(() => {});
+}
+
 /** How long a row stays marked as new after it first appears. */
 const FRESH_MS = 900;
 
@@ -303,6 +311,21 @@ export default function OwnershipViewer(props: OwnershipViewerProps): JSX.Elemen
                         <Badge type="info">{node().kind}</Badge>
                       </div>
 
+                      <Show when={node().location}>
+                        {(location) => (
+                          <button
+                            type="button"
+                            data-solid-ownership-location
+                            title="Open in editor"
+                            onClick={() => openInEditor(location())}
+                          >
+                            <Text options={{ size: 'xs', font: 'mono', wrap: 'nowrap' }}>
+                              {location()}
+                            </Text>
+                          </button>
+                        )}
+                      </Show>
+
                       <Show when={selectedPath().length > 0}>
                         <Text data-solid-ownership-path options={{ size: 'xs', font: 'mono' }}>
                           {selectedPath().join(' › ')}

src/dev-toolbar/ownership/styles.css

@@ -287,6 +287,26 @@
   min-width: 0;
 }
 
+[data-solid-ownership-location] {
+  align-self: flex-start;
+
+  padding: 0.125rem 0.375rem;
+
+  border: var(--start-dt-border) 1px solid;
+  border-radius: 0.375rem;
+  background: var(--start-dt-surface);
+  color: var(--start-dt-accent);
+
+  cursor: pointer;
+
+  max-width: 100%;
+  overflow: hidden;
+}
+
+[data-solid-ownership-location]:hover {
+  background: var(--start-dt-surface-hover);
+}
+
 [data-solid-ownership-path] {
   color: var(--start-dt-text-muted);
 }
@@ -336,6 +356,17 @@
   gap: 0.375rem;
 
   min-width: 0;
+  overflow: hidden;
+}
+
+[data-solid-ownership-scope-name] > [data-solid-text-size] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-solid-ownership-signal] > [data-solid-text-size]:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 [data-solid-ownership-signal-value] {

src/dev-toolbar/ownership/tree.test.ts

@@ -93,6 +93,7 @@ describe('ownerName', () => {
 
   it('falls back to the kind when an owner has no name', () => {
     expect(ownerName(owner({ name: 'count' }), 'memo')).toBe('count');
+    expect(ownerName(owner({ name: '[solid-refresh]Counter' }), 'memo')).toBe('Counter');
     expect(ownerName(owner(), 'scope')).toBe('scope');
   });
 });
@@ -121,6 +122,17 @@ describe('buildOwnershipTree in component mode', () => {
     expect(tree.nodes[0]!.signals.map((entry) => entry.name)).toEqual(['outer', 'inner']);
   });
 
+  it('reads the source location the hot reload transform records', () => {
+    const root = owner({ component: 'App' });
+    root._component.fn.location = 'src/App.tsx:12:0';
+
+    expect(build([root]).nodes[0]!.location).toBe('src/App.tsx:12:0');
+  });
+
+  it('has no location for a component compiled without the transform', () => {
+    expect(build([owner({ component: 'App' })]).nodes[0]!.location).toBeUndefined();
+  });
+
   it('lists prop names of a component', () => {
     const root = owner({ component: 'Greeting' });
     root._component.props = { name: 'ada', greeting: 'hi' };

src/dev-toolbar/ownership/tree.ts

@@ -61,6 +61,8 @@ export interface TreeNode {
   disposed: boolean;
   /** Owners this node stands in for, when scopes are folded away. */
   scopes: FoldedScope[];
+  /** Where the component is declared, as `file:line:column`. */
+  location: string | undefined;
 }
 
 export interface OwnershipTree {
@@ -101,17 +103,32 @@ export function ownerKind(owner: RawNode): OwnerKind {
 /** The hot reload transform wraps components, and its wrapper carries the tag. */
 const REFRESH_PREFIX = '[solid-refresh]';
 
+function withoutRefreshTag(name: unknown): string | undefined {
+  if (typeof name !== 'string' || name.length === 0) return undefined;
+  return name.startsWith(REFRESH_PREFIX) ? name.slice(REFRESH_PREFIX.length) : name;
+}
+
 export function ownerName(owner: RawNode, kind: OwnerKind): string {
   if (kind === 'component') {
-    let name = owner._component?.name;
-    if (typeof name === 'string' && name.startsWith(REFRESH_PREFIX)) {
-      name = name.slice(REFRESH_PREFIX.length);
-    }
-    return `<${typeof name === 'string' && name.length > 0 ? name : 'Anonymous'}>`;
+    return `<${withoutRefreshTag(owner._component?.name) ?? 'Anonymous'}>`;
+  }
+  // The memo the hot reload wrapper creates carries the same tag.
+  return withoutRefreshTag(owner._name) ?? KIND_LABELS[kind];
+}
+
+/**
+ * Where a component is declared.
+ *
+ * The hot reload transform records this on its wrapper, so it is there whenever
+ * a build runs that transform. Components compiled without it have no location.
+ */
+function componentLocation(owner: RawNode): string | undefined {
+  try {
+    const location = owner._component?.fn?.location;
+    return typeof location === 'string' && location.length > 0 ? location : undefined;
+  } catch {
+    return undefined;
   }
-  const name = owner._name;
-  if (typeof name === 'string' && name.length > 0) return name;
-  return KIND_LABELS[kind];
 }
 
 function propNames(owner: RawNode): string[] | undefined {
@@ -166,6 +183,7 @@ export function buildOwnershipTree(roots: RawNode[], options: BuildOptions): Own
       children: [],
       signals: [],
       props: kind === 'component' ? propNames(owner) : undefined,
+      location: kind === 'component' ? componentLocation(owner) : undefined,
       value: '_value' in owner ? owner._value : undefined,
       hasValue: '_value' in owner,
       disposed: isDisposed(owner),