[handlebars] correctly format custom "else if" blocks (prettier#13507)

Co-authored-by: fisker Cheung <lionkay@gmail.com>
medikoo · Jan 4, 2024 · 99349b8 · 99349b8
1 parent 12a9498
commit 99349b8
Show file tree

Hide file tree

Showing 4 changed files with 377 additions and 9 deletions.
diff --git a/changelog_unreleased/handlebars/13507.md b/changelog_unreleased/handlebars/13507.md
@@ -0,0 +1,33 @@
+#### Correctly format custom "else if" blocks (#13507 by @jamescdavis)
+
+A template transform can be used to create custom block keywords that behave similar to `if`. This updates printer-glimmer to correctly recognize and format the "else if" case when "if" is a custom keyword.
+
+<!-- prettier-ignore -->
+```hbs
+{{! Input }}
+{{#when isAtWork}}
+  Ship that code!
+{{else when isReading}}
+  You can finish War and Peace eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+
+{{! Prettier stable }}
+{{#when isAtWork}}
+  Ship that code!
+{{else}}{{#when isReading}}
+    You can finish War and Peace eventually...
+  {{else}}
+    Go to bed!
+  {{/when}}{{/when}}
+
+{{! Prettier main }}
+{{#when isAtWork}}
+  Ship that code!
+{{else when isReading}}
+  You can finish War and Peace eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+```
diff --git a/src/language-handlebars/printer-glimmer.js b/src/language-handlebars/printer-glimmer.js
@@ -96,16 +96,16 @@ function print(path, options, print) {
     case "BlockStatement": {
       const pp = path.getParentNode(1);
 
-      const isElseIf =
+      const isElseIfLike =
         pp &&
         pp.inverse &&
         pp.inverse.body.length === 1 &&
         pp.inverse.body[0] === node &&
-        pp.inverse.body[0].path.parts[0] === "if";
+        pp.inverse.body[0].path.parts[0] === pp.path.parts[0];
 
-      if (isElseIf) {
+      if (isElseIfLike) {
         return [
-          printElseIfBlock(path, print),
+          printElseIfLikeBlock(path, print, pp.inverse.body[0].path.parts[0]),
           printProgram(path, print, options),
           printInverse(path, print, options),
         ];
@@ -563,12 +563,14 @@ function printElseBlock(node, options) {
   ];
 }
 
-function printElseIfBlock(path, print) {
+function printElseIfLikeBlock(path, print, ifLikeKeyword) {
   const parentNode = path.getParentNode(1);
 
   return [
     printInverseBlockOpeningMustache(parentNode),
-    "else if ",
+    "else ",
+    ifLikeKeyword,
+    " ",
     printParams(path, print),
     printInverseBlockClosingMustache(parentNode),
   ];
@@ -604,12 +606,12 @@ function blockStatementHasOnlyWhitespaceInProgram(node) {
   );
 }
 
-function blockStatementHasElseIf(node) {
+function blockStatementHasElseIfLike(node) {
   return (
     blockStatementHasElse(node) &&
     node.inverse.body.length === 1 &&
     isNodeOfSomeType(node.inverse.body[0], ["BlockStatement"]) &&
-    node.inverse.body[0].path.parts[0] === "if"
+    node.inverse.body[0].path.parts[0] === node.path.parts[0]
   );
 }
 
@@ -642,7 +644,7 @@ function printInverse(path, print, options) {
       ? [hardline, inverse]
       : inverse;
 
-  if (blockStatementHasElseIf(node)) {
+  if (blockStatementHasElseIfLike(node)) {
     return printed;
   }
 

diff --git a/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap b/tests/format/handlebars/block-statement/__snapshots__/jsfmt.spec.js.snap
@@ -159,6 +159,231 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`custom-else.hbs format 1`] = `
+====================================options=====================================
+parsers: ["glimmer"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<h1>
+{{#when isAtWork}}
+  Ship that code!
+{{else when isReading}}
+  You can finish War and Peace eventually...
+{{else}}
+  Go to bed!
+{{/when}}
+</h1>
+
+<h2>
+{{#when a}}
+  A
+{{else}}
+  B
+{{/when}}
+</h2>
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else}}
+  e
+{{/when}}
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else}}
+  hello
+  {{#when f}}
+    g
+  {{/when}}
+  e
+{{/when}}
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else when e}}
+  f
+{{else when g}}
+  h
+{{else}}
+  j
+{{/when}}
+
+<div>
+  {{#when a}}
+    b
+  {{else when c}}
+    d
+  {{else}}
+    e
+  {{/when}}
+</div>
+
+<div>
+  <div>
+    {{#when a}}
+      b
+    {{else when c}}
+      d
+    {{else}}
+      e
+    {{/when}}
+  </div>
+</div>
+
+{{#when a}}
+  b
+{{else}}
+  {{#each c as |d|}}
+    e
+  {{/each}}
+{{/when}}
+
+{{#when a}}
+  {{#when b}}
+    ab
+  {{else when c}}
+    ac
+  {{/when}}
+{{/when}}
+
+{{#when a}}
+  a
+  <div>b</div>
+  c
+{{else}}
+  {{#when c}}
+    a
+    b
+    <div>c</div>
+  {{/when}}
+  <div>a</div>
+  b
+  c
+{{/when}}
+
+{{~#when someCondition~}}
+  One thing
+{{~else when anotherCondition~}}
+  Another thing
+{{~/when~}}
+
+=====================================output=====================================
+<h1>
+  {{#when isAtWork}}
+    Ship that code!
+  {{else when isReading}}
+    You can finish War and Peace eventually...
+  {{else}}
+    Go to bed!
+  {{/when}}
+</h1>
+
+<h2>
+  {{#when a}}
+    A
+  {{else}}
+    B
+  {{/when}}
+</h2>
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else}}
+  e
+{{/when}}
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else}}
+  hello
+  {{#when f}}
+    g
+  {{/when}}
+  e
+{{/when}}
+
+{{#when a}}
+  b
+{{else when c}}
+  d
+{{else when e}}
+  f
+{{else when g}}
+  h
+{{else}}
+  j
+{{/when}}
+
+<div>
+  {{#when a}}
+    b
+  {{else when c}}
+    d
+  {{else}}
+    e
+  {{/when}}
+</div>
+
+<div>
+  <div>
+    {{#when a}}
+      b
+    {{else when c}}
+      d
+    {{else}}
+      e
+    {{/when}}
+  </div>
+</div>
+
+{{#when a}}
+  b
+{{else}}
+  {{#each c as |d|}}
+    e
+  {{/each}}
+{{/when}}
+
+{{#when a}}
+  {{#when b}}
+    ab
+  {{else when c}}
+    ac
+  {{/when}}
+{{/when}}
+
+{{#when a}}
+  a
+  <div>b</div>
+  c
+{{else}}
+  {{#when c}}
+    a b
+    <div>c</div>
+  {{/when}}
+  <div>a</div>
+  b c
+{{/when}}
+
+{{~#when someCondition~}}
+  One thing
+{{~else when anotherCondition~}}
+  Another thing
+{{~/when~}}
+================================================================================
+`;
+
 exports[`each.hbs format 1`] = `
 ====================================options=====================================
 parsers: ["glimmer"]