Use Lustre’s built-in event debouncing to wait a delay after a burst of events before dispatching the most recent one. You can visualise debounced events like so:

 original : --a-b-cd--e----------f--------
debounced : ---------------e----------f---

This is particularly useful for server components where many events in quick succession can introduce problems because of network latency.

Note: debounced events inherently introduce latency. Try to consider typical interaction patterns and experiment with different delays to balance responsiveness and update frequency.

Dispatches a custom message from a Lustre component. This lets components communicate with their parents the same way native DOM elements do.

Any JSON-serialisable payload can be attached as additional data for any event listeners to decode. This data will be on the event’s detail property.

Listens for the given event and applies the handler to the event object. If the handler returns an Ok the resulting message will be dispatched, otherwise the event (and any decoding error) will be ignored.

The event name is typically an all-lowercase string such as “click” or “mousemove”. If you’re listening for non-standard events (like those emitted by a custom element) their event names might be slightly different.

Listens for change events on elements such as <input>, <textarea> and <select>. This handler automatically decodes the string value of the input and passes it to the given message function. This is commonly used to implement controlled inputs.

Listens for change events on <input type="checkbox"> elements. This handler automatically decodes the boolean value of the checkbox and passes it to the given message function. This is commonly used to implement controlled inputs.

Listens for input events on elements such as <input>, <textarea> and <select>. This handler automatically decodes the string value of the input and passes it to the given message function. This is commonly used to implement controlled inputs.

Listens for key down events on an element, and dispatches a message with the current key being pressed.

Listens for key presses on an element, and dispatches a message with the current key being pressed.

Listens for key up events on an element, and dispatches a message with the current key being released.

Listens for submit events on a <form> element and receives a list of name/value pairs for each field in the form. Files are not included in this list: if you need them, you can write your own handler for the "submit" event and decode the non-standard detail.formData property manually.

This handler is best paired with the formal package which lets you process form submissions in a type-safe way.

This will automatically call prevent_default to stop the browser’s native form submission. In a Lustre app you’ll want to handle that yourself as an Effect.

Indicate that the event should have its default behaviour cancelled. This is equivalent to calling event.preventDefault() in JavaScript.

Indicate that the event should not propagate to parent elements. This is equivalent to calling event.stopPropagation() in JavaScript.

Use Lustre’s built-in event throttling to restrict the number of events that can be dispatched in a given time period. You can visualise throttled events like so:

original : --a-b-cd--e----------f--------
throttled : -a------ e----------e--------

This is particularly useful for server components where many events in quick succession can introduce problems because of network latency.

Note: throttled events inherently reduce precision. Try to consider typical interaction patterns and experiment with different delays to balance responsiveness and update frequency.