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