Allow spreading function bindings

[jackgdll]

Describe the problem

Function bindings are awesome, but you need to pass the getter and setter explicitly: bind:value={get, set}.

This syntax can become verbose and repetitive, especially when the getter and setter are returned together from a helper function.

For example, say you want to display a default value in an input but only set it back to the bound state if it was changed from the default. This can be achieved with the following utility:

export function bindWithDefault<T>(get: () => T, set: (value: T) => void, defaultValue: T) {
    return [
        () => get() ?? defaultValue,
        (v: T) => {
            if (get() !== undefined || v !== defaultValue) {
                set(v);
            }
        }
    ]
}

However, using this utility isn't very ergonomic for the reasons stated above:

<script>
    let name = $state(undefined);

    const [get, set] = bindWithDefault(
        () => name, 
        v => (name = v), 
        'world'
    );
</script>

<h1>Hello {name}!</h1>
<input bind:value={get, set} />

Playground

Describe the proposed solution

It would be nice to be able to spread in a tuple of functions, or an object with a get and/or set method instead of needing to declare them in the script or in a {@const ...} tag.

<input
  bind:value={...bindWithDefault(
    () => name,
    (v) => (name = v),
    "world"
  )}
/>

Importance

nice to have

[sukeshpabolu]

possible duplicate of #14617?

[brunnerh]

That proposal had syntactical issues, spreading on the other hand should work.