Bugfix: Print some html element as their own line

CHANGELOG.md

@@ -68,6 +68,7 @@ __bracketSameLine: `false`__
 <br />
 ```
 
+- GH-101 Fix printing some html tags to be on their own line (heading and table cell)
 - GH-106 Fix handling string literal when using block shortcut syntax
 
 ### Internals

src/print/Element.js

@@ -2,6 +2,7 @@ import { doc } from "prettier";
 import {
     removeSurroundingWhitespace,
     isInlineElement,
+    isOwnlineElement,
     printChildGroups,
     EXPRESSION_NEEDED,
     STRING_NEEDS_QUOTES
@@ -52,32 +53,34 @@ const p = (node, path, print, options) => {
     node[EXPRESSION_NEEDED] = false;
     node[STRING_NEEDS_QUOTES] = false;
 
-    if (!node.selfClosing) {
-        node.children = removeSurroundingWhitespace(node.children);
+    if (node.selfClosing) {
+        return openingGroup;
+    }
 
-        const childGroups = printChildGroups(node, path, print, "children");
-        const closingTag = ["</", node.name, ">"];
-        const result = [openingGroup];
-        const joinedChildren = childGroups;
-        if (isInlineElement(node)) {
-            result.push(indent([softline, joinedChildren]), softline);
-        } else {
-            const childBlock = [];
-            if (childGroups.length > 0) {
-                childBlock.push(hardline);
-            }
-            childBlock.push(joinedChildren);
-            result.push(indent(childBlock));
-            if (childGroups.length > 0) {
-                result.push(hardline);
-            }
-        }
-        result.push(closingTag);
+    const groupElement = Symbol("element");
+    node.children = removeSurroundingWhitespace(node.children);
 
-        return isInlineElement(node) ? group(result) : result;
+    const childGroups = printChildGroups(node, path, print, "children");
+    const closingTag = ["</", node.name, ">"];
+    const result = [openingGroup];
+    const joinedChildren = childGroups;
+    if (isOwnlineElement(node) || isInlineElement(node)) {
+        const element = [indent([softline, joinedChildren]), softline];
+        result.push(element);
+    } else {
+        const childBlock = [];
+        if (childGroups.length > 0) {
+            childBlock.push(hardline);
+        }
+        childBlock.push(joinedChildren);
+        result.push(indent(childBlock));
+        if (childGroups.length > 0) {
+            result.push(hardline);
+        }
     }
+    result.push(closingTag);
 
-    return openingGroup;
+    return group(result, { id: groupElement });
 };
 
 export { p as printElement };

src/util/publicFunctions.js

@@ -28,7 +28,6 @@ const INLINE_HTML_ELEMENTS = [
     "img",
     "kbd",
     "label",
-    "li",
     "mark",
     "q",
     "s",
@@ -43,6 +42,22 @@ const INLINE_HTML_ELEMENTS = [
     "var"
 ];
 
+/**
+ * Introducing new "type" html element that should be printed on their own line
+ * @type {string[]}
+ */
+const OWNLINE_HTML_ELEMENTS = [
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "li",
+    "td",
+    "th"
+];
+
 /**
  * Node types around which we avoid an extra line break.
  * Example:
@@ -478,6 +493,12 @@ const isInlineElement = node => {
     );
 };
 
+export const isOwnlineElement = node => {
+    return (
+        Node.isElement(node) && OWNLINE_HTML_ELEMENTS.indexOf(node.name) >= 0
+    );
+};
+
 const isCommentNode = node =>
     Node.isTwigComment(node) || Node.isHtmlComment(node);
 

tests/ControlStructures/__snapshots__/forWithBlock.snap.twig

@@ -1,6 +1,4 @@
-<h1>
-    {{ title|title }}
-</h1>
+<h1>{{ title|title }}</h1>
 <ul>
     {% for item in items %}
         <li class="{{ loop.last ? 'last' : '' }}">

tests/Element/__snapshots__/ownline_html_element.snap.twig

@@ -0,0 +1,36 @@
+<ul>
+    <li>a</li>
+    <li>b</li>
+</ul>
+
+<thead>
+    <tr>
+        <th>1</th>
+        <th>2</th>
+        <th>3</th>
+    </tr>
+</thead>
+
+<tbody>
+    <tr>
+        <td>1</td>
+        <td>2</td>
+        <td>3</td>
+    </tr>
+</tbody>
+
+<main>
+    <h1>1</h1>
+    <h2>2</h2>
+    <h3>3</h3>
+    <h4>4</h4>
+    <h5>5</h5>
+    <h6>6</h6>
+</main>
+
+<h1
+    class="Lorem ipsum dolor sit amet."
+    aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, repellat."
+>
+    helloM
+</h1>

tests/Element/jsfmt.spec.js

@@ -68,4 +68,11 @@ describe("Elements", () => {
         });
         expect(actual).toMatchFileSnapshot(snapshotFile);
     });
+
+    it("should handle ownline html element", async () => {
+        const { actual, snapshotFile } = await run_spec(import.meta.url, {
+            source: "ownline_html_element.twig"
+        });
+        expect(actual).toMatchFileSnapshot(snapshotFile);
+    });
 });

tests/Element/ownline_html_element.twig

@@ -0,0 +1,9 @@
+<ul><li>a</li><li>b</li></ul>
+
+<thead><tr><th>1</th><th>2</th><th>3</th></tr></thead>
+
+<tbody><tr><td>1</td><td>2</td><td>3</td></tr></tbody>
+
+<main><h1>1</h1><h2>2</h2><h3>3</h3><h4>4</h4><h5>5</h5><h6>6</h6></main>
+
+<h1 class="Lorem ipsum dolor sit amet." aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, repellat.">helloM</h1>

tests/Expressions/__snapshots__/operators.snap.twig

@@ -66,9 +66,7 @@
         or element is instance of(
             constant('Namespace\\Classname::CONSTANT_NAME')
         ) %}
-    <h1>
-        {{ entry.title }}
-    </h1>
+    <h1>{{ entry.title }}</h1>
 {% endif %}
 
 {{ dump(test) }}

tests/smoke-test.twig

@@ -18,9 +18,7 @@
             {% endfor %}
         </ul>
 
-        <h1>
-            My Webpage
-        </h1>
+        <h1>My Webpage</h1>
         {{ a_variable }}
         {% set name = 'Fabien' %}
         {% set numbers = [1, 2] %}