Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

types: type support for event modifiers #12675

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

teleskop150750
Copy link

@teleskop150750 teleskop150750 commented Jan 9, 2025

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.

image

image

Copy link

github-actions bot commented Jan 9, 2025

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

Copy link

pkg-pr-new bot commented Jan 9, 2025

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

@edison1105 edison1105 requested a review from jh-leong January 9, 2025 07:52
@edison1105 edison1105 changed the title fix: event types types: type support for event modifiers Jan 9, 2025
@teleskop150750 teleskop150750 changed the title types: type support for event modifiers fix(types): support event modifiers Jan 9, 2025
@teleskop150750 teleskop150750 changed the title fix(types): support event modifiers types: type support for event modifiers Jan 9, 2025
@jh-leong
Copy link
Member

jh-leong commented Jan 9, 2025

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Jan 9, 2025

📝 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
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Jan 9, 2025

📝 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 edison1105 requested a review from pikax January 9, 2025 09:39
@pikax
Copy link
Member

pikax commented Jan 9, 2025

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'])

image

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

EDIT2: ignore the strikeout comment text

@teleskop150750
Copy link
Author

teleskop150750 commented Jan 9, 2025

@pikax

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

This solves the problem with types comment

@pikax
Copy link
Member

pikax commented Jan 9, 2025

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

@teleskop150750
Copy link
Author

teleskop150750 commented Jan 9, 2025

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

image

@pikax
Copy link
Member

pikax commented Jan 9, 2025

@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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cannot register "capture" phase event handlers
5 participants