Tiny library with most common/useful decorators. Think of it as underscore.js, but with class.

• Decorators for classes
  • freeze
  • mixin
  • seal
• Decorators for instance methods
  • bind
  • debounce
  • throttle

npm install monocle-decorators --save

Extends decorated class with all enumerable properties from ArrayOfMixins passed as argument.

💡 Tip

Prefer composability over inheritance.

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

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

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.

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

import _o from 'monocle-decorators'

const DummyFrozen = _o.freeze(Dummy)
const foo = new DummyFrozen()
foo.c = 3 // throws Error

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.

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

import _o from 'monocle-decorators'

const DummySealed = _o.seal(Dummy)
foo.c = 3 // throws Error

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>.

import _o from 'monocle-decorators'

class Dummy {
  @_o.bind
  handleClick() {
    // ...
  }

  render() {
    return (
      <div onClick={this.handleClick}>Lorem ipsum</div>
    )
  }
}

import _o from 'monocle-decorators'

const obj = {
  handleClick() {
    // ...
  }
}

_o.bind(obj.handleClick, obj)

element.addEventListener('click', obj.handleClick)

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.

import _o from 'monocle-decorators'

class Dummy {
  @_o.debounce(150)
  onScroll() {
    // ...
  }
}

import _o from 'monocle-decorators'

const onScroll = _o.debounce(() => {
  // ...
}, 150)

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.

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).

import _o from 'monocle-decorators'

const onScroll = _o.throttle(() => {
  // ...
}, 150)

Because you import it as _o and use it as @_o. Classy decorators.

• Icon by Ben Iconator from The Noun Prokect

If you found this library useful and are willing to donate, consider transferring some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY.

caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim