How do I use Glimmer components inside an Ember app?

Question

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?

score 5 · Answer 1 · answered May 01 '19 at 18:22

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

score 2 · Answer 2 · answered Mar 29 '17 at 16:45

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)

answered Mar 29 '17 at 16:45

Ember Freak

12,918
4
24
54

But this way I need to start a new project from scratch just to create a component. I suspect it’s possible to at least get the glimmer components to compile if we change something in `ember-cli-build.js`. – Ludovico Fischer Mar 29 '17 at 19:22
I am not sure about this what we have to do to work for the cli other than canary. `yarn global add github:ember-cli/ember-cli#canary` – Ember Freak Mar 29 '17 at 19:26
4

Member of the Ember Learn Team here. This type of usage of Glimmer components in an Ember app isn't yet supported. It's something that the core team wants to do later, but not something you can do right now. – acorncom Mar 31 '17 at 14:20
1

See [Tom's blog post](https://emberjs.com/blog/2017/04/05/emberconf-2017-state-of-the-union.html#toc_introducing-glimmer-js) for some context and current state of Glimmer.js. "Glimmer components are the future of components in Ember," but Godfrey's [Custom Components API RFC](https://github.com/emberjs/rfcs/pull/213) will need to be accepted and implemented first before work can start on enabling Glimmer components or "angle bracket components" in Ember apps, probably initially via an Ember addon. – vine77 Apr 11 '17 at 01:19
4

From a the #-glimmer slack channel w/ @locks @mixonic and @samselikoff it seems that the best way would be to export your glimmer components as web components (https://glimmerjs.com/guides/using-glimmer-as-web-components) then "put the /dist files from the glimmer app into the vendor folder of your ember app and `app.import` them". Beyond that, track this issue to find out what kind of attributes/events API will be supported: https://github.com/glimmerjs/glimmer-web-component/issues/19 – Tom Wayson Jul 14 '17 at 20:08
So, what your saying is that we cannot use glimmer in existing Ember apps. That seems like it's can't possibly be true. – Ray Suelzer Oct 01 '17 at 20:00
you can use glimmer in existing ember apps now. :) – NullVoxPopuli May 01 '19 at 18:23

How do I use Glimmer components inside an Ember app?

2 Answers2