counters.js

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

const multiCounters = initial => actions =>
  stream.scanMerge([
    [actions.addCounter, R.append(0)]
  , [actions.remCounter, R.init]
  , [actions.increment, (counters, idx) => R.update(idx, counters[idx] + 1, counters)]
  , [actions.decrement, (counters, idx) => R.update(idx, counters[idx] - 1, counters)]
  , [actions.reset,     (counters, idx) => R.update(idx, 0, counters)]
  ], [])

const view = () => {
  const actions = {
    addCounter: stream.create()
  , remCounter: stream.create()
  , increment: stream.create()
  , decrement: stream.create()
  , reset: stream.create()
  }
  const counters = multiCounters(0)(actions)
  const counterViews = stream.map(counts => counts.map(counterView(actions)), counters)
  return h('div', {}, [
    h('button', {on: {click: actions.addCounter}}, 'Add counter')
  , h('div', {}, counterViews)
  , h('button', {on: {click: actions.remCounter}}, 'Remove counter')
  ])
}

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

document.body.appendChild(view())