Bug: Unable to pass inlined object literal to custom vue directive

[lehni]

Plugin Version

v2.3.0

Prettier Version

v2.7.1

Which frameworks are affected?

• none
• vue
• angular
• svelte

Node Version

v18.12.0

Which operating systems have you used?

• Linux
• macOS
• Windows

Prettier config

{
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "consistent",
  "arrowParens": "avoid",
  "trailingComma": "none",
  "pugSingleQuote": false,
  "pugAttributeSeparator": "none",
  "pugCommentPreserveSpaces": "trim-all",
  "pugWrapAttributesThreshold": 1,
  "pugWrapAttributesPattern": "^(@|v-)"
}

Input

.topic(
  v-for="topic in topics"
  v-delayed-unhide="{ disabled: !!selectedTopic }"
)

Output or Error

The following expression could not be formatted correctly. Please try to fix it yourself and if there is a problem, please open a bug issue: disabled: !!selectedTopic

Expected Output

The plugin should be able to handle the correct JS input in the custom directive's value and should not complain about it.

Additional Context

No response

[lehni]

So the error happens here:

plugin-pug/src/printer.ts

Line 711 in aed6523

} catch (error) {

If I log the error, here is what I get. It seems curious that the angular parser is used for a Vue directive?

SyntaxError: Unexpected token ':'
    at R (…/node_modules/prettier/parser-angular.js:2:44123)
    at b (…/node_modules/prettier/parser-angular.js:2:43742)
    at a (…/node_modules/prettier/parser-angular.js:2:56386)
    at Object.h [as parseInterpolation] (…/node_modules/prettier/parser-angular.js:2:56621)
    at …/node_modules/prettier/parser-angular.js:2:57295
    at Object.parse (…/node_modules/prettier/parser-angular.js:2:56961)
    at Object.parse (…/node_modules/prettier/index.js:7334:23)
    at coreFormat (…/node_modules/prettier/index.js:8645:18)
    at formatWithCursor2 (…/node_modules/prettier/index.js:8837:18)
    at …/node_modules/prettier/index.js:37229:12

[lehni]

The error makes you think that the problem is the !! while in fact it's simply choking on the : inside the object literal.

[Shinigami92]

Would you like to tackle this issue?

[lehni]

I could try, but I don't really know enough about the current workings. It seems to me that using the angular parser is not a bug, but by design? There's no parser for vue directives?

[Shinigami92]

I could try, but I don't really know enough about the current workings. It seems to me that using the angular parser is not a bug, but by design? There's no parser for vue directives?

To be fair, I would have the exact same amount of work as you if I would tackle that. Also I just remember that I needed to handle it kinda like that as if I would first use vue parser it would break angular.
But if you need help from the prettier team, lets ping @fisker, he is awesome in working together with me on such parts.

[fisker]

https://github.com/prettier/prettier/blob/ae4d85ab3c8172f9fa866fbbca8d7b8b05e3ee73/src/main/multiparser.js#L39

[lehni]

Hmm it's more complicated. This only appears to be happening when running through eslint-plugin-prettier. Investigating more…

[lehni]

Ah no I was running on an outdated code base. The warning started appearing with this commit: f5e5ef1

But for some reason more recently this is now seen as an error in our project, while before it was just a warning. I still don't quite understand that part.

[lehni]

Ok I'm slowly getting there.. So the warning doesn't appear for some reason in the @prettier/plugin-pug code base as long as the prettier-plugin-organize-imports plugin gets auto-loaded in the unit tests. As soon as I pass pluginSearchDirs: false to the formatOptions to stop that from being loaded, I am finally able to produce it also inside the plugin.

So it seems prettier-plugin-organize-imports has side-effects that effect the parsers, but I don't understand how yet. We shouldn't load it in the unit tests, I think.

[Shinigami92]

/cc @simonhaenisch