feat: support attach tag

Author: baseballyama

package.json

@@ -105,7 +105,7 @@
     "prettier-plugin-svelte": "^3.3.3",
     "rimraf": "^6.0.1",
     "semver": "^7.7.1",
-    "svelte": "^5.25.3",
+    "svelte": "^5.30.1",
     "svelte2tsx": "^0.7.35",
     "tsx": "^4.19.3",
     "typescript": "~5.8.2",

src/ast/html.ts

@@ -31,6 +31,7 @@ export type SvelteHTMLNode =
   | SvelteAttribute
   | SvelteShorthandAttribute
   | SvelteSpreadAttribute
+  | SvelteAttachTag
   | SvelteDirective
   | SvelteStyleDirective
   | SvelteSpecialDirective
@@ -142,6 +143,7 @@ export interface SvelteStartTag extends BaseNode {
     | SvelteAttribute
     | SvelteShorthandAttribute
     | SvelteSpreadAttribute
+    | SvelteAttachTag
     | SvelteDirective
     | SvelteStyleDirective
     | SvelteSpecialDirective
@@ -541,6 +543,12 @@ export interface SvelteSpreadAttribute extends BaseNode {
   parent: SvelteStartTag;
 }
 
+export interface SvelteAttachTag extends BaseNode {
+  type: "SvelteAttachTag";
+  expression: ESTree.Expression;
+  parent: SvelteStartTag;
+}
+
 /** Node of directive. e.g. `<input bind:value />` */
 export type SvelteDirective =
   | SvelteActionDirective

src/parser/converts/attr.ts

@@ -3,6 +3,7 @@ import type {
   SvelteAnimationDirective,
   SvelteAttribute,
   SvelteShorthandAttribute,
+  SvelteAttachTag,
   SvelteBindingDirective,
   SvelteClassDirective,
   SvelteDirective,
@@ -56,6 +57,7 @@ export function* convertAttributes(
   | SvelteAttribute
   | SvelteShorthandAttribute
   | SvelteSpreadAttribute
+  | SvelteAttachTag
   | SvelteDirective
   | SvelteStyleDirective
 > {
@@ -68,6 +70,10 @@ export function* convertAttributes(
       yield convertSpreadAttribute(attr, parent, ctx);
       continue;
     }
+    if (attr.type === "AttachTag") {
+      yield convertAttachTag(attr, parent, ctx);
+      continue;
+    }
     if (attr.type === "BindDirective" || attr.type === "Binding") {
       yield convertBindingDirective(attr, parent, ctx);
       continue;
@@ -344,6 +350,25 @@ function convertSpreadAttribute(
   return attribute;
 }
 
+function convertAttachTag(
+  node: SvAST.AttachTag | Compiler.AttachTag,
+  parent: SvelteAttachTag["parent"],
+  ctx: Context,
+): SvelteAttachTag {
+  const attachTag: SvelteAttachTag = {
+    type: "SvelteAttachTag",
+    expression: node.expression,
+    parent,
+    ...ctx.getConvertLocation(node),
+  };
+
+  ctx.scriptLet.addExpression(node.expression, attachTag, null, (es) => {
+    attachTag.expression = es;
+  });
+
+  return attachTag;
+}
+
 /** Convert for Binding Directive */
 function convertBindingDirective(
   node: SvAST.DirectiveForExpression | Compiler.BindDirective,

src/parser/svelte-ast-types-for-v5.ts

@@ -37,6 +37,7 @@ export type SnippetBlock = AST.SnippetBlock;
 export type Comment = AST.Comment;
 export type Attribute = AST.Attribute;
 export type SpreadAttribute = AST.SpreadAttribute;
+export type AttachTag = AST.AttachTag;
 export type AnimateDirective = AST.AnimateDirective;
 export type BindDirective = AST.BindDirective;
 export type ClassDirective = AST.ClassDirective;

src/parser/svelte-ast-types.ts

@@ -203,9 +203,16 @@ export interface AttributeShorthand extends BaseNode {
   type: "AttributeShorthand";
   expression: ESTree.Identifier;
 }
+
+export interface AttachTag extends BaseNode {
+  type: "AttachTag";
+  expression: ESTree.Expression;
+}
+
 export type AttributeOrDirective =
   | Attribute
   | Spread
+  | AttachTag
   | Directive
   | StyleDirective;
 

tests/fixtures/parser/ast/svelte5/attach-ts-01-input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+
+
+	const myAttachment: Attachment = (element) => {
+		console.log(element.nodeName); // 'DIV'
+
+		return () => {
+			console.log('cleaning up');
+		};
+	};
+</script>
+
+<div {@attach myAttachment}>...</div>