AI solution for JavaScript Coding Question on BFE.dev
140. Virtual DOM III - Functional Component

Implement the createElement() and render() functions to support custom Functional Component.

/**
 *
 * @typedef MyElement {string|function}
 */

/**
 *
 * @param {string} tag
 * @param {Object|null} attrs
 * @param {...MyElement} children
 * @return {MyElement}
 */
 function createElement(tag, attrs, ...children) {
  if (typeof tag === 'function') {
    return tag({children, ...attrs});
  }
  return { tag, attrs, children };
}

/**
 *
 * @param {MyElement} element
 * @param {HTMLElement} container
 * @param {HTMLElement|null} [prevDom=null]
 * @return {HTMLElement}
 */
function render(element, container, prevDom = null) {
  if (typeof element === 'string') {
    const textNode = document.createTextNode(element);
    return container.appendChild(textNode);
  }

  if (typeof element === 'function') {
    return render(element(), container);
  }

  const { tag, attrs, children } = element;

  let dom;
  if (prevDom) {
    dom = prevDom;
  } else {
    dom = document.createElement(tag);
  }

  for (const name in attrs) {
    const value = attrs[name];
    if (name === 'className') {
      name = 'class';
    }
    if (name === 'style') {
      for (const styleName in value) {
        dom.style[styleName] = value[styleName];
      }
    } else if (name.startsWith('on')) {
      const eventName = name.toLowerCase().substr(2);
      dom.addEventListener(eventName, value);
    } else {
      dom[name] = value;
    }
  }

  if (children) {
    for (const child of children) {
      render(child, dom);
    }
  }

  if (!prevDom) {
    container.appendChild(dom);
  }

  return dom;
}