`bind:` directive modifier to specify when state updates

[daytonlowell]

Describe the problem

As a long-time Ractive.js user, I found the lazy directive to be extremely useful and ergonomically designed. It allowed you, when using two-way binding, to control when the backing state was updated. A value of true meant onchange, false was oninput, and a numeric value specified a debounce delay in milliseconds.

Currently, we use custom Svelte components in our apps that wrap <input> and <textarea> elements. These components both use a Svelte action to implement a “lazy” behavior, allowing us to mimic the directive from Ractive.

Describe the proposed solution

I'm not sure if the Svelte team is still cool with modifiers, but I was thinking it could be a modifier on the bind: directive, for example:

<input bind:value|change={name}> <!-- This would update the state on change -->

This has the advantage that you could have state update on any event, for example, blur

<input bind:value|blur={name}> <!-- This would update the state on blur -->

Importance

would make my life easier

[Ocean-OS]

You can recreate this with attachments.