fix(glimmer): treat glimmer components as self closing tags (#4900)

src/language-handlebars/printer-glimmer.js

@@ -47,9 +47,14 @@ function print(path, options, print) {
       );
     }
     case "ElementNode": {
-      const isVoid = voidTags.indexOf(n.tag) !== -1;
-      const closeTag = isVoid ? concat([" />", softline]) : ">";
+      const tagFirstChar = n.tag[0];
+      const isLocal = n.tag.indexOf(".") !== -1;
+      const isGlimmerComponent =
+        tagFirstChar.toUpperCase() === tagFirstChar || isLocal;
       const hasChildren = n.children.length > 0;
+      const isVoid =
+        (isGlimmerComponent && !hasChildren) || voidTags.indexOf(n.tag) !== -1;
+      const closeTag = isVoid ? concat([" />", softline]) : ">";
       const getParams = (path, print) =>
         indent(
           concat([

tests/html_glimmer/__snapshots__/jsfmt.spec.js.snap

@@ -135,9 +135,16 @@ exports[`block-statement.hbs - glimmer-verify 1`] = `
 `;
 
 exports[`component.hbs - glimmer-verify 1`] = `
-<user-greeting @name="Ricardo" @greeting="Olá" />
+<UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}, {{@name}}!
 
+<Form as |f|>
+  <f.input @title="hello" />
+  <f.input>hello</f.input>
+</Form>
+
+<this.label @title="hello" />
+
 <button onclick={{action next}}>Next</button>
 
 <button disabled class="disabled"></button>
@@ -146,11 +153,18 @@ exports[`component.hbs - glimmer-verify 1`] = `
 
 <div ...attributes>Hello</div>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-<user-greeting @name="Ricardo" @greeting="Olá"></user-greeting>
+<UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}
 ,
 {{@name}}
 !
+<Form as |f|>
+  <f.input @title="hello" />
+  <f.input>
+    hello
+  </f.input>
+</Form>
+<this.label @title="hello" />
 <button onclick={{action next}}>
   Next
 </button>

tests/html_glimmer/component.hbs

@@ -1,6 +1,13 @@
-<user-greeting @name="Ricardo" @greeting="Olá" />
+<UserGreeting @name="Ricardo" @greeting="Olá" />
 {{@greeting}}, {{@name}}!
 
+<Form as |f|>
+  <f.input @title="hello" />
+  <f.input>hello</f.input>
+</Form>
+
+<this.label @title="hello" />
+
 <button onclick={{action next}}>Next</button>
 
 <button disabled class="disabled"></button>