ember / glimmer: Preserve self-closing tags (#13691)

Author: dcyriller

changelog_unreleased/handlebars/13691.md

@@ -0,0 +1,34 @@
+#### Preserve self-closing tags (#13691 by @dcyriller)
+
+<!-- prettier-ignore -->
+```hbs
+{{! Input }}
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>
+
+{{! Prettier stable }}
+<div></div>
+<div></div>
+<custom-component></custom-component>
+<custom-component></custom-component>
+<i></i>
+<i></i>
+<Component />
+<Component />
+
+{{! Prettier main }}
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component />
+```

src/language-handlebars/utils.js

@@ -41,6 +41,7 @@ const voidTags = new Set(htmlVoidElements);
 function isVoid(node) {
   return (
     voidTags.has(node.tag) ||
+    node.selfClosing === true ||
     (isGlimmerComponent(node) &&
       node.children.every((node) => isWhitespaceNode(node)))
   );

tests/format/handlebars/element-node/__snapshots__/jsfmt.spec.js.snap

@@ -45,6 +45,15 @@ printWidth: 80
 
 <MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
 
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>
+
 =====================================output=====================================
 <div class="attribute" {{modifier}} {{! comment}}>
   Hello
@@ -91,5 +100,14 @@ printWidth: 80
   @prop4={{true}}
   as |thing|
 />
+
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component />
 ================================================================================
 `;

tests/format/handlebars/element-node/element-node.hbs

@@ -36,3 +36,12 @@
 <img />
 
 <MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
+
+<div />
+<div></div>
+<custom-component />
+<custom-component></custom-component>
+<i />
+<i></i>
+<Component />
+<Component></Component>

tests/format/handlebars/html-whitespace-sensitivity/__snapshots__/jsfmt.spec.js.snap

@@ -702,7 +702,7 @@ printWidth: 40
 =====================================input======================================
 <i />   |   <i />
 =====================================output=====================================
-<i></i>   |   <i></i>
+<i />   |   <i />
 ================================================================================
 `;
 

tests/format/handlebars/single-quote-option/__snapshots__/jsfmt.spec.js.snap

@@ -99,8 +99,8 @@ singleQuote: false
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
-<div title="{{t 'my.title'}}"></div>
-<div title="{{t 'my.title'}}"></div>
+<div title="{{t 'my.title'}}" />
+<div title="{{t 'my.title'}}" />
 
 <a href="/{{url}}/{{url}}"></a>
 <a href="/{{url}}/{{url}}"></a>
@@ -126,7 +126,7 @@ singleQuote: false
   class="padding
     {{if foo (if fooAgain 'bar' (if fooAgainAgain 'bar' 'foo'))}}
     baz"
-></div>
+/>
 ================================================================================
 `;
 
@@ -161,8 +161,8 @@ singleQuote: true
 <div title='My "title"'></div>
 <div title="My other 'title'"></div>
 
-<div title='{{t "my.title"}}'></div>
-<div title='{{t "my.title"}}'></div>
+<div title='{{t "my.title"}}' />
+<div title='{{t "my.title"}}' />
 
 <a href='/{{url}}/{{url}}'></a>
 <a href='/{{url}}/{{url}}'></a>
@@ -188,7 +188,7 @@ singleQuote: true
   class='padding
     {{if foo (if fooAgain "bar" (if fooAgainAgain "bar" "foo"))}}
     baz'
-></div>
+/>
 ================================================================================
 `;