Bootstrap event support?

[KevinBatdorf]

Bootstrap has events that look like this:

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})

Which Alpine can't register listeners for (@hidden.bs.collapse would end up @hidden)

I haven't put a lot of thought into it yet but maybe it's something a helper can solve. Or if not we can set up some ideas here to help Bootstrap users still use Alpine event listeners.

[HugoDF]

Are these jQuery style events? We could have a thing that listens to jQuery/bootstrap events and changes the casing for use in Alpine.js style x-on directives

[KevinBatdorf]

yeah I think it's jQuery syntax there, but people would use Alpine instead of jQuery. I just grabbed the example from the docs, which I forgot to link to.

https://getbootstrap.com/docs/4.5/components/collapse/#events

[quasipickle]

v4 does jQuery style events. v5 is doing native events though.

[SimoTod]

I'm not sure if we can fix it outside the code. Alpine doesn't support custom directives ye.
It could be fixed in the core using a modifier (like Ryan did for camelcase events) if Caleb is interested in supporting it.
I don't think vue supports those event names either

[KevinBatdorf]

I was thinking we could add a helper that sits in x-init and lets you map out events of any kind and called with in the component scope. Like

<div x-data x-init="$events({'hidden.bs.collapse': callback()})">

Not sure how useful it would be outside of the above use case though. Haven't tried anything either so not sure it will even work yet. Just an initial thought :)

[SimoTod]

I'm not a big fan of x-init because code doesn't sit on the relevant dom element which it's a bit against the purpose of Alpine. It would be better if we could convince Calrb to handle that in the core

[KevinBatdorf]

yeah agreed.

Or it could also work like a jQuery method$on('hidden.bs.collapse', $refs.map, callback)

[quasipickle]

From one end-user's perspective, these types of events should be handled as closely to other events if possible. Being able to @click, but needing to set up $events for non-standard names is a bit counter-intuitive to me.

What about using quotes? or brackets? Something like:

@'hidden.bs.collapse'
@[hidden.bs.collapse]

[KevinBatdorf]

I agree. That would have to be something added to Alpine core though.

Another idea:@hidden\.bs\.collapse

[HugoDF]

If we're talking outside of core, the best we can do is replace the . with - so that you can use x-on syntax

[quasipickle]

Why must it be outside of the core? Sorry for any ignorance, I'm the only non-maintainer here.

[SimoTod]

This repo is not official. To be in the core, it must be approved by Caleb so it depends whether or not he feels it's an issue

[KevinBatdorf]

Yeah the intent of this repo is to fill in the gaps of what we feel is missing from core, is not yet in core, what could be removed from core, or what would be an edge case that could be useful but doesn't make sense in core.