(fix) better print of long attribute values with mustache tags (#221)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * (fix) adjust snip regex to not break commented-out script/style tags ([#212](https://github.com/sveltejs/prettier-plugin-svelte/issues/212))
 * (fix) Don't snip style tag that is inside script tag ([#219](https://github.com/sveltejs/prettier-plugin-svelte/issues/219), [#70](https://github.com/sveltejs/prettier-plugin-svelte/issues/70))
+* (fix) Better formatting of long attribute values with mustache tags inbetween ([#221](https://github.com/sveltejs/prettier-plugin-svelte/pull/221))
 
 ## 2.2.0
 

src/print/helpers.ts

@@ -1,5 +1,5 @@
 import { ASTNode, Node } from './nodes';
-import { FastPath } from 'prettier';
+import { Doc, FastPath } from 'prettier';
 import { formattableAttributes } from '../lib/elements';
 
 /**
@@ -33,3 +33,18 @@ export function findLastIndex<T>(isMatch: (item: T, idx: number) => boolean, ite
 
     return -1;
 }
+
+export function replaceEndOfLineWith(text: string, replacement: Doc) {
+    const parts: Doc[] = [];
+    for (const part of text.split('\n')) {
+        if (parts.length > 0) {
+            parts.push(replacement);
+        }
+        if (part.endsWith('\r')) {
+            parts.push(part.slice(0, -1));
+        } else {
+            parts.push(part);
+        }
+    }
+    return parts;
+}

src/print/index.ts

@@ -5,7 +5,7 @@ import { getText } from '../lib/getText';
 import { hasSnippedContent, unsnipContent } from '../lib/snipTagContent';
 import { parseSortOrder, SortOrderPart } from '../options';
 import { isEmptyDoc, isLine, trim, trimRight } from './doc-helpers';
-import { flatten, isASTNode, isPreTagContent } from './helpers';
+import { flatten, isASTNode, isPreTagContent, replaceEndOfLineWith } from './helpers';
 import {
     checkWhitespaceAtEndOfSvelteBlock,
     checkWhitespaceAtStartOfSvelteBlock,
@@ -159,7 +159,13 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                  */
                 return fill(splitTextToDocs(node));
             } else {
-                return getUnencodedText(node);
+                const rawText = getUnencodedText(node);
+                if (path.getParentNode().type === 'Attribute') {
+                    // Direct child of attribute value -> add literallines at end of lines
+                    // so that other things don't break in unexpected places
+                    return concat(replaceEndOfLineWith(rawText, literalline));
+                }
+                return rawText;
             }
         case 'Element':
         case 'InlineComponent':

src/print/node-helpers.ts

@@ -19,6 +19,7 @@ import {
     PendingBlockNode,
     ThenBlockNode,
     CommentNode,
+    SlotTemplateNode,
 } from './nodes';
 import { blockElements, TagName } from '../lib/elements';
 import { FastPath, ParserOptions } from 'prettier';
@@ -149,7 +150,14 @@ export function isIgnoreDirective(node: Node | undefined | null): boolean {
 }
 
 export function printRaw(
-    node: ElementNode | InlineComponentNode | SlotNode | WindowNode | HeadNode | TitleNode,
+    node:
+        | ElementNode
+        | InlineComponentNode
+        | SlotNode
+        | WindowNode
+        | HeadNode
+        | TitleNode
+        | SlotTemplateNode,
     originalText: string,
     stripLeadingAndTrailingNewline: boolean = false,
 ): string {

src/print/nodes.ts

@@ -257,6 +257,7 @@ export interface SlotTemplateNode extends BaseNode {
     type: 'SlotTemplate';
     name: string;
     attributes: Node[];
+    children: Node[];
 }
 
 export type Node =

test/printer/samples/attributes-long-text-with-mustache.html

@@ -0,0 +1,10 @@
+<button
+    style="color: {color};font-size: {fontSize};--bg-color: {bgColor}; --bg-hover: {bgHover};
+    --bg-active: {bgActive};--radius: {round};--ripple: {rippleColor};height: {height};width: {width};min-width: {width};
+    --shadow: {shadows[shadow]};
+    --shadow-h: {shadows[shadowHover]};
+    --shadow-a: {shadows[shadowActive]};
+    --opacity: {disabled ? 0.5 : 1.0}
+    
+       I'm unaffected"
+/>