// @ts-check

/**
 * Create a DOM element. Inspired by [Crel][0].
 * [0]: https://npm.im/crel
 *
 * @param {string} tagName
 * @param {object} [attributes={}]
 * @param {(string | Node)[]} children
 * @returns {HTMLElement}
 */
export default (tagName, attributes = {}, ...children) => {
  const el = document.createElement(tagName);

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

  el.append(...children);

  return el;
};

/**
 * Create a fragment. Similar to `crel`.
 *
 * @param {(string | Node)[]} children
 * @returns {DocumentFragment}
 */
export const fragment = (...children) => {
  const result = document.createDocumentFragment();
  result.append(...children);
  return result;
};