Allow user of component to specify event and bind ordering.

[shaun-wild]

Describe the problem

The order of event and bind attributes matters in svelte, (See #4616).

It is currently possible to forward events from components. It is not possible to specify the order in which these events are fired.

Describe the proposed solution

Allow a component to specify the order of its events and binds are to be set by the caller.

The exact implementation of this, I'm not sure.

Maybe it could be an option?

<svelte:options preserveOrder />

<script>
export let value;
</script>

<input bind:value on:change />

Then the order of bind:value and on:change will be set on the parent component instead.

Alternatives considered

Making use of sensible defaults, it's probable a user will want the bind before the events.

Importance

would make my life easier

[mrkishi]

It is not possible to specify the order in which these events are fired.

As mentioned in the other issue, components can expose these kinds of options through their API:

<script>
    export let value;
    export let prebinding = false;
</script>

{#if prebinding}
    <input on:change bind:value />
{:else}
    <input bind:value on:change />
{/if}

Components are compiled individually, so even with the proposed compiler option we wouldn't be able to decide at build-time what order to pick and it'd have a similar runtime hit (at minimum).

The exact implementation of this, I'm not sure.

Maybe it could be an option?

I get the intention, and it sounds sensible to want a way for component attribute order to behave similarly to tag attribute order. On the other hand, it'd cause confusion as to why the order matters for some components but not others.

Implementation-wise, I'm not even convinced it's possible to come up with a satisfying behavior that handles all cases. For example, what should we do when we have forwarded events and bindings amongst actions and non-forwarded events?

<!-- Input.svelte -->
<input use:foo on:change use:bar bind:value />

<!-- Component.svelte -->
<Input bind:value on:change={handle}/>

Would this be bind, change, foo, bar, bind, foo, change, bar, foo, bar, bind, change, or foo, bind, change, bar? This would be surprising regardless of our choice, and it'd still be invisible to users of the component, so the component creator would have to be sure it worked regardless of order. And if some actions came from users, all bets would be off since Svelte wouldn't be able to tell and they'd appear to be executed in a random order.

Making use of sensible defaults, it's probable a user will want the bind before the events.

I don't think it's that clear. Anecdotally, I've personally never used both a binding and an event at the same time while giving the binding priority.