Spreadable actions: the `use*` attribute

[fcrozatier]

Describe the problem

Spreadable actions would be great for ergonomics in particular with components.

Describe the proposed solution

Removing the use:* directive in favor of a use* attribute in a move similar to the on:* directive -> on* attribute would allow spreadable actions.

• It could be added to the HTMLAttribute interface something like

export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
  [actions: `use${string}`]: Action<T>
}

• This way we can grab actions in a component rest attribute without having to manage actions in a particular way. Which makes our components future proof as we can later add more actions without reopening the component file + adding a use: directive

// Button.svelte
<script lang="ts">
  // Action-ability is already in the type, nothing to do here
  export let {children, ...rest}: HTMLButtonAttributes = $props();
</script>

<button {...rest}>{@render children()}</button>

// +page.svelte
<Button useclickoutside={(node /* typed as HTMLButton */) => {...}}>click me</Button>

• If the action takes params they can be passed in the use*params attribute

// +page.svelte
<Button useclickoutside={(node, options = {message: "nope"}) => {...}} useclickoutsideparams={{message: "clicked outside"}}>click me</Button>

• No dash (unlike data- attributes) to avoid double quotes everywhere

Importance

would make my life easier

[Conduitry]

Thank you for the write-up. We do have plans, post-5.0, to introduce something spreadable (maybe where the keys are Symbols?) that can be used like this, and maybe also unify transitions and animations with it as well. A lot of details still need to be ironed out (which we're putting off until after 5.0 is out the door), but it's going to be a different API than the existing use: actions, likely relying on $effects for update/destroy. We'll open an issue once we've had more time to think about this and come up with a proposal.

[fcrozatier]

Thank you for the feedback. It's great to hear that there are plans that could unify actions, transitions and animations!
Hopefully this will be compatible with the CSS Animation API?
Looking forward to see what's cooking!

[Azarattum]

This is definitely a much anticipated feature! Any chance to know whether this is planned for 5.x or 6+?