jmakeig / dom-helper Goto Github PK

div(
  h1('asdf', { className: 'special', aria: 'eeee' }, button()),
  div('qwer', { className: ['another', 'rrrr'] }),
  input({ id: 'ASDF' })
);

'use strict';

function element(name, ...properties) {
  let attributes = {};
  let children = [];

  function serializeAttributes(attr) {
    function serialize(key) {
      switch (key) {
        case 'class':
        case 'className':
          return `class="${
            Array.isArray(attr[key]) ? attr[key].join(' ') : attr[key]
          }"`;
        //case 'dataset':
        //  Object.keys(attr[key]).map
        default:
          return `${key}="${attr[key]}"`;
      }
    }

    return Object.keys(attr)
      .map(serialize)
      .join(' ');
  }
  if (0 === properties.length) return `<${name}/>`;
  for (const prop of properties) {
    switch (typeof prop) {
      case 'string':
      case 'boolean':
      case 'number':
        children.push(String(prop));
        break;
      case 'object':
        if (null !== prop) attributes = Object.assign(attributes, prop);
        break;
      case 'function':
        children.push(prop());
        break;
    }
  }

  return (
    `<${name} ` +
    `${serializeAttributes(attributes)}>` +
    `${children.join('')}` +
    `</${name}>`
  );
}

const header = (...rest) => element('header', ...rest);
const nav = (...rest) => element('nav', ...rest);
const footer = (...rest) => element('footer', ...rest);
const div = (...rest) => element('div', ...rest);
const p = (...rest) => element('p', ...rest);
const h1 = (...rest) => element('h1', ...rest);
const h2 = (...rest) => element('h2', ...rest);
const h3 = (...rest) => element('h3', ...rest);
const h4 = (...rest) => element('h4', ...rest);
const h5 = (...rest) => element('h5', ...rest);
const h6 = (...rest) => element('h6', ...rest);

const ul = (...rest) => element('ul', ...rest);
const ol = (...rest) => element('ol', ...rest);
const li = (...rest) => element('li', ...rest);
const dl = (...rest) => element('dl', ...rest);
const dt = (...rest) => element('dt', ...rest);
const dd = (...rest) => element('dd', ...rest);

const table = (...rest) => element('table', ...rest);
const thead = (...rest) => element('thead', ...rest);
const tfoot = (...rest) => element('tfoot', ...rest);
const tbody = (...rest) => element('tbody', ...rest);
const tr = (...rest) => element('tr', ...rest);
const th = (...rest) => element('th', ...rest);
const td = (...rest) => element('td', ...rest);

const span = (...rest) => element('span', ...rest);
const a = (...rest) => element('a', ...rest);
const em = (...rest) => element('em', ...rest);
const strong = (...rest) => element('strong', ...rest);
const mark = (...rest) => element('mark', ...rest);

const input = (...rest) => element('input', { type: 'text' }, ...rest);
const button = (...rest) => element('button', ...rest);
const text = input;
const textarea = (...rest) => element('textarea', ...rest);
const checkbox = (...rest) => element('input', { type: 'checkbox' }, ...rest);
const radio = (...rest) => element('input', { type: 'radio' }, ...rest);
const select = (...rest) => element('select', ...rest);
const option = (...rest) => element('option', ...rest);
const file = (...rest) => element('input', { type: 'file' }, ...rest);

const br = (...rest) => element('br', ...rest);
const hr = (...rest) => element('hr', ...rest);

/**
 * Marker “class” to differentiate DOM attributes from properties.
 *
 * @param {string} name
 * @param {*} value - gets stringified eventually by `Element.prototype.setAttribute`
 * @return {attr}
 */
function attr(name, value) {
  // Factory pattern. Need `instanceof` test below, not just a plain object
  if (!(this instanceof attr)) return new attr(name, value);
  this.name = name;
  this.value = value;
  return this;
}

/**
 *
 * @param {Iterable|Node|string|Object} param
 * @param {Node} el
 * @return {Node}
 */
function applyToElement(param, el) {
  if (isIterable(param)) {
    for (const item of param) {
      applyToElement(item, el);
    }
    return el;
  }

  if (param instanceof attr) {
    el.setAttribute(param.name, param.value);
    return el;
  }

  if (param instanceof Node) {…