mealy.js

let rx = require("rxjs")

let button = (id, rect, text) => {
  let events   = new rx.Observable()
  let onClick = () => events.emit({id, event: "click"})
  let element = {type: "button", id, rect, text, onClick, events}
  return element
}

let text = (id, rect, source) => {
  let element = {type: "field", id, rect, source}
  return element
}

let group = (id, rect, elems) => {
  let events = rx.merge(elems.map(elem => elem.events))
  let element = {type: "group", id, rect, elems, events}
  return element
}

let add_rects = (p, a) => ({x: p.x + a.x, y: p.y + a.y, w: a.w, h: a.h})

let renderers = {
  "button": (element, parent_rect) => {
    let rect = add_rect(parent_rect, element.rect)
    let dom  = document.createElement("button")

    dom.innerHTML    = element.text
    dom.onclick      = element.onClick
    dom.style.left   = rect.x
    dom.style.up     = rect.y
    dom.style.height = rect.h
    dom.style.width  = rect.w

    return dom
  },

  "field": (element, parent_rect) => {
    let rect = add_rect(parent_rect, element.rect)
    let dom  = document.createTextNode("")

    element.source.subscribe(text => dom.textContent = text)

    dom.style.left   = rect.x
    dom.style.up     = rect.y
    dom.style.height = rect.h
    dom.style.width  = rect.w

    return dom
  },

  "group": (element, parent_rect) => {

  }
}