Decca state example

HTML

<!-- [email protected] -->
<script src="//brcdn.org/4MFog3WVejQdyyNCxFkwdXsWR4.js"></script>
<!-- [email protected] -->
<script src="//brcdn.org/iq1fczbO1kEugM4meXlFnsa4.js"></script>

Babel + JSX

/** @jsx element */
const { dom, element } = decca

const App = dekuStateful({
  render ({ props }) {
    return <div>
    	{props.counters.map((num) => <Counter num={num} />)}
    </div>
  }
})

const Counter = dekuStateful({
  initialState () {
    return { count: 0 }
  },
  render ({ props, dispatch, state, setState }) {
    return <div>
    	<button onclick={remove(props.num, dispatch)}>x</button>
      <button onclick={increment(state, setState)}>Hit me!</button>
      I've been clicked {state && state.count} times.
    </div>
  }
})

let increment = (state, setState) => (e) => {
  setState({ count: state.count + 1 })
}

let remove = (num, dispatch) => (e) => {
  dispatch({ num: num })
}

var render = dom.createRenderer(document.body, dispatch)
var counters = [0, 1, 2]
function dispatch (data) {
  if (data) counters = counters.filter((num) => num !== data.num)
	render(<App counters={counters} />)
}
dispatch()