[Glint v2] Syntax highlighting looks broken in gts file

[mkszepp]

We are working right now with glint v1 and we have planned to move to v2 asap, because glint v1 is very slow inside our project.

1. Install VsCode extension (pre-release)
2. Add in package.json

  "@glint/core": "1.4.1-unstable.66abd90",
  "@glint/environment-ember-loose": "1.4.1-unstable.66abd90",
  "@glint/environment-ember-template-imports": "1.4.1-unstable.66abd90",
  "@glint/template": "1.4.1-unstable.66abd90",

3. Restart VSCode
4. Syntax looks incorrect: In hbs file the syntax looks correctly:

Example Code:

import Component from '@glimmer/component';
import { and, not } from 'ember-truth-helpers';

interface MyComponentSignature {
  Args: {
    variable1?: string;
    variable2?: string;
  };
}

// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class MyComponent extends Component<MyComponentSignature> {
  <template>
    {{! template-lint-disable no-bare-strings }}
    <div class='input-field {{if (and @variable1 (not @variable2)) " with-text-left"}}'>
      hello world
    </div>
  </template>
}

With glint v1 (stable release) the syntax looks correctly in gts files.

Is there some step missing for moving to v2?

[NullVoxPopuli]

Can you add a screenshot of what the syntax highlighting looked like before? Thanks!

[mkszepp]

@NullVoxPopuli here the before:

[machty]

@mkszepp are you seeing type-checking functionality work properly in .gts files? e.g. if you introduce type error does it display an error, and/or if you hover a keyword does it show a popup with the type and other info?

[mkszepp]

@machty yes type-checking... works fine and fast 🙃 just the syntax is broken.

In Glint v1 there was necessary to disable the build in typescript... this i have reactivated for V2 thats correct or?

[machty]

@mkszepp Correct, you want built-in TS enabled; the default/built-in tsserver that VSCode spins up loads our TS Plugin and provides type-checking language tooling for .gts/.hbs all on its own. The Glint language server still exists as a mostly empty shell but with V2 it can happily live alongside the built-in tsserver without clobbering or double-performing the work it does.

I will add a note about this to the GLINT_V2.md so that people coming from V1 know to re-enable the default TS if they've been using "takeover" mode.

Question: do you have the Glimmer Templates Syntax for VS Code lifeart.vscode-glimmer-syntax extension enabled?

[mkszepp]

@machty yes its active lifeart.vscode-glimmer-syntax

[mkszepp]

@machty here a demo repo: https://github.com/mkszepp/glint-incorrect-syntax-highlighting

Or step by step:

1. ember new glint-incorrect-syntax-highlighting --typescript --pnpm
2. install glint unstable

  "@glint/core": "1.4.1-unstable.66abd90",
  "@glint/environment-ember-loose": "1.4.1-unstable.66abd90",
  "@glint/environment-ember-template-imports": "1.4.1-unstable.66abd90",
  "@glint/template": "1.4.1-unstable.66abd90",

3. Add component my-example.gts

import Component from '@glimmer/component';

interface MyComponentSignature {
  Args: {
    variable1?: string;
    variable2?: string;
  };
}

// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class MyComponent extends Component<MyComponentSignature> {
  <template>
    <div class='input-field'>
      hello world
    </div>
  </template>
}

[mkszepp]

hmm i think autocompletion isn't working... also inside my app...

but popup works...

[machty]

Please create a separate issue for auto-complete; can keep this issue focused on syntax.