h-mount-patch.html

<div id="app"></div>
<button onclick="patch(vdom,vdom2)">patch</button>

<style>
  .red {
    color: red;
  }
  .green {
    color: green;
  }
</style>

<script>
  function h(tag, props, children) {
    return {
      tag,
      props,
      children,
    };
  }

  function mount(vnode, container) {
    const el = (vnode.el = document.createElement(vnode.tag));

    if (vnode.props) {
      for (const key in vnode.props) {
        const value = vnode.props[key];
        el.setAttribute(key, value);
      }
    }

    if (vnode.children) {
      if (typeof vnode.children === "string") {
        el.textContent = vnode.children;
      } else {
        vnode.children.forEach((child) => {
          mount(child, el);
        });
      }
    }

    container.appendChild(el);
  }

  const vdom = h("div", { class: "red" }, [h("span", null, "hello")]);

  mount(vdom, document.getElementById("app"));

  function patch(oldVnode, newVnode) {
    // same tag
    if (newVnode.tag === oldVnode.tag) {
      const el = (newVnode.el = oldVnode.el);
      // props
      const oldProps = oldVnode.props || {};
      const newProps = newVnode.props || {};
      // add new prop ?
      for (const key in newProps) {
        const oldValue = oldProps[key];
        const newValue = newProps[key];
        if (oldValue !== newValue) {
          el.setAttribute(key, newValue);
        }
      }
      // remove old prop ?
      for (const key in oldProps) {
        if (!(key in newProps)) {
          el.removeAttribute(key);
        }
      }
      // children
      const oldChildren = oldVnode.children;
      const newChildren = newVnode.children;
      if (typeof newChildren === "string") {
        if (typeof oldChildren === "string") {
          if (newChildren !== oldChildren) {
            // replace old children
            el.textContent = newChildren;
          }
        } else {
          // replace old children
          el.textContent = newChildren;
        }
      } else {
        if (typeof oldChildren === "string") {
          // clear old html
          el.innerHTML = "";
          // add new children to el
          newChildren.forEach((child) => {
            mount(child, el);
          });
        } else {
          // patch same index
          const commonLength = Math.min(oldChildren.length, newChildren.length);
          for (let i = 0; i < commonLength; i++) {
            // patch difference
            patch(oldChildren[i], newChildren[i]);
          }
          if (newChildren.length > oldChildren.length) {
            newChildren.slice(oldChildren.length).forEach((child) => {
              mount(child, el);
            });
          }
          if (newChildren.length < oldChildren.length) {
            oldChildren.slice(newChildren.length).forEach((child) => {
              el.removeChild(child.el);
            });
          }
        }
      }
    } else {
      // replace
      // get parent node
      const container = oldVnode.el.parentNode;
      // clear current node
      container.innerHTML = "";
      mount(newVnode, container);
    }
  }

  const vdom2 = h("div", { class: "green" }, [h("span", null, "changed!")]);

  // patch(vdom, vdom2);
</script>