feat: support upcoming <svelte:boundary> / <svelte:html> (#474)

Author: dummdidumm

CHANGELOG.md

@@ -1,5 +1,10 @@
 # prettier-plugin-svelte changelog
 
+## 3.3.0
+
+-   (feat) Svelte 5: support upcoming `<svelte:boundary>`
+-   (feat) Svelte 5: support upcoming `<svelte:html>`
+
 ## 3.2.8
 
 -   (chore) provide IDE tooling a way to pass Svelte compiler path

package-lock.json

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

package.json

@@ -16,6 +16,8 @@ import {
     SlotNode,
     SlotTemplateNode,
     StyleNode,
+    SvelteBoundary,
+    SvelteHTML,
     TitleNode,
     WindowNode,
 } from './nodes';
@@ -81,6 +83,8 @@ export function getAttributeLine(
         | BodyNode
         | DocumentNode
         | OptionsNode
+        | SvelteHTML
+        | SvelteBoundary
         | SlotTemplateNode,
     options: ParserOptions,
 ) {
@@ -111,6 +115,8 @@ export function printWithPrependedAttributeLine(
         | BodyNode
         | DocumentNode
         | OptionsNode
+        | SvelteHTML
+        | SvelteBoundary
         | SlotTemplateNode,
     options: ParserOptions,
     print: PrintFn,

src/print/helpers.ts

@@ -202,6 +202,8 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         case 'SlotTemplate':
         case 'Window':
         case 'Head':
+        // Svelte 5 only
+        case 'SvelteBoundary':
         case 'Title': {
             const isSupportedLanguage = !(
                 node.name === 'template' && !isNodeSupportedLanguage(node)
@@ -217,6 +219,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     node.type === 'InlineComponent' ||
                     node.type === 'Slot' ||
                     node.type === 'SlotTemplate' ||
+                    node.type === 'SvelteBoundary' ||
                     node.type === 'Title') &&
                     didSelfClose) ||
                     node.type === 'Window' ||
@@ -400,21 +403,8 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
         // else fall through to Body
         case 'Body':
         case 'Document':
-            return group([
-                '<',
-                node.name,
-                indent(
-                    group([
-                        ...path.map(
-                            printWithPrependedAttributeLine(node, options, print),
-                            'attributes',
-                        ),
-                        bracketSameLine ? '' : dedent(line),
-                    ]),
-                ),
-                ...[bracketSameLine ? ' ' : '', '/>'],
-            ]);
-        case 'Document':
+        // Svelte 5 only
+        case 'SvelteHTML':
             return group([
                 '<',
                 node.name,

src/print/index.ts

@@ -23,6 +23,7 @@ import {
     StyleDirectiveNode,
     ASTNode,
     CommentInfo,
+    SvelteBoundary,
 } from './nodes';
 import { blockElements, TagName } from '../lib/elements';
 import { FastPath } from 'prettier';
@@ -31,7 +32,11 @@ import { ParserOptions, isBracketSameLine } from '../options';
 
 const unsupportedLanguages = ['coffee', 'coffeescript', 'styl', 'stylus', 'sass'];
 
-export function isInlineElement(path: FastPath, options: ParserOptions, node: Node) {
+export function isInlineElement(
+    path: FastPath,
+    options: ParserOptions,
+    node: Node,
+): node is ElementNode {
     return (
         node && node.type === 'Element' && !isBlockElement(node, options) && !isPreTagContent(path)
     );
@@ -180,6 +185,7 @@ export function printRaw(
         | WindowNode
         | HeadNode
         | TitleNode
+        | SvelteBoundary
         | SlotTemplateNode,
     originalText: string,
     stripLeadingAndTrailingNewline: boolean = false,
@@ -400,6 +406,10 @@ export function shouldHugStart(
         return true;
     }
 
+    if (node.type === 'SvelteBoundary') {
+        return false;
+    }
+
     if (isBlockElement(node, options)) {
         return false;
     }
@@ -434,6 +444,10 @@ export function shouldHugEnd(
         return true;
     }
 
+    if (node.type === 'SvelteBoundary') {
+        return false;
+    }
+
     if (isBlockElement(node, options)) {
         return false;
     }

src/print/node-helpers.ts

@@ -268,6 +268,19 @@ export interface BodyNode extends BaseNode {
     attributes: Node[];
 }
 
+export interface SvelteHTML extends BaseNode {
+    type: 'SvelteHTML';
+    name: string;
+    attributes: Node[];
+}
+
+export interface SvelteBoundary extends BaseNode {
+    type: 'SvelteBoundary';
+    name: string;
+    attributes: Node[];
+    children: Node[];
+}
+
 export interface DocumentNode extends BaseNode {
     type: 'Document';
     name: string;
@@ -357,6 +370,8 @@ export type Node =
     | OptionsNode
     | SlotTemplateNode
     | ConstTagNode
+    | SvelteBoundary
+    | SvelteHTML
     | RenderTag
     | SnippetBlock;
 

src/print/nodes.ts

@@ -0,0 +1,6 @@
+<svelte:boundary onerror={handle}>
+    <ComponentThatFails />
+    {#snippet failed(e)}
+        {e}
+    {/snippet}
+</svelte:boundary>

test/printer/samples/svelte-boundary.html.skip

@@ -0,0 +1 @@
+<svelte:html lang={language} />