An $attachments() rune alongside with $props()

[sourcecaster]

Right now the documentation says:

When used on a component, {@Attach ...} will create a prop whose key is a Symbol. If the component then spreads props onto an element, the element will receive those attachments.

Which makes handling attachments inside the component a bit tricky, basically I'm using this approach:

<script>
	let { title, text, ...props } = $props();
	let customStylingAttachment = props[Object.getOwnPropertySymbols(props)[0]];
</script>

<div {@attach customStylingAttachment}>
... whatever goes here with {title} and {text}
</div>

Probably it would be nice to use something like:

<script>
	let { title, text } = $props();
	let attachments = $attachments();
</script>

<div {@attach attachments[0]}>
... whatever goes here with {title} and {text}
</div>

[brunnerh]

The whole point is that everything can be spread along the rest of the properties and events.

Why do you want to separate it?
If you are looking for something specific being passed in, just make it a named property instead.

[webJose]

If you already know you're getting an attachment, you can explicitly define it in your props:

<script>
-	let { title, text, ...props } = $props();
+	let { title, text, styling, ...props } = $props();
-	let customStylingAttachment = props[Object.getOwnPropertySymbols(props)[0]];
</script>

-<div {@attach customStylingAttachment}>
+<div {@attach styling}>
... whatever goes here with {title} and {text}
</div>

Then you pass the attachment function as a simple prop.

[webJose]

<script>
	let { title, text, ...props } = $props();
-	let customStylingAttachment = props[Object.getOwnPropertySymbols(props)[0]];
</script>

-<div {@attach customStylingAttachment}>
+<div {...props}>
... whatever goes here with {title} and {text}
</div>

Just spread the props. It will apply any attachments carried by the component, so your desired <Button {@attach randomStyle()} title="OK"/> syntax will work OK.

[sourcecaster]

For a single attachment – yes, it works. For multiple ones however that doesn't help much because I might want to apply them to different elements within the component:

<script>
	let { title, text, ...props } = $props();
	let [colors, effect] = $attachments();
</script>

<div {@attach colors}>
	<div class="title" {@attach effect}>{title}</div>
	<div>{text}</div>
</div>

[webJose]

Your proposal has no way to identify which is which, so even if you were to advocate this particular case, your proposal is insufficient. Your $attachments rune merely returns an array, so will users of your component be forced to add attachments in a particular order? What if one of the attachments is optional? Then the index shifts. Also, in Svelte we are never supposed to care about property order. Forcing a particular order of things is not sveltey at all.

In the end, it is up to you if you wish to pursue implementation of this kind of thing, but you'll find resistance like the one I'm posing. I wouldn't mind attachments to evolve, but they must evolve correctly. I don't think your proposal is correct. Of course, my very own opinion.

[webJose]

Oh, and to show how this can be done today:

// Title.svelte
+<script>
+	let {title, ...props } = $props();
+</script>
+<div class="title" {...props}>{title}</div>

// Parent.svelte
<script>
+	import Title from './Title.svelte';
-	let { title, text, ...props } = $props();
+	let { title, text, titleProps, ...props } = $props();
-	let [colors, effect] = $attachments();
</script>

-<div {@attach colors}>
+<div {...props}>
-	<div class="title" {@attach effect}>{title}</div>
+	<Title {title} {...titleProps} />
	<div>{text}</div>
</div>

[sourcecaster]

Yes you're absolutely right about the order and shifting index.