yelouafi

function view(count, handler) { 
  return h('div', [
    h('button', {
      on   : { click: handler.bind(null, Action.Increment()) }
    }, '+'),
    h('button', {
      on   : { click: handler.bind(null, Action.Decrement()) }
    }, '-'),
    h('div', `Count : ${count}`),
  ]); 

yelouafi

function update(count, action) {
  return  Action.case({
    Increment : () => count + 1,
    Decrement : () => count - 1
  }, action);
}

yelouafi

const Action = Type({
  Add     : [],
  Remove  : [Number],
  Reset   : [],
  Update  : [Number, counter.Action],
});

yelouafi

function update(model, action) {
  
  return Action.case({
    Add     : () => addCounter(model),
    Remove  : id => removeCounter(model, id),
    Reset   : () => resetCounters(model), 
    Update  : (id, action) => updateCounter(model, id, action)
  }, action);
}

yelouafi

function init() {
  return 0;
}

yelouafi

function init() {
  return { first: counter.init(), second: counter.init() };
}

yelouafi

function update(model, action) {
  return  action.type === RESET     ?
            { 
              first : counter.init(),
              second: counter.init()
            }
            
        : action.type === UPDATE_FIRST   ?
            {...model, first : counter.update(model.first, action.data) }
            

yelouafi

main(
  twoCounters.init(), // the initial state 
  document.getElementById('placeholder'), 
  twoCounters
);

yelouafi

function init() {
  return  { nextID: 1, counters: [] };
}

yelouafi

/** @jsx html */

import { html } from 'snabbdom-jsx';
import Type from 'union-type';

const Action = Type({
  Increment : [],
  Decrement : [],
});