lodash-decorators

lodash-decorators

ES7 Decorators for lodash functions.

• Install
• Usage
  • With Arguments
    • Example
  • Without Arguments
    • Example
  • Partials
    • Example
  • Composition
    • Example
  • Instance Decorators
  • Getters and Setters
    • Example
  • Bind
    • Example
    • Example

Install

npm install --save lodash-decorators

Usage

For more in depth documentation please visit Lodash

With Arguments

Many of the lodash decorators can contain arguments.

• debounce
• throttle
• memoize
• after
• before
• ary
• curry
• curryRight
• restParam
• partial
• partialRight
• wrap
• compose
• flow
• flowRight
• backflow
• delay
• defer
• bind

Example

import { after, debounce, memoize, curry } from 'lodash-decorators'

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @after(3)
  @debounce(100)
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }

  @curry(2)
  @memoize()
  doSomeHeavyProcessing(arg1, arg2) {
  }
}

Without Arguments

Some decorators don't take any arguments at all.

• once
• spread
• rearg
• negate
• tap

Example

import { uniqueId } from 'lodash';
import { once } from 'lodash-decorators'

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @once
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }

  @tap
  popIt(list) {
    list.pop();
  }
}

const person = new Person();

person.popIt([1, 2, 3]); //=> [1, 2]

Partials

Some decorators work slightly differently than you would expect them to work than lodash.

• partial
• partialRight
• wrap

These can take a Function as their first argument or a String. If the argument is a String then a Function is resolved from the current object.

Example

import { partial } from 'lodash-decorators'

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName(type) {
    return type === 'firstName' ? this.firstName : this.lastName
  }

  @partial('getName', 'firstName')
  getFirstName() {}

  @partial('getName', null)
  getLastName() {}

  @wrap('getName')
  getUpperCaseName(fn) {
    return fn().toUpperCase();
  }
}

const person = new Person('Joe', 'Smith');

person.getFirstName(); // 'Joe'
person.getLastName(); // 'Smith'
person.getUpperCaseName(); // JOE SMITH

Composition

You can use methods like compose and flow similiar to partials. The arguments are resolved the same way partials are resolved.

Example

import { compose } from 'lodash-decorators'
import { kebabCase } from 'lodash';

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName() {
    return `${this.firstName} ${this.lastName}`;
  }

  @compose(kebabCase, 'getName')
  logName(name) {
    console.log(name);
  }
}

const person = new Person('Joe', 'Smith');

person.logName(); // joe-smith

Instance Decorators

Normally decorators are applied to the prototype method of the class you are working with, but with some of these decorators that is not the desired behavour. These decorators are applied at the instance level.

• debounce
• throttle
• memoize
• after
• before

Getters and Setters

Most decorators can be applied directly to getter and setter methods.

Example

import { once } from 'lodash-decorators'
import _ from 'lodash';

class Person {
  constructor() {}

  @once
  get name() {
    return `${this.firstName} ${this.lastName}`;
  }

  @compose(_.trim)
  set name(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const person = new Person();

person.name = '    Joe Smith   ';
person.name; //=> Joe Smith

Bind

Bind takes arguments based on lodash's bind and binds the Function to the current instance object.

Example

import { bind } from 'lodash-decorators'

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  @bind()
  getName() {
    return `${this.firstName} ${this.lastName}`;
  }

  // It can also function as a partial
  @bind('Joe')
  getUpperCaseName(name) {
    return name.toUpperCase();
  }
}

const person = new Person('Joe', 'Smith');

person.getName.call(null); // Joe Smith
person.getUpperCaseName(); // JOE

You can also bind entire classes.

Example

import { bind } from 'lodash-decorators'

@bind()
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const person = new Person('Joe', 'Smith');

person.getName.call(null); // Joe Smith

Author: Steven Sojka MIT Licensed