vue-output-target: Can't handle updating v-model value when the event name provided is on camelCase

[jonnelbergonia-vennbio]

I declared a custom event named ivInput on my custom component

And set the vue component model config on my stencil.config.js

But when I tried to use v-model on my Vue app, the model value is not updating. I checked the utils.ts and found out that the eventName is being converted to lower case (line 79).

eventName string case should not be converted or modified to lower case under the hood and should be matched exactly with what is being provided on the config. IMO

[EDITED]
I made it work for now by declaring a non-camel case eventName on the component event decorator. But as I said earlier,

eventName string case should not be converted or modified to lower case under the hood and should be matched exactly with what is being provided on the config. IMO

[christiancooksponge]

Had the same problem too, worked around it in the same fashion by declaring a kebab-case eventName. Not ideal but it works for the time being!

[rallu]

Same problem and same fix seems to be working.

[mayerraphael]

This is fixed now with Vue 3.2.38 onwards: vuejs/core#5401 (comment)

@rwaskiewicz Please fix the VueJS output target. With 3.2.38, which was released 8 months ago, VueJS works with any custom event names.

The problem now is that the events are still converted to lowercase in the output target:

stencil-ds-output-targets/packages/vue-output-target/vue-component-lib/utils.ts

Line 84 in cc2452b

vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => {

This should be at least configurable to be backwards compatible.

Edit:

Also, it is currently not possible to register event handlers for custom events that are not configured for the model update logic.

For example:

<my-component @myEvent="..."> // works
<MyComponent @myEvent=".."> // does not work, except myEvent is defined in externalModelUpdateEvent.

VueJS maps @myevent to an onMyEvent property. Internally VueJS uses toHandlerKey to convert an myEvent to onMyEvent and map to the correct property. These functions are even exported from "vue".

Therefor our custom event "myEvent" is not handled, if we do not re-emit them inside the utils and the correct mapping is applied.

I got it working by patching the generated utils.ts:

const onVnodeBeforeMount = ... {
 ...
 var eventProperties = Object.keys(vnode.props).filter(x => x.startsWith('on'));
eventProperties = eventProperties.map(x => {
  x = x.replace('on', '');
  x = x.charAt(0).toLowerCase() + x.slice(1);
  return x;
});

eventProperties.forEach((eventName: string) => {
  console.log(`Register event handler for ${eventName}`)
  vnode.el!.addEventListener(eventName, (e: Event) => {
    emit(eventName, e);
  });
});
}
...

[seanwuapps]

seems like it's been a while and the issues still persists.
ionic seems to bypass this by using a kebabCase converter function:

https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/ionic-vue.ts#L19
and replacing the addEventListener helper functions in ionic's initialize call...

I think removing the .toLowerCase() part in the adddEventListener call is the right way to go about this.