[handlebars] group params in opening block statements (#14067)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
prettier · Jan 28, 2023 · 37fb53a · 37fb53a
1 parent 310a5b1
commit 37fb53a
Show file tree

Hide file tree

Showing 9 changed files with 282 additions and 50 deletions.
diff --git a/changelog_unreleased/handlebars/14067.md b/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}}
+```
diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js
@@ -30,6 +30,10 @@ const {
   isWhitespaceNode,
 } = require("./utils.js");
 
+/**
+ * @typedef {import("../document").Doc} Doc
+ */
+
 const NEWLINES_TO_PRESERVE_MAX = 2;
 
 // Formatter based on @glimmerjs/syntax's built-in test formatter:
@@ -529,27 +533,24 @@ function printInverseBlockClosingMustache(node) {
 
 function printOpenBlock(path, print) {
   const node = path.getValue();
+  /** @type {Doc[]} */
+  const parts = [];
 
-  const openingMustache = printOpeningBlockOpeningMustache(node);
-  const closingMustache = printOpeningBlockClosingMustache(node);
-
-  const attributes = [printPath(path, print)];
-
-  const params = printParams(path, print);
-  if (params) {
-    attributes.push(line, params);
+  const paramsDoc = printParams(path, print);
+  if (paramsDoc) {
+    parts.push(group(paramsDoc));
   }
 
   if (isNonEmptyArray(node.program.blockParams)) {
-    const block = printBlockParams(node.program);
-    attributes.push(line, block);
+    parts.push(printBlockParams(node.program));
   }
 
   return group([
-    openingMustache,
-    indent(attributes),
+    printOpeningBlockOpeningMustache(node),
+    printPath(path, print),
+    parts.length > 0 ? indent([line, join(line, parts)]) : "",
     softline,
-    closingMustache,
+    printOpeningBlockClosingMustache(node),
   ]);
 }
 
@@ -564,24 +565,18 @@ function printElseBlock(node, options) {
 
 function printElseIfLikeBlock(path, print, ifLikeKeyword) {
   const node = path.getValue();
-  let blockParams = [];
-
-  if (isNonEmptyArray(node.program.blockParams)) {
-    blockParams = [line, printBlockParams(node.program)];
-  }
-
   const parentNode = path.getParentNode(1);
 
   return group([
     printInverseBlockOpeningMustache(parentNode),
-    indent(
-      group([
-        group(["else", line, ifLikeKeyword]),
-        line,
-        printParams(path, print),
-      ])
-    ),
-    indent(blockParams),
+    ["else", " ", ifLikeKeyword],
+    indent([
+      line,
+      group(printParams(path, print)),
+      ...(isNonEmptyArray(node.program.blockParams)
+        ? [line, printBlockParams(node.program)]
+        : []),
+    ]),
     softline,
     printInverseBlockClosingMustache(parentNode),
   ]);

diff --git a/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap b/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}}
@@ -294,6 +289,24 @@ printWidth: 80
   {{f}}
 {{/when}}
 
+{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}}
+  {{d}}
+{{/when}}
+
+{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}}
+  {{d}}
+{{/when}}
+
+{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |foo|}}
+  1
+{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |bar|}}
+  2
+{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}
+
 =====================================output=====================================
 <h1>
   {{#when isAtWork}}
@@ -419,7 +432,8 @@ printWidth: 80
   as |b|
 }}
   {{b}}
-{{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
+{{else when
+  abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
   as |d|
 }}
   {{d}}
@@ -429,6 +443,46 @@ printWidth: 80
 }}
   {{f}}
 {{/when}}
+
+{{#when
+  abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy
+  as |b|
+}}
+  {{b}}
+{{else when
+  abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy
+  as |d|
+}}
+  {{d}}
+{{/when}}
+
+{{#when
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  as |b|
+}}
+  {{b}}
+{{else when
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  abcdefghijklmnopqrstuvwxyz
+  as |d|
+}}
+  {{d}}
+{{/when}}
+
+{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
+  param param param
+  as |foo|
+}}
+  1
+{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst
+  param param param
+  as |bar|
+}}
+  2
+{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}
 ================================================================================
 `;
 

diff --git a/tests/format/handlebars/block-statement/block-statement.hbs b/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}}

diff --git a/tests/format/handlebars/block-statement/custom-else.hbs b/tests/format/handlebars/block-statement/custom-else.hbs
@@ -126,3 +126,21 @@
 {{else when abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz as |f|}}
   {{f}}
 {{/when}}
+
+{{#when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwxy as |d|}}
+  {{d}}
+{{/when}}
+
+{{#when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |b|}}
+  {{b}}
+{{else when abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz as |d|}}
+  {{d}}
+{{/when}}
+
+{{#abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |foo|}}
+  1
+{{else abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst param param param as |bar|}}
+  2
+{{/abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrstuvwxyz-abcdefghijklmnopqrst}}