Created
January 14, 2017 05:04
-
-
Save ishiduca/ad3b42d445d6b70bdae6983d7cc8c952 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html><body><script src="./bundle.js"></script></body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
大きく（なくても）DOMの構成を変換する場合にはルータで別のコンポネントに振り替えたい