small dom generation code, compatible with htm

dom.js

const set = (el, o) => {
  if (o === null) return
  if (typeof o === 'function') {
    set(el, o(el))
  } else if (o instanceof Array) {
    el.append(...o)
  } else if (o instanceof Promise) {
    o.then(r => set(el, r))
  } else if (typeof o === 'object' && !(o instanceof Node)) {
    Object.entries(o).forEach(p => el.setAttribute(p[0], p[1]));
  } else if (typeof o !== "undefined") {
    el.append(o)
  } else {
    console.warn('could not handle childprop', o)
  }
};
const make = (tag, ...children) => {
  if (typeof tag === "function") {
   	return tag(...children)
  }
  const el = document.createElement(tag);
  children.forEach(c => set(el, c));
  return el
}

// note a few different ways of applying classes
document.body.append(
  make('div',
    ({ classList }) => classList.add('cool'),
    make('h1', { "class": "neato" }, "Hello, World"),
    make('ul', [1, 2, 3, 4, 5].map(o => make("li", o))),
  )
)

// assuming developit/htm is in the env, the following produces the same output
const html = htm.bind(make)

document.body.append(html`
  <div class="cool">
    <h1 class="neato">Hello, World</h1>
    <ul>${[1, 2, 3, 4, 5].map(o => html`<li>${o}</li>`)}</ul>
  </div>
`);