Dom from simple VDOM

dom.js

const dom = ({tag='div', attributes={}, styles={}, classes=[], text=null, children=null}) => {
  const el = document.createElement(tag)
  el.className = classes.join(' ')

  for (let [key, value] of Object.entries(attributes)) {
    if (value) {
      el.setAttribute(key, value)
    }
  }

  for (let [key, value] of Object.entries(styles)) {
    el.style[key] = value
  }

  if (text) {
    el.appendChild(document.createTextNode(text));
  }

  if (children) {
    for (let child of children.map(dom)) {
      el.appendChild(child)
    }
  }

  return el
}

example.js

const el = dom({
  classes: ['a', 'b'],
  attributes: {
    'id': 'bar'
  },
  styles: {
    background: 'black'
  },
  children: [
    {
      tag: 'p',
      text: 'hello world'
    }
  ]
})