From 2329284d9265454099e183a738ec8d3666752640 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 20 Dec 2024 00:23:04 -0500
Subject: [PATCH] working

---
 .../phases/2-analyze/visitors/shared/component.js  |  3 ++-
 .../client/visitors/shared/component.js            |  9 +++++++++
 .../src/internal/client/dom/elements/attributes.js |  5 +++++
 .../samples/attachment-component/Child.svelte      |  5 +++++
 .../samples/attachment-component/_config.js        |  6 ++++++
 .../samples/attachment-component/main.svelte       |  5 +++++
 .../samples/attachment-reactive/_config.js         | 14 ++++++++++++++
 .../samples/attachment-reactive/main.svelte        |  6 ++++++
 .../samples/attachment-svelte-element/_config.js   |  6 ++++++
 .../samples/attachment-svelte-element/main.svelte  |  1 +
 10 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 04bf3d2ff3..4f54606b7f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/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);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 068971145c..ef21123082 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/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
+				)
+			);
 		}
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 9c62d684c1..dedba81031 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/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;
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
new file mode 100644
index 0000000000..6760da61fa
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/attachment-component/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let props = $props();
+</script>
+
+<div {...props}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-component/_config.js
new file mode 100644
index 0000000000..fa1c9b0599
--- /dev/null
+++ b/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>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-component/main.svelte
new file mode 100644
index 0000000000..c8b918fa6f
--- /dev/null
+++ b/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'} />
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/_config.js
new file mode 100644
index 0000000000..7d0502590b
--- /dev/null
+++ b/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>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-reactive/main.svelte
new file mode 100644
index 0000000000..b66560ff7d
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/_config.js
new file mode 100644
index 0000000000..1be4737069
--- /dev/null
+++ b/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>`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte b/packages/svelte/tests/runtime-runes/samples/attachment-svelte-element/main.svelte
new file mode 100644
index 0000000000..0b615883f9
--- /dev/null
+++ b/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>