Last active
June 30, 2017 10:54
-
-
Save ishiduca/f7a3928fb751fcfb15a756db3cd452c9 to your computer and use it in GitHub Desktop.
is this "Data Down Actions Up" pattern ?
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 xtend = require('xtend') | |
var yo = require('yo-yo') | |
var nsemitter = require('namespace-emitter') | |
var emitter = nsemitter() | |
var render = require('./components/root') | |
var data = render.defaultData | |
var el = render(xtend(data), actionsUp) | |
var reducer = require('./reducer/xhr')(update) | |
var setupApi = require('./api/xhr') | |
emitter.on('*', function loglog (params) { | |
console.log('event "%s"', this.event) | |
console.log(params) | |
}) | |
emitter.on('update', p => { | |
data = xtend(data, p) | |
el = yo.update(el, render(xtend(data), actionsUp)) | |
}) | |
emitter.on('hyperquest:onResponse', reducer.onResponse) | |
emitter.on('error', err => { | |
console.error(err) | |
}) | |
setupApi(emitter) | |
document.body.appendChild(el) | |
function actionsUp () { | |
emitter.emit.apply(emitter, arguments) | |
} | |
function update (p) { | |
emitter.emit('update', p) | |
} |
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
{ | |
"devDependencies": { | |
"yo-yoify": "^3.7.3" | |
}, | |
"dependencies": { | |
"dom-css": "^2.1.0", | |
"ecstatic": "^2.2.1", | |
"hyperquest": "^2.1.2", | |
"mississippi": "^1.3.0", | |
"namespace-emitter": "^1.0.0", | |
"xtend": "^4.0.1", | |
"yo-yo": "^1.4.1" | |
}, | |
"scripts": { | |
"build": "browserify -t [yo-yoify] ./src/main.js -o ./static/bundle.js" | |
} | |
} |
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
module.exports = function reduceXhr (update) { | |
return { | |
onResponse (res) { | |
var sentence = res.text.split(/\n\n/).map(sen => sen.split(/\n/)) | |
update({result: {sentence: sentence}}) | |
} | |
} | |
} |
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') | |
var domCss = require('dom-css') | |
function css (dom, style) { | |
domCss(dom, style) | |
return dom | |
} | |
var blockquote = { | |
margin : '6px', | |
padding: '6px' | |
} | |
module.exports = function render (data, actionsUp) { | |
return yo ` | |
<div> | |
<div> | |
<button onclick=${onclick}>load json "${data.url}"</button> | |
</div> | |
<div> | |
${data.result.sentence.map(sen => css(yo ` | |
<blockquote> | |
${sen.map(line => yo ` | |
<p>${line}</p> | |
`)} | |
</blockquote> | |
`, blockquote))} | |
</div> | |
</div> | |
` | |
function onclick (e) { | |
e.stopPropagation() | |
actionsUp('hyperquest:get', data.url) | |
} | |
} | |
var loc = window.location | |
module.exports.defaultData = { | |
url: `${loc.protocol}//${loc.host}/test.json`, | |
result: { | |
sentence: [['no data']] | |
} | |
} |
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 http = require('http') | |
var path = require('path') | |
var url = require('url') | |
var ecstatic = require('ecstatic')(path.join(__dirname, 'static')) | |
var app = http.createServer(ecstatic) | |
start(process.env.PORT || 8888) | |
function start (port) { | |
var mes = 'server start to listen on port "%s"' | |
app.listen(port, () => console.log(mes, port)) | |
} |
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
{ | |
"text": "you suck me into the storm again\nyou ran me over and over again\nthe revolution will start today\nyou better find your hidden place\n\na special forces are on their way\ncheck your pulse ’cause i’m coming in\nyour government will disappear\nwatch me coming, i’m here to stay\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised\n\nthe war is over, but not for me\nit’s not the pain that freaks me out\ni can’t stand losing you\ni’ll stand on guard for thee\n\nthere’s no time for fighting back\ni dream the same dream every time\nso wake me up and i will survive\ni’m stronger than you think\ni cannot be surprised" | |
} |
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 hyperquest = require('hyperquest') | |
var missi = require('mississippi') | |
module.exports = function setupApi (emitter) { | |
emitter.on('hyperquest:get', uri => { | |
var buf = [] | |
missi.pipe( | |
hyperquest(uri), | |
missi.through((b, _, done) => { | |
buf.push(b) | |
done() | |
}, done => { | |
var str = String(Buffer.concat(buf)) | |
var obj; try { | |
obj = JSON.parse(str) | |
emitter.emit('hyperquest:onResponse', obj) | |
done() | |
} catch (err) { | |
done(err) | |
} | |
}), | |
onError | |
) | |
}) | |
function onError (err) { | |
if (err) emitter.emit('error', err) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment