<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;
const { div, label, input, button, p, makeDOMDriver } = CycleDOM;
function view(state$) {
return state$.map(state => {
return div([
button(".inc", "Increment"),
button(".dec", "Decrement"),
p([label(`Count: ${state}`)])
]);
});
}
function intent(sources) {
const domSource = sources.DOM;
const inc$ = domSource
.select(".inc")
.events("click")
.mapTo(+1);
const dec$ = domSource
.select(".dec")
.events("click")
.mapTo(-1);
return {
inc: inc$,
dec: dec$
};
}
function model(intents) {
const { inc, dec } = intents;
const delta$ = xs.merge(inc, dec);
const count$ = delta$.fold((prev, delta) => prev + delta, 0);
return count$;
}
function main(sources) {
const actions = intent(sources);
const state$ = model(actions);
const vdom$ = view(state$);
return { DOM: vdom$ };
}
const drivers = {
DOM: makeDOMDriver("#app")
};
Cycle.run(main, drivers);
View Compiled
This Pen doesn't use any external CSS resources.