easier dom components in js (without jsx), inspired by h

app.js

const { ul, li } = require('./html')

const list = ul({ title: 'awesome list' },
  li({ title: 'interactive', onclick: () => alert(1) }, 'first'),
  li('second')
)

document.body.appendChild(list)

html.js

const textContent = (el, content) => {
  el.textContent = content
}

const children = (el, children) => {
  children.forEach(child => el.appendChild(child))
}

const attributes = (el, attributes) => {
  Object.entries(attributes).forEach(([key, value]) => {
    if (typeof value === 'function') {
      el[key] = value
    } else {
      el.setAttribute(key, value)
    }
  })
}

const tag = function (name) {
  return (head, ...tail) => {  
    const type = typeof head
    const element = document.createElement(name)

    // el(content: string)
    if (type === 'string') {
      textContent(element, head)
    }

    // el(children: array)
    else if (Array.isArray(head)) {
      children(element, head)
    }

    // el(attributes: object, content: string | array)
    else if (type === 'object' && head !== null) {
      const firstChild = tail[0]
      
      if (typeof firstChild === 'string') {
        textContent(element, firstChild)
      }
      else {
        children(element, tail)
      }

      attributes(element, head)
    }
    else {
      throw new Error()
    }
    
    return element
  }
}


module.exports = new Proxy({}, { 
  get: function (target, prop) {
    return tag(prop)
  }
})