How to use Glimmer components in addon

Questions General
1

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
2

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.

3

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?

4

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!

5

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?

1 Like
6

Hi @ondrejsevcik were you able to resolve this? I have encountered the same issue both with using pods and classic layouts.

7

Sadly not, we’re still using the old components ATM.

We plan to migrate away from engines (the benefits are negligible compared to the issues we have with them) and then we hope to use the new stuff in Ember.

8

@ondrejsevcik An additional 9 months later… but… any luck fixing this issue?

9

@G_M what issue specifically are you having? Trying to use pod format with glimmer components in an addon? Anything stopping you from migrating to co-location?

10

Yes, I was attempting to use pods with glimmer components. I’ve since started migrating.

11

We’re doing the same at my company. The nice thing is they don’t conflict so you don’t have to do it all at once, and the directory version of co-location is almost the exact same as pods. I personally prefer not using directories with co-location (e.g. my-component/component.js becomes my-component.js) but if you’re looking to stay closer to pods format you can always just rename to “index” and keep the directories e.g. my-component/component.js becomes my-component/index.js