ishiduca/example.js

## example.js
const xtend = require('xtend')
const d = require('global/document')
const onload = require('on-load')
const sheetRouter = require('sheet-router')
const href = require('sheet-router/href')
const spinit = require('./spinit')
const yo = spinit.html

const root = d.createElement('main')

// mainHandler
const reducer = (type, state, action) => {
  if (type === 'changeFoo') {
    return xtend(state, {foo: (action || '').trim()})
  }

  return state
}
const app = spinit(root, {foo: 'ichi'}, reducer)
const mainHandler = params => app((state, dispatcher) => yo `
  <main>
    <h1>${state.foo}</h1>
    <input
      type="text"
      oninput=${ev => dispatcher('changeFoo', ev.target.value)}
    />
    <div><a href="/sub/hoge">hoge</a></div>
  </main>
`)

// subHandler
const subApp = spinit(root, {foo: 'sub'})
const subHandler = params => subApp((state, dispatcher) => yo `
  <main>
    <h1>${state.foo.toUpperCase()}</h1>
    <h2>${params.bar.toUpperCase()}</h2>
    <div><a href="/404">room 404</a></div>
  </main>
`)

// notFoundHander
const notFoundHander = params => yo `
  <main>
    <h1>path not found</h1>
    <div><a href="/">main</a></div>
  </main>
`

const router = sheetRouter([
  ['/', mainHandler],
  ['/sub/:bar', subHandler],
  ['/404', notFoundHander]
])

href(h => yo.update(root, router(h.pathname)))
onload(root, rt => yo.update(root, router('/')))

d.body.appendChild(root)

## index.html
<!doctype html><body><script src="./bundle.js"></script></body>

## spinit.js
var yo = require('yo-yo')

module.exports = function spinit (el, state, reducer) {
  if (typeof reducer !== 'function') reducer = noop

  return function (handler) {
//    var el = handler(state, dispatcher)
    yo.update(el, handler(state, dispatcher))
    return el

    function dispatcher (type, action) {
      var whats = reducer(type, state, action)
      if (whats == null) return
      if (typeof whats === 'function') return whats(dispatcher)
      yo.update(el, handler((state = whats), dispatcher))
    }
  }

  function noop () {}
}

module.exports.html = yo
	const xtend = require('xtend')
	const d = require('global/document')
	const onload = require('on-load')
	const sheetRouter = require('sheet-router')
	const href = require('sheet-router/href')
	const spinit = require('./spinit')
	const yo = spinit.html

	const root = d.createElement('main')

	// mainHandler
	const reducer = (type, state, action) => {
	if (type === 'changeFoo') {
	return xtend(state, {foo: (action \|\| '').trim()})
	}

	return state
	}
	const app = spinit(root, {foo: 'ichi'}, reducer)
	const mainHandler = params => app((state, dispatcher) => yo `
	<main>
	<h1>${state.foo}</h1>
	<input
	type="text"
	oninput=${ev => dispatcher('changeFoo', ev.target.value)}
	/>
	<div><a href="/sub/hoge">hoge</a></div>
	</main>
	`)

	// subHandler
	const subApp = spinit(root, {foo: 'sub'})
	const subHandler = params => subApp((state, dispatcher) => yo `
	<main>
	<h1>${state.foo.toUpperCase()}</h1>
	<h2>${params.bar.toUpperCase()}</h2>
	<div><a href="/404">room 404</a></div>
	</main>
	`)

	// notFoundHander
	const notFoundHander = params => yo `
	<main>
	<h1>path not found</h1>
	<div><a href="/">main</a></div>
	</main>
	`

	const router = sheetRouter([
	['/', mainHandler],
	['/sub/:bar', subHandler],
	['/404', notFoundHander]
	])

	href(h => yo.update(root, router(h.pathname)))
	onload(root, rt => yo.update(root, router('/')))

	d.body.appendChild(root)
	var yo = require('yo-yo')

	module.exports = function spinit (el, state, reducer) {
	if (typeof reducer !== 'function') reducer = noop

	return function (handler) {
	// var el = handler(state, dispatcher)
	yo.update(el, handler(state, dispatcher))
	return el

	function dispatcher (type, action) {
	var whats = reducer(type, state, action)
	if (whats == null) return
	if (typeof whats === 'function') return whats(dispatcher)
	yo.update(el, handler((state = whats), dispatcher))
	}
	}

	function noop () {}
	}

	module.exports.html = yo