feat(svelte-ast-print): Add support for AttachTag (#127)

xeho91 · web-flow · commit 2cf6431a43f6 · 2025-05-31T13:48:48.000+08:00
diff --git a/.changeset/cold-eggs-grin.md b/.changeset/cold-eggs-grin.md
@@ -0,0 +1,5 @@
+---
+"svelte-ast-print": minor
+---
+
+✨ Add support for new AST node - `AttachTag` - via function `printAttachTag()`
diff --git a/.changeset/easy-doors-fetch.md b/.changeset/easy-doors-fetch.md
@@ -0,0 +1,5 @@
+---
+"svelte-ast-print": minor
+---
+
+Required peer dependency `svelte` is now `v5.29`
diff --git a/packages/svelte-ast-print/src/_internal/template/element-like.ts b/packages/svelte-ast-print/src/_internal/template/element-like.ts
@@ -1,11 +1,13 @@
 import type { AST as SV } from "svelte/compiler";
+
 import { printFragment } from "../../fragment.ts";
 import { printAttributeLike } from "../../template/attribute-like.ts";
-import * as char from "../char.js";
-import { has_frag_text_or_exp_tag_only } from "../fragment.js";
-import { HTMLClosingTag, HTMLOpeningTag, HTMLSelfClosingTag } from "../html.js";
-import type { PrintOptions } from "../option.js";
-import { type Result, State } from "../shared.js";
+import { printAttachTag } from "../../template/tag.ts";
+import * as char from "../char.ts";
+import { has_frag_text_or_exp_tag_only } from "../fragment.ts";
+import { HTMLClosingTag, HTMLOpeningTag, HTMLSelfClosingTag } from "../html.ts";
+import type { PrintOptions } from "../option.ts";
+import { type Result, State, Wrapper } from "../shared.ts";
 
 /**
  * @internal
@@ -102,15 +104,23 @@ export function print_maybe_self_closing_el<N extends SV.ElementLike>(params: {
 			n.name,
 		);
 		if (n.attributes.length > 0) {
-			for (const a of n.attributes) tag.insert(char.SPACE, printAttributeLike(a));
+			print_element_like_attributes({
+				attributes: n.attributes,
+				opts,
+				tag,
+			});
 		}
 		tag.insert(char.SPACE);
 		st.add(tag);
 		return st.result;
 	}
 	const opening = new HTMLOpeningTag("inline", n.name);
 	if (n.attributes.length > 0) {
-		for (const a of n.attributes) opening.insert(char.SPACE, printAttributeLike(a));
+		print_element_like_attributes({
+			attributes: n.attributes,
+			opts,
+			tag: opening,
+		});
 	}
 	st.add(opening);
 	const should_break =
@@ -135,7 +145,11 @@ export function print_self_closing_el<N extends SV.ElementLike>(params: {
 	const st = State.get(params.n, opts);
 	const tag = new HTMLSelfClosingTag("inline", n.name);
 	if (n.attributes.length > 0) {
-		for (const a of n.attributes) tag.insert(char.SPACE, printAttributeLike(a, opts));
+		print_element_like_attributes({
+			attributes: n.attributes,
+			opts,
+			tag,
+		});
 	}
 	tag.insert(char.SPACE);
 	st.add(tag);
@@ -154,7 +168,11 @@ export function print_non_self_closing_el<N extends SV.ElementLike>(params: {
 	const st = State.get(n, opts);
 	const opening = new HTMLOpeningTag("inline", n.name);
 	if (n.attributes.length > 0) {
-		for (const a of n.attributes) opening.insert(char.SPACE, printAttributeLike(a));
+		print_element_like_attributes({
+			attributes: n.attributes,
+			opts,
+			tag: opening,
+		});
 	}
 	st.add(opening);
 	const should_break =
@@ -186,3 +204,21 @@ export function isElementLike(n: SV.BaseNode): n is SV.ElementLike {
 		"SvelteBoundary",
 	]).has(n.type);
 }
+
+function print_element_like_attributes({
+	attributes,
+	tag,
+	opts,
+}: {
+	attributes: SV.ElementLike["attributes"];
+	tag: Wrapper;
+	opts: Partial<PrintOptions>;
+}) {
+	for (const a of attributes) {
+		if (a.type === "AttachTag") {
+			tag.insert(char.SPACE, printAttachTag(a, opts));
+		} else {
+			tag.insert(char.SPACE, printAttributeLike(a, opts));
+		}
+	}
+}
diff --git a/packages/svelte-ast-print/src/fragment.test.ts b/packages/svelte-ast-print/src/fragment.test.ts
@@ -7,13 +7,26 @@ import { printFragment } from "./fragment.ts";
 describe(printFragment, () => {
 	it("it prints correctly fragment code", ({ expect }) => {
 		const code = `
-			<h1>Shopping list</h1>
+			<h1 {@attach tooltip(content)}>Shopping list</h1>
 			<ul>
 				{#each items as item}
 					<li>{item.name} x {item.qty}</li>
 				{/each}
 			</ul>
 
+			<canvas
+				width={32}
+				height={32}
+				{@attach (canvas) => {
+					const context = canvas.getContext('2d');
+
+					$effect(() => {
+						context.fillStyle = color;
+						context.fillRect(0, 0, canvas.width, canvas.height);
+					});
+				}}
+			></canvas>
+
 			<div class="mb-6">
 				<Label for="large-input" class="block mb-2">Large input</Label>
 				<Input id="large-input" size="lg" placeholder="Large input" />
@@ -44,12 +57,20 @@ describe(printFragment, () => {
 		`;
 		const node = parse_and_extract<AST.Fragment>(code, "Fragment");
 		expect(printFragment(node).code).toMatchInlineSnapshot(`
-			"<h1>Shopping list</h1>
+			"<h1 {@attach tooltip(content)}>Shopping list</h1>
 			<ul>
 				{#each items as item}
 					<li>{item.name} x {item.qty}</li>
 				{/each}
 			</ul>
+			<canvas width={32} height={32} {@attach (canvas) => {
+				const context = canvas.getContext('2d');
+
+				$effect(() => {
+					context.fillStyle = color;
+					context.fillRect(0, 0, canvas.width, canvas.height);
+				});
+			}} />
 			<div class="mb-6">
 				<Label for="large-input" class="block mb-2">Large input</Label>
 				<Input id="large-input" size="lg" placeholder="Large input" />
diff --git a/packages/svelte-ast-print/src/lib.ts b/packages/svelte-ast-print/src/lib.ts
@@ -174,6 +174,7 @@ export function printSvelte<N extends SvelteOnlyNode>(n: N, opts: Partial<PrintO
 		case "SvelteWindow":
 		case "TitleElement":
 		// tag
+		case "AttachTag":
 		case "ConstTag":
 		case "DebugTag":
 		case "ExpressionTag":
diff --git a/packages/svelte-ast-print/src/template.ts b/packages/svelte-ast-print/src/template.ts
@@ -51,6 +51,7 @@ export function printTemplateNode(n: SV.TemplateNode, opts: Partial<PrintOptions
 		case "SvelteSelf":
 		case "SvelteWindow":
 		case "TitleElement": return printElementLike(n, opts);
+		case "AttachTag":
 		case "ConstTag":
 		case "DebugTag":
 		case "ExpressionTag":
diff --git a/packages/svelte-ast-print/src/template/element-like.ts b/packages/svelte-ast-print/src/template/element-like.ts
@@ -5,17 +5,13 @@
 
 import type { AST as SV } from "svelte/compiler";
 
-import * as char from "../_internal/char.ts";
-import { HTMLClosingTag, HTMLOpeningTag } from "../_internal/html.ts";
 import type { PrintOptions } from "../_internal/option.ts";
-import { type Result, State } from "../_internal/shared.ts";
+import type { Result } from "../_internal/shared.ts";
 import {
 	print_maybe_self_closing_el,
 	print_non_self_closing_el,
 	print_self_closing_el,
 } from "../_internal/template/element-like.ts";
-import { printFragment } from "../fragment.ts";
-import { printAttributeLike } from "./attribute-like.ts";
 
 /**
  * @since 1.0.0
@@ -122,8 +118,6 @@ export function printSvelteDocument(n: SV.SvelteDocument, opts: Partial<PrintOpt
  * @__NO_SIDE_EFFECTS__
  */
 export function printSvelteElement(n: SV.SvelteElement, opts: Partial<PrintOptions> = {}): Result<SV.SvelteElement> {
-	const st = State.get(n, opts);
-	const opening = new HTMLOpeningTag("inline", n.name);
 	n.attributes.unshift({
 		type: "Attribute",
 		name: "this",
@@ -132,11 +126,7 @@ export function printSvelteElement(n: SV.SvelteElement, opts: Partial<PrintOptio
 			expression: n.tag,
 		},
 	});
-	for (const a of n.attributes) opening.insert(char.SPACE, printAttributeLike(a));
-	st.add(opening);
-	st.add(printFragment(n.fragment, opts));
-	st.add(new HTMLClosingTag("inline", n.name));
-	return st.result;
+	return print_non_self_closing_el({ n, opts });
 }
 
 /**
diff --git a/packages/svelte-ast-print/src/template/tag.test.ts b/packages/svelte-ast-print/src/template/tag.test.ts
@@ -2,9 +2,23 @@ import { parse_and_extract } from "@internals/test/svelte";
 import type { AST } from "svelte/compiler";
 import { describe, it } from "vitest";
 
-import { printConstTag, printDebugTag, printExpressionTag, printHtmlTag, printRenderTag, printTag } from "./tag.ts";
+import {
+	printAttachTag,
+	printConstTag,
+	printDebugTag,
+	printExpressionTag,
+	printHtmlTag,
+	printRenderTag,
+	printTag,
+} from "./tag.ts";
 
 describe(printTag, () => {
+	it("print correctly `@attach` tag", ({ expect }) => {
+		const code = "<canvas {@attach tooltip(content)}></canvas>";
+		const node = parse_and_extract<AST.AttachTag>(code, "AttachTag");
+		expect(printTag(node).code).toMatchInlineSnapshot(`"{@attach tooltip(content)}"`);
+	});
+
 	it("print correctly `@const` tag", ({ expect }) => {
 		const code = "{@const area = box.width * box.height}";
 		const node = parse_and_extract<AST.ConstTag>(code, "ConstTag");
@@ -36,6 +50,56 @@ describe(printTag, () => {
 	});
 });
 
+describe(printAttachTag, () => {
+	it("prints correctly when is a reference", ({ expect }) => {
+		const code = `
+			<div {@attach myAttachment}>...</div>
+		`;
+		const node = parse_and_extract<AST.AttachTag>(code, "AttachTag");
+		expect(printAttachTag(node).code).toMatchInlineSnapshot(`"{@attach myAttachment}"`);
+	});
+
+	it("prints correctly when is function call", ({ expect }) => {
+		const code = `
+			<button {@attach tooltip(content)}>
+				Hover me
+			</button>
+		`;
+		const node = parse_and_extract<AST.AttachTag>(code, "AttachTag");
+		expect(printAttachTag(node).code).toMatchInlineSnapshot(`"{@attach tooltip(content)}"`);
+	});
+
+	it("prints correctly when is an inline attachment", ({ expect }) => {
+		const code = `
+			<canvas
+				width={32}
+				height={32}
+				{@attach (canvas) => {
+					const context = canvas.getContext('2d');
+
+					$effect(() => {
+						context.fillStyle = color;
+						context.fillRect(0, 0, canvas.width, canvas.height);
+					});
+				}}
+			></canvas>
+		`;
+		const node = parse_and_extract<AST.AttachTag>(code, "AttachTag");
+		expect(printAttachTag(node).code).toMatchInlineSnapshot(
+			`
+			"{@attach (canvas) => {
+				const context = canvas.getContext('2d');
+
+				$effect(() => {
+					context.fillStyle = color;
+					context.fillRect(0, 0, canvas.width, canvas.height);
+				});
+			}}"
+		`,
+		);
+	});
+});
+
 describe(printConstTag, () => {
 	it("prints correctly when used as direct child of allowed tags ", ({ expect }) => {
 		const code = `
diff --git a/packages/svelte-ast-print/src/template/tag.ts b/packages/svelte-ast-print/src/template/tag.ts
@@ -19,6 +19,7 @@ export function printTag(n: SV.Tag, opts: Partial<PrintOptions> = {}): Result<SV
 	// biome-ignore format: Prettier
 	// prettier-ignore
 	switch (n.type) {
+		case "AttachTag": return printAttachTag(n, opts);
 		case "ConstTag": return printConstTag(n, opts);
 		case "DebugTag": return printDebugTag(n, opts);
 		case "ExpressionTag": return printExpressionTag(n, opts);
@@ -27,6 +28,23 @@ export function printTag(n: SV.Tag, opts: Partial<PrintOptions> = {}): Result<SV
 	}
 }
 
+/**
+ * @see {@link https://svelte.dev/docs/svelte/@attach}
+ *
+ * @example pattern
+ * ```svelte
+ * {@attach expression}
+ * ```
+ *
+ * @since 1.1.0
+ * @__NO_SIDE_EFFECTS__
+ */
+export function printAttachTag(n: SV.AttachTag, opts: Partial<PrintOptions> = {}): Result<SV.AttachTag> {
+	const st = State.get(n, opts);
+	st.add(new CurlyBrackets("inline", char.AT, "attach", char.SPACE, print_js(n.expression, st.opts, false)));
+	return st.result;
+}
+
 /**
  * @see {@link https://svelte.dev/docs/svelte/@const}
  *
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -8,6 +8,6 @@ packages:
 catalog:
   "@types/estree": "~1.0.0"
   "esrap": "^1.4.0"
-  "svelte": "^5.20.0"
+  "svelte": "^5.31.0"
   "typescript": "^5.8.3"
   "zimmerframe": "^1.1.0"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte-ast-print": minor
 +---
++
 +✨ Add support for new AST node - `AttachTag` - via function `printAttachTag()`