rename to attach

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -480,24 +480,24 @@ function read_static_attribute(parser) {
 
 /**
  * @param {Parser} parser
- * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.UseTag | null}
+ * @returns {AST.Attribute | AST.SpreadAttribute | AST.Directive | AST.AttachTag | null}
  */
 function read_attribute(parser) {
 	const start = parser.index;
 
 	if (parser.eat('{')) {
 		parser.allow_whitespace();
 
-		if (parser.eat('@use')) {
+		if (parser.eat('@attach')) {
 			parser.require_whitespace();
 
 			const expression = read_expression(parser);
 			parser.allow_whitespace();
 			parser.eat('}', true);
 
-			/** @type {AST.UseTag} */
+			/** @type {AST.AttachTag} */
 			const use = {
-				type: 'UseTag',
+				type: 'AttachTag',
 				start,
 				end: parser.index,
 				expression

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

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

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

@@ -56,7 +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 { AttachTag } from './visitors/AttachTag.js';
 import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
@@ -132,7 +132,7 @@ const visitors = {
 	TransitionDirective,
 	UpdateExpression,
 	UseDirective,
-	UseTag,
+	AttachTag,
 	VariableDeclaration
 };
 

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

@@ -4,10 +4,10 @@
 import * as b from '../../../../utils/builders.js';
 
 /**
- * @param {AST.UseTag} node
+ * @param {AST.AttachTag} node
  * @param {ComponentContext} context
  */
-export function UseTag(node, context) {
+export function AttachTag(node, context) {
 	context.state.init.push(
 		b.stmt(
 			b.call(

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 | AST.UseTag>} */
+	/** @type {Array<AST.AnimateDirective | AST.BindDirective | AST.OnDirective | AST.TransitionDirective | AST.UseDirective | AST.AttachTag>} */
 	const other_directives = [];
 
 	/** @type {ExpressionStatement[]} */
@@ -153,7 +153,7 @@ export function RegularElement(node, context) {
 				other_directives.push(attribute);
 				break;
 
-			case 'UseTag':
+			case 'AttachTag':
 				other_directives.push(attribute);
 				break;
 		}

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

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

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

@@ -174,9 +174,9 @@ export namespace AST {
 		};
 	}
 
-	/** A `{@use foo(...)} tag */
-	export interface UseTag extends BaseNode {
-		type: 'UseTag';
+	/** A `{@attach foo(...)} tag */
+	export interface AttachTag extends BaseNode {
+		type: 'AttachTag';
 		expression: Expression;
 	}
 
@@ -279,7 +279,7 @@ export namespace AST {
 
 	interface BaseElement extends BaseNode {
 		name: string;
-		attributes: Array<Attribute | SpreadAttribute | Directive | UseTag>;
+		attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;
 		fragment: Fragment;
 	}
 
@@ -553,7 +553,7 @@ export namespace AST {
 		| AST.Attribute
 		| AST.SpreadAttribute
 		| Directive
-		| AST.UseTag
+		| AST.AttachTag
 		| AST.Comment
 		| Block;
 

packages/svelte/tests/parser-modern/samples/attachments/input.svelte

@@ -1 +1 @@
-<div {@use (node) => {}} {@use (node) => {}}></div>
+<div {@attach (node) => {}} {@attach (node) => {}}></div>

packages/svelte/tests/parser-modern/samples/attachments/output.json

@@ -2,33 +2,33 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 51,
+	"end": 57,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
 		"nodes": [
 			{
 				"type": "RegularElement",
 				"start": 0,
-				"end": 51,
+				"end": 57,
 				"name": "div",
 				"attributes": [
 					{
-						"type": "UseTag",
+						"type": "AttachTag",
 						"start": 5,
-						"end": 24,
+						"end": 27,
 						"expression": {
 							"type": "ArrowFunctionExpression",
-							"start": 11,
-							"end": 23,
+							"start": 14,
+							"end": 26,
 							"loc": {
 								"start": {
 									"line": 1,
-									"column": 11
+									"column": 14
 								},
 								"end": {
 									"line": 1,
-									"column": 23
+									"column": 26
 								}
 							},
 							"id": null,
@@ -38,55 +38,55 @@
 							"params": [
 								{
 									"type": "Identifier",
-									"start": 12,
-									"end": 16,
+									"start": 15,
+									"end": 19,
 									"loc": {
 										"start": {
 											"line": 1,
-											"column": 12
+											"column": 15
 										},
 										"end": {
 											"line": 1,
-											"column": 16
+											"column": 19
 										}
 									},
 									"name": "node"
 								}
 							],
 							"body": {
 								"type": "BlockStatement",
-								"start": 21,
-								"end": 23,
+								"start": 24,
+								"end": 26,
 								"loc": {
 									"start": {
 										"line": 1,
-										"column": 21
+										"column": 24
 									},
 									"end": {
 										"line": 1,
-										"column": 23
+										"column": 26
 									}
 								},
 								"body": []
 							}
 						}
 					},
 					{
-						"type": "UseTag",
-						"start": 25,
-						"end": 44,
+						"type": "AttachTag",
+						"start": 28,
+						"end": 50,
 						"expression": {
 							"type": "ArrowFunctionExpression",
-							"start": 31,
-							"end": 43,
+							"start": 37,
+							"end": 49,
 							"loc": {
 								"start": {
 									"line": 1,
-									"column": 31
+									"column": 37
 								},
 								"end": {
 									"line": 1,
-									"column": 43
+									"column": 49
 								}
 							},
 							"id": null,
@@ -96,33 +96,33 @@
 							"params": [
 								{
 									"type": "Identifier",
-									"start": 32,
-									"end": 36,
+									"start": 38,
+									"end": 42,
 									"loc": {
 										"start": {
 											"line": 1,
-											"column": 32
+											"column": 38
 										},
 										"end": {
 											"line": 1,
-											"column": 36
+											"column": 42
 										}
 									},
 									"name": "node"
 								}
 							],
 							"body": {
 								"type": "BlockStatement",
-								"start": 41,
-								"end": 43,
+								"start": 47,
+								"end": 49,
 								"loc": {
 									"start": {
 										"line": 1,
-										"column": 41
+										"column": 47
 									},
 									"end": {
 										"line": 1,
-										"column": 43
+										"column": 49
 									}
 								},
 								"body": []
@@ -138,4 +138,4 @@
 		]
 	},
 	"options": null
-}
+}

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

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

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

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

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

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

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

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