yo-yo.js example

examle-count.js

var xtend = require('xtend')
var yo = require('yo-yo')
var d = require('global/document')
var app = require('./index')

var create = (state, dispatcher) => yo `
    <main>
        <button onclick=${ev => dispatcher('UPDATE', +1)}>inc</button>
        <button onclick=${ev => dispatcher('UPDATE', -1)}>dec</button>
        <p>${state.count}</p>
    </main>
`

var reduce = (state, action, type) => {
  if (type === 'UPDATE') return xtend(state, {count: state.count + action})
  return state
}

d.body.appendChild(app({count: 0}, create, reduce))

package.json

{
  "scripts": {
    "build": "browserify -t [yo-yoify] app.js > bundle.js"
  },
  "dependencies": {
    "xtend": "^4.0.1",
    "yo-yo": "^1.3.1"
  },
  "devDependencies": {
    "yo-yoify": "^3.5.0"
  }
}

yo-yo-bind.js

var yo = require('yo-yo')

module.exports = function app (state, creator, reduce) {
  var dom = creator(state, dispatcher)
  return dom

  function dispatcher (type, action) {
    state = reduce(state, action, type)
    yo.update(dom, creator(state, dispatcher))
  }
}

module.exports.html = yo