[Bug] With invalid hbs, prettier will transform `<template>` in source code

[simonihmig]

🐞 Describe the Bug

When hbs inside <template> is invalid, prettier will transform <template> in the source file to its internal representation format (__GLIMMER_TEMPLATE())

🔬 Minimal Reproduction

1. In a .gts/.gjs test file, create a <template> tag that contains invalid hbs syntax, like this:

2. Run prettier on it

😕 Actual Behavior

🤔 Expected Behavior

No reformatting happens, <template> is not transformed.

🌍 Environment

• prettier-plugin-ember-template-tag version: 0.3.0
• ember-template-imports version: 3.4.0

➕ Additional Context

[gitKrystan]

Thanks for the report! I'm currently swamped with another project but I will look into this ASAP.

In the meantime, if you (or someone else following along) have time, could you add a test following these instructions and link here?

With regular JS/TS, when there is a syntax error, Prettier appears to be a no-op but will log an error.
Because this library has to pre-process GTS into JS/TS ([__GLIMMER_TEMPLATE(...)] before running the regular Prettier parser/printer flow, it must trigger an error somewhere that causes the printer to not to convert back to GTS from TS.

Also if you have time you could see if this throws an error we can catch: https://github.com/gitKrystan/prettier-plugin-ember-template-tag/blob/main/src/print/template.ts#L32

[simonihmig]

Thanks for the references! I'll see if I can work on this next week!

[gitKrystan]

Thanks. Prettier swallows errors pretty aggressively, so I am hoping we can find something somewhere to catch!

[gitKrystan]

@simonihmig I released a quick fix for this (v0.3.2). It's still a little broken in that it seems to add a new new-line after every save (#49). 😂 But this is way less annoying than the original de-sugaring bug, and I'm out of time for fixing stuff on this library this week, so I shipped it. 🚀

[jurgenwerk]

I'm still getting this error using prettier-plugin-ember-template-tag version 0.3.2 in vscode that runs prettier on save.

I can reproduce it by pasting invalid code into <template></template> tag. If I paste "invalid code" in the tag, the following happens:

[gitKrystan]

I'm still getting this error using prettier-plugin-ember-template-tag version 0.3.2 in vscode that runs prettier on save.

Thanks for the report. Unfortunately, I am unable to reproduce this issue with 0.3.2. Can you answer the following questions for me?

1. Did you recently upgrade to 0.3.2? If so, can you try reloading the VSCode window to see if it's just using the wrong version?
2. Are you running prettier on save directly or via an eslint fix?
3. Does this happen with all invalid code? Can you provide an example of invalid code that causes this issue?
4. What versions are you running of: ember-template-imports and prettier. What is the output of yarn why prettier-plugin-ember-template-tag (or the equivalent for your package manager)?

[jurgenwerk]

@gitKrystan thanks for your reply. Here's my info:

1. No, 0.3.2 was present at the start of when I set up an existing project. I have reloaded vscode several times.
2. I'm running the following config for both javascript and typescript:

"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

3. Actually, it happens whenever I paste anything, even valid code:

4. ember-template-imports is 3.0.1 and prettier is 2.7.1. The output of pnpm why prettier-plugin-ember-template-tag is:

devDependencies:
prettier-plugin-ember-template-tag 0.3.2

[gitKrystan]

Actually, it happens whenever I paste anything, even valid code

@jurgenwerk Unfortunately, I'm still unable to reproduce, so I have a few more questions:

Do you have "editor.formatOnPaste": true set anywhere? I'm confused about why it's formatting on paste at all (let alone formatting incorrectly).

Does updating ember-template-imports and/or prettier to the latest version fix your issue?

Do any of the fixes suggested in Issue #38 help you?

[jurgenwerk]

@gitKrystan yes, I had formatOnPaste set to true. I switched it to false (I don't really need that feature) and that solved my issue. Thanks for your help!