(feat) support bracketSameLine (#251)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # prettier-plugin-svelte changelog
 
+## 2.5.0 (Unreleased)
+
+* (feat) Support `bracketSameLine` option and deprecate `svelteBracketNewLine` ([#251](https://github.com/sveltejs/prettier-plugin-svelte/pull/251))
+
 ## 2.4.0
 
 * (feat) Add support for formatting Pug inside `<template>` tags, if the corresponding plugin is available ([#248](https://github.com/sveltejs/prettier-plugin-svelte/pull/248))

README.md

@@ -92,6 +92,8 @@ Example:
 
 ### Svelte Bracket New Line
 
+> Deprecated since 2.5.0. Use Prettier 2.4.0 and [bracketSameLine](https://prettier.io/docs/en/options.html#bracket-line) instead.
+
 Put the `>` of a multiline element on a new line. Roughly the Svelte equivalent of the [jsxBracketSameLine](https://prettier.io/docs/en/options.html#jsx-brackets) rule. Setting this to `false` will have no effect for whitespace-sensitive tags (inline elements) when there's no whitespace between the `>` of the start tag and the inner content, or when there's no whitespace after the `>` of the end tag. 
 
 Example:

package.json

@@ -32,9 +32,9 @@
         "@rollup/plugin-commonjs": "14.0.0",
         "@rollup/plugin-node-resolve": "11.0.1",
         "@types/node": "^10.12.18",
-        "@types/prettier": "^2.1.6",
+        "@types/prettier": "^2.4.1",
         "ava": "3.15.0",
-        "prettier": "^2.3.0",
+        "prettier": "^2.4.1",
         "rollup": "2.36.0",
         "rollup-plugin-typescript": "1.0.1",
         "svelte": "^3.38.2",

src/options.ts

@@ -1,4 +1,4 @@
-import { SupportOption } from 'prettier';
+import { ParserOptions, SupportOption } from 'prettier';
 
 declare module 'prettier' {
     interface RequiredOptions extends PluginOptions {}
@@ -68,8 +68,8 @@ export const options: Record<keyof PluginOptions, SupportOption> = {
         since: '0.6.0',
         category: 'Svelte',
         type: 'boolean',
-        default: true,
         description: 'Put the `>` of a multiline element on a new line',
+        deprecated: '2.5.0',
     },
     svelteAllowShorthand: {
         since: '1.0.0',
@@ -139,3 +139,11 @@ export function parseSortOrder(sortOrder: SortOrder): SortOrderPart[] {
     }
     return order;
 }
+
+export function isBracketSameLine(options: ParserOptions): boolean {
+    return options.svelteBracketNewLine != null
+        ? !options.svelteBracketNewLine
+        : options.bracketSameLine != null
+        ? options.bracketSameLine
+        : false;
+}

src/print/index.ts

@@ -3,7 +3,7 @@ import { formattableAttributes, selfClosingTags } from '../lib/elements';
 import { extractAttributes } from '../lib/extractAttributes';
 import { getText } from '../lib/getText';
 import { hasSnippedContent, unsnipContent } from '../lib/snipTagContent';
-import { parseSortOrder, SortOrderPart } from '../options';
+import { isBracketSameLine, parseSortOrder, SortOrderPart } from '../options';
 import { isEmptyDoc, isLine, trim, trimRight } from './doc-helpers';
 import { flatten, isASTNode, isPreTagContent, replaceEndOfLineWith } from './helpers';
 import {
@@ -82,6 +82,8 @@ function groupConcat(contents: doc.builders.Doc[]): doc.builders.Doc {
 }
 
 export function print(path: FastPath, options: ParserOptions, print: PrintFn): Doc {
+    const bracketSameLine = isBracketSameLine(options);
+
     const n = path.getValue();
     if (!n) {
         return '';
@@ -210,11 +212,11 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                         groupConcat([
                             possibleThisBinding,
                             ...attributes,
-                            options.svelteBracketNewLine ? dedent(line) : '',
+                            bracketSameLine ? '' : dedent(line),
                         ]),
                     ),
 
-                    ...[options.svelteBracketNewLine ? '' : ' ', `/>`],
+                    ...[bracketSameLine ? ' ' : '', `/>`],
                 ]);
             }
 
@@ -236,7 +238,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     isTextNodeStartingWithWhitespace(node.children[0]) &&
                     !isPreTagContent(path)
                         ? () => line
-                        : () => (options.svelteBracketNewLine ? '' : softline);
+                        : () => (bracketSameLine ? softline : '');
             } else if (isPreTagContent(path)) {
                 body = () => printRaw(node, options.originalText);
             } else if (!isSupportedLanguage) {
@@ -257,7 +259,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                         ...attributes,
                         hugStart
                             ? ''
-                            : options.svelteBracketNewLine && !isPreTagContent(path)
+                            : !bracketSameLine && !isPreTagContent(path)
                             ? dedent(softline)
                             : '',
                     ]),
@@ -282,7 +284,7 @@ export function print(path: FastPath, options: ParserOptions, print: PrintFn): D
                     groupConcat(['>', body(), `</${node.name}`]),
                 ]);
                 const omitSoftlineBeforeClosingTag =
-                    (isEmpty && options.svelteBracketNewLine) ||
+                    (isEmpty && !bracketSameLine) ||
                     canOmitSoftlineBeforeClosingTag(node, path, options);
                 return groupConcat([
                     ...openingTag,

src/print/node-helpers.ts

@@ -24,6 +24,7 @@ import {
 import { blockElements, TagName } from '../lib/elements';
 import { FastPath, ParserOptions } from 'prettier';
 import { findLastIndex, isASTNode, isPreTagContent } from './helpers';
+import { isBracketSameLine } from '../options';
 
 const unsupportedLanguages = ['coffee', 'coffeescript', 'styl', 'stylus', 'sass'];
 
@@ -520,7 +521,7 @@ export function canOmitSoftlineBeforeClosingTag(
     options: ParserOptions,
 ): boolean {
     return (
-        !options.svelteBracketNewLine &&
+        isBracketSameLine(options) &&
         (!hugsStartOfNextNode(node, options) || isLastChildWithinParentBlockElement(path, options))
     );
 }

test/formatting/samples/attributes-bracket-same-line/input.html

@@ -0,0 +1,4 @@
+<button class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </button>
+<div class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </div>
+<span class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </span>
+<p class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r"> Copy </p>

test/formatting/samples/attributes-bracket-same-line/options.json

@@ -0,0 +1,3 @@
+{
+    "bracketSameLine": true
+}

test/formatting/samples/attributes-bracket-same-line/output.html

@@ -0,0 +1,16 @@
+<button
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</button>
+<div
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</div>
+<span
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</span>
+<p
+    class="bg-green-500 text-gray-100 hover:bg-green-400 flex items-center px-4 py-2 border border-l-0 rounded-r">
+    Copy
+</p>

test/printer/samples/attribute-bracket-same-line.html

@@ -0,0 +1 @@
+<div class="foo" />

test/printer/samples/attribute-bracket-same-line.options.json

@@ -0,0 +1,3 @@
+{
+    "bracketSameLine": true
+}