Skip to content

fix(kit): keep component tree order in sync after reorders - #1184

Open
webfansplz wants to merge 1 commit into
mainfrom
fix/component-tree-live-order
Open

webfansplz wants to merge 1 commit into
mainfrom
fix/component-tree-live-order

Conversation

@webfansplz

Copy link
Copy Markdown
Member

After a keyed reorder (e.g. a v-for list reversed), the Components tree kept showing the old sibling order until the next snapshot. Vue only reports component:updated for the parent, so the children's domOrder was never recomputed, and the client ignored domOrder when applying patches.

The protocol already defined a reorder patch, but nothing sent or applied it. This wires it up:

  • kit: on component:update for an expanded parent, recompute its children's domOrder and send { op: 'reorder', parentId, children } when the sibling order changed. Collapsed parents are skipped. refreshDomOrder updates domOrder only, so no timestamp-only patches are sent.
  • client: applyComponentTreePatches moves the listed siblings into the given order; their subtrees move with them.

Tests:

  • Unit: a reorder patch reorders siblings and keeps subtrees attached.
  • Integration (real Vue): reversing a keyed list updates the tree built from patches alone, without a new snapshot.

Copilot AI balanced review requested due to automatic review settings October 30, 2026 09:20
@netlify

netlify Bot commented Oct 30, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vue-devtools-docs canceled.

Name Link
🔨 Latest commit c206e42
🔍 Latest deploy log https://app.netlify.com/projects/vue-devtools-docs/deploys/6ae461591260a74e55531382

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.

@pkg-pr-new

pkg-pr-new Bot commented Oct 30, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@vue/devtools-agent@1184
npm i https://pkg.pr.new/@vue/devtools-api@1184
npm i https://pkg.pr.new/@vue/devtools-kit@1184
npm i https://pkg.pr.new/vite-plugin-vue-devtools@1184

commit: c206e42

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.

2 participants