virtual-dom-unidirectional-main-loop-demo.js

var h = require('virtual-dom/h')
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom/patch')
var createElement = require('virtual-dom/create-element')
var Delegator = require('dom-delegator')
var sendChange = require('value-event/change')

Delegator()

var state = main({ actions: {} }, update)

state.actions = Object.keys(state.actions).reduce(function (hash, fn) {
  hash[fn] = Delegator.allocateHandle(state.actions[fn].bind(null, state))
  return hash
}, {})

function header (state, update) {
  state.name = state.name || ''
  state.actions.handleNameChange = actions(update).handleNameChange

  return state

  function actions(update) {
    return {
      handleNameChange: function (state, data) {
        state.name = data.name
        update(state)
      }
    }
  }
}

header.render = function (state) {
  return h('header', [
    h('input', {
      name: 'name',
      value: state.name,
      'ev-event': sendChange(state.actions.handleNameChange)
    }),
    h('h1', 'Hello' + (state.name ? ', ' + state.name : '')),
  ])
}

function main(state, update) {
  state = header(state, update)
  return state
}

main.render = function (state) {
  return h('main', [
    header.render(state)
  ])
}

var tree = main.render(state)
var rootNode = createElement(tree)

document.body.appendChild(rootNode)

function update(state) {
  var newTree = main.render(state)
  var patches = diff(tree, newTree)
  patch(rootNode, patches)
  tree = newTree
}