working

Author: Rich-Harris

packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js

@@ -74,7 +74,8 @@ export function visit_component(node, context) {
 			attribute.type !== 'SpreadAttribute' &&
 			attribute.type !== 'LetDirective' &&
 			attribute.type !== 'OnDirective' &&
-			attribute.type !== 'BindDirective'
+			attribute.type !== 'BindDirective' &&
+			attribute.type !== 'UseTag'
 		) {
 			e.component_invalid_directive(attribute);
 		}

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js

@@ -252,6 +252,15 @@ export function build_component(node, component_name, context, anchor = context.
 					);
 				}
 			}
+		} else if (attribute.type === 'UseTag') {
+			push_prop(
+				b.prop(
+					'init',
+					b.call('Symbol', b.literal('@use')),
+					b.thunk(/** @type {Expression} */ (context.visit(attribute.expression))),
+					true
+				)
+			);
 		}
 	}
 

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -13,6 +13,7 @@ import {
 	set_active_effect,
 	set_active_reaction
 } from '../../runtime.js';
+import { attach } from './attachments.js';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -407,6 +408,10 @@ export function set_attributes(
 		}
 	}
 
+	for (let symbol of Object.getOwnPropertySymbols(next)) {
+		attach(element, next[symbol]);
+	}
+
 	return current;
 }
 

packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>

packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js

@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>set from component</div>`
+});

packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child {@use (node) => node.textContent = 'set from component'} />

packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div><button>increment</button>`,
+	html: `<div>1</div><button>increment</button>`,
+
+	test: ({ assert, target }) => {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<div>2</div><button>increment</button>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	let value = $state(1);
+</script>
+
+<div {@use (node) => node.textContent = value}></div>
+<button onclick={() => value += 1}>increment</button>

packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js

@@ -0,0 +1,6 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `<div></div>`,
+	html: `<div>DIV</div>`
+});

packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte

@@ -0,0 +1 @@
+<svelte:element this={'div'} {@use (node) => node.textContent = node.nodeName}></svelte:element>