npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

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