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:
;
with this line:
;
Everything else is mostly the same, with some exceptions (see below).
more ES6
But Wait, there's If you are a little more ambitious, you can write your components using ES6 classes.
; // 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
; ;
Glimmer component
; // clippled for brevity
Glimmer component template
{{@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
.