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.
Top comments (0)