Gabor Babicz zeppelin

Ember ES2015 Modules

The purpose of this document is to demonstrate how methods and classes could be imported inside an Ember CLI project, instead of accessing them on the Ember namespace.

For example, instead of doing this:

import Ember from 'ember';

export default Ember.Component.extend({

	#!/usr/bin/env bash
	#
	# mac-ubuntu-setup.sh — Post-install Mac hardware support for Ubuntu
	#
	# Tested on 2015 MacBook Pro (MacBookPro12,1 / 11,4 / 11,5) with Ubuntu 24.04 LTS.
	# Likely works on other Intel MacBook Pro models 2011–2017.
	#
	# What it does:
	# 1. Updates apt package lists and upgrades installed packages
	# 2. Installs Broadcom Wi-Fi driver (bcmwl-kernel-source)

	test('createTestSelector', function(assert) {
	// Base namespace could be, for example, the component's name
	let base = createTestSelector('namespace');

	// Element that appears only once on the screen at a time
	assert.equal(base('single'), '[data-test-namespace="single"]');

	// List of elements, targeting all items
	assert.equal(base('multiple', null), '[data-test-namespace^="multiple:"]');

	import EmberObject from '@ember/object';

	class SubclassWithEmberInit extends EmberObject {
	someProp = 'value';

	init() {
	super.init(...arguments);
	console.log(this.someProp); // undefined
	// `this.someProp` will be available after initialization,
	// just not from the `init` method...

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	m: ['a', 'b', 'c', 'd', 'e', 'f']
	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	actions: {
	handleClick(name, e) {
	alert(name);
	e.preventDefault();
	}
	}
	});

	new MutationObserver(function() {
	var slotA = {
	count: 0,
	color: null,
	element: null
	};

	var slotB = {
	count: 0,
	color: null,

	import Ember from 'ember';
	var Route = Ember.Route;

	export default Route.extend({
	redirect() {
	this.replaceWith('root'); // Replace URL: / -> /en-US
	}
	});

	.defaultButton {
	@extend .btn;
	@extend .btn-default;
	}