fix(compiler-vapor): wrap handler values in functions for dynamic v-on

[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/dynamicHandlers

---

_{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.2 kB	29.9 kB	26.4 kB
runtime-dom.global.prod.js	108 kB (+13 B)	40.6 kB (+11 B)	36.5 kB
vue.global.prod.js	166 kB (+13 B)	60.5 kB (+10 B)	53.9 kB (+83 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.9 kB	17.3 kB
createApp	57.2 kB	22 kB	20.1 kB
createApp + vaporInteropPlugin	96.3 kB	35.6 kB	32 kB
createVaporApp	42.3 kB	15.6 kB	14.2 kB
createSSRApp	61.6 kB	23.8 kB	21.7 kB
defineCustomElement	63.3 kB	23.9 kB	21.8 kB
overall	71.9 kB	27.2 kB	24.8 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-vapor

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-vapor

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

vue

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

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

yarn add https://pkg.pr.new/[email protected]

@vue/compat

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

commit: 5f119e2

[Copilot]

Pull request overview

This PR fixes the handling of dynamic v-on directives in the Vapor compiler by wrapping handler values in functions to preserve reactivity. When using v-on="obj" syntax in Vapor mode, the handlers from the object need to be wrapped in functions so they can be evaluated lazily and maintain reactivity to changes in the source object.

Key Changes:

• Added a needWrap parameter to the toHandlers helper function to optionally wrap handler values in functions
• Updated the Vapor compiler's component generator to pass needWrap: true when processing dynamic v-on directives
• Updated test expectations and snapshots to reflect the new generated code with wrapped handlers

Reviewed changes

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

Show a summary per file

File	Description
packages/runtime-core/src/helpers/toHandlers.ts	Adds optional needWrap parameter that wraps each handler value in an arrow function when true
packages/compiler-vapor/src/generators/component.ts	Updates toHandlers call to pass false for preserveCaseIfNecessary and true for needWrap
packages/compiler-vapor/tests/transforms/transformElement.spec.ts	Updates test expectation to include the new boolean parameters in toHandlers call
packages/compiler-vapor/tests/transforms/snapshots/transformSlotOutlet.spec.ts.snap	Updates snapshot with new toHandlers signature
packages/compiler-vapor/tests/transforms/snapshots/transformElement.spec.ts.snap	Updates snapshot with new toHandlers signature

---

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