tsers-component.js

import {Observable as O} from "rx"
import hyper from "hyperscript-helpers"

const view = (DOM, model$) => {
  const {div, h1, button} = hyper(DOM.h)

  return DOM.prepare(model$.map(text =>
    div([
      h1(text),
      button("Click me!"),
      DOM.h('svg', {width: 100, height: 100}, [
        DOM.h('circle', {cx: 50, cy: 50, r: 25, fill: 'black'}),
      ]),
    ]))
  )
}

const intent = (DOM, vtree$) => {
  const click$ = DOM.events(vtree$, "button", "click")

  return {
    click$,
  }
}

const model = actions => O.merge([
  actions.click$.map(() => text => text + "!"),
])

// The component
export default ({DOM, model$: state$, mux}) => {
  const vdom$ = view(DOM, state$)
  const actions = intent(DOM, vdom$)

  const updateMod$ = state$.mod(
    model(actions)
  )

  return mux({
    DOM: vdom$,
    model$: updateMod$,
  })
}