Glimmer.js-like components in Ember
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
vendor
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json Improve package.json completeness Mar 13, 2018
testem.js
yarn.lock

README.md

ember-glimmer-component

Use Glimmer components in Ember. Today!

Quick Start

Add this package (ember-glimmer-component)

$ yarn add ember-glimmer-component --dev

or

$ npm install --save-dev ember-glimmer-component

For now, this is only available in the Canary build of Ember.js, so make sure ember-source is pointing to canary in your package.json, and then run yarn or npm install.

Finally, in your config/environment.js file, you need to add the 'glimmer-custom-component-manager' feature flag to your FEATURES.

FEATURES: {
  // Here you can enable experimental features on an ember canary build
  // e.g. 'with-controller': true
  "glimmer-custom-component-manager": true
},

Then, when you create a component, replace this line:

import Component from '@ember/component';

with this line:

import { CompatComponent as Component } from 'ember-glimmer-component';

Everything else is mostly the same, with some exceptions (see below).

But Wait, there's more ES6

If you are a little more ambitious, you can write your components using ES6 classes.

import { Component } from 'ember-glimmer-component';

export default class extends Component {
  // Your component code goes in here
}

What's different

Outer HTML templates

Glimmer components don't have a root element. That means tagName is meaningless, and classNames, classNameBindings, and attributeBindings won't do anything. All of this will move into the template. Let's take a look at how to convert an Ember component using these properties.

Ember Component

import Component from '@ember/component';

export default Component.extend({
  tagName: 'time',
  classNames: 'time-ago',
  classNameBindings: ['isFuture'],
  attributeBindings: ['readableTime:datetime'],

  // clipped for brevity
});

Glimmer component

import { Component } from 'ember-glimmer-component';

export default class extends Component {
  // clippled for brevity
}

Glimmer component template

<time
  class="time-ago{{#if isFuture}} is-future{{/if}}"
  datetime={{readableTime}}
>
  {{@time}}
</time>

Computed properties in ES6 classes

Computed properties do not and will not work in ES6 class components. Look forward to @tracked landing in Ember. Until then, if you need computed properites, use the CompatComponent.