gitKrystan / prettier-plugin-ember-template-tag

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

[Bug] Required semicolons incorrectly removed (semi: false config) #218

Open Techn1x opened 6 months ago

Techn1x commented 6 months ago

🐞 Describe the Bug

I have semi: false in my prettier config. In general this works, but a semicolon is required between certain statements in a class and the <template> tag. This plugin seems to remove those required semicolons when it shouldn't. This then causes glint errors.

Example where the semicolon is required - prettier removes it, when it shouldn't.

class MyComponent extends Component {
  historyBack = () => history.back();

  <template>
    <button type="button" {{on "click" historyBack}}>Go back</button>
  </template>
}

🔬 Minimal Reproduction

Added failing test snapshot https://github.com/gitKrystan/prettier-plugin-ember-template-tag/pull/219

😕 Actual Behavior

(resulting in glint errors) Screenshot 2024-01-02 at 8 18 37 pm

🤔 Expected Behavior

🌍 Environment

➕ Additional Context

I was having this issue before v2.0.0 as well, so it's not a regression.

A workaround is to disable prettier for the line that the semicolon is on, exactly like this

historyBack = () => history.back(); /* prettier-ignore */ /* prettier-ignore-end */

<template>...

That looks really weird, but it "works" - I believe the weirdness is because I don't think this addon parses prettier-ignore directives correctly? The prettier-ignore-end is important so that prettier is reenabled for the lines afterward

gitKrystan commented 6 months ago

Thanks for the report!

patricklx commented 3 months ago

this will probably solved when glint moves to content-tag instead of ember-template-imports.

https://github.com/typed-ember/glint/pull/655

Techn1x commented 2 weeks ago

this will probably solved when glint moves to content-tag instead of ember-template-imports.

Unfortunately I still seem to be having this issue (I'm on glint 1.4.0)

This repo has the issue replicated (see the failing test I wrote) but does not depend on glint, so I am not sure if glint version matters, but I am no expert here


A workaround is to disable prettier for the line that the semicolon is on

I want to mention a caveat to the workaround I gave in the description, is that if applied to anything more complex it disables prettier for that entire block

class Abc extends Component {
  fetchStats = trackedFunction(this, async () => {
    // all of this inside the function is ignored by prettier
  }); /* prettier-ignore */ /* prettier-ignore-end */

  <template> ...
patricklx commented 2 weeks ago

@Techn1x is the issue about glint or prettier removing semicolon? It's expected now to be without semi, when configured so. And newest glint should be able to parse it