TypeScript Support

[josemarluedke]

Currently, we cannot use the hbs template literal with TypeScript files.

The problem is that TS removes unused imports, so all the components/helpers/modifiers that are imported for a given component gets removed, resulting in error due to not having these definitions.

As a workaround, we can fakely pass the scope variables. NOTE: They don't do anything rather than making TS keep the imports.

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { hbs } from 'ember-template-imports';
import { Button } from './other/bla';
import { on } from '@ember/modifier';

export default class Hello extends Component {
  name = 'world';

  @action
  doSomething() {
    console.log('action called');
  }

  static template = hbs(
    `
    <span>Hello, {{this.name}}!</span>
    <Button class="button" {{on "click" this.doSomething}}>Cool</Button>
  `,
    { scope: { Button, on } }
  );
}

While this workaround works, this is not ideal, therefore we should have better support for typescript users.

[knownasilya]

Does .gts work?

Doesn't seem so, says Could not find module 'ember-flow/components/flow-editor' imported from 'dummy/components/flow-editor'

Also if I try the hbs method, I get this:

Build Error (broccoli-persistent-filter:Babel > [Babel: ember-flow]) in ember-flow/components/flow-editor.ts

/Users/iradchenko/maintained/ember-flow/ember-flow/components/flow-editor.ts: Identifier 'hbs' has already been declared (10:9)

   8 | import { throttle } from '@ember/runloop';
   9 | // @ts-ignore
> 10 | import { hbs } from 'ember-template-imports';
     |          ^
  11 |
  12 | interface Args {}

This is in an addon. If I rename it, it works:

import { hbs as tpl } from 'ember-template-imports';

[chriskrycho]

This will likely need to be solved via Glint, both the LS and the CLI integration, which we can teach how to understand these files (and indeed: it already works with this basic format courtesy of glimmer-experimental).

[NullVoxPopuli]

Closing per RFC 779, and v4 of ETI. Hbs isn't supported anymore. Thank you for reporting!