[handlebars] group params in opening block statements

changelog_unreleased/handlebars/14067.md

@@ -0,0 +1,57 @@
+#### Group params in opening block statements (#14067 by @jamescdavis)
+
+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.
+
+<!-- prettier-ignore -->
+```hbs
+{{! 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 stable }}
+{{#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}}
+  There
+{{/block}}
+
+{{! Prettier main }}
+{{#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}}
+```

src/language-handlebars/printer-glimmer.js

@@ -533,21 +533,24 @@ function printOpenBlock(path, print) {
   const openingMustache = printOpeningBlockOpeningMustache(node);
   const closingMustache = printOpeningBlockClosingMustache(node);
 
-  const attributes = [printPath(path, print)];
+  const blockKeyword = [printPath(path, print)];
 
-  const params = printParams(path, print);
-  if (params) {
-    attributes.push(line, params);
+  const printParamsResult = printParams(path, print);
+  let params = [];
+  if (printParamsResult) {
+    params = [line, group(printParamsResult)];
   }
 
+  let blockParams = [];
   if (isNonEmptyArray(node.program.blockParams)) {
-    const block = printBlockParams(node.program);
-    attributes.push(line, block);
+    blockParams = [line, printBlockParams(node.program)];
   }
 
   return group([
     openingMustache,
-    indent(attributes),
+    indent(blockKeyword),
+    indent(params),
+    indent(blockParams),
     softline,
     closingMustache,
   ]);
@@ -564,8 +567,12 @@ function printElseBlock(node, options) {
 
 function printElseIfLikeBlock(path, print, ifLikeKeyword) {
   const node = path.getValue();
-  let blockParams = [];
 
+  const elseBlockKeywords = group(["else", line, ifLikeKeyword]);
+
+  const params = [line, group(printParams(path, print))];
+
+  let blockParams = [];
   if (isNonEmptyArray(node.program.blockParams)) {
     blockParams = [line, printBlockParams(node.program)];
   }
@@ -574,13 +581,8 @@ function printElseIfLikeBlock(path, print, ifLikeKeyword) {
 
   return group([
     printInverseBlockOpeningMustache(parentNode),
-    indent(
-      group([
-        group(["else", line, ifLikeKeyword]),
-        line,
-        printParams(path, print),
-      ])
-    ),
+    indent(elseBlockKeywords),
+    indent(params),
     indent(blockParams),
     softline,
     printInverseBlockClosingMustache(parentNode),

tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap

@@ -17,6 +17,10 @@ printWidth: 80
   Hello
 {{/block}}
 
+{{#block param param param param param param param param param param param hashKey=hashValue as |blockParam|}}
+  Hello
+{{/block}}
+
 {{#block param param param param param param param hashKey=HashValue hashKey=hashValue}}
   Hello
 {{/block}}
@@ -71,14 +75,7 @@ printWidth: 80
 }}{{/block}}
 
 {{#block
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  hashKey=hashValue
+  param param param param param param param hashKey=hashValue
   as |blockParam|
 }}
   Hello
@@ -92,26 +89,24 @@ printWidth: 80
   param
   param
   param
-  hashKey=HashValue
+  param
+  param
+  param
+  param
   hashKey=hashValue
+  as |blockParam|
 }}
   Hello
 {{/block}}
 
 {{#block
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
-  param
+  param param param param param param param hashKey=HashValue hashKey=hashValue
+}}
+  Hello
+{{/block}}
+
+{{#block
+  param param param param param param param param param param param param param
 }}
   Hello
 {{/block}}
@@ -286,12 +281,16 @@ printWidth: 80
   j
 {{/when}}
 
-{{#when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrst as |b|}}
+{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}}
   {{b}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop as |d|}}
+{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}}
+  {{d}}
+{{/when}}
+
+{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}}
   {{d}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz as |f|}}
-  {{f}}
 {{/when}}
 
 =====================================output=====================================
@@ -415,19 +414,31 @@ printWidth: 80
 {{/when}}
 
 {{#when
-  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrst
+  abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy
   as |b|
 }}
   {{b}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
+{{else when
+  abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy
   as |d|
 }}
   {{d}}
+{{/when}}
+
+{{#when
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  as |b|
+}}
+  {{b}}
 {{else when
-  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
-  as |f|
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  as |d|
 }}
-  {{f}}
+  {{d}}
 {{/when}}
 ================================================================================
 `;

tests/format/handlebars/block-statement/block-statement.hbs

@@ -9,6 +9,10 @@
   Hello
 {{/block}}
 
+{{#block param param param param param param param param param param param hashKey=hashValue as |blockParam|}}
+  Hello
+{{/block}}
+
 {{#block param param param param param param param hashKey=HashValue hashKey=hashValue}}
   Hello
 {{/block}}

tests/format/handlebars/block-statement/custom-else.hbs

@@ -119,10 +119,14 @@
   j
 {{/when}}
 
-{{#when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrst as |b|}}
+{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}}
   {{b}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop as |d|}}
+{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}}
+  {{d}}
+{{/when}}
+
+{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}}
   {{d}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz as |f|}}
-  {{f}}
 {{/when}}