Tiny Cycle.js

tiny-cycle.js

function main({DOM}) {
  let action$ = DOM.select('button').events('click').map(ev => +1)
  let count$ = action$.startWith(0).scan((x,y) => x+y);
  return {
    DOM: count$
      .map(i => {
        return {
          tagName: 'div',
          children: [
            { tagName: 'h1', children: [`Count ${i}`] },
            { tagName: 'button', children: ['add one'] }
          ]
        }
      })
  }
}

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;
    }

    const elem$ = sink.map(obj => {
      const container = document.querySelector('#app')
      container.innerHTML = '';
      if (typeof obj === 'string') {
        container.innerHTML += obj;
      } else {
        container.appendChild(createEl(obj));
      }
      return container
    })

    elem$.subscribe()

    return {
      select: function select(selector) {
        let element$ = elem$.map(element =>
          element.querySelector(selector)
        )
        return {
          observable: element$,
          events: function events(eventType) {
            return element$.flatMap(element => {
              return Rx.Observable.fromEvent(element, eventType)
            })
          }
        }
      }
    }
  }
};

function run(main, drivers) {
  const requestProxies = {
    DOM: new Rx.ReplaySubject()
  }
  const responses = {
    DOM: drivers.DOM(requestProxies.DOM)
  }
  const requests = main(responses);

  requests.DOM.subscribe(requestProxies.DOM.asObserver())
}

run(main, drivers);