functional-fe.js

const update = ({ action, payload }, state) => {
  return state;
}

const view = ({name}) => {
  return div
          ([], 
           [ input([], [])
           , button([ onClick({ action: "Click", payload: { name: "bob"}})], [ text("click") ])
           , p([], [text(name)])
           ]
          )
}


const input = (attr, children) => {
  return $element("input", attr, children);
}

const p = (attr, children) => $element("p", attr, children);

const button = (attr, children) => {
  return $element("button", attr, children);
}

const text = (content) => {
  return document.createTextNode(content);
}

const div = (attrs, children) => {
  return $element("div", attrs, children);
}

const $element = (name, attrs, children) => {
  const e = document.createElement(name);
  if (children.length) {
     children.forEach(c => {
      e.appendChild(c);
    }); 
  }
  return e;
}

const onClick =({action, payload}) => {
  return { eventName: "click" }
}

const $start = ({ view, update, state }, mountNode) => {
   const m = document.querySelector(mountNode);
  
   m.appendChild(view(state))
}

$start({ view: view, update, state: { name: "Matt"}}, ".mount");