feat(sort-attributes): support {@Attach} (#1221)

Author: baseballyama

.changeset/dry-facts-eat.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat(sort-attributes): support `{@attach}`

docs-svelte-kit/package.json

@@ -56,7 +56,7 @@
     "sass": "^1.81.0",
     "source-map-js": "^1.2.1",
     "stylus": "^0.64.0",
-    "svelte": "^5.2.10",
+    "svelte": "^5.30.1",
     "svelte-adapter-ghpages": "0.2.2",
     "twoslash-eslint": "^0.3.0",
     "twoslash-protocol": "^0.3.0",

packages/eslint-plugin-svelte/package.json

@@ -64,7 +64,7 @@
     "postcss-load-config": "^3.1.4",
     "postcss-safe-parser": "^7.0.0",
     "semver": "^7.6.3",
-    "svelte-eslint-parser": "^1.1.1"
+    "svelte-eslint-parser": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -95,7 +95,7 @@
     "sass": "^1.81.0",
     "source-map-js": "^1.2.1",
     "stylus": "^0.64.0",
-    "svelte": "^5.2.9",
+    "svelte": "^5.30.1",
     "svelte-i18n": "^4.0.1",
     "tsx": "^4.19.2",
     "type-coverage": "^2.29.7",

packages/eslint-plugin-svelte/src/meta.ts

@@ -1,5 +1,5 @@
 // IMPORTANT!
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
-export const name = 'eslint-plugin-svelte' as const;
-export const version = '3.6.0' as const;
+export const name = 'eslint-plugin-svelte';
+export const version = '3.6.0';

packages/eslint-plugin-svelte/src/utils/ast-utils.ts

@@ -462,7 +462,8 @@ export function getAttributeKeyText(
 		| SvAST.SvelteStyleDirective
 		| SvAST.SvelteDirective
 		| SvAST.SvelteSpecialDirective
-		| SvAST.SvelteGenericsDirective,
+		| SvAST.SvelteGenericsDirective
+		| SvAST.SvelteAttachTag,
 	context: RuleContext
 ): string {
 	switch (node.type) {
@@ -480,6 +481,8 @@ export function getAttributeKeyText(
 				node.key.modifiers.length ? `|${node.key.modifiers.join('|')}` : ''
 			}`;
 		}
+		case 'SvelteAttachTag':
+			return '@attach';
 		default:
 			throw new Error(
 				`Unknown node type: ${
@@ -556,6 +559,7 @@ export function findClassesInAttribute(
 		| SvAST.SvelteStyleDirective
 		| SvAST.SvelteSpecialDirective
 		| SvAST.SvelteGenericsDirective
+		| SvAST.SvelteAttachTag
 ): string[] {
 	if (attribute.type === 'SvelteAttribute' && attribute.key.name === 'class') {
 		return attribute.value.flatMap((value) =>

packages/eslint-plugin-svelte/tests/fixtures/rules/sort-attributes/invalid/attach-tag-errors.yaml

@@ -0,0 +1,4 @@
+- message: Attribute '@attach' should go before 'foo'.
+  line: 14
+  column: 10
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/sort-attributes/invalid/attach-tag-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 foo {@attach myAttachment}>...</div>

packages/eslint-plugin-svelte/tests/fixtures/rules/sort-attributes/invalid/attach-tag-output.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} foo>...</div>

packages/eslint-plugin-svelte/tests/fixtures/rules/sort-attributes/valid/attach-tag-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>