TheLazy.Dev
Portfolio GitHub

Blog

ember |typescript |javascript

Installing and using Glint in Ember.js

charlesfries

Charles Fries

Posted on April 30, 2023

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
Enter fullscreen mode Exit fullscreen mode

Install Glint dependencies:

npm install -D @glint/core @glint/template @glint/environment-ember-loose
Enter fullscreen mode Exit fullscreen mode

Update tsconfig.json:

// tsconfig.json

{
  "compilerOptions": {
    ...
  },
+ "glint": {
+   "environment": "ember-loose"
+ }
}
Enter fullscreen mode Exit fullscreen mode

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

// types/glint.d.ts

import '@glint/environment-ember-loose';
Enter fullscreen mode Exit fullscreen mode

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;
+   }
+ }
Enter fullscreen mode Exit fullscreen mode

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;
+   }
+ }
Enter fullscreen mode Exit fullscreen mode

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;
+     }>;
+   }
+ }
Enter fullscreen mode Exit fullscreen mode

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"
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

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

💖 💪 🙅 🚩
charlesfries
Charles Fries

Posted on April 30, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Installing and using Glint in Ember.js
ember Installing and using Glint in Ember.js

April 30, 2023