data を proxy

api-message.js

module.exports = (emitter, proxy) => {
  emitter.on('updateMessage', mes => (proxy.message = mes))
}

dashboard.js

var yo = require('yo-yo')

module.exports = function (data, params, u, actionsUp) {
  return yo`
    <div>
      <section>
        <a href="/message">/message</a>
      </section>
      <section>
        <input
          type="text"
          value=${data.message}
          oninput=${oninput}
        />
      </section>
      <p>"${data.messageUpperCase}"</p>
    </div>
  `

  function oninput (e) {
    e.stopPropagation()
    actionsUp('updateMessage', e.target.value)
  }
}

main.js

var yo = require('yo-yo')
var voodoo = require('../voodoo')

var app = voodoo({
  message: ''
}, require('./proxy-handler'))

app.use(require('./api-logger'))
app.use(require('./api-message'))

app.mount('/', require('./dashboard'))
app.mount('/message', require('./message'))

document.body.appendChild(app('/'))

proxy-handler.js

module.exports = update => {
  return {
    get (target, prop) {
      if (prop === 'messageUpperCase') {
        return target.message.toUpperCase()
      }
      return target[prop]
    },
    set (obj, prop, value) {
      obj[prop] = value
      update()
    }
  }
}

voodoo.js

var url = require('url')
var d = require('global/document')
var w = require('global/window')
var yo = require('yo-yo')
var xtend = require('xtend')
var ready = require('document-ready')
var nsEmitter = require('namespace-emitter')
var routington = require('routington')
var href = require('nanohref')

var BUOYANCY = require('./package').name
var MOUNT_ROUTE = `${BUOYANCY}:mountRoute`
var LINK_ROUTE = `${BUOYANCY}:link`
var UPDATE_DATA = `${BUOYANCY}:updateData`
var PRE_UPDATE = `${BUOYANCY}:preUpdate`
var UPDATE = `${BUOYANCY}:update`

module.exports = buoyancyProxy
module.exports.notFound = notFound

function buoyancyProxy (defaultData, handlers, _opt) {
  var opt = xtend(_opt)
  var proxy = handlers(defaultData, updateData)
  var emitter = nsEmitter()
  var router = routington()
  var el
  var render

  function app (u) {
    mountRoute(u)
    el = render()
    return yo`<section id="${BUOYANCY}-app-root">${el}</section>`
  }

  app.route = registerRoute
  app.use = registerApi

  emitter.on(LINK_ROUTE, function (link) {
    mountRoute(cURL(link))
  })
  ready(function () {
    emitter.emit('DOMContentLoaded')
  })

  if (opt.location !== false) init(opt.location)

  return app

  function updateData () {
    emitter.emit(UPDATE_DATA, proxy)
    update()
  }

  function update () {
    var newEl = render()
    emitter.emit(PRE_UPDATE, el, newEl)
    el = yo.update(el, newEl)
    emitter.emit(UPDATE)
  }

  function registerApi (api, opt) {
    api(emitter, proxy, opt)
  }

  function registerRoute (pattern, model) {
    var node = router.define(pattern)[0]
    node.model = model
  }

  function mountRoute (uri) {
    var u = url.parse(uri, true)
    var m = router.match(u.pathname)
    if (m == null) {
      render = function renderOnNotFound () {
        return module.exports.notFound(proxy, u.query, uri, actionsUp)
      }
    } else {
      render = function () {
        return m.node.model(proxy, xtend(u.query, m.param), uri, actionsUp)
      }
    }

    emitter.emit(MOUNT_ROUTE, uri)
  }

  function actionsUp () {
    emitter.emit.apply(emitter, arguments)
  }

  function init (which) {
    if (!d.location) return

    var preventOnMount = false
    var usePush = !!(w && w.history && w.history.pushState)

    if (usePush) {
      w.onpopstate = function onPopState (e) {
        preventOnMount = true
        mountRoute(cURL(d.location.href))
        update()
      }
      emitter.on(MOUNT_ROUTE, function (u) {
        if (!preventOnMount) w.history.pushState({}, u, u)
        preventOnMount = false
      })
    } else {
      w.addEventListener('hashchange', function onHashChange (e) {
        preventOnMount = true
        mountRoute(cURL(d.location.hash.slice(1)))
        update()
      })
      emitter.on(MOUNT_ROUTE, function (u) {
        if (!preventOnMount) d.location.href = (u.slice(0, 1) === '#') ? u : `#${u}`
        preventOnMount = false
      })
    }

    href(function (node) {
      mountRoute(cURL(node.href))
      update()
    })
  }

  function cURL (uri) {
    var u = url.parse(uri)
    var h = u.pathname
    if (u.query) h += u.query.slice(0, 1) === '?' ? u.query : `?{u.query}`
    if (u.hash) h += u.hash
    return h
  }
}

function notFound (proxy, params, uri, actionsUp) {
  return yo`
    <div>
      <h1>404 not found</h1>
      <p>not found "${uri}"</p>
    </div>
  `
}