A collection of Ember computed macros. All the macros are composable, meaning you can nest them to your heart's content, like so:
result: conditional(and(not('value1'), 'value2'), sum('value3', 1), collect('value4', toUpper('value5'))) // lisp much?Two essential primitive macros come from a different addon: ember-macro-helpers
The API is not final until 1.0. I will be adding aliases as I think of better names for things, and possibly breaking or removing existing macros.
If you have any opinions or want a new macro added, just ask! Or feel free to submit a pull request.
ember install ember-awesome-macrosimport nameOfMacro from 'ember-awesome-macros/name-of-macro';
// or
import { nameOfMacro } from 'ember-awesome-macros';array.anycollectarray.compactarray.concatarray.everyarray.filterByarray.filterarray.findByarray.findarray.firstarray.includesarray.indexOfarray.isAnyarray.isEveryarray.joinarray.lastIndexOfarray.lastarray.lengtharray.mapByarray.maparray.objectAtarray.reducearray.reversearray.slicearray.sortarray.uniqByarray.uniqarray.without
string.camelizestring.capitalizestring.classifystring.dasherizestring.decamelizestring.htmlSafestring.indexOfstring.isHtmlSafestring.lastIndexOfstring.lengthstring.replacestring.splitstring.substrstring.substringtagstring.toLowerstring.toUpperstring.underscore
alias for sum
same as Ember.computed.and, but allows composing
source1: false,
source2: true,
source3: false,
value1: and('source1', 'source2', 'source3'), // false
value2: and(not('source1'), 'source2', not('source3')) // truewraps Ember.Array.any, allows composing
array: Ember.A([1, 2]),
value1: array.any('array', val => val === 2), // true
value2: array.any('array', val => val === 3) // falsewraps Ember.Array.compact, allows composing
array: Ember.A([1, 2, null]),
value: array.compact('array') // [1, 2]wraps Array.prototype.concat(), allows composing
array1: Ember.A([1, 2]),
array2: Ember.A([3, 4]),
string: '3,4',
example: array.concat('array1', 'array2'), // [1, 2, 3, 4]
composingExample: array.concat('array1', split('string', raw(','))) // [1, 2, 3, 4]wraps Ember.Array.every, allows composing
array: Ember.A([1, 1]),
value1: array.every('array', val => val === 1), // true
value2: array.every('array', val => val === 2) // falsewraps Ember.Array.filterBy, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
key: 'test',
value: array.filterBy('array', 'key', 2) // [{ test: 2 }]wraps Ember.Array.filter, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
value: array.filter('array', item => item.test === 2) // [{ test: 2 }]wraps Ember.Array.findBy, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
key: 'test',
value: array.findBy('array', 'key', 2) // { test: 2 }wraps Ember.Array.find, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
value: array.find('array', item => item.test === 2) // { test: 2 }get the first item of an array
array: ['1', '2'],
string: '1, 2',
example: array.first('array'), // '1'
composingExample: array.first(split('string', raw(', '))) // '1'implements Array.prototype.includes(), allows composing
array: Ember.A(['my value 1', 'my value 2']),
source1: 'my value 2',
source2: 'my value 3',
value1: array.includes('array', 'source1'), // true
value2: array.includes('array', 'source2'), // false
value3: array.includes(collect(raw('my value 1'), raw('my value 2')), raw('my value 1')) // truewraps Array.prototype.indexOf(), allows composing
array: [2, 5, 9, 2],
value1: array.indexOf('array', 2), // 0
value2: array.indexOf('array', 2, 2) // 3wraps Ember.Enumerable.isAny, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
key: 'test',
value1: 2,
value2: 3,
result1: array.isAny('array', 'key', 'value1'), // true
result2: array.isAny('array', 'key', 'value2') // falsewraps Ember.Enumerable.isEvery, allows composing
array1: Ember.A([{ test: 1 }, { test: 1 }]),
key: 'test',
value1: 1,
value2: 2,
result1: array.isEvery('array', 'key', 'value1'), // true
result2: array.isEvery('array', 'key', 'value2') // falsewraps Array.prototype.join(), allows composing
array: Ember.A(['1', '2']),
separator: ', ',
value1: array.join('values', 'separator'), // '1, 2'
value2: array.join(collect(raw('1'), raw('2')), raw(', ')) // '1, 2'wraps Array.prototype.lastIndexOf(), allows composing
array: [2, 5, 9, 2],
value1: array.lastIndexOf('array', 2), // 3
value2: array.lastIndexOf('array', 2, 2) // 0get the last item of an array
array: ['1', '2'],
string: '1, 2',
example: array.last('array'), // '2'
composingExample: array.last(split('string', raw(', '))) // '2'wraps Array.prototype.length, allows composing
array: Ember.A([1, 2]),
string: '1,2',
example: array.length('array'), // 2
composingExample: array.length(split('string', raw(','))) // 2wraps Ember.Array.mapBy, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
key: 'test',
value: array.mapBy('array', 'key') // [1, 2]wraps Ember.Array.map, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }]),
value: array.map('array', item => item.test) // [1, 2]wraps Ember.Array.objectAt, allows composing
array: Ember.A(['my value']),
source1: 0,
source2: 1,
value1: array.objectAt('array', 'source1'), // 'my value'
value2: array.objectAt('array', 'source2'), // undefined
value3: array.objectAt(collect(raw('my value 1')), raw(0)) // 'my value'wraps Array.prototype.reduce(), allows composing
array: ['one', 'two'],
value1: array.reduce('array', (obj, cur, i) => {
obj[cur] = i;
return obj;
}, {}), // { one: 0, two: 1 }
string: 'one, two',
value2: array.reduce(split('string', raw(', ')), (obj, cur, i) => {
obj[cur] = i;
return obj;
}, {}) // { one: 0, two: 1 }wraps Array.prototype.reverse() (calls slice() first as to not mutate), allows composing
array: [1, 2, 3],
value1: array.reverse('array'), // [3, 2, 1]
value2: array.reverse(array.reverse('array')) // [1, 2, 3]wraps Array.prototype.slice(), allows composing
array: [1, 2, 3],
value1: array.slice('array', 1), // [2, 3]
value2: array.slice('array', difference('array.length', 1)) // [3]combines the functionality of both Array.prototype.sort() and Ember.computed.sort
array1: Ember.A(['xyz', 'abc']),
array2: Ember.A([{ key: 'abc' }, { key: 'xyz' }]),
value1: array.sort('array1'), // ['abc', 'xyz']
value2: array.sort('array2', ['key:desc']), // [{ key: 'xyz' }, { key: 'abc' }]
value3: array.sort('array2', (a, b) => a.key < b.key), // [{ key: 'xyz' }, { key: 'abc' }]wraps Ember.Array.uniqBy, allows composing
array: Ember.A([{ test: 1 }, { test: 2 }, { test: 2 }]),
key: 'test',
value: array.uniqBy('array', 'key') // [{ test: 1 }, { test: 2 }]wraps Ember.Array.uniq, allows composing
array: Ember.A([1, 2, 2]),
value: array.uniq('array') // [1, 2]wraps Ember.Enumerable.without, allows composing
array: Ember.A([1, 2, 3]),
value1: array.without('array', 2), // [1, 3]
value2: array.without('array', array.objectAt(1)) // [1, 3]same as Ember.computed.collect, but allows composing
source1: 'my value 1',
source2: 'my value 2',
value: collect('source1', collect('source2')) // ['my value 1', ['my value 2']]implements the ternary operator, allows composing
condition1: true,
condition2: false,
expr1: 'my value 1',
expr2: 'my value 2',
value1: conditional('condition1', 'expr1', 'expr2'), // 'my value 1'
value2: conditional('condition2', 'expr1', 'expr2'), // 'my value 2'
value3: conditional(or('condition1', 'condition2'), raw('my value 1'), raw('my value 2')) // 'my value 1'true if source is undefined
source1: undefined,
source2: false,
source3: 'my value',
value1: defaultTrue('source1'), // true
value2: defaultTrue('source2'), // false
value3: defaultTrue('source3') // 'my value'subtracts numbers
source1: 3,
source2: 2,
source3: 1,
value1: difference('source1', 'source2', 'source3'), // 0
value2: difference('source2', difference('source2', 'source3')) // 2alias for quotient
alias for equal
like Ember.computed.equal, but uses dependent properties on both sides. allows N number of arguments.
source1: 'my value',
source2: 'my other value',
source3: 'my value',
value1: equal('source1', 'source2'), // false
value2: equal('source1', 'source3'), // true
value3: equal('source1', 'source2', 'source3') // falseget a variable property name from an object
key: 'modelProperty',
model: {
modelProperty: 'my value'
},
value1: getBy('model', 'key'), // 'my value'
value2: getBy('model', raw('modelProperty')) // 'my value'like Ember.computed.gt, but uses dependent properties on both sides
and allows composing
source1: 1,
source2: 2,
source3: 1,
value1: gt('source1', 'source2'), // false
value2: gt('source1', 'source3'), // false
value3: gt('source2', 'source3') // truelike Ember.computed.gte, but uses dependent properties on both sides
and allows composing
source1: 1,
source2: 2,
source3: 1,
value1: gte('source1', 'source2'), // false
value2: gte('source1', 'source3'), // true
value3: gte('source2', 'source3') // truebuild a hash out of computed properties, allows composing
source1: 'my value 1',
source2: 'my value 2',
value1: hash({
prop1: 'source1',
prop2: hash({
prop: 'source2'
})
}), // { prop1: 'my value 1', prop2: { prop: 'my value 2' } }
// you can also build the hash using property key names
value2: hash('source1', 'source2'), // { source1: 'my value 1', source2: 'my value 2' }
// or you can mix and match, the result will be merged
value3: hash('source1', { prop2: 'source2' }) // { source1: 'my value 1', prop2: 'my value 2' }wraps instanceof operator
key1: {},
key2: false,
key3: '',
value1: instanceOf('key1', Object), // true
value2: instanceOf(or('key2', 'key3'), String) // truelike Ember.computed.lt, but uses dependent properties on both sides
and allows composing
source1: 1,
source2: 2,
source3: 1,
value1: lt('source1', 'source2'), // true
value2: lt('source1', 'source3'), // false
value3: lt('source2', 'source3') // falselike Ember.computed.lte, but uses dependent properties on both sides
and allows composing
source1: 1,
source2: 2,
source3: 1,
value1: lte('source1', 'source2'), // true
value2: lte('source1', 'source3'), // true
value3: lte('source2', 'source3') // falseexposes all Math functions
source1: 2.2,
source2: 2.7,
value1: math.ceil('source1'), // 3
value2: math.floor(sum('source1', 'source2')) // 4the modulus operator
number1: 123,
number2: 45,
example: mod('number1', 'number2'), // 33
composingExample: mod(sum('number1', 'number2'), 39) // 12alias for product
same as Ember.computed.not, but allows composing
source1: true,
source2: false,
value1: not('source1'), // false
value2: not(and('source1', 'source2')) // truesame as Ember.computed.or, but allows composing
source1: true,
source2: false,
source3: true,
value1: or('source1', 'source2', 'source3'), // true
value2: or(not('source1'), 'source2', not('source3')) // falsewraps parseFloat, allows composing
string1: '12.34',
string2: '12',
string3: '34',
example: parseFloat('string1'), // 12.34
composingExample: parseFloat(tag`${'string2'}.${'string3'}`) // 12.34wraps parseInt, allows composing
string: '123',
example: parseInt('string'), // 123
composingExample: parseInt(substr('string', 1), 8) // 19multiplies numbers
source1: 1,
source2: 2,
source3: 3,
value1: product('source1', 'source2', 'source3'), // 6
value2: product('source2', product('source2', 'source3')) // 6combines promises using RSVP.all
promise1: computed(function() {
return RSVP.resolve('value1');
}),
promise2: computed(function() {
return RSVP.resolve('value2');
}),
promise: promise.all('promise1', 'promise2') // resolves to ['value1', 'value2']wraps a promise in the equivalent of DS.PromiseArray (ArrayProxy and PromiseProxyMixin)
productsPromise: computed(function() {
return this.store.findAll('product');
}),
products: promise.array('productsPromise')can also wrap a computed property
products: promise.array(computed(function() {
return this.store.findAll('product');
}))combines promises using RSVP.hash
promise1: computed(function() {
return RSVP.resolve('value1');
}),
promise2: computed(function() {
return RSVP.resolve('value2');
}),
promise: promise.hash('promise1', 'promise2') // resolves to { promise1: 'value1', promise2: 'value2' }wraps a promise in the equivalent of DS.PromiseObject (ObjectProxy and PromiseProxyMixin)
productPromise: computed(function() {
return this.store.findRecord('product', 1);
}),
product: promise.object('productPromise')can also wrap a computed property
product: promise.object(computed(function() {
return this.store.findRecord('product', 1);
}))wraps a value in an RSVP.resolve
key1: 'my value',
promise1: promise.resolve('key1'), // a resolved promise if you need it
key2: computed(function() {
return this.store.findRecord('user');
}),
promise2: promise.resolve(conditional('someBool', 'key1', 'key2')) // resolve an object if you don't know if it is a promise or notdivides numbers
source1: 3,
source2: 2,
source3: 1,
value1: quotient('source1', 'source2', 'source3'), // 1.5
value2: quotient('source2', quotient('source2', 'source3')) // 1.5wraps Ember.String.camelize, allows composing
originalValue: 'test-string',
newValue: string.camelize('originalValue') // 'testString'wraps Ember.String.capitalize, allows composing
originalValue: 'test string',
newValue: string.capitalize('originalValue') // 'Test string'wraps Ember.String.classify, allows composing
originalValue: 'test string',
newValue: string.classify('originalValue') // 'TestString'wraps Ember.String.dasherize, allows composing
originalValue: 'TestString',
newValue: string.dasherize('originalValue') // 'test-string'wraps Ember.String.decamelize, allows composing
originalValue: 'TestString',
newValue: string.decamelize('originalValue') // 'test_string'wraps Ember.String.htmlSafe, allows composing
originalValue: '<input>',
newValue: string.htmlSafe('originalValue') // will not be escapedwraps String.prototype.indexOf(), allows composing
string: '121',
value: '1',
example: string.indexOf('string', 'value'), // 0
composingExample: string.indexOf(substr('string', 1), raw('1')) // 1wraps Ember.String.isHTMLSafe, allows composing
source1: '<input>',
source2: string.htmlSafe('<input>'),
value1: string.isHtmlSafe('source1'), // false
value2: string.isHtmlSafe('source2') // truewraps String.prototype.lastIndexOf(), allows composing
string: '121',
value: '1',
example: string.lastIndexOf('string', 'value'), // 2
composingExample: string.lastIndexOf(substr('string', 0, 2), raw('1')) // 0wraps String.prototype.length, allows composing
string1: 'abc',
string2: 'xyz',
example: string.length('string1'), // 3
composingExample: string.length(tag`${'string1'}${'string2'}`) // 6wraps String.prototype.replace, allows composing
string: 'abc',
substr: 'bc',
newSubstr: 'cb',
value1: string.replace('string', 'substr', 'newSubstr'), // 'acb'
value2: string.replace('source', 'substr', string.toUpper('newSubstr')) // 'aCB'wraps String.prototype.split, allows composing
source: 'val1,val2',
key: ',',
value1: string.split('source', 'key'), // ['val1', 'val2']
value2: string.split('source', raw(',')) // ['val1', 'val2']wraps String.prototype.substr(), allows composing
string1: 'abcxyz',
string2: 'abc',
string3: 'xyz',
example: string.substr('string1', 2, 2), // 'cx'
composingExample: string.substr(tag`${'string2'}${'string3'}`, 2, 2) // 'cx'wraps String.prototype.substring(), allows composing
string1: 'abcxyz',
string2: 'abc',
string3: 'xyz',
example: string.substring('string1', 2, 4), // 'cx'
composingExample: string.substring(tag`${'string2'}${'string3'}`, 2, 4) // 'cx'wraps String.prototype.toLowerCase(), allows composing
originalValue: 'TestString',
newValue: string.toLower('originalValue') // 'teststring'wraps String.prototype.toUpperCase(), allows composing
originalValue: 'TestString',
newValue: string.toUpper('originalValue') // 'TESTSTRING'wraps Ember.String.underscore, allows composing
originalValue: 'TestString',
newValue: string.underscore('originalValue') // 'test_string'alias for difference
adds numbers
source1: 1,
source2: 2,
source3: 3,
value1: sum('source1', 'source2', 'source3'), // 6
value2: sum('source2', sum('source2', 'source3')) // 6use a tagged template literal as a computed macro, allows composing
source: 'two',
value1: tag`one ${'source'} three`, // 'one two three'
value2: tag`one ${toUpper('source')} three` // 'one TWO three'wraps typeOf operator
key1: {},
key2: false,
key3: '',
value1: typeOf('key1'), // 'object'
value2: typeOf(or('key2', 'key3')) // 'string'