fix(runtime-vapor): animate vapor component moves in TransitionGroup

[edison1105]

close #14862

Summary by CodeRabbit

• Tests

  • Added comprehensive transition-group test coverage including keyed component moves, same-key component updates, root slot scenarios, and async component interop

• New Features

  • Enhanced transition-group move detection and update tracking for improved animation handling across keyed components and dynamic prop changes

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0644c262-0697-46ed-8530-7c94330fc017

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• ✅ Review completed - (🔄 Check again to review again)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch edison/fix-14862-vapor-transition-group-key-split

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14866

npm i https://pkg.pr.new/@vue/compiler-core@14866

yarn add https://pkg.pr.new/@vue/compiler-core@14866.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14866

npm i https://pkg.pr.new/@vue/compiler-dom@14866

yarn add https://pkg.pr.new/@vue/compiler-dom@14866.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14866

npm i https://pkg.pr.new/@vue/compiler-sfc@14866

yarn add https://pkg.pr.new/@vue/compiler-sfc@14866.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14866

npm i https://pkg.pr.new/@vue/compiler-ssr@14866

yarn add https://pkg.pr.new/@vue/compiler-ssr@14866.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14866

npm i https://pkg.pr.new/@vue/compiler-vapor@14866

yarn add https://pkg.pr.new/@vue/compiler-vapor@14866.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14866

npm i https://pkg.pr.new/@vue/reactivity@14866

yarn add https://pkg.pr.new/@vue/reactivity@14866.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14866

npm i https://pkg.pr.new/@vue/runtime-core@14866

yarn add https://pkg.pr.new/@vue/runtime-core@14866.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14866

npm i https://pkg.pr.new/@vue/runtime-dom@14866

yarn add https://pkg.pr.new/@vue/runtime-dom@14866.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14866

npm i https://pkg.pr.new/@vue/runtime-vapor@14866

yarn add https://pkg.pr.new/@vue/runtime-vapor@14866.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14866

npm i https://pkg.pr.new/@vue/server-renderer@14866

yarn add https://pkg.pr.new/@vue/server-renderer@14866.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14866

npm i https://pkg.pr.new/@vue/shared@14866

yarn add https://pkg.pr.new/@vue/shared@14866.tgz

vue

pnpm add https://pkg.pr.new/vue@14866

npm i https://pkg.pr.new/vue@14866

yarn add https://pkg.pr.new/vue@14866.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14866

npm i https://pkg.pr.new/@vue/compat@14866

yarn add https://pkg.pr.new/@vue/compat@14866.tgz

commit: 382c0ef

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages-private/vapor-e2e-test/__tests__/transition-group.spec.ts`:
- Around line 1238-1245: The test shows the interop keyed-VDOM path isn't
applying the move class so ensure the interop transition-group code reproduces
the same keyed-move contract as native VDOM: when keyed items are reordered, add
the "group-move" class to the moved DOM node (e.g., the element with id
"item-2") using the same move-detection and class-application logic as the
non-interop path; locate the transition-group/interop keyed-reconcile code that
handles keyed swaps and reuse or call the existing add-move-class routine so the
expectation in the test using containerSelector (checking for "group-move") is
satisfied.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 45d85c5c-4f9e-4549-abcd-6ae077138146

📥 Commits

Reviewing files that changed from the base of the PR and between a717010 and b527cc4.

📒 Files selected for processing (17)

• packages-private/vapor-e2e-test/__tests__/transition-group.spec.ts
• packages-private/vapor-e2e-test/__tests__/vdomInterop.spec.ts
• packages-private/vapor-e2e-test/interop/App.vue
• packages-private/vapor-e2e-test/interop/components/VdomTransitionGroup.vue
• packages-private/vapor-e2e-test/transition-group/cases/interop/keyed-vdom-component-move-after-key-change.vue
• packages-private/vapor-e2e-test/transition-group/cases/vapor-transition-group/async-root-slot-component-move.vue
• packages-private/vapor-e2e-test/transition-group/cases/vapor-transition-group/keyed-component-move-after-key-change.vue
• packages-private/vapor-e2e-test/transition-group/cases/vapor-transition-group/root-slot-component-move.vue
• packages-private/vapor-e2e-test/transition-group/components/RootSlot.vue
• packages-private/vapor-e2e-test/transition-group/components/VaporExpandingItem.vue
• packages-private/vapor-e2e-test/transition-group/components/VdomExpandingItem.vue
• packages/runtime-vapor/__tests__/for.spec.ts
• packages/runtime-vapor/src/apiCreateFor.ts
• packages/runtime-vapor/src/components/Transition.ts
• packages/runtime-vapor/src/components/TransitionGroup.ts
• packages/runtime-vapor/src/fragment.ts
• packages/runtime-vapor/src/vdomInterop.ts

✅ Files skipped from review due to trivial changes (3)

• packages-private/vapor-e2e-test/transition-group/components/VaporExpandingItem.vue
• packages/runtime-vapor/src/fragment.ts
• packages-private/vapor-e2e-test/transition-group/components/RootSlot.vue