virtual DOM helper

DOMestic.js

const DOMestic = (tpl) => {
  const attach = parent => {
    if (typeof parent !== 'object' || !parent.hasOwnProperty('el')) {
      return console.error('parent should be an object with the property \'el\'');
    }
    let children = Array.from(parent.el.children);
    let keys = [];
    children.forEach((el, index) => {
      let key = el.getAttribute('key');
      el.removeAttribute('key');
      if (typeof key === 'undefined' || key === null || keys.indexOf(key) >= 0) {
        return console.error('each sibling requires a unique key', key, el);
      }
      keys.push(key);
      let child = {
        el
      };
      parent[key] = child
      if (el.childElementCount > 0) {
        attach(child);
      }
    });
    return parent;
  }
  let wrapper = document.createElement('div');
  wrapper.innerHTML = tpl;
  let template = wrapper.firstElementChild;
  let vDOM = {
    el: template,
    appendTo: target => target.appendChild(template)
  };

  return attach(vDOM);
}
export default DOMestic;