{...}
/**
 * @typedef Component
 * @prop {() => Element} render
 *
 * @typedef { new (props: object) => Component } ComponentClass
 *
 * @typedef Element
 * @property { string | ComponentClass } type
 * @property { object } [props]
 *
 * @typedef  RenderedElement
 * @property { string | ComponentClass } type
 * @property { object } [props]
 * @property { Component } [instance]
 */
/**
 * @param { string | ComponentClass} component
 * @param { object } [props]
 * @returns {Element}
 */
export function h(component, props) {
  return {
    type: component,
    props,
  };
}
/**
 * @param { Element | string | null } node
 * @param { RenderedElement | null } current
 * @returns { {renderedElement: RenderedElement, element: HTMLElement} }
 */
export function toDOM(node, current) {
{...}
  if (node == null) {
    return null;
  }
  // string - text node
  if (typeof node === "string") {
    let instance;
    if (current?.type === "string") {
      instance = current.instance;
      instance.textContent = node;
    } else {
      instance = document.createTextNode(node);
    }
    return {
      renderedElement: {
        type: "string",
        instance,
      },
      element: instance,
    };
  }
  const { type: component, props: { children, ...props } = {} } = node;
  // Class Components
  if (typeof component === "function") {
    const currentComponent = current?.type;
    let instance;
    if (component === currentComponent && current?.instance != null) {
      instance = current.instance;
      // also remember to update props
      instance.props = props;
    } else {
      instance = new component(props);
    }
    // for now we assume our custom component returns single child
    const result = toDOM(instance.render(), current?.props?.children?.[0]);
    return {
      renderedElement: {
        type: component,
        props: {
          ...props,
          children: [result.renderedElement],
        },
        instance,
      },
      element: result.element,
    };
  }
  let instance;
  if (current?.type === node.type) {
    instance = current.instance;
    // clear the props
    if (current.props) {
      for (const [key, value] of Object.entries(current.props)) {
        if (key.startsWith("on")) {
          instance[key] = null;
        } else if (key === "dataset") {
          Object.keys(value).forEach((key) => {
            delete instance.dataset[key];
          });
        } else {
          instance.removeAttribute(key);
        }
      }
    }
    instance.replaceChildren();
  } else {
    instance = document.createElement(component);
  }
  const renderedElement = {
    type: component,
    props: {
      children: [],
    },
    instance,
  };
  if (props) {
    for (const [key, value] of Object.entries(props)) {
      if (key.startsWith("on")) {
        instance[key] = value;
      } else if (key === "dataset") {
        Object.assign(instance.dataset, value);
      } else {
        if (value != null) {
          instance.setAttribute(key, value);
        }
      }
    }
  }
  if (children) {
    const normalizedChildren = (
      Array.isArray(children) ? children : [children]
    ).filter(Boolean);
    const normalizedCurrentChildren = (
      Array.isArray(current?.props.children)
        ? current?.props.children
        : [current?.props.children]
    ).filter(Boolean);
    const childrenWithKeys = new Map(
      normalizedCurrentChildren
        .filter((item) => item.props?.key)
        .map((item) => [item.props?.key, item])
    );
    for (const [i, child] of normalizedChildren.entries()) {
      const renderedChild = toDOM(
        child,
        child.props?.key != null
          ? childrenWithKeys.get(child.props.key)
          : normalizedCurrentChildren[i]
      );
      instance.append(renderedChild.element);
      renderedElement.props.children.push(renderedChild.renderedElement);
    }
  }
  return {
    renderedElement,
    element: instance,
  };
}

{...}
/**
 * @typedef Component
 * @prop {() => Element} render
 *
 * @typedef { new (props: object) => Component } ComponentClass
 *
 * @typedef Element
 * @property { string | ComponentClass } type
 * @property { object } [props]
 *
 * @typedef  RenderedElement
 * @property { string | ComponentClass } type
 * @property { object } [props]
 * @property { Component } [instance]
 */
/**
 * @param { string | ComponentClass} component
 * @param { object } [props]
 * @returns {Element}
 */
export function h(component, props) {
  return {
    type: component,
    props,
  };
}
/**
 * @param { Element | string | null } node
 * @param { RenderedElement | null } current
 * @returns { {renderedElement: RenderedElement, element: HTMLElement} }
 */
export function toDOM(node, current) {
{...}
  if (node == null) {
    return null;
  }
  // string - text node
  if (typeof node === "string") {
    let instance;
    if (current?.type === "string") {
      instance = current.instance;
      instance.textContent = node;
    } else {
      instance = document.createTextNode(node);
    }
    return {
      renderedElement: {
        type: "string",
        instance,
      },
      element: instance,
    };
  }
  const { type: component, props: { children, ...props } = {} } = node;
  // Class Components
  if (typeof component === "function") {
    const currentComponent = current?.type;
    let instance;
    if (component === currentComponent && current?.instance != null) {
      instance = current.instance;
      // also remember to update props
      instance.props = props;
    } else {
      instance = new component(props);
    }
    // for now we assume our custom component returns single child
    const result = toDOM(instance.render(), current?.props?.children?.[0]);
    return {
      renderedElement: {
        type: component,
        props: {
          ...props,
          children: [result.renderedElement],
        },
        instance,
      },
      element: result.element,
    };
  }
  let instance;
  if (current?.type === node.type) {
    instance = current.instance;
    // clear the props
    if (current.props) {
      for (const [key, value] of Object.entries(current.props)) {
        if (key.startsWith("on")) {
          instance[key] = null;
        } else if (key === "dataset") {
          Object.keys(value).forEach((key) => {
            delete instance.dataset[key];
          });
        } else {
          instance.removeAttribute(key);
        }
      }
    }
    instance.replaceChildren();
  } else {
    instance = document.createElement(component);
  }
  const renderedElement = {
    type: component,
    props: {
      children: [],
    },
    instance,
  };
  if (props) {
    for (const [key, value] of Object.entries(props)) {
      if (key.startsWith("on")) {
        instance[key] = value;
      } else if (key === "dataset") {
        Object.assign(instance.dataset, value);
      } else {
        if (value != null) {
          instance.setAttribute(key, value);
        }
      }
    }
  }
  if (children) {
    const normalizedChildren = (
      Array.isArray(children) ? children : [children]
    ).filter(Boolean);
    const normalizedCurrentChildren = (
      Array.isArray(current?.props.children)
        ? current?.props.children
        : [current?.props.children]
    ).filter(Boolean);
    const childrenWithKeys = new Map(
      normalizedCurrentChildren
        .filter((item) => item.props?.key)
        .map((item) => [item.props?.key, item])
    );
    for (const [i, child] of normalizedChildren.entries()) {
      const renderedChild = toDOM(
        child,
        child.props?.key != null
          ? childrenWithKeys.get(child.props.key)
          : normalizedCurrentChildren[i]
      );
      instance.append(renderedChild.element);
      renderedElement.props.children.push(renderedChild.renderedElement);
    }
  }
  return {
    renderedElement,
    element: instance,
  };
}

Build a To-Do App in Vanilla JavaScript