Skip to content

Surface composables in the standard Components inspector panel - #34

Merged
anton-gor-dev merged 2 commits into
mainfrom
feat/devtools-components-panel-composables
Jun 7, 2026
Merged

anton-gor-dev merged 2 commits into
mainfrom
feat/devtools-components-panel-composables

Conversation

@anton-gor-dev

Copy link
Copy Markdown
Member

Summary

  • Closes DevTools: surface composables in the standard Components inspector panel #33
  • Injects a "Composables" group into the State view of Vue Devtools' built-in Components inspector for any component that directly uses composables, listing each composable's current state alongside its own setup/props/data — no need to switch to a separate Composables tab to see what a component is using.
  • Works around two quirks of @vue/devtools-kit's built-in components plugin:
    • it overwrites payload.state wholesale (payload.state = result) rather than merging — worked around by deferring our getInspectorState merge by one microtask (await Promise.resolve()) so it always runs after the core handler's synchronous assignment, regardless of hook registration order;
    • it renders State as a flat list of entries grouped visually by each entry's type field (e.g. setup, props) rather than by named top-level groups — worked around by appending entries with type: 'Composables' to that list instead of adding a new top-level key (the same technique Pinia/Vue Router use).
  • Also handles the app root node, whose nodeId Vue Devtools encodes as ${appId}:root rather than a numeric uid — the root's instance.uid (and the component.uid recorded by trackComposable) is always 0.

Test plan

  • pnpm vitest run packages/plugin — 19/19 passing
  • pnpm lint
  • pnpm plugin:build
  • Verified live in the playground: selecting App or DemoWidget in Vue Devtools' Components panel now shows a "Composables" group listing each composable's state next to "setup"

hobby added 2 commits June 7, 2026 14:28
Injects a "Composables" group into the State view of Vue Devtools'
built-in Components inspector for any component that directly uses
composables. Two quirks of the core components plugin had to be
worked around: it overwrites payload.state wholesale rather than
merging (fixed by deferring our merge by one microtask so it lands
last), and it renders State as a flat entry list grouped by `type`
rather than by named state groups (fixed by appending entries with
type: 'Composables' instead of adding a top-level key).
The test job ran tests before pnpm build, so workspace dependencies
like @runtime-labs/observer-core had no built dist/ for vitest to
resolve. This was previously masked because no plugin test imported
the runtime package directly — the new build-component-composables-state
test does, and fails to resolve it in CI without this reorder.
@anton-gor-dev
anton-gor-dev merged commit 201f34f into main Jun 7, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DevTools: surface composables in the standard Components inspector panel

1 participant