Simple Cycle.js program visualized. Click on "Increment" or "Decrement" buttons.
The example is taken from "Explicit dataflow" section of the website, and copied below
function main(sources) {
const decrement$ = sources.DOM
.select('.decrement').events('click').map(ev => -1);
const increment$ = sources.DOM
.select('.increment').events('click').map(ev => +1);
const action$ = Observable.merge(decrement$, increment$);
const count$ = action$.startWith(0).scan((x,y) => x+y);
const vtree$ = count$.map(count =>
div([
button('.decrement', 'Decrement'),
button('.increment', 'Increment'),
p('Counter: ' + count)
])
);
return { DOM: vtree$ };
}