obzervable

obzervable

obzervable is a library for creating observable mutable states.

• Works with nested objects and array mutators.
• Supports mapping of states that allows to listen only to changes of certain properties of the state.
• Can be used to do DOM Manipulations only when they are required.

Documentation

Documentation and usage examples: documentation

Example

Counter

import { createState, observe } from 'obzervable'

const State = createState( {
	count: 0,
	active: false
} )

const Counter = document.createElement( 'h1' )
const StartButton = document.createElement('button')
const ResetButton = document.createElement('button')
const Body = document.getElementsByTagName('body')[0]

ResetButton.innerText = 'reset'
Body.appendChild( Counter )
Body.appendChild( StartButton )
Body.appendChild( ResetButton )

const mapCount = ( { count } ) => ( { count } )
const mapActive = ( { active } ) => ( { active } )

observe( State, mapCount )( ( { count } ) => {
	return Counter.innerText = count
} );

( ( interval ) => {

	observe( State, mapActive )( ( { active } ) => {

		if ( active ) {
			interval = setInterval( () => State.count += 1, 1000)
		} else {
			clearInterval( interval )
		}

		StartButton.innerText = ( active ) ? 'stop' : 'start'

		return Counter.style.color = ( active ) ? 'green' : 'red'

	} )

} )( null )

StartButton.addEventListener( 'click', ( e ) => {
	const { active } = State
	State.active = !active
} )

ResetButton.addEventListener( 'click', ( e ) => {
	State.apply( {
		count: 0,
		active: false
	} )
} )