feat(angular): do not print colon for ngIf (#5542)

prettier · Nov 25, 2018 · 66ada24 · 66ada24
1 parent b6a04ab
commit 66ada24
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js
@@ -3505,7 +3505,7 @@ function printPathNoParens(path, options, print, args) {
             concat([
               index === 0
                 ? ""
-                : isNgForOf(childPath)
+                : isNgForOf(childPath.getValue(), index, n)
                 ? " "
                 : concat([";", line]),
               print(childPath)
@@ -3522,12 +3522,24 @@ function printPathNoParens(path, options, print, args) {
         path.call(print, "expression"),
         n.alias === null ? "" : concat([" as ", path.call(print, "alias")])
       ]);
-    case "NGMicrosyntaxKeyedExpression":
+    case "NGMicrosyntaxKeyedExpression": {
+      const index = path.getName();
+      const parentNode = path.getParentNode();
+      const shouldNotPrintColon =
+        isNgForOf(n, index, parentNode) ||
+        (((index === 1 && (n.key.name === "then" || n.key.name === "else")) ||
+          (index === 2 &&
+            (n.key.name === "else" &&
+              parentNode.body[index - 1].type ===
+                "NGMicrosyntaxKeyedExpression" &&
+              parentNode.body[index - 1].key.name === "then"))) &&
+          parentNode.body[0].type === "NGMicrosyntaxExpression");
       return concat([
         path.call(print, "key"),
-        isNgForOf(path) ? " " : ": ",
+        shouldNotPrintColon ? " " : ": ",
         path.call(print, "expression")
       ]);
+    }
     case "NGMicrosyntaxLet":
       return concat([
         "let ",
@@ -3546,11 +3558,7 @@ function printPathNoParens(path, options, print, args) {
   }
 }
 
-/** prefer `let hero of heros` over `let hero; of: heros` */
-function isNgForOf(path) {
-  const node = path.getValue();
-  const index = path.getName();
-  const parentNode = path.getParentNode();
+function isNgForOf(node, index, parentNode) {
   return (
     node.type === "NGMicrosyntaxKeyedExpression" &&
     node.key.name === "of" &&

diff --git a/tests/html_angular/__snapshots__/jsfmt.spec.js.snap b/tests/html_angular/__snapshots__/jsfmt.spec.js.snap
@@ -60,6 +60,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  else  elseBlock "
     *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
     *ngIf=" condition  as  value  ;  else  elseBlock "
     *directive=" let hero "
@@ -150,8 +151,9 @@ exports[`attributes.component.html - angular-verify 1`] = `
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i = index"
   *ngFor="let hero of heroes; value: myValue"
-  *ngIf="condition; then: thenBlock; else: elseBlock"
-  *ngIf="condition as value; else: elseBlock"
+  *ngIf="condition; else elseBlock"
+  *ngIf="condition; then thenBlock; else elseBlock"
+  *ngIf="condition as value; else elseBlock"
   *directive="let hero"
   *directive="let hero = hello"
   *directive="let hero of heroes"
@@ -173,7 +175,7 @@ exports[`attributes.component.html - angular-verify 1`] = `
     listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3;
-    else: hello
+    else hello
   "
   (target)="
     (listRow.NextScheduledSendStatus == 1 ||
@@ -260,6 +262,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  else  elseBlock "
     *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
     *ngIf=" condition  as  value  ;  else  elseBlock "
     *directive=" let hero "
@@ -350,8 +353,9 @@ exports[`attributes.component.html - angular-verify 2`] = `
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i = index"
   *ngFor="let hero of heroes; value: myValue"
-  *ngIf="condition; then: thenBlock; else: elseBlock"
-  *ngIf="condition as value; else: elseBlock"
+  *ngIf="condition; else elseBlock"
+  *ngIf="condition; then thenBlock; else elseBlock"
+  *ngIf="condition as value; else elseBlock"
   *directive="let hero"
   *directive="let hero = hello"
   *directive="let hero of heroes"
@@ -373,7 +377,7 @@ exports[`attributes.component.html - angular-verify 2`] = `
     listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3;
-    else: hello
+    else hello
   "
   (target)="
     (listRow.NextScheduledSendStatus == 1 ||
@@ -460,6 +464,7 @@ exports[`attributes.component.html - angular-verify 3`] = `
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  else  elseBlock "
     *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
     *ngIf=" condition  as  value  ;  else  elseBlock "
     *directive=" let hero "
@@ -697,12 +702,16 @@ exports[`attributes.component.html - angular-verify 3`] = `
   "
   *ngIf="
     condition;
-    then: thenBlock;
-    else: elseBlock
+    else elseBlock
+  "
+  *ngIf="
+    condition;
+    then thenBlock;
+    else elseBlock
   "
   *ngIf="
     condition as value;
-    else: elseBlock
+    else elseBlock
   "
   *directive="
     let hero
@@ -761,7 +770,7 @@ exports[`attributes.component.html - angular-verify 3`] = `
         2 ||
       listRow.NextScheduledSendStatus ==
         3;
-    else: hello
+    else hello
   "
   (target)="
     (listRow.NextScheduledSendStatus ==
@@ -884,6 +893,7 @@ exports[`attributes.component.html - angular-verify 4`] = `
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  else  elseBlock "
     *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
     *ngIf=" condition  as  value  ;  else  elseBlock "
     *directive=" let hero "
@@ -974,8 +984,9 @@ exports[`attributes.component.html - angular-verify 4`] = `
   *ngFor="let item of items; index as i; trackBy: trackByFn"
   *ngFor="let hero of heroes; let i = index"
   *ngFor="let hero of heroes; value: myValue"
-  *ngIf="condition; then: thenBlock; else: elseBlock"
-  *ngIf="condition as value; else: elseBlock"
+  *ngIf="condition; else elseBlock"
+  *ngIf="condition; then thenBlock; else elseBlock"
+  *ngIf="condition as value; else elseBlock"
   *directive="let hero"
   *directive="let hero = hello"
   *directive="let hero of heroes"
@@ -997,7 +1008,7 @@ exports[`attributes.component.html - angular-verify 4`] = `
     listRow.NextScheduledSendStatus == 1 ||
       listRow.NextScheduledSendStatus == 2 ||
       listRow.NextScheduledSendStatus == 3;
-    else: hello
+    else hello
   "
   (target)="
     (listRow.NextScheduledSendStatus == 1 ||

diff --git a/tests/html_angular/attributes.component.html b/tests/html_angular/attributes.component.html
@@ -57,6 +57,7 @@
     *ngFor=" let     item   of   items   ;    index    as   i  ; trackBy  :     trackByFn"
     *ngFor="  let    hero     of heroes; let i  =  index"
     *ngFor="  let    hero     of heroes; value     myValue"
+    *ngIf=" condition  ;  else  elseBlock "
     *ngIf=" condition  ;  then  thenBlock  else  elseBlock "
     *ngIf=" condition  as  value  ;  else  elseBlock "
     *directive=" let hero "