function main(sources) {

  const hover$ = sources.DOM.selectEvents('span', 'mouseover');

  return {

    DOM: hover$

      .startWith(null)

      .flatMapLatest(() =>

        Rx.Observable.timer(0, 1000)

          .map(i => ({

            tagName: 'H1',

            children: [{

              tagName: 'SPAN',

              children: [

                `Seconds elapsed ${i}`

              ]

            }]

          }))

      ),

    Log: Rx.Observable.timer(0, 2000)

      .map(i => 2 * i)

  };

}

​

function DOMDriver(obj$) {

  function createElement(obj) {

    const element = document.createElement(obj.tagName);

    obj.children

      .filter(c => typeof c === 'object')

      .map(createElement)

      .forEach(e => element.appendChild(e));

    obj.children

      .filter(c => typeof c === 'string')

      .forEach(str => element.innerHTML=str);

    return element;

  }

  obj$.subscribe(obj => {

    const container = document.querySelector('#app');

    container.innerHTML = '';

    const element = createElement(obj);

    container.appendChild(element);

  });

    const DOMSource = {

        selectEvents: function (tagName, eventType) {

            return Rx.Observable.fromEvent(document, eventType)

                .filter(evt => evt.target.tagName === tagName.toUpperCase())

        }

    };

    return DOMSource;

}

​

function consoleLogDriver(msg$) {

  msg$.subscribe(msg => {

    console.log(msg);

  });

}

​

const drivers = {

  DOM: DOMDriver,

  Log: consoleLogDriver

};

​

Cycle.run(main, drivers);

​

​

​