Glimmer: Named blocks without content are self-closed on format

[Windvis]

Prettier 2.5.0
Playground link

--parser glimmer
--no-bracket-spacing
--prose-wrap always

Input:

<ComponentWithNamedBlocks>
  <:first-named-block></:first-named-block>
  <:second-named-block> </:second-named-block>
  <:named-block-with-comment>{{! Do not convert to an empty element}}</:named-block-with-comment>
  <:named-block-with-content>Hello</:named-block-with-content>
</ComponentWithNamedBlocks>

{{! normal elements work as expected }}
<div></div>

{{! It seems to follow the same logic as components / PascalCased elements? }}
<ComponentWithoutContent></ComponentWithoutContent>
<hello></hello>

Output:

<ComponentWithNamedBlocks>
  <:first-named-block />
  <:second-named-block />
  <:named-block-with-comment
  >{{! Do not convert to an empty element}}</:named-block-with-comment>
  <:named-block-with-content>Hello</:named-block-with-content>
</ComponentWithNamedBlocks>

{{! normal elements work as expected }}
<div></div>

{{! It seems to follow the same logic as components / PascalCased elements? }}
<ComponentWithoutContent />
<hello></hello>

Expected behavior:

<ComponentWithNamedBlocks>
  <:first-named-block></:first-named-block>
  <:second-named-block> </:second-named-block>
  <:named-block-with-comment
  >{{! Do not convert to an empty element}}</:named-block-with-comment>
  <:named-block-with-content>Hello</:named-block-with-content>
</ComponentWithNamedBlocks>

{{! normal elements work as expected }}
<div></div>

{{! It seems to follow the same logic as components / PascalCased elements? }}
<ComponentWithoutContent />
<hello></hello>

Ember 3.25 enabled the yieldable named blocks feature which is explained in this RFC.

Prettier does support the syntax already, but there is one case that doesn't work as expected: If a named block doesn't have any content Prettier will convert it to its self-closing equivalent (which seems to mimic the behavior for components in the Angle Bracket Invocation). The problem is that the Glimmer template compiler doesn't support self-closing named blocks and throws an error.

<:named-block-name/> is not a valid named block: named blocks cannot be self-closing.

So I think the named blocks should be treated the same as normal HTML elements instead of as components. The easiest way around this is to add a comment to the named block so that it will be not formatted as a self-closing element.

[duailibe]

Hi @Windvis, thanks for the detailed report!

For reference, even though the RFC allegedly supports self-closing named blocks, it stopped supporting later (glimmerjs/glimmer-vm@7f8b638).

[Windvis]

@duailibe Thanks for tackling this so fast!

There indeed probably isn't really a valid use-case for it. In my case the block in question provided some visual white space which I needed for the layout to work. I didn't want to show data but I did want the white space so I used the empty block as a workaround until I refactored the component to be more flexible.