plugin-pug: Bug: Apostrophes are destroyed inside of angulars interpolation

Used configuration:

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "bracketSpacing": true
}

Input file:

.without-apostrophe(foo="{{'hello world' | uppercase}}")
  | {{'hello world' | uppercase}}

.with-apostrophe(foo="{{'it\'s me' | uppercase}}")
  | {{"it's me" | uppercase}}

Output file:

.without-apostrophe(foo="{{'hello world' | uppercase}}")
  | {{'hello world' | uppercase}}

.with-apostrophe(foo="{{'it's me' | uppercase}}")
  | {{ 'it"s me' | uppercase }}

Expected behavior: It should not change a text which will be displayed (it’s me was changed to it"s me).

Additional the handling of spaces after {{ and before }} should be consistently. The added spaces at the second {{ ... }} is the expected behavior.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 27 (27 by maintainers)

Most upvoted comments

@lydell!

azz on Jul 9, 2019

You can simply choose either parser to use, and use another one if the previous parsing failed. The attribute names are just hints for better guessing, it does not really matter if it’s wrong since one of the two parsers must be the correct one and their formatting results are the same.

ikatyang on Jul 17, 2019

But it seams that __vue_expression use the babel-parser.

More precisely, the babel expression parser. Though they use the same parser, their |s are printed differently, | is printed as a filter in vue but a bitwise OR in js.

I also don’t know how to assume whether it is using vue or angular. I could introduce an option for framework, but I think that is not really smart 😕 Do you have an example for testing? So a vue and an anguar snippet that are formatted differently?

IIRC, they are formatted in the same way, the only difference between them is that they support different grammars. I guess you could try to guess which parser to use based on attribute names next to it (vue: v-*, :*, @*, etc.; angular: [*], (*), [(*)], etc.), and try another parser if the parsing failed, just like what typescript parser did.

ikatyang on Jul 16, 2019

Yea, checked it at stackblitz.com. Angular doesn’t support template strings in html 😌 But Vue does!

Shinigami92 on Jul 15, 2019

Ohhhhhh, this thing IS the parser .-. 💡

Mind Blow

Shinigami92 on Jul 14, 2019

You should be able to specify parse: '__ng_interpolation' in your call to format().

j-f1 on Jul 14, 2019

FYI, there is a __ng_interpolation parser, which is used for this purpose.

ikatyang on Jul 12, 2019

I think you’ll have to parse it as JS and then print is somehow. If it is JS. But btw, how can you know that the attribute contains Angular code?

lydell on Jul 12, 2019