fix(angular): don't add unnecessary parentheses to pipes (#5929)

CHANGELOG.unreleased.md

@@ -174,3 +174,19 @@ Examples:
   ```
 
 - CLI: Plugins published as a scoped NPM package (e.g.: `@name/prettier-plugin-foo`) are now automatically registered ([#5945] by [@Kocal])
+
+- Angular: Don't add unnecessary parentheses to pipes ([#5929] by [@voithos])
+
+  In some cases, wrapping parentheses were being added to certain pipes inside attributes, but they are no longer added when they don't affect the result of the expression.
+
+  <!-- prettier-ignore -->
+  ```html
+  // Input
+  <div *ngIf="isRendered | async"></div>
+
+  // Output (Prettier stable)
+  <div *ngIf="(isRendered | async)"></div>
+
+  // Output (Prettier master)
+  <div *ngIf="isRendered | async"></div>
+  ```

src/language-js/needs-parens.js

@@ -689,6 +689,7 @@ function needsParens(path, options) {
     case "NGPipeExpression":
       if (
         parent.type === "NGRoot" ||
+        parent.type === "NGMicrosyntaxExpression" ||
         parent.type === "ObjectProperty" ||
         parent.type === "ArrayExpression" ||
         ((parent.type === "CallExpression" ||

tests/html_angular/__snapshots__/jsfmt.spec.js.snap

@@ -87,6 +87,7 @@ printWidth: 80
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -135,6 +136,7 @@ printWidth: 80
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
@@ -188,6 +190,7 @@ printWidth: 80
   [(target)]="a | b: c"
   bind-target="a | b: c"
   [target]="a | b: c"
+  [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -236,6 +239,7 @@ printWidth: 80
   (event)="foo = $event"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
+  *ngIf="a | pipe"
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
@@ -321,6 +325,7 @@ trailingComma: "es5"
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -369,6 +374,7 @@ trailingComma: "es5"
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
@@ -422,6 +428,7 @@ trailingComma: "es5"
   [(target)]="a | b: c"
   bind-target="a | b: c"
   [target]="a | b: c"
+  [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -470,6 +477,7 @@ trailingComma: "es5"
   (event)="foo = $event"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
+  *ngIf="a | pipe"
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
@@ -554,6 +562,7 @@ printWidth: 1
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -602,6 +611,7 @@ printWidth: 1
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
@@ -671,6 +681,10 @@ printWidth: 1
       | b
         : c
   "
+  [target]="
+    a
+      | pipe
+  "
   [target]="
     0 -
     1
@@ -828,6 +842,10 @@ printWidth: 1
       ? true
       : false
   "
+  *ngIf="
+    a
+      | pipe
+  "
   *ngFor="
     let hero of heroes
   "
@@ -1022,6 +1040,7 @@ printWidth: 80
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -1070,6 +1089,7 @@ printWidth: 80
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
@@ -1123,6 +1143,7 @@ printWidth: 80
   [(target)]="a | b: c"
   bind-target="a | b: c"
   [target]="a | b: c"
+  [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -1171,6 +1192,7 @@ printWidth: 80
   (event)="foo = $event"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
+  *ngIf="a | pipe"
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
@@ -1256,6 +1278,7 @@ printWidth: 80
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -1304,6 +1327,7 @@ printWidth: 80
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "
@@ -1357,6 +1381,7 @@ printWidth: 80
   [(target)]="a | b: c"
   bind-target="a | b: c"
   [target]="a | b: c"
+  [target]="a | pipe"
   [target]="0 - 1"
   [target]="-1"
   [target]="a ? 1 : 2"
@@ -1405,6 +1430,7 @@ printWidth: 80
   (event)="foo = $event"
   (event)="(foo == $event)"
   *ngIf="something ? true : false"
+  *ngIf="a | pipe"
   *ngFor="let hero of heroes"
   *ngFor="
     let hero of [1, 2, 3, 666666666666666666666666666666666666];
@@ -2345,6 +2371,7 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -2413,6 +2440,7 @@ printWidth: 80
 
 =====================================output=====================================
 <div>{{ a | b: c }}</div>
+<div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -2510,6 +2538,7 @@ trailingComma: "es5"
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -2578,6 +2607,7 @@ trailingComma: "es5"
 
 =====================================output=====================================
 <div>{{ a | b: c }}</div>
+<div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -2674,6 +2704,7 @@ printWidth: 1
  | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -2748,6 +2779,12 @@ printWidth: 1
         : c
   }}
 </div>
+<div>
+  {{
+    a
+      | pipe
+  }}
+</div>
 <div>
   {{
     0 -
@@ -3040,6 +3077,7 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -3108,6 +3146,7 @@ printWidth: 80
 
 =====================================output=====================================
 <div>{{ a | b: c }}</div>
+<div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -3210,6 +3249,7 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>
@@ -3278,6 +3318,7 @@ printWidth: 80
 
 =====================================output=====================================
 <div>{{ a | b: c }}</div>
+<div>{{ a | pipe }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ -1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>

tests/html_angular/attributes.component.html

@@ -3,6 +3,7 @@
     [(target)]=" a | b : c "
     bind-target=" a | b : c "
     [target]=" a | b : c "
+    [target]=" a | pipe   "
     [target]=" 0 - 1 "
     [target]=" - 1 "
     [target]=" a ? 1 : 2 "
@@ -51,6 +52,7 @@
     (event)="  foo = $event  "
     (event)="  foo == $event  "
     *ngIf=" something?true:false    "
+    *ngIf=" a | pipe   "
     *ngFor="  let     hero     of     heroes"
     *ngFor="  let    hero     of[1,2,3,666666666666666666666666666666666666]; let i=index"
     *ngFor="     let hero     of     heroes;     trackBy    :    trackByHeroes     "

tests/html_angular/interpolation.component.html

@@ -1,4 +1,5 @@
 <div>{{ a | b : c }}</div>
+<div>{{  a | pipe    }}</div>
 <div>{{ 0 - 1 }}</div>
 <div>{{ - 1 }}</div>
 <div>{{ a ? 1 : 2 }}</div>