Describe the problem

Currently it's possible to spread only non-event props, because on: and other directives, such as bind:, do not work inside a spread object.

Example REPL.

Use case: I'm converting an existing application from React that creates UI from JSON files to Svelte. Events, such as onChange, onClick are created dynamically at runtime and passed to components during their render lifecycle using spread props (for encapsulation/abstraction purposes due to recursive nature of the framework).

Describe the proposed solution

Enable spread props for all prop directives, including modifiers, so that this code would work:

<script>
  let props = {'on:click|once': (e) => {alert(e)}}
</script>
<div {...props}>Click Me</div>

Alternatives considered

Enable spread props for event bindings without directives

<script>
  let props = {'onClick': (e) => {alert(e)}}
</script>
<div {...props}>Click Me</div>

Importance

i cannot use svelte without it