Prettier formats handlebars components incorrectly inside html tag

[Drakeoon]

Prettier 2.0.5
Playground link

--arrow-parens avoid
--parser glimmer
--trailing-comma none

Input:

<div>
  {{shared/input-component label="The Component" value="description" issue=issue}}
  
  {{shared/input-component more=props even=more label="The Component" value="description" issue=issue}}
</div>

Output:

<div>
  {{
    shared/input-component label="The Component" value="description" issue=issue
  }}

  {{
    shared/input-component
    more=props
    even=more
    label="The Component"
    value="description"
    issue=issue
  }}
</div>

Expected behavior:

<div>
  {{shared/input-component label="The Component" value="description" issue=issue}}

  {{shared/input-component
    more=props
    even=more
    label="The Component"
    value="description"
    issue=issue
  }}
</div>

The issue only appears to happen when having an html tag wrapping Ember components, here's the example of prettier working correctly after stripping <div> tag

[alexander-akait]

For me current output is readable. Why do you think result in expected is better?

[3runo]

For me current output is readable. Why do you think result in expected is better?

This should not be based on personal information. The parser is breaking the init and ending of the components for no reason.

It would be the same of

<ReactComponent prop1=1 prop2=2 prop3=3 />

being formatted like

<
ReactComponent prop1=1 prop2=2 prop3=3
/>

[PoslinskiNet]

It's funny because if we don't wrap it as a first ancestor with HTML element, then it works as expected. With HTML element it behaves oddly. Funny thing - vue formatter works well in this case (for Handlebars).

Input:

{{shared/input-component label="The Component" value="description" issue=issue}}

<div>
  {{shared/input-component label="The Component" value="description" issue=issue}}
</div>

Output:

{{shared/input-component label="The Component" value="description" issue=issue}}

<div>
  {{
    shared/input-component label="The Component" value="description" issue=issue
  }}
</div>

[Drakeoon]

@evilebottnawi Well, to me the main reasons to follow the expected output would be:

1. VSCode does not recognize the current output as any form of component when using Handlebars language
   

2. Ember guides use the same formatting style, which leads to the majority of Ember projects following the expected output style

3. It looks more like a bug than an intention, because if the element is not wrapped in an html tag it behaves just fine

Although I understand you guys provide a limited support to the handlebars and it might be outside of the scope

[mikoscz]

jgwhite#1 (comment)