fix(transition): optimize prop handling in VaporTransition using Proxy

[edison1105]

No description provided.

[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.

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

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/fix/KeepAliveWorkWithTransition

---

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

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	85.5 kB	30 kB	26.4 kB
runtime-dom.global.prod.js	108 kB (+71 B)	40.7 kB (+45 B)	36.7 kB (+95 B)
vue.global.prod.js	167 kB (+71 B)	60.7 kB (+41 B)	54 kB (-32 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.3 kB	18.9 kB	17.3 kB
createApp	57.3 kB	22 kB	20.1 kB
createApp + vaporInteropPlugin	96.5 kB (+160 B)	35.6 kB (+23 B)	32.2 kB (-6 B)
createVaporApp	42.4 kB (+183 B)	15.6 kB (+70 B)	14.3 kB (+59 B)
createSSRApp	61.6 kB	23.9 kB	21.7 kB
defineCustomElement	63.4 kB	23.9 kB	21.8 kB
overall	72.1 kB	27.3 kB	24.9 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/compiler-vapor

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/runtime-vapor

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: 3ddba38

[Copilot]

Pull request overview

This PR optimizes prop handling in VaporTransition components by using a Proxy pattern to maintain stable prop references while allowing reactive updates. This eliminates the need for complex prop update logic and simplifies the codebase.

Key Changes:

• Implemented Proxy-based prop forwarding in VaporTransition and VaporTransitionGroup to keep prop references stable while allowing reactive updates
• Refactored findTransitionBlock to use a callback pattern for collecting fragments instead of a boolean flag
• Made MoveType a public API export and properly applied it in KeepAlive's deactivation flow

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/runtime-vapor/src/components/Transition.ts	Replaced complex isMounted tracking with Proxy pattern for props; refactored findTransitionBlock with callback pattern
packages/runtime-vapor/src/components/TransitionGroup.ts	Added Proxy for stable cssTransitionProps reference with reactive updates via renderEffect
packages/runtime-vapor/src/components/KeepAlive.ts	Added MoveType import and used MoveType.LEAVE in deactivate function
packages/runtime-vapor/src/block.ts	Added moveType parameter to insert function to distinguish between ENTER and LEAVE transitions
packages/runtime-core/src/index.ts	Changed MoveType from internal to public export
packages/runtime-vapor/tests/hmr.spec.ts	Added onLeave callback and async wait to properly test transition behavior in KeepAlive

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.