Merge branch 'GH-90/bracket-same-line' into master

Close GH-90

Fix missing implementation for option `bracketSameLine` for html tags.
If you don't have this option on your prettier configuration you need to
add it to retain your current code style.

Add this configuration to retain current code style.

```yaml
bracketSameLine: true
```

Otherwise closing bracket for opening tag will be printed on new line.

__Previous default__
```twig
<a
    href="/some/url">
    text
</a>
```

__Current default__
```twig
<a
    href="/some/url"
>
    text
</a>
```

Author: zackad

CHANGELOG.md

@@ -2,6 +2,72 @@
 
 ## unreleased
 
+### Bugfixes
+- Properly implement `bracketSameLine` options for html element tag
+
+__Input__
+```twig
+<iframe class=""
+        src="https://www.google.com/maps/embed"
+        frameborder="0"
+        allowfullscreen></iframe>
+
+<img src="/public/logo.png" alt="some description that should be enough to break this into multiline" class="block bg-white border radius-lg"/>
+<img src="/public/logo.png" class="block bg-white border radius-lg"/>
+<a href="/homepage" class="block bg-white border radius-lg" aria-label="some text label">some text</a>
+
+<br />
+```
+
+__bracketSameLine: `true`__
+```twig
+<iframe
+    class=""
+    src="https://www.google.com/maps/embed"
+    frameborder="0"
+    allowfullscreen></iframe>
+
+<img
+    src="/public/logo.png"
+    alt="some description that should be enough to break this into multiline"
+    class="block bg-white border radius-lg" />
+<img src="/public/logo.png" class="block bg-white border radius-lg" />
+<a
+    href="/homepage"
+    class="block bg-white border radius-lg"
+    aria-label="some text label">
+    some text
+</a>
+
+<br />
+```
+
+__bracketSameLine: `false`__
+```twig
+<iframe
+    class=""
+    src="https://www.google.com/maps/embed"
+    frameborder="0"
+    allowfullscreen
+></iframe>
+
+<img
+    src="/public/logo.png"
+    alt="some description that should be enough to break this into multiline"
+    class="block bg-white border radius-lg"
+/>
+<img src="/public/logo.png" class="block bg-white border radius-lg" />
+<a
+    href="/homepage"
+    class="block bg-white border radius-lg"
+    aria-label="some text label"
+>
+    some text
+</a>
+
+<br />
+```
+
 ### Internals
 - Add option to add prefix/suffix for test snapshot output. This will allow to reuse single input file to produce several snapshot output with different configuration
 

src/print/Element.js

@@ -9,26 +9,46 @@ import {
 
 const { group, line, hardline, softline, indent, join } = doc.builders;
 
-const printOpeningTag = (node, path, print) => {
+const printOpeningTag = (node, path, print, options) => {
+    const groupId = Symbol("opening-tag");
+
     const opener = "<" + node.name;
     const printedAttributes = printSeparatedList(path, print, "", "attributes");
-    const openingTagEnd = node.selfClosing ? " />" : ">";
-    const hasAttributes = node.attributes && node.attributes.length > 0;
 
+    const openingTagEnd = [];
+    if (node.selfClosing) {
+        if (!options.bracketSameLine) {
+            openingTagEnd.push(line);
+        } else {
+            openingTagEnd.push(" ");
+        }
+        openingTagEnd.push("/>");
+    } else {
+        if (!options.bracketSameLine) {
+            openingTagEnd.push(softline);
+        }
+        openingTagEnd.push(">");
+    }
+
+    const hasAttributes = node.attributes && node.attributes.length > 0;
     if (hasAttributes) {
-        return [opener, indent([line, printedAttributes]), openingTagEnd];
+        return group(
+            [opener, indent([line, printedAttributes]), openingTagEnd],
+            { id: groupId }
+        );
     }
-    return [opener, openingTagEnd];
+
+    return group([opener, openingTagEnd], { id: groupId });
 };
 
 const printSeparatedList = (path, print, separator, attrName) => {
     return join([separator, line], path.map(print, attrName));
 };
 
-const p = (node, path, print) => {
+const p = (node, path, print, options) => {
     // Set a flag in case attributes contain, e.g., a FilterExpression
     node[EXPRESSION_NEEDED] = true;
-    const openingGroup = group(printOpeningTag(node, path, print));
+    const openingGroup = group(printOpeningTag(node, path, print, options));
     node[EXPRESSION_NEEDED] = false;
     node[STRING_NEEDS_QUOTES] = false;
 

tests/ControlStructures/__snapshots__/forInclude.snap.twig

@@ -1,7 +1,8 @@
 {% for foo in range(1, category) %}
     <span
         key="{{ foo }}"
-        class="qtp-item__star icon-ic icon-icn_star--white {{ foo }}">
+        class="qtp-item__star icon-ic icon-icn_star--white {{ foo }}"
+    >
         {% include './Star.twig' only %}
     </span>
 {% endfor %}

tests/ControlStructures/__snapshots__/if.snap.twig

@@ -13,7 +13,8 @@
             (css.logoWider): useWiderItems
         }|classes }}"
         srcABC="{{ partner.logoUrl }}"
-        alt="{{ partner.name }}" />
+        alt="{{ partner.name }}"
+    />
 {%- elseif partnerName %}
     <b class="{{ css.name }}">{{ partnerName }}</b>
 {% elseif partnerImg -%}

tests/Element/__snapshots__/attributes.snap.twig

@@ -6,7 +6,8 @@
         ref: intersectionObserver|default,
         class: 'hotel-item item-order__list-item js_co_item',
         'data-co_alt_htl': isAlternative ? '1'
-    }|attrs }}>
+    }|attrs }}
+>
     Test
 </fantasy>
 

tests/Element/__snapshots__/manyAttributes.snap.twig

@@ -6,6 +6,7 @@
     attr5="five"
     attr6="six"
     attr7="seven"
-    attr8="eight">
+    attr8="eight"
+>
     Text
 </span>

tests/Element/__snapshots__/selfClosing.snap.twig

@@ -8,7 +8,8 @@
     attr5="five"
     attr6="six"
     attr7="seven"
-    attr8="eight" />
+    attr8="eight"
+/>
 
 <input type="text" name="user" />
 <input type="text" name="password" />

tests/Expressions/__snapshots__/mappingExpression.snap.twig

@@ -68,4 +68,5 @@
             theme
         })
     })
-    }}></div>
+    }}
+></div>

tests/Expressions/__snapshots__/objectExpression.snap.twig

@@ -10,6 +10,7 @@
 <h1
     class="{{ {
         ('hero__title--' ~ (locale|lower)): locale in ['CN', 'JP', 'DE', 'RU']
-    }|classes }}">
+    }|classes }}"
+>
     Heading
 </h1>

tests/Failing/__snapshots__/controversial.snap.twig

@@ -10,7 +10,8 @@
 <section
     class="{{ {
         base: css.prices
-    } | classes }}"></section>
+    } | classes }}"
+></section>
 
 <!--  This is what happens if we reduce indentation depth here:
     "as" and object keys at same indentation level

tests/Failing/__snapshots__/failing.snap.twig

@@ -42,7 +42,8 @@
             class="rat-chart__bar-content rat-color--{{ valueIndex }}"
             {{ {
                 style: width
-            } | attrs }}>
+            } | attrs }}
+        >
 
         </span>
     </span>

tests/Options/__snapshots__/bracket_same_line_disabled.snap.twig

@@ -0,0 +1,22 @@
+<iframe
+    class=""
+    src="https://www.google.com/maps/embed"
+    frameborder="0"
+    allowfullscreen
+></iframe>
+
+<img
+    src="/public/logo.png"
+    alt="some description that should be enough to break this into multiline"
+    class="block bg-white border radius-lg"
+/>
+<img src="/public/logo.png" class="block bg-white border radius-lg" />
+<a
+    href="/homepage"
+    class="block bg-white border radius-lg"
+    aria-label="some text label"
+>
+    some text
+</a>
+
+<br />

tests/Options/__snapshots__/bracket_same_line_enabled.snap.twig

@@ -0,0 +1,19 @@
+<iframe
+    class=""
+    src="https://www.google.com/maps/embed"
+    frameborder="0"
+    allowfullscreen></iframe>
+
+<img
+    src="/public/logo.png"
+    alt="some description that should be enough to break this into multiline"
+    class="block bg-white border radius-lg" />
+<img src="/public/logo.png" class="block bg-white border radius-lg" />
+<a
+    href="/homepage"
+    class="block bg-white border radius-lg"
+    aria-label="some text label">
+    some text
+</a>
+
+<br />

tests/Options/bracket_same_line.twig

@@ -0,0 +1,10 @@
+<iframe class=""
+        src="https://www.google.com/maps/embed"
+        frameborder="0"
+        allowfullscreen></iframe>
+
+<img src="/public/logo.png" alt="some description that should be enough to break this into multiline" class="block bg-white border radius-lg"/>
+<img src="/public/logo.png" class="block bg-white border radius-lg"/>
+<a href="/homepage" class="block bg-white border radius-lg" aria-label="some text label">some text</a>
+
+<br />

tests/Options/jsfmt.spec.js

@@ -29,4 +29,26 @@ describe("Options", () => {
         });
         await expect(actual).toMatchFileSnapshot(snapshotFile);
     });
+
+    it("bracket same line - enabled", async () => {
+        const { actual, snapshotFile } = await run_spec(import.meta.url, {
+            source: "bracket_same_line.twig",
+            suffix: "_enabled",
+            formatOptions: {
+                bracketSameLine: true
+            }
+        });
+        await expect(actual).toMatchFileSnapshot(snapshotFile);
+    });
+
+    it("bracket same line - disabled", async () => {
+        const { actual, snapshotFile } = await run_spec(import.meta.url, {
+            source: "bracket_same_line.twig",
+            suffix: "_disabled",
+            formatOptions: {
+                bracketSameLine: false
+            }
+        });
+        await expect(actual).toMatchFileSnapshot(snapshotFile);
+    });
 });

tests/Statements/__snapshots__/macro.snap.twig

@@ -17,7 +17,8 @@
         type="{{ type }}"
         name="{{ name }}"
         value="{{ value|e }}"
-        size="{{ size }}" />
+        size="{{ size }}"
+    />
 {% endmacro %}
 
 {%- macro wrapped_input(name, value, type, size) %}

tests/smoke-test.twig

@@ -4,7 +4,8 @@
         <meta charset="UTF-8" />
         <meta
             name="viewport"
-            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+        />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title>
             Document