Fix single quotes in framework interpolation

[qnp]

Fixes #339

[Shinigami92]

Will actively review it in evening or so

[Shinigami92]

GitHub actions doesn't work right now, tested locally against arch linux node v16 ✔️

[qnp]

Thanks. Will you ship a 1.19.4 with that ?

[Shinigami92]

I'm currently reorder some stuff and think about to release a 1.20.0 🤔

[qnp]

@Shinigami92 when I was looking deep into the source code, I found that Vue3’s shortand # for v-slot is not supported. I hence propose you to add it (I can do the dev tonight), and wait it is done to ship the 1.20.0

[Shinigami92]

If I remember correctly it could be somehow incompatible to pug's id literal 🤔
But yeah, feel free to fix it.

But I use template(#aslotname) in my company's code 🤔
Are you sure it's still broken?

[qnp]

I mean, I did not test it, I just didn't see the appropriate tests & implementation but I had probably missed something. I'll go deeper this evening and come back to you.

[qnp]

Ok it is clear now. # shorthand works but I guess for another reason, it works because when getting the scope using object desctructuring, whenever "{ thing }" is used in a prop it will be considered as js and styled:

• template(v-slot:header="{scope }") => template(v-slot:header="{ scope }") OK ✅
• template(#header="{scope }") => template(#header="{ scope }") OK ✅
  but:
• component(any-prop="{maybe( 'im').just('a' ).string }")
  => component(any-prop="{ maybe('im').just('a').string }") is it OK ❓

Anyway, this is a very edge case, and who ever wants to pass a string prop which is curly-braces wrapped ?

[Shinigami92]

@qnp I slightly reworked the tests 854a61b 👀

[qnp]

@Shinigami92 Nice util that compareFiles 💪 😉

[qnp]

@Shinigami92 do you have an idea of when you could release 1.20.0 ? In the meantime, I could really use the fix for our projects in production but as my vscode plugin has prettier/plugin-pug as an external dependencies (auto-resolved by prettier) I cann bundle the fix manually in it...

[Shinigami92]

Oh yeah, sure, I can release this this evening. Not sure why I did not 🤔
I just may have forgotten it 😓

[Shinigami92]

@qnp Here it is: https://www.npmjs.com/package/@prettier/plugin-pug/v/1.20.0

[qnp]

Neat ! Thank you @Shinigami92

[chrisjansky]

I suppose this bug is related:

With pugSingleQuote undefined at first, the following threw an error:
v-scroll-spy-active="{ class: 'Topic--Active' }"

Once I define pugSingleQuote: true it got formatted as:
v-scroll-spy-active='{ class: 'Topic--Active' }' (obviously faulty)

Then once changed to pugSingleQuote: false, it stays the same as before, so throws an error.

I‘d expect it to get formatted as:
v-scroll-spy-active="{ class: 'Topic--Active' }"

My .prettierrc.js:

module.exports = {
  plugins: [require.resolve("@prettier/plugin-pug")],
  semi: false,
  singleQuote: false,
  pugSingleQuote: false,
}

What I am doing wrong?

[Shinigami92]

@chrisjansky Before your issues goes under in this already closed and merged PR, could you at least open a new issue?
Or fast-forward and just open a new PR that adds a test with your example inside the https://github.com/prettier/plugin-pug/tree/main/tests/issues folder.
That way we can try to find a bug-fix together and fix it.

[chrisjansky]

Hi @Shinigami92, thanks for the quick reply–sorry for reopening this issue.

I am not familiar with tests to be honest but I'll try opening a new PR.

[chrisjansky]

Added a new PR: #362