basic attachments working

Author: Rich-Harris

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

@@ -56,6 +56,7 @@ import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { UseDirective } from './visitors/UseDirective.js';
+import { UseTag } from './visitors/UseTag.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
@@ -131,6 +132,7 @@ const visitors = {
 	TransitionDirective,
 	UpdateExpression,
 	UseDirective,
+	UseTag,
 	VariableDeclaration
 };
 

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

@@ -82,7 +82,7 @@ export function RegularElement(node, context) {
 	/** @type {AST.StyleDirective[]} */
 	const style_directives = [];
 
-	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective>} */
+	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.UseTag>} */
 	const other_directives = [];
 
 	/** @type {ExpressionStatement[]} */
@@ -152,6 +152,10 @@ export function RegularElement(node, context) {
 				has_use = true;
 				other_directives.push(attribute);
 				break;
+
+			case 'UseTag':
+				other_directives.push(attribute);
+				break;
 		}
 	}
 

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

@@ -0,0 +1,21 @@
+/** @import { Expression } from 'estree' */
+/** @import { AST } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AST.UseTag} node
+ * @param {ComponentContext} context
+ */
+export function UseTag(node, context) {
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.attach',
+				context.state.node,
+				b.thunk(/** @type {Expression} */ (context.visit(node.expression)))
+			)
+		)
+	);
+	context.next();
+}

packages/svelte/src/compiler/types/template.d.ts

@@ -553,6 +553,7 @@ export namespace AST {
 		| AST.Attribute
 		| AST.SpreadAttribute
 		| Directive
+		| AST.UseTag
 		| AST.Comment
 		| Block;
 

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

@@ -0,0 +1,11 @@
+import { effect } from '../../reactivity/effects.js';
+
+/**
+ * @param {Element} node
+ * @param {() => (node: Element) => void} get_fn
+ */
+export function attach(node, get_fn) {
+	effect(() => {
+		get_fn()(node);
+	});
+}

packages/svelte/src/internal/client/index.js

@@ -27,6 +27,7 @@ export { element } from './dom/blocks/svelte-element.js';
 export { head } from './dom/blocks/svelte-head.js';
 export { append_styles } from './dom/css.js';
 export { action } from './dom/elements/actions.js';
+export { attach } from './dom/elements/attachments.js';
 export {
 	remove_input_defaults,
 	set_attribute,

packages/svelte/tests/runtime-runes/samples/attachment-basic/_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-basic/main.svelte

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