HTML builder DSL

example.js

import { h1, div, p } from "./html";

div([
  h1({ class: "title" }, "Title"),
  p("A nice text"),
]);

html.js

const array = obj => Array.isArray(obj) ? obj : [obj];

const createElement = (tag, { attributes = {}, children = [], content = null } = {}) => {
  const element = document.createElement(tag);
  for (let attribute in attributes) element.setAttribute(attribute, attributes[attribute]);
  children.forEach(child => element.appendChild(child));
  if (content) element.innerHTML = content;
  return element;
}

const createTag = tag => (arg1, arg2) => {
  if (Array.isArray(arg1) || arg1 instanceof Element) {
    return createElement(tag, { children: array(arg1) });
  } else if (typeof arg1 === "string") {
    return createElement(tag, { content: arg1 });
  } else if (typeof arg1 === "object") {
    if (typeof arg2 === "string") {
      return createElement(tag, { attributes: arg1, content: arg2 });
    } else if (arg2 != null) {
      return createElement(tag, { attributes: arg1, children: array(arg2) });
    } else {
      return createElement(tag, { attributes: arg1 });
    }
  }
};

const htmlDSL = new Proxy(createTag, {
  get: (target, tag) => target(tag),
});

export default htmlDSL;