Miss any of our Open RFC calls?Watch the recordings here! »

shiz

2.1.0 • Public • Published

shiz

values as functions and shit

It's like an observable stream, except instead of a stream of values, it's a stream of changes that you can lazily reify into values.

Originally inspired by observables-as-functions libraries like w0w or PureState or set-state, except that this one is aggressively lazy.

Functions are only re-run when someone asks for the value, as opposed to when a dependency's value changes.

shiz can be used as a Svelte store.

Observable example

 
const { value, computed } = shiz
 
const itsAValue = value(5)
const anotherValue = value(3)
 
const dependentValue = computed(
    [ itsAValue, anotherValue ],
    ([ itsAValue, anotherValue ]) => itsAValue + anotherValue
)
 
dependentValue.get() // => 8
 
anotherValue.set(6)
// ^ This marks dependentValue as dirty but doesn't cause it to be re-run
 
dependentValue.get() // => 11
// ^ This call actually causes dependentValue to be re-run

This aggressively lazy behavior is useful if you have values that depend on large numbers of other values, with many values being changed in a tick.

Like, say, if you're watching the viewport position of hundreds of elements while the user is scrolling around.

To listen for changes:

const someValue = value(4)
 
someValue.set(3)
someValue.set(2)
someValue.set(1)
 
someValue.on('change', () => {
    someValue.get() // => 1
})

API

Exports two functions, value and computed.

observableish = value([ value ])

Takes any value and returns an observableish object with a set function that takes a single argument. Call set to change the value.

observableish = computed(dependencies, computeFunction)

Takes two arguments: an array of observableish dependencies, and a function that takes an array of values calculated from those dependencies.

Even if a bunch of upstream dependencies change, the computeFunction won't be called until something calls the get method.

 
const a = value(1)
function computeFunction([ a ]) {
    return a * 2
}
const doubled = computed([ a ], computeFunction)

observableish

An object with these properties:

  • observableish.get(): a function that returns the current value, recalculating it if necessary
  • observableish.map(fn): sugar for computed([ observableish ], ([ value ]) => fn(value))
  • unsubscribe = observableish.subscribe(callback): Calls the callback function whenever the observable value changes. Also calls the callback function with the current value right away when subscribe is called.

It is also a better-emitter emitter that emits these events:

  • change: this is the event you should subscribe to. It will fire on the tick after any changes happen, allowing you to recalculate values lazily.
  • dirty: this fires every time an upstream value changes. Don't call get every time this event fires, or else you'll cause a lot of extra recalculation.

License

WTFPL

Install

npm i shiz

DownloadsWeekly Downloads

6

Version

2.1.0

License

WTFPL

Unpacked Size

9.62 kB

Total Files

5

Last publish

Collaborators

  • avatar