CHANGELOG.md

@@ -1,8 +1,14 @@
 # prettier-plugin-svelte changelog
 
-## 2.7.1 (unreleased)
+## 2.8.0 (unreleased)
+
+* (feat) support `singleAttributePerLine` Prettier option ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/305))
+* (feat) add `svelteSortOrder: none` Prettier option which skips reordering scripts/styles/html ([#305](https://github.com/sveltejs/prettier-plugin-svelte/issues/314))
+
+## 2.7.1
 
 * (fix) check for snipped content in JS expressions ([#290](https://github.com/sveltejs/prettier-plugin-svelte/issues/290))
+* (fix) handle `<!DOCTYPE>` ([#298](https://github.com/sveltejs/prettier-plugin-svelte/issues/298))
 
 ## 2.7.0
 

README.md

@@ -45,7 +45,7 @@ Make a `.prettierrc` file in your project directory and add your preferred [opti
 
 Sort order for `svelte:options`, scripts, markup, and styles.
 
-Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in the order you want.
+Format: join the keywords `options`, `scripts`, `markup`, `styles` with a `-` in the order you want; or `none` if you don't want Prettier to reorder anything.
 
 | Default                         | CLI Override                   | API Override                |
 | ------------------------------- | ------------------------------ | --------------------------- |

package.json

@@ -1,6 +1,6 @@
 {
     "name": "prettier-plugin-svelte",
-    "version": "2.7.0",
+    "version": "2.7.1",
     "description": "Svelte plugin for prettier",
     "main": "plugin.js",
     "files": [
@@ -34,7 +34,7 @@
         "@types/node": "^10.12.18",
         "@types/prettier": "^2.4.1",
         "ava": "3.15.0",
-        "prettier": "^2.4.1",
+        "prettier": "^2.7.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
         "svelte": "^3.47.0",

src/embed.ts

@@ -1,8 +1,10 @@
 import { Doc, doc, FastPath, ParserOptions } from 'prettier';
 import { getText } from './lib/getText';
 import { snippedTagContentAttribute } from './lib/snipTagContent';
+import { isBracketSameLine } from './options';
 import { PrintFn } from './print';
 import { isLine, removeParentheses, trimRight } from './print/doc-helpers';
+import { groupConcat, printWithPrependedAttributeLine } from './print/helpers';
 import {
     getAttributeTextValue,
     getLeadingComment,
@@ -12,10 +14,10 @@ import {
     isTypeScript,
     printRaw,
 } from './print/node-helpers';
-import { ElementNode, Node } from './print/nodes';
+import { ElementNode, Node, ScriptNode, StyleNode } from './print/nodes';
 
 const {
-    builders: { concat, hardline, group, indent, literalline },
+    builders: { concat, hardline, softline, indent, dedent, literalline },
     utils: { removeLines },
 } = doc;
 
@@ -188,7 +190,7 @@ function embedTag(
     isTopLevel: boolean,
     options: ParserOptions,
 ) {
-    const node: Node = path.getNode();
+    const node: ScriptNode | StyleNode | ElementNode = path.getNode();
     const content =
         tag === 'template' ? printRaw(node as ElementNode, text) : getSnippedContent(node);
     const previousComment = getLeadingComment(path);
@@ -208,21 +210,20 @@ function embedTag(
             : hardline
         : preformattedBody(content);
 
-    const attributes = concat(
-        path.map(
-            (childPath) =>
-                childPath.getNode().name !== snippedTagContentAttribute
-                    ? childPath.call(print)
-                    : '',
-            'attributes',
+    const openingTag = groupConcat([
+        '<',
+        tag,
+        indent(
+            groupConcat([
+                ...path.map(printWithPrependedAttributeLine(node, options, print), 'attributes'),
+                isBracketSameLine(options) ? '' : dedent(softline),
+            ]),
         ),
-    );
-
-    let result: Doc = group(
-        concat(['<', tag, indent(group(attributes)), '>', body, '</', tag, '>']),
-    );
+        '>',
+    ]);
+    let result = groupConcat([openingTag, body, '</', tag, '>']);
 
-    if (isTopLevel) {
+    if (isTopLevel && options.svelteSortOrder !== 'none') {
         // top level embedded nodes have been moved from their normal position in the
         // node tree. if there is a comment referring to it, it must be recreated at
         // the new position.

src/lib/extractAttributes.ts

@@ -1,8 +1,8 @@
 import { AttributeNode, TextNode } from '../print/nodes';
 
 export function extractAttributes(html: string): AttributeNode[] {
-    const extractAttributesRegex = /<[a-z]+\s*(.*?)>/i;
-    const attributeRegex = /([^\s=]+)(?:=("|')(.*?)\2)?/gi;
+    const extractAttributesRegex = /<[a-z]+[\s\n]*([\s\S]*?)>/im;
+    const attributeRegex = /([^\s=]+)(?:=("|')([\s\S]*?)\2)?/gim;
 
     const [, attributesString] = html.match(extractAttributesRegex)!;
 

src/options.ts

@@ -48,6 +48,7 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
             makeChoice('markup-scripts-styles-options'),
             makeChoice('styles-markup-scripts-options'),
             makeChoice('styles-scripts-markup-options'),
+            makeChoice('none'),
             // Deprecated, keep in 2.x for backwards-compatibility. svelte:options will be moved to the top
             makeChoice('scripts-markup-styles'),
             makeChoice('scripts-styles-markup'),
@@ -114,6 +115,7 @@ export type SortOrder =
     | 'markup-scripts-styles-options'
     | 'styles-markup-scripts-options'
     | 'styles-scripts-markup-options'
+    | 'none'
     | DeprecatedSortOrder;
 
 export type DeprecatedSortOrder =
@@ -129,6 +131,10 @@ export type SortOrderPart = 'scripts' | 'markup' | 'styles' | 'options';
 const sortOrderSeparator = '-';
 
 export function parseSortOrder(sortOrder: SortOrder): SortOrderPart[] {
+    if (sortOrder === 'none') {
+        return [];
+    }
+
     const order = sortOrder.split(sortOrderSeparator) as SortOrderPart[];
     // For backwards compatibility: Add options to beginning if not present
     if (!order.includes('options')) {

src/print/helpers.ts

@@ -1,6 +1,23 @@
-import { ASTNode, Node } from './nodes';
-import { Doc, FastPath } from 'prettier';
+import {
+    ASTNode,
+    AttributeNode,
+    BodyNode,
+    ElementNode,
+    HeadNode,
+    InlineComponentNode,
+    Node,
+    OptionsNode,
+    ScriptNode,
+    SlotNode,
+    SlotTemplateNode,
+    StyleNode,
+    TitleNode,
+    WindowNode,
+} from './nodes';
+import { Doc, doc, FastPath, ParserOptions } from 'prettier';
 import { formattableAttributes } from '../lib/elements';
+import { PrintFn } from '.';
+import { snippedTagContentAttribute } from '../lib/snipTagContent';
 
 /**
  * Determines whether or not given node
@@ -48,3 +65,59 @@ export function replaceEndOfLineWith(text: string, replacement: Doc) {
     }
     return parts;
 }
+
+export function groupConcat(contents: doc.builders.Doc[]): doc.builders.Doc {
+    const { concat, group } = doc.builders;
+    return group(concat(contents));
+}
+
+export function getAttributeLine(
+    node:
+        | ElementNode
+        | InlineComponentNode
+        | SlotNode
+        | WindowNode
+        | HeadNode
+        | TitleNode
+        | StyleNode
+        | ScriptNode
+        | BodyNode
+        | OptionsNode
+        | SlotTemplateNode,
+    options: ParserOptions,
+) {
+    const { hardline, line } = doc.builders;
+    const hasThisBinding =
+        (node.type === 'InlineComponent' && !!node.expression) ||
+        (node.type === 'Element' && !!node.tag);
+
+    const attributes = (node.attributes as Array<AttributeNode>).filter(
+        (attribute) => attribute.name !== snippedTagContentAttribute,
+    );
+    return options.singleAttributePerLine &&
+        (attributes.length > 1 || (attributes.length && hasThisBinding))
+        ? hardline
+        : line;
+}
+
+export function printWithPrependedAttributeLine(
+    node:
+        | ElementNode
+        | InlineComponentNode
+        | SlotNode
+        | WindowNode
+        | HeadNode
+        | TitleNode
+        | StyleNode
+        | ScriptNode
+        | BodyNode
+        | OptionsNode
+        | SlotTemplateNode,
+    options: ParserOptions,
+    print: PrintFn,
+): PrintFn {
+    return (path) =>
+        path.getNode().name !== snippedTagContentAttribute
+            ? doc.builders.concat([getAttributeLine(node, options), path.call(print)])
+            : '';
+}