Skip to content

Instantly share code, notes, and snippets.

@zeppelin
Last active August 29, 2015 14:17
Show Gist options
  • Save zeppelin/d95c4f7e700198baa4ab to your computer and use it in GitHub Desktop.
Save zeppelin/d95c4f7e700198baa4ab to your computer and use it in GitHub Desktop.
Ember ES2015 Modules

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({
  gravatarUrl: Ember.computed('email', 'size', function() {})
});

We could import all the methods and classes we need in that particular file:

import Component from 'ember/component';
import computed from 'ember/computed';

export default Component.extend({
  gravatarUrl: computed('email', 'size', function() {})
});

Because at the end of the day, many developers are already doing something resembling to this:

import Ember from 'ember';
const { Component, computed } = Ember;

The upside is that module error messages are much better than TypeError: undefined is not a function. Not found module errors are also detected at compile-time, which is a nice additional safety net.

And since Ember is apparently moving away from prototype extensions, the usage of computed, string functions, etc will only rise in the future.

// Module: `ember`
import {
$,
A,
addBeforeObserver,
addListener,
addObserver,
aliasMethod,
arrayComputed,
assert,
beforeObserver,
bind,
cacheFor,
canInvoke,
changeProperties,
compare,
copy,
create,
debug,
deprecate,
deprecateFunc,
destroy,
get,
getProperties,
immediateObserver,
inject,
inspect,
isArray,
isBlank,
isEmpty,
isEqual,
isNone,
isPresent,
keys,
makeArray,
merge,
mixin,
observer,
on,
onLoad,
oneWay,
propertyDidChange,
propertyWillChange,
reduceComputed,
removeBeforeObserver,
removeListener,
removeObserver,
required,
runInDebug,
runLoadHooks,
sendEvent,
set,
setProperties,
tryCatchFinally,
tryFinally,
tryInvoke,
trySet,
typeOf,
warn
} from 'ember';
// Module: `ember/computed`
import computed from 'ember/computed';
import {
alias,
and,
any,
bool,
collect,
deprecatingAlias,
empty,
equal,
filter,
filterBy,
gt,
gte,
intersect,
lt,
lte,
map,
mapBy,
match,
max,
min,
none,
not,
notEmpty,
oneWay,
or,
readOnly,
reads,
setDiff,
sort,
sum,
union,
uniq
} from 'ember/computed';
// Module: `ember/enumerable-utils`
import {
addObject,
filter,
forEach,
indexOf,
indexesOf,
intersection,
map,
removeObject,
replace
} from 'ember/enumerable-utils';
// Ember.Location is covered at "Classes and Namespaces"
// Module: `ember/string`
import {
camelize,
capitalize,
classify,
dasherize,
decamelize,
fmt,
htmlSafe,
loc,
underscore,
w
} from 'ember/string';
// Module: `ember/platform`
import {
defineProperty,
hasPropertyAccessors
} from 'ember/platform';
// Module: `ember/run`
import run from 'ember/run';
import {
begin,
bind,
cancel,
debounce,
end,
join,
later,
next,
once,
schedule,
scheduleOnce,
sync,
throttle
} from 'ember/run';
// Classes and Namespaces
import RSVP from 'ember/rsvp';
import ControllerMixin from 'ember/controller-mixin';
import Application from 'ember/appliction';
import DefaultResolver from 'ember/default-resolver';
import ContainerDebugAdapter from 'ember/container-debug-adapter';
import DataAdapter from 'ember/data-adapter';
import Handlebars from 'ember/handlebars';
import HTMLBars from 'ember/htmlbars';
import Mixin from 'ember/mixin';
import LinkView from 'ember/link-view';
import Location from 'ember/location';
import AutoLocation from 'ember/auto-Location';
import HashLocation from 'ember/hash-location';
import HistoryLocation from 'ember/history-location';
import NoneLocation from 'ember/none-Location';
import Route from 'ember/route';
import Router from 'ember/router';
import ReduceComputedProperty from 'ember/reduce-computed-property';
import ProxyMixin from 'ember/proxy-mixin';
import ActionHandler from 'ember/action-handler';
import Array from 'ember/array';
import Comparable from 'ember/comparable';
import Copyable from 'ember/copyable';
import Deferred from 'ember/deferred';
import Enumerable from 'ember/enumerable';
import Evented from 'ember/evented';
import Freezable from 'ember/freezable';
import MutableArray from 'ember/mutable-array';
import MutableEnumerable from 'ember/mutable-observer';
import Observable from 'ember/observable';
import PromiseProxyMixin from 'ember/promise-proxy-mixin';
import SortableMixin from 'ember/sortable-mixin';
import TargetActionSupport from 'ember/target-action-support';
import ArrayProxy from 'ember/array-proxy';
import CoreObject from 'ember/core-object';
import EachProxy from 'ember/each-proxy';
import Namespace from 'ember/namespace';
import NativeArray from 'ember/native-array';
import Object from 'ember/object';
import ObjectProxy from 'ember/object-proxy';
import Service from 'ember/service';
import Set from 'ember/set';
import SubArray from 'ember/sub-array';
import TrackedArray from 'ember/tracked-array';
import Test from 'ember/test';
import TextSupport from 'ember/test-support';
import ViewTargetActionSupport from 'ember/view-target-action-support';
import EventDispatcher from 'ember/event-dispatcher';
import View from 'ember/view';
import Checkbox from 'ember/checkbox';
import CollectionViev from 'ember/collection-view';
import Component from 'ember/component';
import ContainerView from 'ember/container-view';
import CoreView from 'ember/core-view';
import Select from 'ember/select';
import TextArea from 'ember/text-area';
import TextField from 'ember/text-field';
import ViewTargetActionSupport from 'ember/view-target-action-support';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment