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

const { h1, span, makeDOMDriver } = CycleDOM;

function main(sources) {
  const click$ = sources.DOM.select("span").events("click");
  return {
    DOM: click$
      .startWith(null)
      .map(() => xs.periodic(1000).fold(prev => prev + 1, 0))
      .flatten()
      .map(i => h1([span([`Seconds elapsed: ${i}`])]))
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver("#app")
});
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