Last active
December 11, 2015 03:58
-
-
Save plmrry/adff8e538912197f6385 to your computer and use it in GitHub Desktop.
Tiny Cycle.js
This file contains 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
function main({DOM}) { | |
let action$ = DOM.select('button').events('click').map(ev => +1) | |
let count$ = action$.startWith(0).scan((x,y) => x+y); | |
return { | |
DOM: count$ | |
.map(i => { | |
return { | |
tagName: 'div', | |
children: [ | |
{ tagName: 'h1', children: [`Count ${i}`] }, | |
{ tagName: 'button', children: ['add one'] } | |
] | |
} | |
}) | |
} | |
} | |
const drivers = { | |
DOM: function DOMDriver(sink) { | |
function createEl(obj) { | |
const element = document.createElement(obj.tagName); | |
obj.children | |
.filter(c => typeof c === 'object') | |
.map(createEl) | |
.forEach(c => element.appendChild(c)); | |
obj.children | |
.filter(c => typeof c === 'string') | |
.forEach(c => element.innerHTML += c); | |
return element; | |
} | |
const elem$ = sink.map(obj => { | |
const container = document.querySelector('#app') | |
container.innerHTML = ''; | |
if (typeof obj === 'string') { | |
container.innerHTML += obj; | |
} else { | |
container.appendChild(createEl(obj)); | |
} | |
return container | |
}) | |
elem$.subscribe() | |
return { | |
select: function select(selector) { | |
let element$ = elem$.map(element => | |
element.querySelector(selector) | |
) | |
return { | |
observable: element$, | |
events: function events(eventType) { | |
return element$.flatMap(element => { | |
return Rx.Observable.fromEvent(element, eventType) | |
}) | |
} | |
} | |
} | |
} | |
} | |
}; | |
function run(main, drivers) { | |
const requestProxies = { | |
DOM: new Rx.ReplaySubject() | |
} | |
const responses = { | |
DOM: drivers.DOM(requestProxies.DOM) | |
} | |
const requests = main(responses); | |
requests.DOM.subscribe(requestProxies.DOM.asObserver()) | |
} | |
run(main, drivers); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment