cycle.js example

app.js

function main({DOM}) {
  const h = CycleDOM.h;
  
  return {
    DOM: 
      // click, click, click ->  [2.. 4.. 4..]
      DOM.select('button').events('click').
      map(evt => parseInt(evt.target.innerText)).
      filter(val => val % 2 === 0).
    
      // [2.. 4.. 4..] -> [2].. [2, 4].. [2, 4, 4]..
      scan((state, n) => (
         state.concat(n)
      ), []).
    
      // [2].. [2, 4].. [2, 4, 4].. -> virtual-doms
      startWith([]).
      map(state => h('div', [
        h('div', [
          h('button', ['1']),
          h('button', ['2']),
          h('button', ['3']),
          h('button', ['4'])
        ]),
        // render `state` as a <li>s
        h('ul', state.map(n => 
          h('li', [`You clicked ${n}`]))
        )
      ]))
  };
}

Cycle.run(main, {
  DOM: CycleDOM.makeDOMDriver('#app')
});