fix(runtime-dom): preserve option modifier event names by Alfred-Skyblue · Pull Request #8338 · vuejs/core

Alfred-Skyblue · 2023-05-16T14:47:41Z

fixed #8334

Summary by CodeRabbit

Bug Fixes
- Improved parsing and handling of event listener modifiers so once, passive, and capture combinations behave consistently.
- Preserved modifier-style event names (e.g., on:Once / on:Passive / on:Capture) more reliably, including for custom elements.
- Ensured handlers fire the expected number of times (including correct once behavior).
Tests
- Added coverage for modifier handling, once behavior, custom elements, and modifier name casing to prevent regressions.

Alfred-Skyblue · 2023-06-25T12:45:57Z

👀

github-actions · 2023-08-22T13:10:45Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB (+36 B)	40.3 kB (+17 B)	36.2 kB (+38 B)
vue.global.prod.js	165 kB (+36 B)	60.3 kB (+23 B)	53.6 kB (+53 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.9 kB (+36 B)	19 kB (+13 B)	17.4 kB (+24 B)
createApp	57.1 kB (+36 B)	22 kB (+12 B)	20.2 kB (+23 B)
createSSRApp	61.4 kB (+36 B)	23.9 kB (+13 B)	21.8 kB (+18 B)
defineCustomElement	63.3 kB (+36 B)	24 kB (+18 B)	21.9 kB (+42 B)
overall	71.9 kB (+36 B)	27.5 kB (+15 B)	25.1 kB (+20 B)

codspeed-hq · 2023-12-20T12:58:07Z

CodSpeed Performance Report

Merging #8338 will not alter performance

_{Comparing Alfred-Skyblue:fix-events (4bc6b1e) with main (9fa8241)}

Summary

✅ 53 untouched benchmarks

netlify · 2024-08-12T00:13:55Z

❌ Deploy Preview for vue-next-template-explorer failed.

Name	Link
🔨 Latest commit	`9e99af1`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-next-template-explorer/deploys/66b953958bcfc80008e7f63d

pkg-pr-new · 2024-08-20T09:18:23Z

Open in StackBlitz

@vue/compiler-core

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

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

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

@vue/compiler-dom

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

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

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

@vue/compiler-sfc

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

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

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

@vue/compiler-ssr

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

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

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

@vue/reactivity

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

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

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

@vue/runtime-core

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

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

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

@vue/runtime-dom

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

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

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

@vue/server-renderer

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

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

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

@vue/shared

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

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

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

vue

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

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

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

@vue/compat

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

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

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

commit: a78b063

coderabbitai · 2026-06-25T06:19:11Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 35344d51-c706-4d9c-96bf-7b8065565111

📥 Commits

Reviewing files that changed from the base of the PR and between 13cc856 and a78b063.

📒 Files selected for processing (2)

packages/runtime-dom/__tests__/patchEvents.spec.ts
packages/runtime-dom/src/modules/events.ts

💤 Files with no reviewable changes (2)

packages/runtime-dom/src/modules/events.ts
packages/runtime-dom/tests/patchEvents.spec.ts

📝 Walkthrough

Walkthrough

Event prop parsing now strips modifier suffixes in a loop while preserving on:-prefixed modifier event names. Added tests cover once, custom elements, and preserved-case modifier event names.

Changes

Custom element modifier events

Layer / File(s)	Summary
Modifier parsing update `packages/runtime-dom/src/modules/events.ts`	`parseName` now strips recognized modifier suffixes in a loop, uses a dedicated `on:` modifier-event regex, and slices by the captured modifier text.
Event option tests `packages/runtime-dom/__tests__/patchEvents.spec.ts`	`patchProp` tests cover `once` with passive capture, custom elements, `onOnceOnce`, and `on:Once`/`on:Passive`/`on:Capture` handler invocation counts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

:hammer: p3-minor-bug

Poem

🐰 I hopped through modifiers, light and spry,
once and capture now pass by.
Custom elements twitch, then behave just so,
on:Passive and friends keep their glow.
A carrot for tests, and a tidy little fix below.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and accurately describes the main runtime-dom event-name fix.
Linked Issues check	✅ Passed	The parser change and new tests address custom element events named capture, once, and passive as required by `#8334`.
Out of Scope Changes check	✅ Passed	The changes are limited to event parsing and targeted tests, with no明显 unrelated scope added.

_{✏️ 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

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

coderabbitai

Actionable comments posted: 2

🤖 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/runtime-dom/__tests__/patchEvents.spec.ts`:
- Line 228: The custom element registration in patchEvents.spec.ts can collide
with prior test runs because hello-world may already be defined. Update the
TestCustomElement registration near customElements.define to guard against
re-definition, e.g. only define it when the tag is not already present or use a
setup helper that safely registers once. Keep the change localized to the test
setup around TestCustomElement so the suite remains order-independent.
- Around line 230-232: The custom element creation in patchEvents.spec.ts is
using the wrong creation form for an autonomous custom element. Update the test
to call document.createElement('hello-world') directly and remove the
unnecessary second-argument options object with is, since that form is only for
customized built-ins. Keep the change localized to the customElement setup in
the test.

🪄 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: 22cee3b8-f5a0-4f68-abca-e51f82bab4b5

📥 Commits

Reviewing files that changed from the base of the PR and between 05685a9 and 926d971.

📒 Files selected for processing (2)

packages/runtime-dom/__tests__/patchEvents.spec.ts
packages/runtime-dom/src/modules/events.ts

edison1105 · 2026-06-25T08:20:56Z

/ecosystem-ci run

vue-bot · 2026-06-25T08:40:56Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
vue-i18n	✅ success	✅ success
radix-vue	❌ failure	❌ failure
primevue	✅ success	✅ success
test-utils	✅ success	✅ success
vite-plugin-vue	✅ success	❌ failure
pinia	✅ success	✅ success
router	✅ success	✅ success
language-tools	✅ success	✅ success
vant	✅ success	✅ success
quasar	✅ success	✅ success
vueuse	✅ success	✅ success
vitepress	✅ success	❌ failure
vue-macros	✅ success	✅ success
nuxt	✅ success	✅ success
vuetify	✅ success	❌ failure
vue-simple-compiler	✅ success	❌ failure

Alfred-Skyblue added 3 commits May 16, 2023 22:47

fix(events): fix custom element capture, once, passive events

c19383e

chore(events): optimization regular

d3c63fc

test(events): perfect test cases

7cc31a5

Alfred-Skyblue changed the title ~~fix(events): fix custom element capture, once, passive events~~ fix(events): fix DOM event options modifer handling May 16, 2023

This was referenced May 17, 2023

Report an error when the component event name is once #8342

Closed

fix(runtime-core): preserve once event listener name #8341

Merged

kirillshatalkin reviewed Jun 14, 2023

View reviewed changes

Comment thread packages/runtime-dom/src/modules/events.ts Outdated

Alfred-Skyblue added 3 commits June 26, 2023 11:34

Merge branch 'main' into fix-events

473d282

Merge branch 'main' into fix-events

f18dc20

Merge branch 'main' into fix-events

cc9444c

sxzz force-pushed the main branch from 39d4fc1 to 1b56405 Compare August 21, 2023 05:00

Merge branch 'main' into fix-events

1368fba

Alfred-Skyblue added 4 commits October 26, 2023 23:26

Merge branch 'main' into fix-events

404befe

Merge branch 'main' into fix-events

f9882cf

Merge branch 'main' into fix-events

51aec09

Merge branch 'main' into fix-events

4bc6b1e

skirtles-code reviewed Jun 1, 2024

View reviewed changes

Comment thread packages/runtime-dom/src/modules/events.ts Outdated

feat: support onOnceOnce

59d7d1f

Alfred-Skyblue force-pushed the fix-events branch from 7fd6b0c to 59d7d1f Compare June 3, 2024 14:20

Alfred-Skyblue and others added 5 commits June 3, 2024 22:22

Merge branch 'main' into fix-events

5afcf6a

[autofix.ci] apply automated fixes

fa0b7a9

Merge branch 'main' into fix-events

464d735

Merge branch 'main' into fix-events

aa0adcf

Merge branch 'main' into fix-events

9e99af1

edison1105 added 🐞 bug Something isn't working 🔩 p2-edge-case labels Aug 16, 2024

edison1105 added the ready for review This PR requires more reviews label Aug 16, 2024

Merge branch 'main' into fix-events

da1a2ff

edison1105 and others added 5 commits August 21, 2024 08:51

Update patchEvents.spec.ts

ac4fefe

Update patchEvents.spec.ts

4583a9d

[autofix.ci] apply automated fixes

6243a7d

Update patchEvents.spec.ts

993b250

fix(runtime-dom): preserve option modifier event names

926d971

edison1105 changed the title ~~fix(events): fix DOM event options modifer handling~~ fix(runtime-dom): preserve option modifier event names Jun 25, 2026

edison1105 removed this from Issue / PR Management Jun 25, 2026

edison1105 added ready to merge The PR is ready to be merged. and removed ready for review This PR requires more reviews labels Jun 25, 2026

coderabbitai Bot reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/runtime-dom/__tests__/patchEvents.spec.ts Outdated

Comment thread packages/runtime-dom/__tests__/patchEvents.spec.ts Outdated

test: update tests

13cc856

vuejs deleted a comment from Alfred-Skyblue Jun 25, 2026

Merge branch 'main' into fix-events

a78b063

vuejs deleted a comment from edison1105 Jun 25, 2026

edison1105 merged commit 4b659e6 into vuejs:main Jun 25, 2026
14 checks passed

Uh oh!

Uh oh!

Conversation

Alfred-Skyblue commented May 16, 2023 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

Uh oh!

Alfred-Skyblue commented Jun 25, 2023

Uh oh!

github-actions Bot commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

codspeed-hq Bot commented Dec 20, 2023

CodSpeed Performance Report

Merging #8338 will not alter performance

Summary

Uh oh!

Uh oh!

netlify Bot commented Aug 12, 2024

❌ Deploy Preview for vue-next-template-explorer failed.

Uh oh!

pkg-pr-new Bot commented Aug 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

edison1105 commented Jun 25, 2026

Uh oh!

vue-bot commented Jun 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Alfred-Skyblue commented May 16, 2023 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Aug 22, 2023 •

edited

Loading

pkg-pr-new Bot commented Aug 20, 2024 •

edited

Loading

coderabbitai Bot commented Jun 25, 2026 •

edited

Loading