compact dom helper

dom_helpers.js

import _ from 'lodash'

const dom = (query, asArray) =>
  document[`querySelector${asArray ? 'All' : ''}`](query)


/*
dom.new('a', {
  text: 'Click me!',
  attrs: {
    href: 'https://google.com',
  },
  classes: ['link', false && 'active'],
  parent: dom('body'),
  click: console.log,
})
*/
dom.new = (tag, { text, attrs, parent, classes, click }) => {
  const element = document.createElement(tag)
  if (!_.isEmpty(attrs))
    _.each(attrs, (value, name) => element.setAttribute(name, value))
  if (text) element.innerText = text
  const compactedClasses = _.compact(classes)
  if (compactedClasses.length)
    _.each(compactedClasses, className => element.classList.add(className))
  if (click) element.addEventListener('click', click)

  if (parent) parent.appendChild(element)
  return element
}

export default dom