import Cycle from '@cycle/core';
import CycleDOM from '@cycle/dom';
import _hh from 'hyperscript-helpers';

const { div, span, h1, a } = _hh(CycleDOM.h);

const main = () => ({
  DOM: Cycle.Rx.Observable.interval(1000)
    .map(i => h1(i + ' seconds elapsed'))
});

const drivers = {
  DOM: CycleDOM.makeDOMDriver('#app')
};

Cycle.run(main, drivers);

@@ -125,16 +125,24 @@
 n, h1, a
+, button
  %7D = _hh
@@ -174,22 +174,36 @@
  = (
+%7BDOM%7D
 ) =%3E 
-(
 %7B
+%0A
 %0A  
-DOM:
+let action$ =
  Cyc
@@ -223,67 +223,389 @@
 ble.
-interval(1000)%0A    
+merge(%0A    DOM.get('#decrement', 'click').map(ev =%3E -1),%0A    DOM.get('#increment', 'click')
 .map(
-i
+ev
  =%3E 
-h1(i + ' seconds elapsed'))%0A%7D)
++1)%0A  );%0A  let count$ = action$.startWith(0).scan((x,y) =%3E x+y);%0A  return %7B%0A    DOM: count$.map(count =%3E%0A        div(%5B%0A          button(%7Bid: 'decrement'%7D, 'Decrement'),%0A          button(%7Bid: 'increment'%7D, 'Increment'),%0A          h1('Counter: ' + count)%0A        %5D)%0A      )%0A  %7D;%0A%0A%7D
 ;%0A%0Ac

Use button increment/decrement base