Implement virtual dom patch function

Hard

You're implementing a simple virtual DOM system. What's the correct implementation for the patch function that updates the real DOM?

Choose an option below

function patch(parent, newNode, oldNode, index = 0) {
  if (!oldNode) {
    parent.appendChild(createElement(newNode));
  } else if (!newNode) {
    parent.removeChild(parent.childNodes[index]);
  } else if (changed(newNode, oldNode)) {
    parent.replaceChild(
      createElement(newNode),
      parent.childNodes[index]
    );
  } else if (newNode.type) {
    const newLength = newNode.children.length;
    const oldLength = oldNode.children.length;
    for (let i = 0; i < newLength || i < oldLength; i++) {
      patch(
        parent.childNodes[index],
        newNode.children[i],
        oldNode.children[i],
        i
      );
    }
  }
}

function patch(parent, newNode, oldNode, index = 0) {
  if (!oldNode &amp;&amp; newNode) {
    const element = createElement(newNode);
    parent.appendChild(element);
  } else if (oldNode &amp;&amp; !newNode) {
    parent.removeChild(parent.childNodes[index]);
  } else {
    if (typeof newNode !== typeof oldNode) {
      parent.replaceChild(
        createElement(newNode),
        parent.childNodes[index]
      );
    } else {
      updateProps(
        parent.childNodes[index],
        newNode.props,
        oldNode.props
      );
    }
  }
}

function patch(parent, newNode, oldNode, index = 0) {
  if (!oldNode) {
    parent.appendChild(createElement(newNode));
  } else if (!newNode) {
    parent.removeChild(parent.childNodes[index]);
  } else if (changed(newNode, oldNode)) {
    parent.replaceChild(
      createElement(newNode),
      parent.childNodes[index]
    );
  } else {
    updateProps(
      parent.childNodes[index],
      newNode.props,
      oldNode.props
    );
    
    const newLength = newNode.children.length;
    const oldLength = oldNode.children.length;
    for (let i = 0; i < Math.max(newLength, oldLength); i++) {
      patch(
        parent.childNodes[index],
        newNode.children[i],
        oldNode.children[i],
        i
      );
    }
  }
}

function patch(parent, newNode, oldNode, index = 0) {
  parent.innerHTML = '';
  parent.appendChild(createElement(newNode));
}

JavascriptVirtual domDom manipulationDiffingReconciliationDom

1class VNode {
2  constructor(type, props, children) {
3    this.type = type;
4    this.props = props;
5    this.children = children;
6  }
7}
8
9// Missing implementation
10function patch(parent, newNode, oldNode, index = 0) {
11  ____________________
12  ____________________
13  ____________________
14  ____________________
15}
16
17// Usage:
18const oldVDOM = new VNode('div', { class: 'container' }, [
19  new VNode('p', { class: 'text' }, ['Hello']),
20]);
21
22const newVDOM = new VNode('div', { class: 'container' }, [
23  new VNode('p', { class: 'text-bold' }, ['Hello World']),
24]);
25
26patch(document.body, newVDOM, oldVDOM);

You're implementing a simple virtual DOM system. What's the correct implementation for the patch function that updates the real DOM?

Hint