[REQUEST] events directive

[tcastelly]

Hello,

Thank you very much for this plugin! I'm wondering if add a directive for custom event is possible.

 <MyCmp
      onCustom={(str: string) => console.log(str)} /> /* <-- TS2322: Type ... is not assignable to type */

It' works but it's not valid syntax. To be able to use kebab-case can be great:

 <MyCmp
      on-custom={(str: string) => console.log(str)} />

Previously I used this plugin for jsx files, I really like to be able to stop propagation directly like this:

<form vOn:submit_prevent_default={() => {}}></form>

Do you think it's something can be imlemented?

Thank again for this plugin!

[cereschen]

I've been thinking about this before, but now I'm going to show you a new way to write it in vue3

import {ref, withModifiers} from 'vue'
export default {
  setup () {
    const count =ref(0)
    return ()=><div onClick={withModifiers(()=>count.value++,['stop'])}>{count.value} </div>
  }
}

This way of writing will give you better IntelliSense and It is more compliant with the JSX specification

[cereschen]

https://github.com/vuejs/vue-next/blob/e4dc03a8b17d5e9f167de6a62a645878ac7ef3e2/packages/runtime-dom/src/directives/vOn.ts#L7

Here are all the supporting modifiers

[tcastelly]

Thank you! I did not know about this.

About the custom event with the problem definition type, do you have an idea? I tried this without success

declare namespace JSX {
  interface IntrinsicElements {
    MyCmp: {
      onCustom: (str: string) => void,
    },
  }
  ...
}

 <MyCmp
      onCustom={(str) => console.log(str)} /> /* <-- TS2322: Type ... is not assignable to type */

[cereschen]

interface IntrinsicElements available for Lower Camel Case components only. It wasn't easy but I found a way XD.

import { defineComponent } from "vue"

export function defineCustomComponent<P> (comp){
 function defineCustom<T,K = T extends {new ():infer A}?A:never> (com:T):{new():K &{$props:P}}{
  return com  as any
}

 return defineCustom(defineComponent(comp))
}

export default defineCustomComponent<{
  onCustom: Function
}>({
  setup(props, ctx) {
    return () => <div> hello world! </div>
  }
})

I will integrate it into my project

Sorry please do not use it. Too many bug.

[tcastelly]

No problem at all, thank you for your help :)