The Road to Stable

Background

RFC #0779: First-Class Component Templates picked one of the formats from this repo as the the ability for Ember (and Glimmer) developers to write components with template tags embedded in their JS, like so:

import Component from '@glimmer/component';

const Button = <template>
  <button
    type='button'
    class="my-button"
    {{on "click" @onClick}}
  >
    {{@label}}
  </button>
</template>

export default class Player extends Component {
  @tracked isPlaying = false;

  play = () => (this.isPlaying = true);
  pause = () => (this.isPlaying = false);

  <template>
    <audio src={{@srcUrl}} {{playWhen this.isPlaying}} />

    <Button @label="Play" @onClick={{this.play}} />
    <Button @label="Pause" @onClick={{this.pause}} />
  </template>
}

This is not only a general win for ease of working with Ember: it is also a key part of our TypeScript story, because it makes things like go-to-definition, documentation hovers, autocomplete, auto-import, etc. all much easier to manage. So: what do we need to do to finish unblocking its adoption?

Work to be done

There are only three fundamental blockers to adoption:¹

• Prettier support.
• ESLint support.
• ember-template-lint support.

Prettier support

Thanks to @wondersloth at LinkedIn, there is an existing Prettier plugin for one of the alternatives to the final first-class component templates design, which used hbs tags (like you see in tests), as used by Play/Glimmer. You can find that here. In this case, the work to be done is building on that and using the preprocessor from ember-template-imports to get the contents of the template, with the existing indentation, run Prettier on that, apply appropriate indentation, and replace it in the <template> tag.

ESLint support

This is really two things:

1. Help land this PR by @NullVoxPopuli (who would welcome the help)! It may be helpful to compare with the eslint plugin for GlimmerX, which works with hbs tagged template literals and would need similar updates as the Prettier plugin, but may be useful input.

2. See the next section about ember-template-lint: we want to basically make ember-template-lint an embedded ESLint reporter.

ember-template-lint support

For ember-template-lint, we need to integrate it with ESLint, so that from the end user’s perspective, they just have one linter giving them feedback on their.

There is a branch of this work started here, but again, @NullVoxPopuli does not currently have time to finish it and would love help!