smfoote / ember-glimmer-component

Glimmer.js-like components in Ember

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.

ember-glimmer-component's Issues

Available APIs

Looking at the code for the component manager, it doesn't seem like the component (non compat) has any of the Glimmer.js component functionality. So no hooks or computed properties, basically pass through args and maybe actions? Could you clarify what feature can be used and how to use actions (is the bind helper needed)?

component.trigger is not a function

I can use perfectly (with ember-decorators)

import { CompatComponent as Component } from 'ember-glimmer-component';
import { classNames } from '@ember-decorators/component';
import { computed } from '@ember-decorators/object';

@classNames('static-class')
export default class extends Component {
  @computed('@filename', '@filetype')
  get tomsterPath() {
    return `/img/${this.filename}.${this.filetype}`
  }
}

But when I try with (removing ember-decorators)

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

export default class extends Component {
}

I get this error in the console

Uncaught TypeError: component.trigger is not a function
    at CurlyComponentManager.create (ember-glimmer.js:3696)

This is the line of code it refers to

component.trigger('didReceiveAttrs');

I'm using the latest version of canary and my templates are very basic to test with, just simple html without even any properties for now.

The code is available to see here:
https://github.com/chrism/emberjs-2018/tree/glimmer-component

Any idea why this might be happening?

Much appreciated, thanks!