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

[Techn1x]

🐞 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
#219

😕 Actual Behavior

• use example code
• run prettier --write .
• semicolon is removed

(resulting in glint errors)

🤔 Expected Behavior

• use example code
• run prettier --write .
• semicolon should not be removed

🌍 Environment

• prettier-plugin-ember-template-tag version: 2.0.0
• ember-template-imports version (if applicable): 4.0.0
• content-tag version (if applicable): 1.2.2
• eslint-plugin-ember version (if applicable): 11.12.0

➕ 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]

Thanks for the report!

[patricklx]

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

typed-ember/glint#655

[Techn1x]

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]

@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

[Techn1x]

Sorry for delay @patricklx

I'm not entirely sure what is at fault. It could either be;

• prettier removes semi-colon when it shouldn't
  OR
• glint isn't able to parse when a semi-colon isn't present on certain statements before a <template> tag

FWIW, I'm on pretty bleeding edge deps these days (vite, eslint 9 etc) so I don't think it's because anything isn't updated.

Here's 3 screenshots to demonstrate;

initial setup, before format. all good

Hit save (or format via prettier), semicolon is removed and glint is sad

Put the semi-colon back along with a prettier ignore directive to get around the issue

Ideally, glint could handle the missing semi-colon. But I don't know if that's acceptable GJS/GTS or not

[Techn1x]

It's expected now to be without semi, when configured so

I've only configured prettier for semi: false - is there some configuration I need to apply to glint for this?