ember-awesome-macros
A collection of Ember computed macros. All the macros are composable, meaning you can nest them to your heart's content, like so:
result: // lisp much?
Arguments to macros can be:
- A string, in which case it references the name of a property whose value is used for the calculation
- A non-string value, in which case it is used as such
- A raw macro, which lets you use a string as the value without referencing a property
- Another macro
Examples of these different usages:
source1: 'my value'source2: 2 value1: // falsevalue2: // truevalue3: // truevalue4: // true
Three essential primitive macros are re-exported from a different addon: ember-macro-helpers
- computed makes composing macros easier
- raw allows you to escape string literals to be used in macros
- writable makes setting macros possible
;;;// or;
If you have any opinions or want a new macro added, just ask! Or feel free to submit a pull request.
Introduction Video
Compatibility
- Ember.js v3.8 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
Installation
ember install ember-awesome-macros
Usage
;// or;
Macro list
Array
array.any
collect
array.compact
array.concat
array.every
array.filterBy
array.filter
array.findBy
array.find
array.first
array.groupBy
array.includes
array.indexOf
array.invoke
array.isAny
array.isEvery
array.join
array.lastIndexOf
array.last
array.length
array.mapBy
array.map
array.objectAt
array.reduce
array.reverse
array.rejectBy
array.slice
array.sortBy
array.sort
array.uniqBy
array.uniq
array.without
Boolean
Comparison
Number
Object
Math
Promise
String
string.camelize
string.capitalize
string.classify
string.dasherize
string.decamelize
string.escapeExpression
string.htmlSafe
string.indexOf
string.isHtmlSafe
string.lastIndexOf
string.length
string.match
string.replace
string.split
string.substr
string.substring
tag
string.titleize
string.toLower
string.toUpper
string.trim
string.underscore
Custom macros
See [https://github.com/kellyselden/ember-macro-helpers#custom-macros].
Details
add
alias for sum
and
same as Ember.computed.and
, but allows composing
source1: falsesource2: truesource3: falsevalue1: // falsevalue2: // true
array.any
wraps Ember.Array.any
, allows composing
array: Embervalue1: array // truevalue2: array // false
array.compact
wraps Ember.Array.compact
, allows composing
array: Embervalue: arraycompact'array' // [1, 2]
array.concat
wraps Array.prototype.concat()
, allows composing
array1: Emberarray2: Emberstring: '3,4'example: array // [1, 2, 3, 4]composingExample: array // [1, 2, 3, 4]
array.every
wraps Ember.Array.every
, allows composing
array: Embervalue1: array // truevalue2: array // false
array.filterBy
wraps Ember.Array.filterBy
, allows composing
array: Emberkey: 'test'referenceValue: 1value1: array // [{ test: 2 }]value2: array // [{ test: 1 }]
array.filter
wraps Ember.Array.filter
, allows composing
array: Embervalue: array // [{ test: 2 }]
array.findBy
wraps Ember.Array.findBy
, allows composing
array: Emberkey: 'test'referenceValue: 1value1: array // { test: 2 }value2: array // { test: 1 }
array.find
wraps Ember.Array.find
, allows composing
array: Embervalue: array // { test: 2 }
array.first
get the first item of an array
array: '1' '2'string: '1, 2'example: array // '1'composingExample: array // '1'
array.groupBy
allows to group an array of objects by key with an optional comparator
array: Emberkey: 'test'value: array/* [ { key: 'test', value: 1, items: [{ test: 1 , name: 'foo' }, { test: 1 , name: 'bar' }] }, { key: 'test', value: 2, items: [{ test: 2 , name: 'foo' }] } ]*/
The comparator is required if grouping by a key representing a complex object like Date
// Given two different objects that represent the same info// today1 = new Date();// today2 = new Date();// randomDate = new Date(2017, 1, 1);array: Emberkey: 'date' // without comparatorvalue1: array/* [ { key: 'date', value: today1, items: [{ test: 1 , date: today1 }] }, { key: 'date', value: today2, items: [{ test: 2 , date: today2 }] }, { key: 'date', value: randomDate, items: [{ test: 1 , date: randomDate }] } ]*/ // with comparatorvalue2: array/* [ { key: 'date', value: today1, items: [{ test: 1 , date: today1 }, { test: 2 , date: today2 }] }, { key: 'date', value: randomDate, items: [{ test: 1 , date: randomDate }] } ]*/
array.includes
implements Array.prototype.includes()
, allows composing
array: Embersource1: 'my value 2'source2: 'my value 3'value1: array // truevalue2: array // falsevalue3: array // true
array.indexOf
wraps Array.prototype.indexOf()
, allows composing
array: 2 5 9 2referenceValue: 9value1: array // 0value2: array // 3value3: array // 2
array.invoke
wraps Ember.Array.invoke()
, allows composing
array: { return 'bar-' + arg; }value1: array // ['bar-baz']value2: array // ['bar-hello']value3: array // ['bar-']arg: 'hello'
array.isAny
wraps Ember.Enumerable.isAny
, allows composing
array: Emberkey: 'test'value1: 2value2: 3result1: array // trueresult2: array // false
array.isEvery
wraps Ember.Enumerable.isEvery
, allows composing
array1: Emberkey: 'test'value1: 1value2: 2result1: array // trueresult2: array // false
array.join
wraps Array.prototype.join()
, allows composing
array: Emberseparator: ', 'value1: array // '1, 2'value2: array // '1, 2'
array.lastIndexOf
wraps Array.prototype.lastIndexOf()
, allows composing
array: 2 5 9 2referenceValue: 9value1: array // 3value2: array // 0value3: array // 2
array.last
get the last item of an array
array: '1' '2'string: '1, 2'example: array // '2'composingExample: array // '2'
array.length
wraps Array.prototype.length
, allows composing
array: Emberstring: '1,2'example: arraylength'array' // 2composingExample: arraylength // 2
array.mapBy
wraps Ember.Array.mapBy
, allows composing
array: Emberkey: 'test'value: array // [1, 2]
array.map
wraps Ember.Array.map
, allows composing
array: Embervalue: array // [1, 2]
array.objectAt
wraps Ember.Array.objectAt
, allows composing
array: Embersource1: 0source2: 1value1: array // 'my value'value2: array // undefinedvalue3: array // 'my value'
array.reduce
wraps Array.prototype.reduce()
, allows composing
Your initial value must be a factory function if you plan to mutate it in the reduce, otherwise it would continually mutate the same object every recalculation. You can still pass an object, just be careful not to mutate it.
array: 'one' 'two'value1: array // { one: 0, two: 1 } string: 'one, two'value2: array // ['one', 0, 'two', 1]
array.rejectBy
wraps Ember.Array.rejectBy
, allows composing
array: Emberkey: 'test'value: array // [{ test: 1 }]
array.reverse
wraps Array.prototype.reverse()
(calls slice() first as to not mutate), allows composing
array: 1 2 3value1: array // [3, 2, 1]value2: array // [1, 2, 3]
array.slice
wraps Array.prototype.slice()
, allows composing
array: 1 2 3value1: array // [2, 3]value2: array // [3]
array.sortBy
sorts the given array of objects by key
array1: Embervalue1: array // [{ key: 'abc' }, { key: 'xyz' }]value2: array // [{ key: 'xyz' }, { key: 'abc' }]
array.sort
combines the functionality of both Array.prototype.sort()
and Ember.computed.sort
array1: Emberarray2: Embervalue1: array // ['abc', 'xyz']value2: array // [{ key: 'xyz' }, { key: 'abc' }]value3: array // [{ key: 'xyz' }, { key: 'abc' }]
array.uniqBy
wraps Ember.Array.uniqBy
, allows composing
array: Emberkey: 'test'value: array // [{ test: 1 }, { test: 2 }]
array.uniq
wraps Ember.Array.uniq
, allows composing
array: Embervalue: array // [1, 2]
array.without
wraps Ember.Enumerable.without
, allows composing
array: EmberreferenceValue: 3value1: array // [1, 2]value2: array // [1, 3]value3: array // [1, 3]
bool
same as Ember.computed.bool
, but allows composing
source1: nullsource2: 'my value 1'source3: source: 'source3' value1: // falsevalue2: // truevalue3: // true
collect
same as Ember.computed.collect
, but allows composing
source1: 'my value 1'source2: 'my value 2'value: // ['my value 1', ['my value 2']]
conditional
implements the ternary operator, allows composing
condition1: truecondition2: falseexpr1: 'my value 1'expr2: 'my value 2'value1: // 'my value 1'value2: // 'my value 2'value3: // 'my value 1'
defaultTrue
true if source is undefined
source1: undefinedsource2: falsesource3: 'my value'value1: // truevalue2: // falsevalue3: // 'my value'
difference
subtracts numbers
source1: 3source2: 2source3: 1value1: // 0value2: // 2
divide
alias for quotient
eq
alias for equal
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: // falsevalue2: // truevalue3: // false
getBy
get a variable property name from an object
key: 'modelProperty'model: modelProperty: 'my value'value1: // 'my value'value2: // 'my value'
gt
like Ember.computed.gt
, but uses dependent properties on both sides
and allows composing
source1: 1source2: 2source3: 1value1: // falsevalue2: // falsevalue3: // true
gte
like Ember.computed.gte
, but uses dependent properties on both sides
and allows composing
source1: 1source2: 2source3: 1value1: // falsevalue2: // truevalue3: // true
hash
build a hash out of computed properties, allows composing
source1: 'my value 1'source2: 'my value 2' value1: // { prop1: 'my value 1', prop2: { prop: 'my value 2' } } // you can also build the hash using property key namesvalue2: // { source1: 'my value 1', source2: 'my value 2' } // or you can mix and match, the result will be mergedvalue3: // { source1: 'my value 1', prop2: 'my value 2' }
isEmpty
wraps Ember.isEmpty
sourceString1: ''sourceString2: 'foobar' sourceArray1: sourceArray2: 1 2 3 sourceObject1: {}sourceObject2: size: 0 valueString1: // truevalueString2: // false valueArray1: // truevalueArray2: // false valueObject1: // falsevalueObject2: // true valueObject1: // false valueObject1: // true
instanceOf
wraps instanceof
operator
key1: {}key2: falsekey3: ''value1: // truevalue2: // true
lt
like Ember.computed.lt
, but uses dependent properties on both sides
and allows composing
source1: 1source2: 2source3: 1value1: // truevalue2: // falsevalue3: // false
lte
like Ember.computed.lte
, but uses dependent properties on both sides
and allows composing
source1: 1source2: 2source3: 1value1: // truevalue2: // truevalue3: // false
math
exposes all Math
functions
source1: 22source2: 27value1: math // 3value2: math // 4
mod
the modulus operator
number1: 123number2: 45example: // 33composingExample: // 12
multiply
alias for product
nand
applies logical NAND
operation
sourceTrue: truesourceFalse: false value1: // truevalue2: // truevalue3: // false
neq
alias for notEqual
nor
applies logical NOR
operation
sourceTrue: truesourceFalse: false value1: // truevalue2: // falsevalue3: // false
not
same as Ember.computed.not
, but allows composing
source1: truesource2: falsevalue1: // falsevalue2: // true
notEmpty
negation of isEmpty
sourceString1: ''sourceString2: foobar sourceArray1: sourceArray2: 1 2 3 sourceObject1: {}sourceObject2: size: 0 valueString1: // falsevalueString2: // true valueArray1: // falsevalueArray2: // true valueObject1: // truevalueObject2: // false valueObject1: // true valueObject1: // false
notEqual
the inverse of equal
, allows composing
source1: 'my value'source2: 'my other value'source3: 'my value'value1: // truevalue2: // falsevalue3: // true
number
wraps Number
, allows composing
prop: trueexample: // 1composingExample: // 9
or
same as Ember.computed.or
, but allows composing
source1: truesource2: falsesource3: truevalue1: // truevalue2: // false
parseFloat
wraps parseFloat
, allows composing
string1: '12.34'string2: '12'string3: '34'example: // 12.34composingExample: // 12.34
parseInt
wraps parseInt
, allows composing
string: '123'example: // 123composingExample: // 19
product
multiplies numbers
source1: 1source2: 2source3: 3value1: // 6value2: // 6
promise.all
combines promises using RSVP.all
promise1: promise2: promise: promiseall'promise1' 'promise2' // resolves to ['value1', 'value2']
promise.array
wraps a promise in the equivalent of DS.PromiseArray
(ArrayProxy
and PromiseProxyMixin
)
productsPromise: products: promise
can also wrap a computed property
products: promise
promise.hash
combines promises using RSVP.hash
promise1: promise2: promise: promisehash'promise1' 'promise2' // resolves to { promise1: 'value1', promise2: 'value2' }
promise.object
wraps a promise in the equivalent of DS.PromiseObject
(ObjectProxy
and PromiseProxyMixin
)
productPromise: product: promiseobject'productPromise'
can also wrap a computed property
product: promiseobject
promise.resolve
wraps a value in an RSVP.resolve
key1: 'my value'promise1: promise // a resolved promise if you need it key2: promise2: promise // resolve an object if you don't know if it is a promise or not
promise.then
calls .then()
on a promise and then .get
on the result
key: 'firstName'userPromise: firstName: promise // 'Mary'
quotient
divides numbers
source1: 3source2: 2source3: 1value1: // 1.5value2: // 1.5
string.camelize
wraps Ember.String.camelize
, allows composing
originalValue: 'test-string'newValue: string // 'testString'
string.capitalize
wraps Ember.String.capitalize
, allows composing
originalValue: 'test string'newValue: string // 'Test string'
string.classify
wraps Ember.String.classify
, allows composing
originalValue: 'test string'newValue: string // 'TestString'
string.dasherize
wraps Ember.String.dasherize
, allows composing
originalValue: 'TestString'newValue: string // 'test-string'
string.decamelize
wraps Ember.String.decamelize
, allows composing
originalValue: 'TestString'newValue: string // 'test_string'
string.escapeExpression
wraps Ember.Handlebars.Utils.escapeExpression
, allows composing
originalValue: '<input>'newValue: string // '<input>'
string.htmlSafe
wraps Ember.String.htmlSafe
, allows composing
originalValue: '<input>'newValue: string // will not be escaped
string.indexOf
wraps String.prototype.indexOf()
, allows composing
string: '121'value: '1'example: string // 0composingExample: string // 1
string.isHtmlSafe
wraps Ember.String.isHTMLSafe
, allows composing
source1: '<input>'source2: stringvalue1: string // falsevalue2: string // true
string.lastIndexOf
wraps String.prototype.lastIndexOf()
, allows composing
string: '121'value: '1'example: string // 2composingExample: string // 0
string.length
wraps String.prototype.length
, allows composing
string1: 'abc'string2: 'xyz'example: stringlength'string1' // 3composingExample: stringlengthtag`` // 6
string.match
wraps String.prototype.match
, allows composing
string1: 'abc'string2: 'xyz'regex1: /abc/regex2: /xyz/example: string // ['abc']example: string // nullcomposingExample: string // ['xyz']
string.replace
wraps String.prototype.replace
, allows composing
string: 'abc'substr: 'bc'newSubstr: 'cb'value1: string // 'acb'value2: string // 'aCB'
string.split
wraps String.prototype.split
, allows composing
source: 'val1,val2'key: ','value1: string // ['val1', 'val2']value2: string // ['val1', 'val2']
string.substr
wraps String.prototype.substr()
, allows composing
string1: 'abcxyz'string2: 'abc'string3: 'xyz'example: string // 'cx'composingExample: string // 'cx'
string.substring
wraps String.prototype.substring()
, allows composing
string1: 'abcxyz'string2: 'abc'string3: 'xyz'example: string // 'cx'composingExample: string // 'cx'
string.titleize
capitalizes words, allows composing
originalValue: 'james mcAvoy'newValue: string // 'James Mcavoy'
string.toLower
wraps String.prototype.toLowerCase()
, allows composing
originalValue: 'TestString'newValue: string // 'teststring'
string.toUpper
wraps String.prototype.toUpperCase()
, allows composing
originalValue: 'TestString'newValue: string // 'TESTSTRING'
string.trim
wraps String.prototype.trim()
, allows composing
originalValue: ' TestString 'newValue: string // 'TestString'
string.underscore
wraps Ember.String.underscore
, allows composing
originalValue: 'TestString'newValue: string // 'test_string'
subtract
alias for difference
sum
adds numbers
source1: 1source2: 2source3: 3value1: // 6value2: // 6
tag
use a tagged template literal as a computed macro, allows composing
source: 'two'value1: tag`one three` // 'one two three'value2: tag`one three` // 'one TWO three'
toStr
calls toString
with args on whatever you provide
key1: {}key2: 253key3: 254value1: // '[object Object]'value2: // 'fe'
toString
alias for toStr
The toString
name conflicts with window.toString
and breaks Babel, which means you need to do something like this:
;
That's why we provide the toStr
alias.
typeOf
wraps typeOf
operator
key1: {}key2: falsekey3: ''value1: // 'object'value2: // 'string'
unless
macro version of {{unless}}
and the inverse of conditional
, allows composing
condition1: falsecondition2: trueexpr1: 'my value 1'expr2: 'my value 2'value1: // 'my value 1'value2: // 'my value 2'value3: // 'my value 1'
xnor
applies logical XNOR
operation
sourceTrue: truesourceFalse: false value1: // truevalue2: // falsevalue3: // true
xor
applies logical XOR
operation
sourceTrue: truesourceFalse: false value1: // falsevalue2: // truevalue3: // false
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.