Format HTML like Prettier

[mubaraqwahab]

Thank you so much for this plugin. I've been looking for the like of it for a while now!

I noticed the plugin doesn't format HTML like how Prettier's own HTML formatter normally does. For example, given this snippet:

<h1>{{ hello | world }}</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click me!</button>

Prettier changes it into the following: (playground)

<h1>{{ hello | world }}</h1>
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
>
  Click me!
</button>

But this plugin (v0.4.6) changes it to:

<h1>
  {{ hello | world }}
</h1>
<button type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal">
  Click me!
</button>

My Observations

• Here you're breaking every non-inline element (like the h1) so that the tags stay on separate lines from the children, even when they would all fit in one line:
  

  prettier-plugin-twig-melody/src/print/Element.js

  Lines 51 to 68 in 3d99995

  	const result = [openingGroup];
  	const joinedChildren = concat(childGroups);
  	if (isInlineElement(node)) {
  	result.push(indent(concat([softline, joinedChildren])), softline);
  	} else {
  	const childBlock = [];
  	if (childGroups.length > 0) {
  	childBlock.push(hardline);
  	}
  	childBlock.push(joinedChildren);
  	result.push(indent(concat(childBlock)));
  	if (childGroups.length > 0) {
  	result.push(hardline);
  	}
  	}
  	result.push(closingTag);
  	return isInlineElement(node) ? group(concat(result)) : concat(result);

  
  Prettier only appears to break when they wouldn't fit in one line.
• When an element with many (or long) attributes is broken into multiple lines, Prettier tries to put every attribute indented on its own line. It also puts the opening "<" and the element name together on a separate line and the closing ">" on its own line. It looks like here's where this feature could be implemented:
  

  prettier-plugin-twig-melody/src/print/Element.js

  Line 22 in 3d99995

  const openingTagEnd = node.selfClosing ? " />" : ">";

It would be nice to have this plugin imitate Prettier's formatting. If you're cool with this proposal (and I hope you are 😃) I could create a pull request to try to resolve this.

Thank you.

[mubaraqwahab]

Whoever's reading this and wants my suggestions, I made a plugin for this Prettier plugin that adds the features in the meantime: prettier-plugin-twig-enhancements.