unified-state

Glue together components and event handlers

Motivation

This code is taken from mercury which allows you to create a state that binds event handlers (also referred to as channels or handles) using dom-delegator. Ideal for instances where you don't want to require the entire mercury package.

Install

$ npm install unified-state

Usage

Here's a modified version of the mercury's trivial example on their README

'use strict'

var document = require('global/document')
var extend = require('xtend')
var main = require('main-loop')
var observ = require('observ')
var send = require('value-event/event')
var unified = require('unified-state')
var h = require('virtual-dom/h')
var virtualize = require('vdom-virtualize')
var Delegator = require('dom-delegator')

function App () {
  return unified({
    value: observ(0),
    channels: {
      clicks: incrementCounter
    }
  })
}

function incrementCounter (state) {
  state.value.set(state.value() + 1)
}

App.render = function render(state) {
  return h('div.counter', [
    'The state ', h('code', 'clickCount'),
    ' has value: ' + state.value + '.', h('input.button', {
      type: 'button',
      value: 'Click me!',
      'ev-click': send(state.channels.clicks)
    })
  ])
}

var target = document.body.firstChild

var opts = {
  initialTree: virtualize(target),
  target: target
}

Delegator(opts)

var app = App()
var loop = main(app, App.render, extend({
  diff: require('virtual-dom/diff'),
  create: require('virtual-dom/create-element'),
  patch: require('virtual-dom/patch')
}, opts))

app(loop.update)
app.set(app())

API

unified(obj) -> observ-struct

obj refers to a key/value object containing components/values and event-handlers (channels or handles). Returns an object with fixed key/value pairs observ-struct and an updated dom-delegator instance with bound handlers. See above example.

License

MIT