stateme.js

super tiny reactive state inspired by Vue.js

demo - repo

Installation

npm install stateme.js

or via CDN:

<script src="https://unpkg.com/stateme.js/lib/stateme.js"></script>

Usage

import watch from 'stateme.js'

const myCounterProps = {
  enabled: true,
  count: 0,
  title: "My Pomodoro Timer"
}

// only watch the count prop
const state = watch(myCounterProps, [ 'count' ])

state.onUpdate(prop => console.log(`UPDATED { ${prop}: ${state[prop]} }`))

state.count++
// output: UPDATED { count: 1 }

Documentation

watch

Returns an instance of stateme.js, not your original object

Params	Description
originalObject	The object you want to watch. default: {}
selectedProps	Optional. Only watch the properties in an array. default: []

Methods

connectInput

Connect you reactive value to a DOM input (watch changes).

WARNING: for radio inputs, provide an element with a name atribute. when you set your state, provide the radio option value (like you do for a <select>).

learn more on the demo

usage:

state.connectInput(document.querySelector('input'), ['count'])

Params	Description
input	DOM element, the view that will update the model (state)

onBeforeUpdate

Add a callback to trigger before a value update

usage:

state.onBeforeUpdate(prop =>
  console.log(`WILL UPDATE { ${prop}: ${state[prop]} }`)
)

Params	Description
func	Your callback function .
selectedProps	Optional. Only watch the properties in an array. default: []

onUpdate

Add a callback to trigger after a value update

state.onUpdate(prop => console.log(`UPDATED { ${prop}: ${state[prop]} }`), ['count])

Params	Description
func	Your callback function.
selectedProps	Optional. Only watch the properties in an array. default: []

onDestroy

state.onDestroy(() =>
  console.warn(`${JSON.stringify(state, null, 2)}`, 'DESTROYED')
)

Add a callback to trigger when you call the destory() method.

Params	Description
func	Your callback function.
selectedProps	Optional. Only watch the properties in an array. default: []

destroy

Removes all the callbacks registered.