(fix) format everything except text in pre (#267)

Fixes #266
It remains to be seen if this is the desired behavior, but let's go with it for now. Prettier core won't touch pre tags at all, so we differ a little from them here.

Author: hyrious

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * (fix) Better handling of destructured values with defaults in each and await blocks ([#269](https://github.com/sveltejs/prettier-plugin-svelte/issues/269))
 * (fix) Prevent script/style contents from being erased in certain cases ([#268](https://github.com/sveltejs/prettier-plugin-svelte/issues/268))
+* (fix) Format mustache tags inside `<pre>` tags ([#266](https://github.com/sveltejs/prettier-plugin-svelte/issues/266))
 
 ## 2.5.0
 

src/index.ts

@@ -26,7 +26,7 @@ export const parsers: Record<string, Parser> = {
         parse: (text) => {
             try {
                 return <ASTNode>{ ...require(`svelte/compiler`).parse(text), __isRoot: true };
-            } catch (err) {
+            } catch (err: any) {
                 if (err.start != null && err.end != null) {
                     // Prettier expects error objects to have loc.start and loc.end fields.
                     // Svelte uses start and end directly on the error.

src/print/doc-helpers.ts

@@ -33,13 +33,19 @@ function deepEqual(x: any, y: any): boolean {
     }
 }
 
+function isDocCommand(doc: Doc): doc is doc.builders.DocCommand {
+    return typeof doc === 'object' && doc !== null;
+}
+
 export function isLine(docToCheck: Doc): boolean {
     return (
         isHardline(docToCheck) ||
-        (typeof docToCheck === 'object' && docToCheck.type === 'line') ||
-        (typeof docToCheck === 'object' &&
+        (isDocCommand(docToCheck) && docToCheck.type === 'line') ||
+        (isDocCommand(docToCheck) &&
             docToCheck.type === 'concat' &&
-            docToCheck.parts.every(isLine))
+            docToCheck.parts.every(isLine)) ||
+        // Since Prettier 2.3.0, concats are represented as flat arrays
+        (Array.isArray(docToCheck) && docToCheck.every(isLine))
     );
 }
 
@@ -51,7 +57,7 @@ export function isEmptyDoc(doc: Doc): boolean {
         return doc.length === 0;
     }
 
-    if (doc.type === 'line') {
+    if (isDocCommand(doc) && doc.type === 'line') {
         return !doc.keepIfLonely;
     }
 

src/print/index.ts

@@ -240,7 +240,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                         ? () => line
                         : () => (bracketSameLine ? softline : '');
             } else if (isPreTagContent(path)) {
-                body = () => printRaw(node, options.originalText);
+                body = () => printPre(node, options.originalText, path, print);
             } else if (!isSupportedLanguage) {
                 body = () => printRaw(node, options.originalText, true);
             } else if (isInlineElement(path, options, node) && !isPreTagContent(path)) {
@@ -267,7 +267,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
             ];
 
             if (!isSupportedLanguage && !isEmpty) {
-                // Format template tags so that there's a hardline but no intendation.
+                // Format template tags so that there's a hardline but no indention.
                 // That way the `lang="X"` and the closing `>` of the start tag stay in one line
                 // which is the 99% use case.
                 return groupConcat([
@@ -758,13 +758,36 @@ function printSvelteBlockChildren(path: FastPath, print: PrintFn, options: Parse
     ]);
 }
 
+function printPre(
+    node: Parameters<typeof printRaw>[0],
+    originalText: string,
+    path: FastPath,
+    print: PrintFn,
+): Doc {
+    const result: Doc = [];
+    const length = node.children.length;
+    for (let i = 0; i < length; i++) {
+        const child = node.children[i];
+        if (child.type === 'Text') {
+            const lines = originalText.substring(child.start, child.end).split(/\r?\n/);
+            lines.forEach((line, j) => {
+                if (j > 0) result.push(literalline);
+                result.push(line);
+            });
+        } else {
+            result.push(path.call(print, 'children', i));
+        }
+    }
+    return concat(result);
+}
+
 function printChildren(path: FastPath, print: PrintFn, options: ParserOptions): Doc {
     if (isPreTagContent(path)) {
         return concat(path.map(print, 'children'));
     }
 
     const childNodes: Node[] = prepareChildren(path.getValue().children, path, print);
-    // modifiy original array because it's accessed later through map(print, 'children', idx)
+    // modify original array because it's accessed later through map(print, 'children', idx)
     path.getValue().children = childNodes;
     if (childNodes.length === 0) {
         return '';
@@ -838,7 +861,7 @@ function printChildren(path: FastPath, print: PrintFn, options: ParserOptions):
             (nextChild.type !== 'Text' ||
                 // Only handle text which starts with a whitespace and has text afterwards,
                 // or is empty but followed by an inline element. The latter is done
-                // so that if the children break, the inline element afterwards is in a seperate line.
+                // so that if the children break, the inline element afterwards is in a separate line.
                 ((!isEmptyTextNode(nextChild) ||
                     (childNodes[idx + 2] && isInlineElement(path, options, childNodes[idx + 2]))) &&
                     !isTextNodeStartingWithLinebreak(nextChild)))
@@ -850,7 +873,7 @@ function printChildren(path: FastPath, print: PrintFn, options: ParserOptions):
 
     /**
      * Print text child. First/last child white space handling
-     * is done in parent already. By defintion of the Svelte AST,
+     * is done in parent already. By definition of the Svelte AST,
      * a text node always is inbetween other tags. Add hardlines
      * if the users wants to have them inbetween.
      * If the text is trimmed right, toggle flag telling
@@ -907,7 +930,7 @@ function printChildren(path: FastPath, print: PrintFn, options: ParserOptions):
 
 /**
  * `svelte:options` is part of the html part but needs to be snipped out and handled
- * seperately to reorder it as configured. The comment above it should be moved with it.
+ * separately to reorder it as configured. The comment above it should be moved with it.
  * Do that here.
  */
 function prepareChildren(children: Node[], path: FastPath, print: PrintFn): Node[] {

src/print/node-helpers.ts

@@ -335,7 +335,7 @@ export function trimTextNodeLeft(node: TextNode): void {
 
 /**
  * Remove all leading whitespace up until the first non-empty text node,
- * and all trailing whitepsace from the last non-empty text node onwards.
+ * and all trailing whitespace from the last non-empty text node onwards.
  */
 export function trimChildren(children: Node[], path: FastPath): void {
     let firstNonEmptyNode = children.findIndex(
@@ -370,7 +370,7 @@ export function trimChildren(children: Node[], path: FastPath): void {
 }
 
 /**
- * Check if given node's starg tag should hug its first child. This is the case for inline elements when there's
+ * Check if given node's start tag should hug its first child. This is the case for inline elements when there's
  * no whitespace between the `>` and the first child.
  */
 export function shouldHugStart(

test/formatting/samples/pre-mustache/input.html

@@ -0,0 +1,16 @@
+<pre>Hello,
+  world!   {JSON.stringify({   foo:'bar'},null,
+  2)}Goodbye.
+  this text goes waaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyy above the print width {{a: true}} and the mustache should split it
+  <code>const asd = {
+    variable };</code>
+      <code>nested
+
+        should
+
+        stay
+
+        as is
+      </code>
+			this line is intended using tabs which should be preserved
+</pre>

test/formatting/samples/pre-mustache/output.html

@@ -0,0 +1,17 @@
+<pre>Hello,
+  world!   {JSON.stringify({ foo: "bar" }, null, 2)}Goodbye.
+  this text goes waaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyy above the print width {{
+        a: true,
+    }} and the mustache should split it
+  <code>const asd = {variable};</code>
+      <code
+        >nested
+
+        should
+
+        stay
+
+        as is
+      </code>
+			this line is intended using tabs which should be preserved
+</pre>