Allow some component events bypass strictTemplate
#4985
Comments
|
You can enable |
|
|
|
If your button is not the single root node of the component (or if |
|
Perhaps we can have a comment syntax or
Can you explain this in detail? If it's indeed a bug, please create a minimal reproduction that allows us to investigate it. |
BaseButton is dynamic component which can be either Whole structure looks something like this: <MyPage>
<FancyButton>
<template>
<BaseButton>
<template>
<Component :is="button | a"><slot /></Component>
</template>
</BaseButton>
</template>
</FancyButton>
</MyPage>
Will try later to make a reproduction later, when I enable export interface BaseButtonInitialProps {
id?: string
type?: 'button' | 'submit'
as?: 'a' | 'button'
disabled?: boolean
href?: string
target?: '_blank' | '_self'
download?: boolean
}
// Interface is intentionally left empty to allow consumers of the component
// to extend and customize its properties through TypeScript's declaration merging.
export interface BaseButtonProps extends BaseButtonInitialProps {}
Would be great |
What problem does this feature solve?
This is sort of like #4879 but even more granular.
For better or for worse props/emits compose in different ways in Vue. For example I can have component but not be sure what attributes it accepts, one example while keeping it type safe could like this:
If I want to compose props and only pass only state I need with v-bind and so on
The same cannot be said with vue events, while using
defineEmitsI need explicitely define all possible events or else when I enablestrictTemplatethings will break.An actual example I am struggling with
// BaseButton.vue defineEmits<{ click: [e: MouseEvent] focusin: [e: FocusEvent] focusout: [e: FocusEvent] keyboard: [e: KeyboardEvent] mouse: [e: MouseEvent] touch: [e: TouchEvent] // ... and so on }>() <button @click="$emit('click', $event)" @focusin="$emit('focusin', $event)" @focusout="$emit('focusout', $event)" @keydown="$emit('keyboard', $event)" @mousedown="$emit('mouse', $event)" @touchstart="$emit('touch', $event)" > <slot /> </button>I defined events I needed, but now actual event listeners are not lazy, they are actual event listeners even if parent component did not use any of them "mousemove" for example would still fire to the event listener vue registered.
Composability is another issue, lets say I have FancyButton which wraps BaseButton, to declare events I have to the whole:
Which quickly becomes hard to maintain.
Without enabling
strictTemplatethis issue is largely masked because component would accept any event, now not so much.What does the proposed solution look like?
This is largely Vue limitation of how to compose events, but in mean time it would be great to allow disabling strict events on some components. I am not sure how it would look like maybe something with types, comment or tsconfig.json option. It would allow to retain most of benefits of strict templates, while still making it usable with design system components like buttons where you can't and shouldn't realistically write all of the possible events.
The text was updated successfully, but these errors were encountered: