types: type support for event modifiers

[teleskop150750]

Type support for event-modifiers

<script setup lang="ts">
function onClickOnce(event: MouseEvent) { }
</script>

<template>
  <button @click-once="onClickOnce">foo</button>
  <button @click.once="onClickOnce">foo</button>
  <button v-bind="{ onClickOnce }">foo</button>
</template>

defineComponent({
  setup() {
    function onClickOnce(event: MouseEvent) { }
   
    return () => h('button', { onClickOnce })
  }
})

defineComponent({
  setup() {
    function onClickOnce(event: MouseEvent) { }
   
    return () =>  <button onClickOnce={onClickOnce} />
  }
})

fix: Cannot register "capture" phase event handlers

Related
#9542

The downside is that there are multiple ways to declare modifiers in a template.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38 kB	34.2 kB
vue.global.prod.js	158 kB	57.8 kB	51.4 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB	18.2 kB	16.6 kB
createApp	54.3 kB	21.2 kB	19.3 kB
createSSRApp	58.5 kB	22.9 kB	20.9 kB
defineCustomElement	59.2 kB	22.8 kB	20.7 kB
overall	68.4 kB	26.3 kB	24 kB

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-ssr

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

@vue/compiler-sfc

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: cf20369

[jh-leong]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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

[pikax]

Codewise LGTM

Some issues related with the description

fix: Cannot register "capture" phase event handlers

I don't think this PR will fix that issue, just tested (just typescript):

const f = (evt: Event) => { }
withModifiers(f, ['capture'])

EDIT: The issue is runtime problem, changing the types won't fix it.

EDIT2: ignore the strikeout comment text

[teleskop150750]

@pikax

Due to the poor naming there is confusion about how certain modifiers should be used.

This solves the problem with types comment

[pikax]

I see, read the docs again, that's the expected usage, thanks.

[teleskop150750]

@pikax I understand that perfectly well. But there is no typing for this, for h, v-bind and jsx

[pikax]

@teleskop150750 apologies, what I meant is: "after reading the docs again, capture is only supported by appending *Capture to the ending of the event name, so this PR will fix the issue that is linked"