monocle-decorators
v2.1.7
Published
Classy decorators
Downloads
25
Readme
Tiny library with most common/useful decorators. Think of it as underscore.js, but with class.
Table of contents
- Decorators for classes
- Decorators for instance methods/properties
Installation
npm install monocle-decorators --save
Decorators for classes
@_o.mixin
Extends decorated class with all enumerable properties from ArrayOfMixins
passed as argument.
💡 Tip
Prefer composability over inheritance.
As decorator @_o.mixin(ArrayOfMixins)
import _o from 'monocle-decorators'
class Walkable {
walk() {
const speed = 5
this.distanceFromOrigin += speed
}
}
class Runnable {
run() {
const speed = 10
this.distanceFromOrigin += speed
}
}
@_o.mixin([Walkable, Runnable])
class Thing {
constructor() {
this.distanceFromOrigin = 0
}
}
const foo = new Thing()
foo.walk() // method from Walkable class
foo.run() // method from Runnable class
foo.distanceFromOrigin // => 15
💡 Tip
Array of mixins can also be an array of objects, if you don't feel classy.
import _o from 'monocle-decorators'
const walkable = {
walk() {
const speed = 5
this.distanceFromOrigin += speed
}
}
const runnable = {
run() {
const speed = 10
this.distanceFromOrigin += speed
}
}
@_o.mixin([walkable, runnable])
class Thing {
constructor() {
this.distanceFromOrigin = 0
}
}
const foo = new Thing()
foo.walk() // method from Walkable class
foo.run() // method from Runnable class
foo.distanceFromOrigin // => 15
As function _o.mixin(TargetClass, ArrayOfMixins)
import _o from 'monocle-decorators'
_o.mixin(Thing, [Walkable, Runnable])
const foo = new Thing()
foo.walk() // method from Walkable class
foo.run() // method from Runnable class
foo.distanceFromOrigin // => 15
@_o.freeze
Freezes every new instance of decorated class.
A frozen object prevents:
- new properties from being added to it
- existing properties from being removed
- existing properties, or their enumerability, configurability, or writability, from being changed
💡 Tip
@_o.seal
and@_o.freeze
makes it easier to work with objects, since you have to declare beforehand all properties and methods an object has and will have in it's lifecycle, concentrating in one single place the definition of the object structure.
As decorator @_o.freeze
import _o from 'monocle-decorators'
@_o.freeze
class Dummy {
constructor() {
this.a = 1
this.b = 2
}
}
const foo = new Dummy()
foo.c = 3 // throws Error
As function _o.freeze(TargetClass)
import _o from 'monocle-decorators'
const DummyFrozen = _o.freeze(Dummy)
const foo = new DummyFrozen()
foo.c = 3 // throws Error
@_o.seal
Seals every new instance of decorated class.
A sealed object prevents:
- new properties from being added to it
- marking all existing properties as non-configurable
Values of present properties can still be changed as long as they are writable.
💡 Tip
@_o.seal
and@_o.freeze
makes it easier to work with objects, since you have to declare beforehand all properties and methods an object has and will have in it's lifecycle, concentrating in one single place the definition of the object structure.
As decorator @_o.seal
import _o from 'monocle-decorators'
@_o.seal
class Dummy {
constructor() {
this.a = 1
this.b = 2
}
}
const foo = new Dummy()
foo.c = 3 // throws Error
As function _o.freeze(TargetClass)
import _o from 'monocle-decorators'
const DummySealed = _o.seal(Dummy)
foo.c = 3 // throws Error
Decorators for instance methods/properties
@_o.bind
Autobind the decorated method to it's owner, so this
will always refer to the
object that owns the method.
💡 Tip
This decorator avoids the verbose
<button onClick={this.handleClick.bind(this)}></button>
idiom, using only<button onClick={this.handleClick}></button>
.
As decorator @_o.bind
import _o from 'monocle-decorators'
class Dummy {
@_o.bind
handleClick() {
// ...
}
render() {
return (
<div onClick={this.handleClick}>Lorem ipsum</div>
)
}
}
As function _o.bind(targetMethod, context)
import _o from 'monocle-decorators'
const obj = {
handleClick() {
// ...
}
}
_o.bind(obj.handleClick, obj)
element.addEventListener('click', obj.handleClick)
@_o.debounce
Debounces decorated method, which will postpone its execution until after
wait
milliseconds have elapsed since the last time it was invoked.
💡 Tip
Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.
As decorator @_o.debounce(wait)
import _o from 'monocle-decorators'
class Dummy {
@_o.debounce(150)
onScroll() {
// ...
}
}
As function _o.debounce(targetMethod, wait)
import _o from 'monocle-decorators'
const onScroll = _o.debounce(() => {
// ...
}, 150)
@_o.throttle
Throttles decorated method, that, when invoked repeatedly, will only actually
call the original function at most once per every wait
milliseconds.
💡 Tip
Useful for rate-limiting events that occur faster than you can keep up with.
As decorator @_o.throttle(wait)
import _o from 'monocle-decorators'
class Dummy {
@_o.throttle(150)
onScroll() {
// ...
}
}
💡 Tip
To have the same behavior as a hypothetical
@_o.once
, use@_o.throttle(Infinity)
.
As function _o.throttle(targetMethod, wait)
import _o from 'monocle-decorators'
const onScroll = _o.throttle(() => {
// ...
}, 150)
@_o.deprecate
Calls opts.logger
with msg
as depreciation message.
By default opts.logger
is console.warn
and msg
is ${target.constructor.name}.${key} is deprecated.
. Both are optional.
As decorator @_o.deprecate(msg, { logger })
import _o from 'monocle-decorators'
class Dummy {
a() {
// ...
}
@_o.deprecate('`dummy.b` is deprecated. Use `dummy.a`')
b() {
// ...
}
}
As function _o.deprecate(target, key, msg, { logger })
import _o from 'monocle-decorators'
const dummy = _o.deprecate({
a() {},
b() {}
}, 'b', '`dummy.b` is deprecated. Use `dummy.a`')
Why monocle?
Because you import it as _o
and use it as @_o
.
Classy decorators.
Reference
- Icon by Ben Iconator from The Noun Prokect
Sponsor
If you found this library useful and are willing to donate, consider
transferring some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY
.
caiogondim.com · GitHub @caiogondim · Twitter @caio_gondim