Bug: fails with nested translations

[valera33]

Info

Tool	Version
Plugin	v1.19.1
Prettier	v2.4.1
Framework	angular
Node	v14.18.1
OS	linux

Prettier config

printWidth: 120
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
trailingComma: 'es5'
bracketSpacing: true
arrowParens: 'avoid'

overrides:
  - files: '*.pug'
    options:
      singleQuote: false
      pugAttributeSeparator: 'always'
      pugClosingBracketPosition: 'new-line'
      pugCommentPreserveSpaces: 'trim-all'
      pugEmptyAttributes: 'none'
      pugClassNotation: 'literal'
      pugIdNotation: 'literal'
      pugExplicitDiv: false
      pugSortAttributes: 'as-is'
      pugSortAttributesBeginning:
        - '^#'
        - '^\*ngIf$'
        - '^[?ngSwitch]?$'
        - '^\*ngSwitchCase$'
        - '^\*ngSwitchDefault$'
      pugSortAttributesEnd: []
      pugFramework: 'angular'

Input

    some-component(
      title="{{ '{type}-text' | translate: { type: someType | translate } }}",
    )

Output or Error

Error: SyntaxError: Missing expected } at the end of the expression [{{'{type}-text' | translate: { type: someType | translate }}}] in angular-estree-parser
[error]     at a (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:19709)
[error]     at t.parseNgInterpolation (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:20876)
[error]     at r (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:31840)
[error]     at Object.t.parseInterpolation (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32243)
[error]     at /home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32886
[error]     at Object.parse (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/parser-angular.js:66:32551)
[error]     at Object.parse$a [as parse] (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:12513:19)
[error]     at coreFormat (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14044:16)
[error]     at formatWithCursor$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14284:14)
[error]     at /home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:59304:12
[error]     at PugPrinter.build (/home/valeri/workspaceA4/notices-resources/node_modules/@prettier/plugin-pug/dist/printer.js:127:23)
[error]     at Object.print (/home/valeri/workspaceA4/notices-resources/node_modules/@prettier/plugin-pug/dist/index.js:69:40)
[error]     at callPluginPrintFunction (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13787:21)
[error]     at mainPrintInternal (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13725:17)
[error]     at mainPrint (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13707:14)
[error]     at printAstToDoc (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:13694:13)
[error]     at coreFormat (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14055:15)
[error]     at formatWithCursor$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:14284:14)
[error]     at Object.formatWithCursor (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/index.js:59304:12)
[error]     at format$1 (/home/valeri/workspaceA4/notices-resources/node_modules/prettier/bin-prettier.js:16953:21)

Expected Output

should be no error, pug is correct

[Shinigami92]

Could you check if this is related to #78?

[Shinigami92]

Also you are welcome to create a PR for this
I'm currently active unavailable due to I migrate a complete project to TS, so I will not have time in the short run to fix this specific bug 🙁

[valera33]

ok, probably we will wait for new TS version then :) for now I am using //- prettier-ignore for this line

[Shinigami92]

ok, probably we will wait for new TS version then :) for now I am using //- prettier-ignore for this line

Not to confuse you, I'm not talking about this project, but faker-js/faker#72
So if you have time, please feel free to create a PR 🙂

[Shinigami92]

Did you found a workaround? Otherwise I would suggest to open a PR so I can review it.
I'm to much involved into other projects right now and we setup a whole community around faker-js. It's really big...

[valera33]

sorry didint have time, using //- prettier-ignore for now

[Shinigami92]

@fisker It fails in this line(s)

plugin-pug/src/printer.ts

Line 1081 in f9e4b86

val = this.formatAngularInterpolation(val);

plugin-pug/src/printer.ts

Line 718 in f9e4b86

return this.formatFrameworkInterpolation(val, '__ng_interpolation', [

plugin-pug/src/printer.ts

Line 707 in f9e4b86

val = format(val, { parser, ...options });

Is there a bug in the angular parser? Or do I need to call another parser?

[fisker]

I don't know anything about this syntax.. but seems valid in core plugin.

Prettier 2.5.1
Playground link

--parser angular

Input:

<some-component
      title="{{ '{type}-text' |        translate: { type: someType | translate } }}"
    ></some-component>

Output:

<some-component
  title="{{ '{type}-text' | translate: { type: someType | translate } }}"
></some-component>

I'm not near my laptop, maybe you used the wrong parser? I'd suggest to check how it works in the core parser.

[fisker]

https://github.com/prettier/prettier/blob/db73cc8e0c9e3e565cf4f5e9eceaa6b7e90b48e4/src/language-html/embed.js#L206 This should be the part.

[Shinigami92]

😬 I assume you (prettier) are doing the thing I thought you would do 🙁
try-catch it and then just do a fallback strategy

https://github.com/prettier/prettier/blob/db73cc8e0c9e3e565cf4f5e9eceaa6b7e90b48e4/src/language-html/embed.js#L221-L230

[fisker]

Because you didn't do this in the right way. embed printer is try/catched.

[fisker]

Does adding all those options fix the issue ?

[Shinigami92]

Because you didn't do this in the right way. embed printer is try/catched.

Yeah, that's also okay, no problem with that.

I just don't depend on the whole prettier doc builder stuff, cause I find it much easier to write pug from left to right, top to bottom.
There is no real AST just a stream of tokens.
I also do that so I safe some seconds while processing.

I may just need to wrap

plugin-pug/src/printer.ts

Line 707 in f9e4b86

val = format(val, { parser, ...options });

with a try catch and use a fallback strategy like don't format for now.
Then the user can clean up it for now on it's own.
There should be really few cases.
And even if, then they can create a PR and contribute it their own 🙂

[fisker]

I mean did you try add those options starts with __?

[Shinigami92]

No, not really 😄
This will do for now

At least the rest of the file would now format correctly