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

mazzard

v1.0.0-rc-2

Published

Get reactions on data changes

Downloads

1

Readme

Mazzard

Install

npm i mazzard

Next, we will use mazzard which means we imported it from mazzard.

import mazzard from 'mazzard'

mazzard() // undefined

Unexpected arguments

mazzard returns the first argument as is, if it is not function, array or simple object.

mazzard(1) // 1
mazzard('1') // '1'
mazzard(false) // false
mazzard(null) // null
mazzard(NaN) // NaN
mazzard(Symbol('test')) // Symbol('test')
mazzard(new Map()) // instance of Map

Observable object

You get the observable object if the first argument is simple object.

const observable = mazzard({test: 'success'})
console.log(observable.test)
// > 'success'

All objects inside observable are observable.

const test = mazzard({observableField: {}})
test // is observable object
test.observableField // is observable object

Observer

To have reactions on changes of observable object, use mazzard with a function as the first argument. The function is observer and runs immediately.

const test = mazzard({})

mazzard(
  () => console.log(test.testField) // this is observer
)
// > undefined

test.testField = 'success'
// > 'success'

Observer runs each time when you change observable fields.
You may stop the watching with the first argument of observer.

const test = mazzard({})

mazzard(stop => {
  if (test.stop) {
    console.log('stop', test.stop)
    stop()
  } else {
    console.log(test.testField)
  }
})
// > undefined

test.testField = 'success'
// > 'success'

test.testField = true
// > true

test.stop = 'test message'
// > 'stop', 'test message'

test.testField = 'test'
// nothing happens

Also, you may stop it with that mazzard returns.

const stop = mazzard(() => {})
stop()

If you set the same value which a field have then reaction will not be called.

const test = mazzard({})

mazzard(() => console.log(test.testField))
// > undefined

test.testField = true
// > true

test.testField = true
// nothing happens

United changes

If you wanna have only one reaction of observer on several changes, you may use a method of observable object.

const test = mazzard({
  update (field1, field2) {
    test.field1 = field1
    test.field2 = field2
  }
})

mazzard(() => {
  console.log(test.field1, test.field2)
})
// > undefined, undefined

test.field1 = 'field1'
// > 'field1', undefined

test.field2 = 'field2'
// > 'field1', 'field2'

test.update(1, 2)
// > 1, 2

You may unite changes with action from mazzard.

import {action} from 'mazzard'

const test = mazzard({})

const update = action((field1, field2) => {
  test.field1 = field1
  test.field2 = field2
})

mazzard(() => console.log(test.field1, test.field2))
// > undefined, undefined

update(1, 2)
// > 1, 2

The same will happen for setters.

const test = mazzard({
  set fullName (value) {
    const [name, secondName] = value.split(' ')
    this.name = name
    this.secondName = secondName
  }
})

mazzard(() => console.log(test.name, test.secondName))
// > undefined, undefined

test.fullName = 'Mike Mighty'
// > 'Mike', 'Mighty'

Computed value

Use getters in observable to have computed value with caching.

const test = mazzard({
  get fullName () {
    return this.name && this.secondName ? `${this.name} ${this.secondName}` : null
  }
})

mazzard(() => console.log(test.fullName))
// > null

test.name = 'Mike'
// nothing happens

test.secondName = 'Mighty'
// > 'Mike Mighty'

Observable array

You get the observable array if the first argument is array.

mazzard([]) // observable array

All changes on the array make reactions.