adornment
v0.0.3
Published
An useful ES7 class decorator lib.
Downloads
10
Maintainers
Readme
Adornment.js
An useful ES7 class decorator lib.
Install
npm install adornment --save
Menu
Descriptor Decorators
Class Decorators
Method Decorators
- bindWith(target: Object)
- memoize
- curry
- curryRight
- defer
- delay(wait: Number)
- throttle(wait: Number)
- debounce
- once
- before(times: Number)
- after(times: Number)
- argWith(func: Function)
Dev Decorators
React Component Decorators
Usage
Descriptor Decorators
writable(writable: Bool)
class A {
@writable(false)
foo() {}
bar() {}
}
var a = new A()
a.foo = 123 // throw error
notice: Can not use @writable
with ES7 class props, that will cause initial fail.
enumerable(enumerable: Bool)
class A {
@enumerable(true)
foo() {}
@enumerable(false)
bar() {}
@enumerable(true)
yo() {}
}
var a = new A()
for(var key in a) {
console.log(key)
}
// => 'foo' 'yo'
configurable(Bool)
class A {
@configurable(false)
foo() {}
}
delete A.prototype.foo // throw Error
Class Decorators
decorate(methods: Array<Function>)
Decorate methods on your class.
function bar() {
return 'barrrr'
}
@decorate([bar])
class A {
foo(a, b) {
return a + b
}
}
var a = new A()
a.bar() // => 'barrrr'
autoBind
@autoBind
class A {
foo() {
return this
}
}
var a = new A()
var _foo = a.foo
_foo() === a // true
NOTICE: @autoBind
should put AFTER ALL other decorators. For example:
// this will NOT work
@trace
class A {
@autoBind
@defer
foo() {
return this
}
bar() {
return this
}
}
// works fine
@trace
@autoBind
class A {
@defer
foo() {
return this
}
bar() {
return this
}
}
Method Decorators
bindWith(target: Object)
var q = {qq: 123}
class A {
@bindWith(q)
foo() {
return this
}
}
var a = new A()
var _foo = a.foo
console.log(_foo() === q) // true
memoize
class A {
addCount = 0
@memoize
add(a, b) {
this.addCount ++
return a + b
}
}
var a = new A()
a.add(1, 2) // => 3
a.add(1, 2) // => 3
a.add(1, 2) // => 3
console.log(a.addCount) // => 1
a.add(2, 2) // => 4
console.log(a.addCount) // => 2
curry
WIP
curryRight
WIP
defer
class A {
@defer
foo() {
console.log('foo')
}
}
var a = new A()
a.foo()
console.log('bar')
/*
=>
bar
foo
*/
delay(wait: Number)
class A {
@delay(10)
foo() {
console.log('foo')
}
}
var a = new A()
a.foo()
console.log('bar')
/*
=>
bar
foo
*/
throttle(wait: Number)
class A {
fooCount = 0
@throttle(100)
foo() {
this.fooCount ++
}
}
var a = new A()
a.foo()
a.foo()
a.foo()
console.log(a.fooCount) // => 1
setTimeout(()=> {
a.foo()
console.log(a.fooCount) // => 2
}, 150)
debounce(wait: Number)
class A {
fooCount = 0
@debounce(100)
foo() {
this.fooCount ++
}
}
var a = new A()
a.foo()
a.foo()
console.log(a.fooCount) // => 0
setTimeout(()=> {
console.log(a.fooCount) // => 1
}, 150)
once
class A {
fooCount = 0
@once
foo(a, b) {
this.fooCount ++
return a + b
}
}
var a = new A()
console.log(a.foo(1, 1)) // => 2
// Always return null after triggered once.
console.log(a.foo(1, 1)) // => null
console.log(a.foo(1, 1)) // => null
before(times)
class A {
@before(3)
foo(a, b) {
return a + b
}
}
var a = new A()
a.foo(1, 2) // => 3
a.foo(1, 2) // => 3
a.foo(1, 2) // => null
after(times)
class A {
@after(3)
foo(a, b) {
return a + b
}
}
var a = new A()
a.foo(1, 2) // => null
a.foo(1, 2) // => null
a.foo(1, 2) // => null
a.foo(1, 2) // => 3
argWith(func: Function)
class A {
@argWith(function(...args) {
if(typeof args[0] === "object" && args.length === 1) {
let {a, b} = args[0]
return [a,b]
}
return args
})
foo(a, b) {
return a + b
}
}
var a = new A()
a.foo(1,2) // => 3
a.foo({a:1, b:2}) // => 3
Dev Decorators
trace({logger, blackList, whiteList, perf})
Log function input, output and cost time.
logger: Function
: You can use cust logger like debug, default useconsole.log
class A {
@trace({
perf: true
})
add(a, b) {
console.log('adding')
return a + b
}
}
var a = new A()
a.add(1,2)
/*
=>
@trace: add with args: [1, 2] this: a
adding
@trace: add return 3 cost 0.012345678 ms.
*/
with class:
@trace({
blackList: ['foo'],
perf: true,
})
class A {
foo(bar) {
console.log('bar')
}
add(a, b) {
console.log('adding')
return a + b
}
}
var a = new A()
a.add(1,2)
a.bar()
/*
=>
@trace: add with args: [1, 2] this: a
adding
@trace: add return 3 cost 0.012345678 ms.
bar
*/
deprecated(hint)
class A {
@deprecated(`Please use 'newAdd()'`)
add(a, b) {
return a + b
}
newAdd() {
}
}
var a = new A()
console.log(a.add(1,2))
/*
=>
Warning: add is deprecated. Please use 'newAdd()'
3
*/
React Component Decorators
traceComponent({logger, perf})
Trace the React component lifecycle. Same as @trace
with
whiteList: [
'getInitialState',
'getDefaultProps',
'componentWillMount',
'componentDidMount',
'componentWillReceiveProps',
'shouldComponentUpdate',
'componentWillUpdate',
'componentDidUpdate',
'componentWillUnmount',
'render'
]
@traceComponent
class A extends React.Component {
foo() {
console.log('foo')
}
shouldComponentUpdate(nextProps, nextState) {
return true
}
}
/*
=>
@trace: shouldComponentUpdate with args: [{}, {}] this: ReactElement
@trace: shouldComponentUpdate return true cost 0.012345678 ms.
*/
reactMixin(Mixin)
WIP
Test
npm test
License
MIT