feat: add experimental support for Svelte 5

Author: dummdidumm

CHANGELOG.md

@@ -1,5 +1,10 @@
 # prettier-plugin-svelte changelog
 
+## 3.1.0
+
+-   (feat) add experimental support for Svelte 5
+-   (feat) support `#snippet` and `@render`
+
 ## 3.0.3
 
 -   (fix) handle static `tag` attributes on `<svelte:element>`

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "prettier-plugin-svelte",
-    "version": "3.0.3",
+    "version": "3.1.0",
     "description": "Svelte plugin for prettier",
     "main": "plugin.js",
     "files": [
@@ -51,6 +51,6 @@
     },
     "peerDependencies": {
         "prettier": "^3.0.0",
-        "svelte": "^3.2.0 || ^4.0.0-next.0"
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
     }
 }

package.json

@@ -91,6 +91,18 @@ export function embed(path: FastPath, _options: Options) {
             printSvelteBlockJS('expression');
             printSvelteBlockJS('key');
             break;
+        case 'SnippetBlock':
+            // We merge the two parts into one expression, which future-proofs this for template TS support
+            if (node === parent.expression) {
+                parent.expression.end =
+                    options.originalText.indexOf(
+                        ')',
+                        parent.context?.end ?? parent.expression.end,
+                    ) + 1;
+                parent.context = null;
+                printSvelteBlockJS('expression');
+            }
+            break;
         case 'Element':
             printJS(parent, options.svelteStrictMode ?? false, false, false, 'tag');
             break;
@@ -106,6 +118,18 @@ export function embed(path: FastPath, _options: Options) {
         case 'ConstTag':
             printJS(parent, false, false, true, 'expression');
             break;
+        case 'RenderTag':
+            // We merge the two parts into one expression, which future-proofs this for template TS support
+            if (node === parent.expression) {
+                parent.expression.end =
+                    options.originalText.indexOf(
+                        ')',
+                        parent.argument?.end ?? parent.expression.end,
+                    ) + 1;
+                parent.argument = null;
+                printJS(parent, false, false, false, 'expression');
+            }
+            break;
         case 'EventHandler':
         case 'Binding':
         case 'Class':

src/embed.ts

@@ -607,6 +607,12 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         case 'PendingBlock':
         case 'CatchBlock':
             return printSvelteBlockChildren(path, print, options);
+        // Svelte 5 only
+        case 'SnippetBlock': {
+            const snippet = ['{#snippet ', printJS(path, print, 'expression')];
+            snippet.push('}', printSvelteBlockChildren(path, print, options), '{/snippet}');
+            return snippet;
+        }
         case 'EventHandler':
             return [
                 'on:',
@@ -718,6 +724,11 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             return ['animate:', node.name, node.expression ? ['=', ...printJsExpression()] : ''];
         case 'RawMustacheTag':
             return ['{@html ', printJS(path, print, 'expression'), '}'];
+        // Svelte 5 only
+        case 'RenderTag': {
+            const render = ['{@render ', printJS(path, print, 'expression'), '}'];
+            return render;
+        }
         case 'Spread':
             return ['{...', printJS(path, print, 'expression'), '}'];
         case 'ConstTag':

src/print/index.ts

@@ -60,6 +60,7 @@ export function isSvelteBlock(
     | ThenBlockNode {
     return [
         'IfBlock',
+        'SnippetBlock',
         'AwaitBlock',
         'CatchBlock',
         'EachBlock',

src/print/node-helpers.ts

@@ -291,6 +291,19 @@ export interface CommentInfo {
     emptyLineAfter: boolean;
 }
 
+export interface SnippetBlock extends BaseNode {
+    type: 'SnippetBlock';
+    expression: IdentifierNode;
+    context: null | any;
+    children: Node[];
+}
+
+export interface RenderTag extends BaseNode {
+    type: 'RenderTag';
+    expression: IdentifierNode;
+    argument: null | any;
+}
+
 export type Node =
     | FragmentNode
     | ElementNode
@@ -335,7 +348,9 @@ export type Node =
     | DocumentNode
     | OptionsNode
     | SlotTemplateNode
-    | ConstTagNode;
+    | ConstTagNode
+    | RenderTag
+    | SnippetBlock;
 
 /**
  * The Svelte AST root node

src/print/nodes.ts

@@ -2,7 +2,7 @@
 
 <p>hi</p>
 
-<svelte:options tag="my-custom-element" />
+<svelte:options immutable={true} />
 
 <p>some stuff</p>
 

test/formatting/samples/move-options-to-top/input.html

@@ -1,4 +1,4 @@
-<svelte:options tag="my-custom-element" />
+<svelte:options immutable={true} />
 
 <script></script>
 

test/formatting/samples/move-options-to-top/output.html

@@ -0,0 +1,10 @@
+{#snippet foo()}
+    <p>foo</p>
+{/snippet}
+
+{#snippet bar({ a, b })}
+    <p>bar</p>
+{/snippet}
+
+{@render foo()}
+{@render bar(x)}

test/printer/samples/snippet.html.skip

@@ -1 +1 @@
-<svelte:options tag="my-custom-element" />
+<svelte:options immutable={true} />