Installing and using Glint in Ember.js

Glint is a set of tools that aids in the typechecking of projects that use Glimmer, such as Ember.js and GlimmerX. This guide will show you how to install and use Glint in an Ember.js project.

Step 1: Install

Create a new Ember app:

ember new my-app --typescript
cd my-app

Install Glint dependencies:

npm install -D @glint/core @glint/template @glint/environment-ember-loose

Update tsconfig.json:

// tsconfig.json

{
  "compilerOptions": {
    ...
  },
+ "glint": {
+   "environment": "ember-loose"
+ }
}

Create a new file called types/glint.d.ts:

// types/glint.d.ts

import '@glint/environment-ember-loose';

Step 2: Add signatures to template registry

Add the following declaration to your components to index their signatures in the template registry. For example:

// app/components/avatar.ts

import Component from '@glimmer/component';

export default class Avatar extends Component {}
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     Avatar: typeof Avatar;
+   }
+ }

Do the same with your helpers and modifiers. For example:

// app/helpers/sum.ts

import { helper } from '@ember/component/helper';

const sum = helper((values: Array<number>) => {
  return values.reduce((sum, next) => sum + next, 0);
});

export default sum;
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     sum: typeof sum;
+   }
+ }

You can also use {{! @glint-ignore }}, {{! @glint-nocheck }}, and {{! @glint-expect-error }} to ignore code in your templates.

Step 3: Add dependency signatures

For addons that do not supply Glint types, manually add their component/helper/modifier signatures to the registry:

// types/glint.d.ts

import '@glint/environment-ember-loose';
+ import { ComponentLike, HelperLike } from '@glint/template';
+
+ declare module '@glint/environment-ember-loose/registry' {
+   export default interface Registry {
+     WelcomePage: ComponentLike;
+     'page-title': HelperLike<{
+       Args: { Positional: [title: string] };
+       Return: void;
+     }>;
+   }
+ }

Step 4: Run executable

Run the glint command to typecheck your project. This command could be worked into your linting scripts, for example:

//  package.json

{
  ...
  "scripts": {
    "build": "ember build --environment=production",
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
+   "lint:glint": "glint",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:js": "eslint . --cache",
    "lint:js:fix": "eslint . --fix",
    "start": "ember serve",
    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
    "test:ember": "ember test"
  },
  ...
}

Conclusion

Using Glint and TypeScript, you should now have end-to-end typechecking in your Ember.js project templates.