Treat onCustomEvent as on-custom-event

[thenickname]

This is a suggestion to make event attribute names in JSX more consistent with other props and attributes. Among other things this would simplify providing event types for TSX and make better use of the already existing editor support (vscode)

The problem: If a vue component emits following event:

this.$emit( 'custom-event' );

It is impossible to listen for it in JSX using camelCase:

render() {
    return (
        <MyComp onCustomEvent={...}/> // will not work
    );
}

One is forced to do one of the following:

render() {
    return (
        <div>
             // works, but is inconsistent with how other JSX attributes are usually written
            <MyComp onCustom-event={...}/> 
            // also works, but is inconsistent with how other JSX attributes are usually written
            <MyComp on-custom-event={...}/> 
        </div>
    );
}

While the above examples do work, they are somewhat inconsistent with how all other JSX attributes are usually written. I belive it is more common to have all attributes camelCase.

Also, when working with TSX in vscode, autocomplete suggestions for props are all camelCase. However, because vue events like custom-event do not translate to onCustomEvents in JSX it makes things more difficult when working with Vue, TypeScript and TSX.

[nickmessing]

@thenickname, fair point, but I am not sure we want to convert all events to kebab-case because if someone does this.$emit('camelCased') it won't work. Maybe we could consider adding this to the core. @chrisvfritz, opinion here?

[chrisvfritz]

@nickmessing I agree we should fix this in core by creating both camelCase and kebab-case versions of all listeners. 🙂

[chrisvfritz]

@nickmessing Evan's reasoning in this issue makes sense to me, so I think we probably have to close this unfortunately. @thenickname While I like the idea, it would make some technically valid events impossible to listen for in JSX.

On the bright side, I've just submitted a proposal to the team to strictly enforce lowercase event names in Vue 3, which would solve this problem and many others related to events. 🎉