feature request: convert template-only gjs to class-backed component (and back?)

[IgnaceMaes]

The following section on template tag components covers the blueprints: https://rfcs.emberjs.com/id/0779-first-class-component-templates/#blueprints

It mentions:

The current blueprints support generating a backing class for any existing component template which does not already have a backing class with the component-class format. We have two choices about the behavior of that blueprint for strict mode templates:

1. Do not support it. Adding a backing class is simply a matter of adding an import and adding a class.

2. Re-implement the blueprint using an AST transform (which we have prior art for: route generation uses that approach), to add a backing class for an existing default export in the module.

(We should do (1). The community can of course implement (2) if interested.)

Converting a template tag component to a class-backed one is something that is a bit more manual work than just creating a separate js file. For this reason I think it would be great it if was directly available as VS Code refactor option. The big benefit here is that the VS code plugin could do it based on which component your cursor is on. The Ember CLI currently does not support converting a subset of components within a file. (as with gjs there can be multiple now)

Example:

const foo = 'bar';

<template>
  Hello {{foo}}
</template>

And when activating to transform to class-backed:

import Component from '@glimmer/component';

const foo = 'bar';

export default class Hello extends Component {
  <template>
    Hello {{foo}}
  </template>
}

The other way around, class-backed to template-only, seems way less frequent and easier to do manual. But for completeness it could be added as well?

Thoughts? + should this be a separate plugin?

[lifeart]

Hi @IgnaceMaes, sorry for delayer response.
In short - yes it's possible, here is a reference addon to extract code parts to components: https://github.com/lifeart/els-component-extraction-addon