Template Imports

When adding Glint to an Ember project with ember-template-imports installed, there are a few additional things to consider.

Installation

In addition to the @glint/core, @glint/template and @glint/environment-ember-loose packages, you also need to install the @glint/environment-ember-template-imports package and configure it in tsconfig.json under glint.environment:

Yarn

yarn add --dev @glint/core @glint/template @glint/environment-ember-loose @glint/environment-ember-template-imports

npm

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

tsconfig.json

{
  "compilerOptions": { /* ... */ },
  "glint": {
    "environment": [
      "ember-loose",
      "ember-template-imports",
    ]
  }
}

Template-Only Components

When using ember-template-imports, you can declare the type of a <template> component using the TOC type:

import type { TOC } from '@ember/component/template-only';

interface ShoutSignature {
  Element: HTMLDivElement;
  Args: { message: string };
  Blocks: {
    default: [shoutedMessage: string];
  };
}

const louderPlease = (message: string) => message.toUpperCase();

const Shout: TOC<ShoutSignature> = <template>
    <div ...attributes>
        {{yield (louderPlease @message)}}
    </div>
</template>;
export default Shout;