<div id="app"></div>
window.xs = window.xstream.default;
window.xs.fromEvent = window.fromEvent.default;

const { div, label, input, button, p, makeDOMDriver } = CycleDOM;

function view(state$) {
  return state$.map(state => {
    return div([
      button(".inc", "Increment"),
      button(".dec", "Decrement"),
      p([label(`Count: ${state}`)])
    ]);
  });
}

function intent(sources) {
  const domSource = sources.DOM;
  const inc$ = domSource
    .select(".inc")
    .events("click")
    .mapTo(+1);
  const dec$ = domSource
    .select(".dec")
    .events("click")
    .mapTo(-1);
  return {
    inc: inc$,
    dec: dec$
  };
}

function model(intents) {
  const { inc, dec } = intents;
  const delta$ = xs.merge(inc, dec);
  const count$ = delta$.fold((prev, delta) => prev + delta, 0);
  return count$;
}

function main(sources) {
  const actions = intent(sources);
  const state$ = model(actions);
  const vdom$ = view(state$);
  return { DOM: vdom$ };
}

const drivers = {
  DOM: makeDOMDriver("#app")
};

Cycle.run(main, drivers);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://static.jonirrings.com/xstream/xstream.min.js
  2. https://static.jonirrings.com/xstream/extra/fromEvent.js
  3. https://unpkg.com/@cycle/run@4.4.0/dist/cycle-run.min.js
  4. https://unpkg.com/@cycle/dom@20.4.0/dist/cycle-dom.min.js