Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Windvis opened this issue Dec 1, 2021 · 2 comments · Fixed by #11900
Closed

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

Windvis opened this issue Dec 1, 2021 · 2 comments · Fixed by #11900
Assignees
Labels
lang:handlebars Issues affecting Handlebars (Glimmer)

Comments

@Windvis
Copy link

Windvis commented Dec 1, 2021

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
Copy link
Member

duailibe commented Dec 1, 2021

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).

@duailibe duailibe self-assigned this Dec 1, 2021
@duailibe duailibe added the lang:handlebars Issues affecting Handlebars (Glimmer) label Dec 1, 2021
@Windvis
Copy link
Author

Windvis commented Dec 1, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang:handlebars Issues affecting Handlebars (Glimmer)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants