fix(compiler-dom): preserve empty dynamic event names

[leno23]

Fixes #13056.\n\nDynamic event names with option modifiers currently append the modifier suffix even when the normalized handler key is empty, so @[event].once can become an "Once" attribute when event is nullish or empty. This keeps the generated key empty unless the dynamic handler key exists.\n\nTest: pnpm vitest packages/compiler-dom/tests/transforms/vOn.spec.ts --run

Summary by CodeRabbit

• Bug Fixes

  • Fixed handling of dynamic event names with event option modifiers (e.g., @[event].once) in Vue template compilation.

• Tests

  • Added test coverage for dynamic event names with event option modifiers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 23e53a5e-9f8b-4efa-a096-6befc4948e8c

📥 Commits

Reviewing files that changed from the base of the PR and between 9d92dbd and f1ff403.

📒 Files selected for processing (2)

• packages/compiler-dom/__tests__/transforms/vOn.spec.ts
• packages/compiler-dom/src/transforms/vOn.ts

---

📝 Walkthrough

Walkthrough

Fixed a bug where dynamic event bindings with option modifiers (e.g., @[event].once) would incorrectly create attributes when the event name is nullish. The compiler now generates an explicit truthiness guard (key) && (key) + "Postfix" for non-static event keys with modifiers, and includes test coverage.

Changes

Dynamic Event Handler Modifier Fix

Layer / File(s)	Summary
Dynamic event handler with modifier postfix guard packages/compiler-dom/src/transforms/vOn.ts, packages/compiler-dom/__tests__/transforms/vOn.spec.ts	Updated transformOn to generate explicit compound expressions with truthiness checks when appending modifier postfixes to non-static event keys; new test validates the behavior for dynamic event names with .once modifier.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

ready to merge, :hammer: p3-minor-bug

Poem

🐰 A modifier once lost when the name turned to null,
Now guarded by logic, the fix rings so full,
The event checks truthiness before claiming its post,
No spurious attributes—the bug is now lost! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main fix: preventing modifier suffixes from being appended when dynamic event names are nullish/empty, which is the core issue addressed in the PR.
Linked Issues check	✅ Passed	The PR implements the fix for issue #13056 by modifying vOn transform to guard against empty dynamic event keys before appending modifier suffixes, and adds a test case validating this behavior.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the nullish dynamic event name issue: the compiler transform logic in vOn.ts and its corresponding test case.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB	40.1 kB	36 kB
vue.global.prod.js	164 kB (+11 B)	60.1 kB (+4 B)	53.5 kB (-10 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	19 kB	17.4 kB
createApp	56.9 kB	22 kB	20.1 kB
createSSRApp	61.2 kB	23.8 kB	21.7 kB
defineCustomElement	63.1 kB	23.9 kB	21.8 kB
overall	71.7 kB	27.4 kB	25 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: f1ff403

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f1ff403805

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Avoid evaluating dynamic event arguments twice

For dynamic event options such as <div @[nextEvent()].once="handler" />, this emits the key expression on both sides of &&, so nextEvent() runs twice whenever it returns a truthy handler key. That can register the listener under a different event than the one checked, or trigger user-visible side effects during each render; before this change the dynamic key was evaluated once for .once/.capture/.passive.

Useful? React with 👍 / 👎.

[edison1105]

duplicate of #13060