[WIP] Spread attributes and properties

[mrkishi]

So, I'm afraid I'm not able to get this feature to production because I'm severely lacking in the internals knowledge, but here's a PR you can play with.

It adds spread attributes/properties to both Component and Element tags, with restrictions previously explored here: only one spread per tag and named attributes have precedence over them.

There's no SSR at all and lots of code duplication. I'm still confused about the particularities of contextualise, the split between Components and Elements in the source and how to reuse code between them. I based this off attributes and, as far as I can tell, they too are not very reusable with the implementation split between Attribute and Component.

If anyone has tips on where to take this, I'll surely give it a try, but otherwise feel free to discard it with a proper implementation!

[Rich-Harris]

Thanks for tackling this @mrkishi, this will be an awesome feature if we pull it off. Will study the PR in more detail later when I get a moment, but it looks good on an initial read.

I'm still confused about the particularities of contextualise

Me too. That whole part of the codebase is kind of a rat's nest, I'm itching to refactor it.

[bestguy]

Hi, thanks for this. Is this in latest release (1.60.x) ?
If so, it's not clear how to use it. Was hoping to use this for on:* event handlers.
I'd like to be able to define reusable components like this:

<Button
   class="btn btn{{outline ? '-outline' : ''}}-{{color}}{{size ? ` btn-${size}` : ''}}{{block ? ' btn-block' : ''}}           {{ active ? ' active' : ''}}{{ disabled ? ' disabled' : ''}}"
   {{...props}}
 >
   {{yield}}
 </Button>

Then users can add whatever props they need, like aria, data, on: event handlers, etc:

<Button on:click="..." on:hover="...">Click Me</Button>

[Rich-Harris]

@bestguy yes, it's in the latest release. It only works for attributes, not directives like on:click. The easiest way to forward events is to use this shorthand...

<button on:click>click me</button>

...which is equivalent to

<button on:click="fire('click', event)">click me</button>

Note that {{yield}} was deprecated in favour of <slot></slot>, to align with the platform.

[bestguy]

Okay cool, thanks Rich. Am in process of updating to latest Svelte goodies, this helps