gitKrystan / prettier-plugin-ember-template-tag

A prettier plugin for formatting Ember template tags
MIT License
22 stars 12 forks source link

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

Closed simonihmig closed 1 year ago

simonihmig commented 1 year ago

🐞 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:

image

  1. Run prettier on it

😕 Actual Behavior

image

🤔 Expected Behavior

No reformatting happens, <template> is not transformed.

🌍 Environment

➕ Additional Context

gitKrystan commented 1 year ago

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 commented 1 year ago

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

gitKrystan commented 1 year ago

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

gitKrystan commented 1 year ago

@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 (https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/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 commented 1 year ago

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:

image
gitKrystan commented 1 year ago

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 commented 1 year ago

@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:

    image
  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 commented 1 year ago

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 commented 1 year ago

@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!