hyperapp component proposal

Counter.jsx

export default (props = { initialValue: 0, unit: '' }, children) => ({
  state: {
    count: props.initialValue,
    unit: props.unit
  },

  actions: {
    inc: (state, actions, data, emit) => emit('change', { count: state.count + 1 }),
    dec: (state, actions, data, emit) => emit('change', { count: state.count + 1 })
  },
	
  view: (state, actions) => (
    <div class={"counter"}>
      <button onclick={actions.inc}> + </button>
      <span>{state.count} {state.unit}</span>
      <button onclick={actions.dec}> - </button>
    </div>
  )
})

index.jsx

import { h, app } from "hyperapp"
import Counter from "./counter"

app({
  state: {
    title: 'Best counter ever',
    unit: 'monkeys'
  },

  view: (state, actions, { Counter }, emit) => (
    <main>
      <h1>{state.title}</h1>
      <Counter/>
    </main>
  ),

  components: state => ({
    Counter: (
      <Counter initialValue={5}, unit={state.unit}, onchange={value => emit('change', value)}/>
    )
  }),

  events: {
    change: (state, actions, value) => { alert(value) }
  }
})