Any particular reason why camelCased event names not supported?

[jreviews]

This is in reference to #310 (comment)

I've been doing some tests with htmx.org and Alpine. htmx offers a number of events one can listen to, but they do have a camelCase format. For example htmx:afterRequest. So the following code doesn't work:

      <div 
        x-data
        hx-get="/load"
        hx-trigger="click"
        @htmx:afterRequest.window="console.log($event.detail.xhr.response)"
      >Load</div>

So, is there any particular reason why camelCased event names not supported? Is it an Alpine thing or camelCased events cause issues in general?

[ryangjchandler]

@jreviews html attributes aren't case sensitive, so it's not really down to Alpine it's just a DOM thing.

Why DOM no good 🤔

[jreviews]

Got it! thanks.

[HugoDF]

I think it might be worth having a look at how htmx does it, I dug around a bit yesterday and it looks like they're using their own event-emitter system in JS. Didn't find how they made camelCase in attributes work though 😄

[jreviews]

You can't listen to events in htmx like you do in Alpine. You have to add the addEventListener code in JS. I jumped on their Discord chat to ask if there was a possibility of changing the event names so they could be listened to in Alpine, and it looks like the change is going to happen.

[HugoDF]

Oh right, the current workaround would be to do the listening in JS in x-init window.addEventListener('htmx:afterRequest', () => {})?

[SimoTod]

I think so. As Ryan said, html attributes are case insensitive and they get lowercased by the browser before Alpine starts so, for example, @customEvent becomes @customevent and so on (https://html.spec.whatwg.org/multipage/dom.html#custom-data-attribute).
On the other hand, event names are case sensitive (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Syntax) so they don't match.
I think the modifier proposed in #597 is the only viable solution.