h.js

const createElement = name =>
  document.createElement(String(name).toUpperCase())

const defineAttributes = (VNode, attributes) =>
  Object.keys(attributes).forEach(attr =>
    VNode.setAttribute(attr, attributes[attr]))

const defineChildren = (VNode, children) =>
  Array.isArray(children) && children.forEach(e => VNode.appendChild(e))

const defineProperties = (VNode, props) =>
  Object.keys(props).forEach(prop => (VNode[prop] = props[prop]))

export const h = (nodeName, data, children) => {
  const DOMNode = createElement(nodeName)
  const componentData = { ...data }

  defineAttributes(DOMNode, componentData.attrs || {})
  delete componentData.attrs

  defineChildren(DOMNode, componentData.children || children)
  delete componentData.children

  defineProperties(DOMNode, componentData)

  return DOMNode
}

const Label = text => h('span', {
  className: 'ui-label',
  textContent: text
})

const Button = props => h('button', {
  className: 'ui-button',
  onclick: e => props.onclick(e)
}, [
  Label(props.label),
  ...props.slot
])

const Dialog = props => h('article', { className: 'ui-dialog' }, [
  h('header', { className: 'ui-dialog__heading' }, [
    Label('Remove Bucket')
  ]),
  h('footer', { className: 'ui-dialog__actions' }, [
    Button({ label: 'Cancel', onclick: props.oncancel }),
    Button({ label: 'Confirm', onclick: props.onconfirm })
  ])
])