feat: support {@Attach ...} (#714)

Author: baseballyama

.changeset/public-sheep-speak.md

@@ -0,0 +1,5 @@
+---
+"svelte-eslint-parser": minor
+---
+
+feat: support `{@attach ...}`

docs/AST.md

@@ -169,6 +169,7 @@ interface SvelteStartTag extends Node {
     | SvelteAttribute
     | SvelteShorthandAttribute
     | SvelteSpreadAttribute
+    | SvelteAttachTag
     | SvelteDirective
     | SvelteStyleDirective
     | SvelteSpecialDirective
@@ -451,6 +452,18 @@ interface SvelteRenderTag extends Node {
 }
 ```
 
+### SvelteAttachTag
+
+This is `{@attach}` tag node.
+
+```ts
+export interface SvelteAttachTag extends BaseNode {
+  type: "SvelteAttachTag";
+  expression: ESTree.Expression;
+  parent: SvelteStartTag;
+}
+```
+
 ### SvelteIfBlock
 
 This is the `{#if}` tag node. `{:else if}` is also included in this node.

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,
@@ -48,6 +49,7 @@ export function* convertAttributes(
     | SvAST.AttributeOrDirective
     | Compiler.Attribute
     | Compiler.SpreadAttribute
+    | Compiler.AttachTag
     | Compiler.Directive
   )[],
   parent: SvelteStartTag,
@@ -56,6 +58,7 @@ export function* convertAttributes(
   | SvelteAttribute
   | SvelteShorthandAttribute
   | SvelteSpreadAttribute
+  | SvelteAttachTag
   | SvelteDirective
   | SvelteStyleDirective
 > {
@@ -68,6 +71,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 +351,31 @@ function convertSpreadAttribute(
   return attribute;
 }
 
+function convertAttachTag(
+  node: 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;
+  });
+
+  const atAttachStart = ctx.code.indexOf("@attach", attachTag.range[0]);
+  ctx.addToken("MustacheKeyword", {
+    start: atAttachStart,
+    end: atAttachStart + 7,
+  });
+
+  return attachTag;
+}
+
 /** Convert for Binding Directive */
 function convertBindingDirective(
   node: SvAST.DirectiveForExpression | Compiler.BindDirective,

src/parser/converts/element.ts

@@ -223,13 +223,19 @@ export function* convertChildren(
 function extractLetDirectives(fragment: {
   attributes:
     | SvAST.AttributeOrDirective[]
-    | (Compiler.Attribute | Compiler.SpreadAttribute | Compiler.Directive)[];
+    | (
+        | Compiler.Attribute
+        | Compiler.SpreadAttribute
+        | Compiler.AttachTag
+        | Compiler.Directive
+      )[];
 }): {
   letDirectives: (SvAST.LetDirective | Compiler.LetDirective)[];
   attributes: Exclude<
     | SvAST.AttributeOrDirective
     | Compiler.Attribute
     | Compiler.SpreadAttribute
+    | Compiler.AttachTag
     | Compiler.Directive,
     SvAST.LetDirective | Compiler.LetDirective
   >[];
@@ -239,6 +245,7 @@ function extractLetDirectives(fragment: {
     | SvAST.AttributeOrDirective
     | Compiler.Attribute
     | Compiler.SpreadAttribute
+    | Compiler.AttachTag
     | Compiler.Directive,
     SvAST.LetDirective | Compiler.LetDirective
   >[] = [];

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/visitor-keys.ts

@@ -42,6 +42,7 @@ const svelteKeys: SvelteKeysType = {
   SvelteAttribute: ["key", "value"],
   SvelteShorthandAttribute: ["key", "value"],
   SvelteSpreadAttribute: ["argument"],
+  SvelteAttachTag: ["expression"],
   SvelteDirective: ["key", "expression"],
   SvelteStyleDirective: ["key", "value"],
   SvelteSpecialDirective: ["key", "expression"],

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>