Add $dispatch.once in Alpine.js

[davidtowoju]

Description:

Currently, we dispatch events using $dispatch. However, there are situations where we want an event to be caught only once, similar to the { once: true } option in JavaScript's native addEventListener.

Proposal:

I suggest adding a new method or option, perhaps named $dispatch.once, that allows us to dispatch an event that will be caught only once. This would provide a convenient way to handle scenarios where we need to perform a specific action on the first occurrence of an event and then detach the listener.

Example Usage:

<!-- Dispatching the event -->
<button x-on:click="$dispatch.once('myEvent')">Dispatch Event</button>

<!-- Listening for the event only once -->
<div x-data @myEvent.window="handleEventOnce()">...</div>

[SimoTod]

once is a property of the listener, not the event and it's already supported: https://alpinejs.dev/directives/on#once

Unless you mean something different.

[davidtowoju]

@SimoTod
Thanks for the clarification. To elaborate on my request: I'm looking for a way so that when an event is triggered, only one specific listener (let's say A out of potential A, B, C, D listeners) responds the first time. After the first trigger, subsequent events should still have only A responding, no matter how many times the event is triggered.

Probably the use case I'm exploring might be too specific. I'll work on a custom solution for this myself

[ekwoka]

There's no way to do that at the dispatch side.

You'd use stop propagation on the listener to prevent other listeners from triggering.