Repository: sveltejs/prettier-plugin-svelte
Pull request #182 (2021-01-06 11:06:18)

Change svelteBracketNewLine default to true
### BREAKING CHANGE
Default to `true` to be more in line with how standard Prettier formats HTML (it's not even configurable there)


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52bf442..4ff8a93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,12 +2,13 @@
 
 ## 2.0.0 (Unreleased)
 
-This release comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. We also changed some default behavior, most notably the default sort order. `svelte:options` is now part of the sort order and the default changed to `options-scripts-markup-styles`, which is in line with how the majority of users likes to order the code blocks.
+This release comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. This is also why `svelteBracketNewLine` now defaults to `true`. Another notable default change is the sort order: `svelte:options` is now part of the sort order and the default changed to `options-scripts-markup-styles`, which is in line with how the majority of users likes to order the code blocks.
 
 The complete list of changes:
 
 * Rework of the tag breaking logic with the goal to be more in line with how Prettier formats HTML. This includes respecting the user's decision to have child tags in seperate lines even if they don't exceed the maximum line width ([#143](https://github.com/sveltejs/prettier-plugin-svelte/issues/143), [#117](https://github.com/sveltejs/prettier-plugin-svelte/issues/117)). This is a breaking change because tags are broken up differently now than before.
 * `svelte:options` is now part of `svelteSortOrder`. Default sort order is now `options-scripts-markup-styles`. This is a breaking change. ([#73](https://github.com/sveltejs/prettier-plugin-svelte/issues/73))
+* `svelteBracketNewLine` defaults to `true` now to be more in line with how standard Prettier formats HTML. This is a breaking change.
 * Fix formatting of fenced Svelte code blocks inside markdown ([#129](https://github.com/sveltejs/prettier-plugin-svelte/issues/129))
 * Everything that is not explicitely a block element is now treated as an inline element, including components. This is a breaking change ([#159](https://github.com/sveltejs/prettier-plugin-svelte/issues/159))
 * Single quotes are no longer forced except inside quoted attributes/events/etc. This is a breaking change ([#94](https://github.com/sveltejs/prettier-plugin-svelte/issues/94))
diff --git a/README.md b/README.md
index 501cfb9..4d07dc9 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ and add your preferred configuration options:
   - Option to enable/disable component attribute shorthand if attribute name and expression are same.
   
 - **`svelteBracketNewLine`**
-  - Default: `false`
+  - Default: `true`
   - Put the `>` of a multiline element on a new line (svelte equivalent of [jsxBracketSameLine](https://prettier.io/docs/en/options.html#jsx-brackets) rule)
 
 - **`svelteIndentScriptAndStyle`**
@@ -61,7 +61,7 @@ and add your preferred configuration options:
 {
   "svelteSortOrder" : "options-styles-scripts-markup",
   "svelteStrictMode": true,
-  "svelteBracketNewLine": true,
+  "svelteBracketNewLine": false,
   "svelteAllowShorthand": false,
   "svelteIndentScriptAndStyle": false
 }
diff --git a/src/options.ts b/src/options.ts
index f976069..6c30e6e 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -68,7 +68,7 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
         since: '0.6.0',
         category: 'Svelte',
         type: 'boolean',
-        default: false,
+        default: true,
         description: 'Put the `>` of a multiline element on a new line',
     },
     svelteAllowShorthand: {
diff --git a/src/print/index.ts b/src/print/index.ts
index 25f2046..962c2b2 100644
--- a/src/print/index.ts
+++ b/src/print/index.ts
@@ -220,7 +220,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     isTextNodeStartingWithWhitespace(node.children[0]) &&
                     !isPreTagContent(path)
                         ? () => line
-                        : () => softline;
+                        : () => (options.svelteBracketNewLine ? '' : softline);
             } else if (isPreTagContent(path)) {
                 body = () => printRaw(node, options.originalText);
             } else if (!isSupportedLanguage) {
@@ -254,7 +254,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                 return groupConcat([
                     ...openingTag,
                     group(indent(concat([softline, groupConcat(['>', body(), `</${node.name}`])]))),
-                    softline,
+                    isEmpty && options.svelteBracketNewLine ? '' : softline,
                     '>',
                 ]);
             }


Test patch:
diff --git a/test/formatting/samples/attribute-with-linebreaks/output.html b/test/formatting/samples/attribute-with-linebreaks/output.html
index 8ee1490..630db44 100644
--- a/test/formatting/samples/attribute-with-linebreaks/output.html
+++ b/test/formatting/samples/attribute-with-linebreaks/output.html
@@ -4,4 +4,5 @@
 That's not the case with other attributes. "
     data-value={array.map((item) => {
         return item + 1;
-    })} />
+    })}
+/>
diff --git a/test/formatting/samples/attribute-wrap-several/output.html b/test/formatting/samples/attribute-wrap-several/output.html
index 4402b63..98f136a 100644
--- a/test/formatting/samples/attribute-wrap-several/output.html
+++ b/test/formatting/samples/attribute-wrap-several/output.html
@@ -5,4 +5,5 @@
     hidden
     on:click={do_something}
     draggable="false"
-    data-my-prop />
+    data-my-prop
+/>
diff --git a/test/formatting/samples/long-attribute-value/output.html b/test/formatting/samples/long-attribute-value/output.html
index 769029f..ef10a44 100644
--- a/test/formatting/samples/long-attribute-value/output.html
+++ b/test/formatting/samples/long-attribute-value/output.html
@@ -38,4 +38,5 @@
     class:fits={"short check that fits in one line" ? true : false}
     class:breaks={"some really long condition check happening here"
         ? true
-        : false} />
+        : false}
+/>
diff --git a/test/formatting/samples/long-mustache-value/output.html b/test/formatting/samples/long-mustache-value/output.html
index 89f7552..4111f91 100644
--- a/test/formatting/samples/long-mustache-value/output.html
+++ b/test/formatting/samples/long-mustache-value/output.html
@@ -1,7 +1,8 @@
 <input
     type="password"
     class="attributes are not broken up by default which is the prettier behavior but {'breakable' +
-        'mustache tags'} can be broken up" />
+        'mustache tags'} can be broken up"
+/>
 
 <p>
     Text with spaces inbetween should break at the most fitting point and not
diff --git a/test/formatting/samples/prettier-ignore/output.html b/test/formatting/samples/prettier-ignore/output.html
index 524649a..f98ac24 100644
--- a/test/formatting/samples/prettier-ignore/output.html
+++ b/test/formatting/samples/prettier-ignore/output.html
@@ -8,4 +8,5 @@
     hidden
     on:click={do_something}
     draggable="false"
-    data-my-prop />
+    data-my-prop
+/>
diff --git a/test/printer/samples/attribute-bracket-new-line.options.json b/test/printer/samples/attribute-bracket-new-line.options.json
deleted file mode 100644
index c6a7da9..0000000
--- a/test/printer/samples/attribute-bracket-new-line.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteBracketNewLine": true
-}
diff --git a/test/printer/samples/attribute-bracket-no-new-line.html b/test/printer/samples/attribute-bracket-no-new-line.html
new file mode 100644
index 0000000..508f13a
--- /dev/null
+++ b/test/printer/samples/attribute-bracket-no-new-line.html
@@ -0,0 +1,1 @@
+<div class="foo" />
diff --git a/test/printer/samples/attribute-bracket-no-new-line.options.json b/test/printer/samples/attribute-bracket-no-new-line.options.json
new file mode 100644
index 0000000..062715f
--- /dev/null
+++ b/test/printer/samples/attribute-bracket-no-new-line.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
diff --git a/test/printer/samples/attribute-several-bracket-new-line.options.json b/test/printer/samples/attribute-several-bracket-new-line.options.json
deleted file mode 100644
index c6a7da9..0000000
--- a/test/printer/samples/attribute-several-bracket-new-line.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteBracketNewLine": true
-}
diff --git a/test/printer/samples/attribute-several-bracket-no-new-line.html b/test/printer/samples/attribute-several-bracket-no-new-line.html
new file mode 100644
index 0000000..4402b63
--- /dev/null
+++ b/test/printer/samples/attribute-several-bracket-no-new-line.html
@@ -0,0 +1,8 @@
+<div
+    id="x"
+    class="y"
+    title="A really long title"
+    hidden
+    on:click={do_something}
+    draggable="false"
+    data-my-prop />
diff --git a/test/printer/samples/attribute-several-bracket-no-new-line.options.json b/test/printer/samples/attribute-several-bracket-no-new-line.options.json
new file mode 100644
index 0000000..062715f
--- /dev/null
+++ b/test/printer/samples/attribute-several-bracket-no-new-line.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
diff --git a/test/printer/samples/attribute-several.html b/test/printer/samples/attribute-several.html
index 4402b63..98f136a 100644
--- a/test/printer/samples/attribute-several.html
+++ b/test/printer/samples/attribute-several.html
@@ -5,4 +5,5 @@
     hidden
     on:click={do_something}
     draggable="false"
-    data-my-prop />
+    data-my-prop
+/>
diff --git a/test/printer/samples/element-many-attributes-bracket-new-line.options.json b/test/printer/samples/element-many-attributes-bracket-new-line.options.json
deleted file mode 100644
index c6a7da9..0000000
--- a/test/printer/samples/element-many-attributes-bracket-new-line.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteBracketNewLine": true
-}
diff --git a/test/printer/samples/element-many-attributes-bracket-no-new-line.html b/test/printer/samples/element-many-attributes-bracket-no-new-line.html
new file mode 100644
index 0000000..5bb3436
--- /dev/null
+++ b/test/printer/samples/element-many-attributes-bracket-no-new-line.html
@@ -0,0 +1,24 @@
+<div
+    class1="asd"
+    class2="asd"
+    class3="asd"
+    class4="asd"
+    class5="asd"
+    class6="asd"
+    class7="asd"
+    class8="asd"
+    class9="asd"
+    class10="asd"
+    class11="asd"
+    class12="asd"
+    class13="asd"
+    class14="asd"
+    class15="asd"
+    class16="asd"
+    class17="asd"
+    class18="asd"
+    class19="asd"
+    class20="asd"
+    class21="asd">
+    <p>asd</p>
+</div>
diff --git a/test/printer/samples/element-many-attributes-bracket-no-new-line.options.json b/test/printer/samples/element-many-attributes-bracket-no-new-line.options.json
new file mode 100644
index 0000000..062715f
--- /dev/null
+++ b/test/printer/samples/element-many-attributes-bracket-no-new-line.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
diff --git a/test/printer/samples/element-with-children-bracket-new-line.options.json b/test/printer/samples/element-with-children-bracket-new-line.options.json
deleted file mode 100644
index c6a7da9..0000000
--- a/test/printer/samples/element-with-children-bracket-new-line.options.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "svelteBracketNewLine": true
-}
diff --git a/test/printer/samples/element-with-children-bracket-no-new-line.html b/test/printer/samples/element-with-children-bracket-no-new-line.html
new file mode 100644
index 0000000..8508c4d
--- /dev/null
+++ b/test/printer/samples/element-with-children-bracket-no-new-line.html
@@ -0,0 +1,1 @@
+<div class="foo">Test</div>
diff --git a/test/printer/samples/element-with-children-bracket-no-new-line.options.json b/test/printer/samples/element-with-children-bracket-no-new-line.options.json
new file mode 100644
index 0000000..062715f
--- /dev/null
+++ b/test/printer/samples/element-with-children-bracket-no-new-line.options.json
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
diff --git a/test/printer/samples/empty-elements-no-newline.html b/test/printer/samples/empty-elements-no-newline.html
new file mode 100644
index 0000000..1751c7a
--- /dev/null
+++ b/test/printer/samples/empty-elements-no-newline.html
@@ -0,0 +1,16 @@
+<span> </span>
+
+<div></div>
+
+<span
+    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class"
+    ></span
+>
+
+<span
+    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class">
+</span>
+
+<div
+    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class">
+</div>
diff --git a/test/printer/samples/empty-elements-no-newline.options.json b/test/printer/samples/empty-elements-no-newline.options.json
new file mode 100644
index 0000000..3a35a0a
--- /dev/null
+++ b/test/printer/samples/empty-elements-no-newline.options.json
@@ -0,0 +1,4 @@
+{
+    "svelteStrictMode": true,
+    "svelteBracketNewLine": false
+}
diff --git a/test/printer/samples/empty-elements.html b/test/printer/samples/empty-elements.html
index 1751c7a..3d3c07a 100644
--- a/test/printer/samples/empty-elements.html
+++ b/test/printer/samples/empty-elements.html
@@ -4,13 +4,13 @@
 
 <span
     class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class"
-    ></span
->
+></span>
 
 <span
-    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class">
+    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class"
+>
 </span>
 
 <div
-    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class">
-</div>
+    class="some classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome classsome class"
+></div>
diff --git a/test/printer/samples/event-handler-comments.html b/test/printer/samples/event-handler-comments.html
index 2475fbc..f5bace2 100644
--- a/test/printer/samples/event-handler-comments.html
+++ b/test/printer/samples/event-handler-comments.html
@@ -3,4 +3,5 @@
     () => {
         /* another comment */
         fn();
-    }} />
+    }}
+/>