feature request: custom event modifier

[skyboyer]

By now I have only one example where it could be useful: throttling and debouncing.

<input on:change.throttle200={loadSuggestions}

<input on:change:debounce1000={runSomeHeavyValidation}

Also there is interesting idea on checking keycode in declarative way mentioned in #1088

Currently we can keep throttling/branching into handler but the same as .stopPropagaion it's not part of business logic rather details on how it's integrated. And with declarative way utilizing event modifier it looks more clear and easier to compose.

Does it make sense?

[Rich-Harris]

This sort of thing can be achieved like so: https://svelte.dev/repl/a2431204cba841a0967900fb15c23e2c?version=3.6.4

<div on:mousemove={throttle(handleMousemove, 200)}>

[skyboyer]

I see. missed that handler may be an expression too.

[qurafi]

This sort of thing can be achieved like so: https://svelte.dev/repl/a2431204cba841a0967900fb15c23e2c?version=3.6.4

<div on:mousemove={throttle(handleMousemove, 200)}>

Although we can already achieve this but I will still prefer to support passing custom functions. This will allow us to share common logic between multiple handlers without focusing too much into it and also in other situation if we want to support another new official modifier it will not necessarily require a new compiler change.

For example let say you want to use keyboard shortcuts instead of doing ugly parenthesis key.ctrl(key.b(event)) or adding checks in every handler we do instead on:keyup|key.ctrl|key.b. This will give us a lot of flexibility and will produce a cleaner code.

[PierBover]

But wouldn't using a function produce an error if the timeout triggers after the component has been unmounted?

In the example Rich posted:

<div on:mousemove={throttle(handleMousemove, 200)}>

What if the component holding this div is unmounted?

If the debouncing was integrated into the Svelte core, it could clear the timeout when the unmount happens.

Another solution is using an action:

export default function (node, {eventName, handler, time}) {
  let timeout;

  function onEvent (event) {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      handler(event);
    }, time);
  }

  node.addEventListener(eventName, onEvent);

  return {
    destroy () {
      clearTimeout(timeout);
      node.removeEventListener(eventName, onEvent);
    }
  }
}