counters2.js

const R = require('ramda')
const stream = require('../stream')
const h = require('../html')

const counter = (initial) => {
  const [inc, dec, reset] = [stream.create(), stream.create(), stream.create()]
  const sum = stream.scanMerge([
    [inc, R.add(1)]
  , [dec, R.add(-1)]
  , [reset, R.always(0)]
  ], initial)
  return {
    inc, dec, reset
  , sum
  }
}

const counterList = (initial) => {
  const [add, remove] = [stream.create(), stream.create()]
  const list = stream.scanMerge([
    [add, (counters, initialCount) => R.append(counter(initialCount), counters)]
  , [remove, R.init]
  ], initial.map(counter))
  return {
    add, remove
  , list
  }
}

const view = (initialCounters) => {
  const counters = counterList([1,2,3,4])
  const counterViews = stream.map(cs => cs.map(counterView), counters.list)
  return h('div', {}, [
    h('button', {on: {click: ev => counters.add(0)}}, 'Add counter')
  , h('div', {}, counterViews)
  , h('button', {on: {click: counters.remove}}, 'Remove counter')
  ])
}

// single counter view takes model as parameter
// dispatch output streams back into model
const counterView = counter => {
  return h('div', {}, [
    'Current count is '
  , counter.sum
  , ` `
  , h('button', {on: {click: counter.inc}}, '+1')
  , h('button', {on: {click: counter.dec}}, '-1')
  , h('button', {on: {click: counter.reset}}, '*0')
  ])
}

document.body.appendChild(view())