Tiny Cycle.js 2

tiny-cycle-2.js

function main() {
  return {
    DOM: Rx.Observable.timer(0, 1000)
      .map(i => {
        return {
          tagName: 'h1',
          children: [`Seconds elapsed ${i}`]
        }
      })
  }
}

const drivers = {
  DOM: function DOMDriver(sink) {
    function createEl(obj) {
      const element = document.createElement(obj.tagName);
      obj.children
        .filter(c => typeof c === 'object')
        .map(createEl)
        .forEach(c => element.appendChild(c));
      obj.children
        .filter(c => typeof c === 'string')
        .forEach(c => element.innerHTML += c);
      return element;
    }
    
    sink.subscribe(obj => {
      const container = document.querySelector('#app');
      container.innerHTML = '';
      if (typeof obj === 'string') { 
        container.innerHTML += obj;
      } else {
        container.appendChild(createEl(obj));        
      }
    });
  }
};

function run(main, drivers) {
  const sinks = main();
  drivers.DOM(sinks.DOM);
}

run(main, drivers);