plugin-pug: Bug: Unable to pass inlined object literal to custom vue directive

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

About this issue

Original URL
State: open
Created 2 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

So it seems prettier-plugin-organize-imports has side-effects that effect the parsers, but I don’t understand how yet.

Yeah it does, it’s mentioned in the readme (“Caveat” section). The plugin imports a bunch of built-in parsers and re-exports them after enriching them with a preprocess hook (link). Other plugins also have this behavior of re-exporting an extended built-in parser, and if you load multiple of them, it’s always the last one that “wins”.

simonhaenisch on Nov 6, 2022

But are SFC not only for vue but also svelte? Not sure without checking it myself if it’s easily possible to detect the correct framework.

Yea I guess it should pass down whatever file the pug is contained in as pugFramework value. But I’m not sure prettier gives us this info. All I found is __embeddedInHtml, while what we’d need really is __embeddedInFramework or something like that.

lehni on Nov 5, 2022

This setting didn’t exist when I set up the config 2 years ago. Then the warning started popping up at one point and with a more recent prettier update it turned into an error somehow. Sure there’s a documentation for this now, but that’s not necessarily where I start looking since this used to work without it.

lehni on Nov 5, 2022

I don’t know what more to do here. With #420 merged, I would manage to write a test that spits out this warning, but it only does so because it’s using the wrong setting for pugFramework due to the npm_package_* check not working in detectFramework() for yarn (and possibly pnpm), which is a separate bug. In addition to that, I also think Vue SFC files should automatically set pugFramework to 'vue', but I’m not sure how to do that. It seem weird to write a test that wrongly checks a vue directive using the angular parser, but that’s what’s happening when pugFramework ends up with the 'auto' value.

I think #420 should be merged, and detectFramework() should be written in a way that isn’t dependent on a single package manager. In addition to that, SFC files should set pugFramework.

But none of these things are crucial for my work because I now found out that setting pugFramework: 'vue' solves the original problem outlined in this issue for our use case.

lehni on Nov 5, 2022

Hmmm so setting pugFramework: 'vue' seems to solve this. I noticed that even when I run nested pug templates inside vue SFC files, this.framework is still 'auto'. That seems like a bug to me. Also I’m pretty certain that detectFramework() doesn’t work for yarn and pnpm, since it’s looking for npm_package_* env variables?

lehni on Nov 5, 2022

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

lehni on Nov 5, 2022

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

fisker on Nov 5, 2022