Listen for bootstrap events?

[quasipickle]

I'm wondering if v3 has an ability to listen for bootstrap custom events (ex: "shown.bs.modal"). I guess the "." conflicts with Alpine syntax for adding modifiers to events, but is there alternate syntax one can use? Something like:

<div class = "modal" @[shown.bs.modal]="doSomething()">

???

[KevinBatdorf]

I've seen this asked a few times. Probably worth making a PR and asking for comment. It should be relatively simple to set up. You just need to be able to preserve known modifiers and then transform the rest similar to how camel works.

alpine/packages/alpinejs/src/utils/on.js

Line 13 in b46c41f

if (modifiers.includes('camel')) event = camelCase(event)

Maybe <div @shown.bs.modal.dot> which just transforms everything before .dot so you can preserve shown.bs.modal.dot.window etc, and keep it framework agnostic

[quasipickle]

It's no different than having users use dashes when initially they'd want to use camelCase. The reason is different, but the end result - a modification of the event name - is the same. That's a strength of this approach - its behaviour is the same as the existing .camel modifier and doesn't introduce new syntax.

I didn't look into using () or [] - this seemed much simpler. I guess I could still take a look, but I do think the PRs approach is superior.

[KevinBatdorf]

Yeah I guess if it matches camel case then it's probably better. You're probably right. Let's see how Caleb responds.

[SimoTod]

Doesn't boostrap have some events with both dashes and dots though?

[SimoTod]

I like the grouping thing but I'm biased :)
It should be doable changing the regex at https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives.js#L137 to something like /:([a-zA-Z0-9\-:]+|\([a-zA-Z0-9\-:\.]+\))/ and trimming out the parentheses at https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives.js#L143

Caleb might not like it though this is just my personal opinion

[quasipickle]

I was looking into that as you posted the regex. We'd also have to modify the regex for modifiers too.

I guess we could do both, but yeah - let's see what the Grand Poobah thinks.