feat: support attachments (#495)

sveltejs/svelte#15000

Author: dummdidumm

CHANGELOG.md

@@ -1,5 +1,9 @@
 # prettier-plugin-svelte changelog
 
+## 3.4.0
+
+-   (feat) Svelte 5: support attachments (`{@attach ...}`)
+
 ## 3.3.3
 
 -   (fix) Svelte 5: ensure bind get/set is broken up correctly when too long

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "prettier-plugin-svelte",
-    "version": "3.3.3",
+    "version": "3.4.0",
     "description": "Svelte plugin for prettier",
     "main": "plugin.js",
     "files": [

package.json

@@ -127,6 +127,9 @@ export function embed(path: FastPath, _options: Options) {
         case 'Spread':
             printJS(parent, 'expression', {});
             break;
+        case 'AttachTag':
+            printJS(parent, 'expression', {});
+            break;
         case 'ConstTag':
             printJS(parent, 'expression', { removeParentheses: true });
             break;

src/embed.ts

@@ -711,10 +711,11 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         case 'RawMustacheTag':
             return ['{@html ', printJS(path, print, 'expression'), '}'];
         // Svelte 5 only
-        case 'RenderTag': {
-            const render = ['{@render ', printJS(path, print, 'expression'), '}'];
-            return render;
-        }
+        case 'RenderTag':
+            return ['{@render ', printJS(path, print, 'expression'), '}'];
+        // Svelte 5 only
+        case 'AttachTag':
+            return ['{@attach ', printJS(path, print, 'expression'), '}'];
         case 'Spread':
             return ['{...', printJS(path, print, 'expression'), '}'];
         case 'ConstTag':

src/print/index.ts

@@ -327,6 +327,11 @@ export interface RenderTag extends BaseNode {
     arguments: BaseNode[] | null;
 }
 
+export interface AttachTag extends BaseNode {
+    type: 'AttachTag';
+    expression: IdentifierNode;
+}
+
 export type Node =
     | FragmentNode
     | ElementNode
@@ -375,6 +380,7 @@ export type Node =
     | SvelteBoundary
     | SvelteHTML
     | RenderTag
+    | AttachTag
     | SnippetBlock;
 
 /**

src/print/nodes.ts

@@ -19,6 +19,8 @@ if (process.env.CI && hasOnly) {
 }
 
 for (const dir of dirs) {
+    if (dir.endsWith('.skip')) continue;
+
     const input = readFileSync(`test/formatting/samples/${dir}/input.html`, 'utf-8').replace(
         /\r?\n/g,
         '\n',

test/formatting/index.ts

@@ -0,0 +1,3 @@
+<input {@attach    x} />
+
+<input {@attach (node) => { foo; bar; }} />

test/formatting/samples/attachments.skip/input.html

@@ -0,0 +1,8 @@
+<input {@attach x} />
+
+<input
+    {@attach (node) => {
+        foo;
+        bar;
+    }}
+/>

test/formatting/samples/attachments.skip/output.html

@@ -0,0 +1,5 @@
+<input {@attach x} />
+<input {@attach () => {}} />
+
+<Component {@attach x} />
+<Component {@attach () => {}} />