[handlebars] group params in opening block statements

[jamescdavis]

Description

This is a follow-up to #13930 to establish wrapping consistency between opening block statements and else blocks by grouping params in opening blocks. This causes params to break to a new line together and not be split across lines unless the length of params exceeds the print width. This also updates the else block wrapping to behave exactly the same as opening blocks (after #13930 it attempts to keep params on same line as the "else block" keywords, even when block params cause wrapping, see else block in the Prettier main example below).

--print-width 80

{{! Input }}
{{#block param param param param param param param param param param as |blockParam|}}
  Hello
{{else block param param param param param param param param param param as |blockParam|}}
  There
{{/block}}

{{! Prettier main (includes unreleased #13930) }}
{{#block
  param
  param
  param
  param
  param
  param
  param
  param
  param
  param
  as |blockParam|
}}
  Hello
{{else block param param param param param param param param param param
  as |blockParam|
}}
  There
{{/block}}

{{! This PR }}
{{#block
  param param param param param param param param param param
  as |blockParam|
}}
  Hello
{{else block
  param param param param param param param param param param
  as |blockParam|
}}
  There
{{/block}}

Checklist

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory).
• (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/XXXX.md file following changelog_unreleased/TEMPLATE.md.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

--parser glimmer

[fisker]

@jamescdavis I don't use handlebars, but is this a bug?

Prettier 2.8.1
Playground link

--parser glimmer

Input:

{{#block a}}
  1
{{else if b}}
  2
{{else}}
  3
{{/block}}

Output:

{{#block a}}
  1
{{else}}{{#if b}}
    2
  {{else}}
    3
  {{/if}}{{/block}}

I didn't mean else if is splited, I mean shouldn't {{/block}} align with the opening?

[fisker]

@jamescdavis I made some changes, please take a look.

[jamescdavis]

@fisker, your changes look good. Thanks for simplifying the logic!

[jamescdavis]

As far as the closing block alignment, it's due to the --html-whitespace-sensitivity setting in combination with prettier rewriting the else if.

When

{{else if b}}

is rewritten to

{{else}}{{#if b}}

and

{{/block}}

is rewritten to

  {{/if}}{{/block}}

and --html-whitespace-sensitivity is css or strict, it does not add whitespace between the statements.

See this playground link with --html-whitespace-sensitivity ignore.

You also see that explicitly writing this with newlines works fine, even with --html-whitespace-sensitivity strict: playground link

In any case, this would only be an issue when the {{else if is rewritten, which would only happen when the keyword that follows else doesn't match the opening block keyword. And TBH I'm not even sure that construct makes sense. When I did #13507, I made it only preserve the {{else foo when it matches the opening block (e.g. {{#foo) since it doesn't really make sense when they don't match.

If you wanted something like:

{{#block a}}
  1
{{else}}
  {{#if b}}
    2
  {{/if}}
{{/block}}

You'd explicitly write it that way.

And

{{#block a}}
  1
{{else}}
  {{#if b}}
    2
  {{/if}}
{{else}}
  3
{{/block}}

doesn't even make sense since there are two {{else}} blocks.

Maybe it should not try to match the opening block keyword and never split {{else anything regardless of the opening block? Prettier probably shouldn't change how the code will be interpreted by the compiler and so probably should just leave

{{#block a}}
  1
{{else if b}}
  2
{{else}}
  3
{{/block}}

as-is.

[jamescdavis]

@fisker I did notice one issue after your changes: when the if (or other block keyword) in {{else if goes beyond the print width causing the if to wrap to the next line, the if is not indented properly.

--print-width 8

Input:

{{#if a}}
  1
{{else if b}}
  2
{{/if}}

Output:

{{#if
  a
}}
  1
{{else
if
  b
}}
  2
{{/if}}

Expected:

{{#if
  a
}}
  1
{{else
  if
  b
}}
  2
{{/if}}

I've added a failing test and a fix for this.

But also, maybe it shouldn't wrap here? Maybe else if should always stay on the same line, even when it exceeds the print width? Maybe I was overzealous with group? 😆 If I made that change then else if would be more consistent with if.

It makes more of a difference with longer block keywords. Which do you think is better? (assuming --print-width 80)

Input:

{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |foo|}}
  1
{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |bar|}}
  2
{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}

Ouput with else "if" grouped:

{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
  param param param
  as |foo|
}}
  1
{{else
  abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
  param param param
  as |bar|
}}
  2
{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}

or

Output with else "if" not grouped:

{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
  param param param
  as |foo|
}}
  1
{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
  param param param
  as |bar|
}}
  2
{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}

Playground link

[jamescdavis]

I actually decided to make the change to not group else if so that it never wraps the if (or other block keyword) to a new line. This feels better and is actually what happens now (param wrapping is mess on stable, but should be in good shape after this PR). LMK, if you don't agree.

[fisker]

You can put this test in a separate dir with small printWidth, instead of deep.nest.

[fisker]

Prettier probably shouldn't change how the code will be interpreted by the compiler and so probably should just leave

Agree, but this problem can be addressed in another PR.

[fisker]

I did notice one issue after your changes: when the if (or other block keyword) in {{else if goes beyond the print width causing the if to wrap to the next line, the if is not indented properly.

I removed indent() on it since indent should alway start with line, if you want indent(["else", line, "something else"]), you should write ["else", indent([line, "something else"])], but I can be wrong, to be honest, I don't really understand how indent works.

[fisker]

Which do you think is better?

I nerver use handlebars, I can't tell.

@dcyriller Do you have time to review? We plan to make a release, and I was hoping this to be included.

[dcyriller]

Sorry I have been afk for a few weeks.

[jamescdavis]

@fisker I moved the test as you suggested. With the approval from @dcyriller, this should be GTG?

[fisker]

@jamescdavis Thanks for your work.
@dcyriller Thanks for your time too.