lifeart

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Input with handler example';
  @tracked text;

 handleInput(event) {
  event.preventDefault();

lifeart

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Input with handler example';
  @tracked text;

 handleInput(event) {
  event.preventDefault();

lifeart

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
	@service('store') store;

	constructor() {
  	super(...arguments);
    this.setup();

lifeart

import Controller from '@ember/controller';
import EmberObject, { action, computed as emberComputed } from '@ember/object';

let currentAutoTrack;

function trackedData(key, initializer) {
    let values = new WeakMap();
    let autoTrackingData = new WeakMap();
    let hasInitializer = typeof initializer === 'function';

lifeart

My team and I have been working on a new internal component library to share across a few Ember apps. The library is an Ember addon in a private github repo. So far, so good. The off-the-beaten-path part of our requirements is that the components need to be themeable. Specifically, we support a color and a "light" or "dark" aesthetic.

We want a great developer experience for creating and updating these components, so we used ember-freestyle as a devDependency of the library to create a living style guide. We added some UI to allow theme switching and even a checkbox to switch themes every second (thanks ember-concurrency!).

The thing that gave us the biggest challenge was figuring out how to author and apply the styles that were necessarily dynamic. Specifically, the css rules that used the dynamic color.

We decided to organize our styles like so:

app/styles/components/

lifeart

import Ember from 'ember';

const A = Ember.A;
const O = Ember.Object.create.bind(Ember.Object);

const getCpO = function(data) {
	return Ember.Object.extend({
    childKey: Ember.computed('children.[]', function(){
    	return (this.get('children')||A()).map(e=>e.toString()).join('-');
    })

lifeart

app.import() works with node_modules now! As of Ember 2.15. Previously it only worked with bower_components and vendor.

Docs for app.import are here: https://ember-cli.com/managing-dependencies#standard-non-amd-asset

This method (vendor-shim) wraps the global export into an es6 module (but the global one is still present). It doesn't use an es6 interface even if the library offers one, but that's okay for my use case.

Things could still be easier, see this thread for the current state of that.