How do I use Glimmer components inside an Ember app?

Question

The Glimmer website states:

Just drop your Glimmer components into an Ember app. You won’t need to change a thing.

I’ve been following the official Ember quick start tutorial. I replaced the contents of the generated people-list.js component with this:

import Component from '@glimmer/component';

export default class PeopleList extends Component {

}

and I get an error in the browser console stating that @glimmer/component is undefined. After I run yarn add @glimmer/component to add the dependency, I get a new error from Broccoli.

Additionally, whenever I use '@' before a variable in the people-list.hbs template, the template fails to compile. How do I get the Glimmer component to work in my Ember app?

Answer 1

To use glimmer in an ember app today (May 1st, 2019),

yarn add --dev @glimmer/component@beta

then

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class MyComponent extends Component {
  @tracked number = 0;

  increment() {
    this.number++;
  }
}

to see this in action, take a look at a fresh Octane App: https://github.com/ember-cli/ember-octane-blueprint

Answer 2

Currently you can't use it for existing ember app. but you can try it brand new app. By installing ember new my-glimmer-app -b https://github.com/glimmerjs/glimmer-blueprint.git

If you go with yarn global add ember-cli/ember-cli this way then you need to uninstall existing ember-cli (npm uninstall -g ember-cli)