Fast h function

Hello there!

Do you have a recommendation for a fast h function? (framework-agnostic) I found a tweet from developit for a short one.

function h(el, props, ...kids) {
  el = document.createElement(el)
  for (let i in props) i in el
    ? el[i] = props[i]
    : el.setAttribute(i,props[i])
  el.append(...kids)
  return el
}

But after running some tests, I think this could be more performant. Sadly I do not have the knowledge where to look at. Thank you for the help! Pete

[Grafikart]

@PeteSolid I got an issue with this :

const items = [1, 2, 3, 4, 5]
html`
<ul>
  <li>
    <span>Hello</span>
    ${items.map(i => html`<span>${i}</span>`)}
  </li>
</ul>`

// li will received children like this ["<span>Hello</span>", Array[5]]

I first expected the <li> h() function to receive a children list with 6 items, but It will receive 2 children, one with the first inline <span> and one array with the 5 dynamic <span>{item}</span>.

I did a small code sandbox to show the problem : https://codesandbox.io/s/busy-sun-f4db5

@developit Is it an expacted behaviour ?

[Grafikart]

This function doesn’t handle kids that contains array close to textNode (or other Node). It won’t handle event listener too. Here is my current approach. I don’t know if it’s fast but it covers all the edge case I encountered at the moment (maybe it helps)

/**
 * @param {string} tagName
 * @param {object} attributes
 * @param {...HTMLElement|string} children
 * @return HTMLElement
 */
export function createElement (tagName, attributes = {}, ...children) {
  // Create the element
  const e = document.createElement(tagName)

  // Set attributes and event listeners
  for (const k of Object.keys(attributes || {})) {
    if (k.startsWith('on')) {
      e.addEventListener(k.substr(2).toLowerCase(), attributes[k])
    } else {
      e.setAttribute(k, attributes[k])
    }
  }

  // Flatten children (we can receive an array of array)
  children = children.reduce(function (acc, child) {
    return Array.isArray(child) ? [...acc, ...child] : [...acc, child]
  }, [])

  // Append children to the element
  for (const child of children) {
    if (typeof child === 'string' || typeof child === 'number') {
      e.appendChild(document.createTextNode(child))
    } else if (child instanceof HTMLElement) {
      e.appendChild(child)
    } else {
      console.error("Cannot add this element", child)
    }
  }
  return e
}