How to use Glimmer components in addon

Hi, I’ve tried to convert one of our components in addon to a glimmer component. It seems to pickup the component, but not the template.

I’ve put a console.log into the constructor and that was called, but it simply doesn’t render a thing.

Any idea what am I doing wrong?

Thank you

ember-cli 3.15
ember-source 3.12

Can you get it down to a minimal reproduction you can share here? Without more details, it’s hard to say! Happy to help if I can, but if you can make a minimal component and template combo that will make troubleshooting more possible.

Currently doesn’t work even with just simple text in the template.

// component.js
import Component from '@glimmer/component';
import layout from './template';

export default class HelloWorld extends Component {
  // layout = layout;  (I've tried also to set layout prop)

  constructor() {
    super(...arguments);
    console.log('Hello from constructor');
  }
}

// template.hbs
Hello from template

That’s it. It shows in the console “hello from constructor”, but the template is not rendered.

We’re using pods structure. Could that be an issue?

This is not supported with Glimmer components; it’s one of the API differences between them and Ember components. You should prefer to just use the normal conventional locations of templates and backing classes (whether in templates directory or colocated), and that’ll work. If you’re on latest, using colocation is recommended:

app/
  components/
    my-component.js
    my-component.hbs
using private API

THIS IS VERY EXTREMELY NOT RECOMMENDED!!!

If you absolutely need to do it with imports for some reason, you can do it like this:

import Component from '@glimmer/component';
import { setComponentTemplate } from '@ember/-internals/glimmer';
import template from './template';

export default class HelloWorld extends Component {
  constructor() {
    super(...arguments);
    console.log('Hello from constructor');
  }
}

setComponentTemplate(template, HelloWorld);

Once again: this is private API, and you basically should never need it. Just use colocated templates instead (it does this for you, and is guaranteed to keep working!).

It’s possible that this API or one like it will be public in the future, but no guarantees!

Thanks for the insight. I’ve tried to use normal (the old) convention of placing component and template and that didn’t work either, only colocation works.

Does that mean that pods structure is now deprecated?