Skip to content

feat: implement search filtering for devtools composable inspectors - #32

Merged
anton-gor-dev merged 1 commit into
mainfrom
feat/devtools-tree-search
Jun 7, 2026
Merged

anton-gor-dev merged 1 commit into
mainfrom
feat/devtools-tree-search

Conversation

@anton-gor-dev

Copy link
Copy Markdown
Member

Summary

  • Vue DevTools renders a built-in search box for custom inspectors and forwards the typed query as payload.filter in the getInspectorTree hook — but the plugin's handler (packages/plugin/src/vue/devtools/index.ts) ignored it entirely, so typing in the search box had no effect on any of the three composable inspectors.
  • Added filterTree, which recursively filters a built tree by matching node label (case-insensitively): a node is kept if it matches directly (in which case all of its children are kept too, for context) or if any of its descendants match (in which case only the matching descendants are kept).
  • Wired filterTree into getInspectorTree so payload.filter is applied to the tree before it's sent to DevTools, and added a treeFilterPlaceholder to each inspector so the search box hints at what can be searched.

Closes #27

Test plan

  • pnpm vitest run packages/plugin passes (added unit tests for filterTree)
  • pnpm lint passes
  • pnpm plugin:build succeeds

@anton-gor-dev
anton-gor-dev merged commit 89de45e 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: add search/filtering over the composable tree

1 participant