You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<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.
The text was updated successfully, but these errors were encountered:
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.
Prettier 2.5.0
Playground link
Input:
Output:
Expected behavior:
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.
The text was updated successfully, but these errors were encountered: