bug in angular parser/formatter - puts brackets in wrong place which breaks the logic

[kirillgroshkov]

Prettier puts brackets in such place that breaks the angular pipe logic.

Prettier 1.15.2
Playground link

--parser angular

Input:

  <app-submit-button
      class="registrationCodeResult__signupButton"
      >{{
        (cart | async).totalPrice.amount ? 'code-accept' : 'code-accept-free'
          | tmd: (cart | async)
          | stripTags
      }}</app-submit-button
    >

Output:

<app-submit-button
  class="registrationCodeResult__signupButton"
  >{{
    (cart | async).totalPrice.amount
      ? "code-accept"
      : ("code-accept-free" | tmd: (cart | async) | stripTags)
  }}</app-submit-button
>

Expected behavior:

<app-submit-button
  class="registrationCodeResult__signupButton"
  >{{
    (cart | async).totalPrice.amount
      ? "code-accept"
      : "code-accept-free" | tmd: (cart | async) | stripTags
  }}</app-submit-button
>

[ikatyang]

I tried it on the official Angular parser (@angular/compiler/src/expression_parser) and they look the same:

[kirillgroshkov]

@ikatyang what does it mean? That the bug is in @angular/compiler/src/expression_parser?

I'm sure that the code before and after Prettier behaves differently.

Before prettier it applies tmd and stripTags pipes for both cases of ternary.

After prettier it applies pipes only for second case of ternary.

@dyatko @ryangibbsnc do you guys confirm the different behaviour?

[ikatyang]

@kirillgroshkov Since it's the official one, its behavior should be exactly the same as you compiled. The only possible issue I can think of is the version, I got the same result on both Angular 6 and 7, what version of Angular are you using?

[kirillgroshkov]

@ikatyang We're using Angular 7 there.

yarn list @angular/*
├─ @angular/animations@7.0.3
├─ @angular/cli@7.0.5
├─ @angular/common@7.0.3
├─ @angular/compiler-cli@7.0.3
├─ @angular/compiler@7.0.3
├─ @angular/core@7.0.3
├─ @angular/forms@7.0.3
├─ @angular/language-service@7.0.3
├─ @angular/platform-browser-dynamic@7.0.3
├─ @angular/platform-browser@7.0.3
└─ @angular/router@7.0.3

But. I'm just trying to understand your line of thought. We can both see that issue is reproducible in Prettier playground that shows 1.15.2. I don't know which version of Angular is used there (in the playground). But it produces the same result as for us locally.

[ikatyang]

We use the parser from Angular 6, but there should be no difference given that there's only a typo fix commit between Angular 6.1.10 (Oct 11) and 7.0.3 (Nov 8), and also I've tested it locally using Angular 7.

Would you mind to run this code in your project? If the output is Conditional (this is the expected output, same as ours) then it must be something wrong in the compiling instead of the parsing. If the output is BindingPipe, ...I can't think of a reason how it can happen.

const ast = require("@angular/compiler").parseTemplate(`{{

    (cart | async).totalPrice.amount ? 'code-accept' : 'code-accept-free'
          | tmd: (cart | async)
          | stripTags

}}`)

console.log(ast.nodes[0].value.ast.expressions[0].constructor.name)

[kirillgroshkov]

Ok, finally I understand, sorry.

I tried it here and actually confirmed that you were right - that behaviour of prettier doesn't change functionality in Angular. I was wrong.

https://stackblitz.com/edit/angular-playground?file=app%2Fapp.component.html

I expected that this name === 'Angular' ? 'ang' : 'not_ang' | uppercase }} would uppercase the string in both cases of ternary. But it only uppercases in second case.

The root issue we had was actually what was fixed there: #5387 #5397

And I confirm that is not reproducible any more in 1.15.2 (but did exist in 1.15.1).

Closing.

Thanks a lot for clarification!

Too bad it made a lot of noise for us internally because of this breakage.