diff --git a/js/miso.js b/js/miso.js
index 9ec4920f1..e1b2ea160 100644
--- a/js/miso.js
+++ b/js/miso.js
@@ -9,12 +9,11 @@ function diff(c, n, parent, context) {
   else if (c.type === 2 /* VText */ && n.type === 2 /* VText */) {
     diffVText(c, n, context);
   } else if (c.type === 0 /* VComp */ && n.type === 0 /* VComp */) {
-    if (n.tag === c.tag && n.key === c.key) {
-      n.domRef = c.domRef;
-      diffAttrs(c, n, context);
-    } else {
-      replace(c, n, parent, context);
+    if (n.key === c.key) {
+      n.child = c.child;
+      return;
     }
+    replace(c, n, parent, context);
   } else if (c.type === 1 /* VNode */ && n.type === 1 /* VNode */) {
     if (n.tag === c.tag && n.key === c.key) {
       n.domRef = c.domRef;
@@ -31,6 +30,24 @@ function diffVText(c, n, context) {
   n.domRef = c.domRef;
   return;
 }
+function drill(c) {
+  if (!c.child)
+    throw new Error("'drill' called on an unmounted Component. This should never happen, please make an issue.");
+  switch (c.child.type) {
+    case 0 /* VComp */:
+      return drill(c.child);
+    default:
+      return c.child.domRef;
+  }
+}
+function getDOMRef(tree) {
+  switch (tree.type) {
+    case 0 /* VComp */:
+      return drill(tree);
+    default:
+      return tree.domRef;
+  }
+}
 function replace(c, n, parent, context) {
   switch (c.type) {
     case 2 /* VText */:
@@ -41,15 +58,14 @@ function replace(c, n, parent, context) {
   }
   switch (n.type) {
     case 2 /* VText */:
-      switch (c.type) {
-        default:
-          n.domRef = context.createTextNode(n.text);
-          context.replaceChild(parent, n.domRef, c.domRef);
-          break;
-      }
+      n.domRef = context.createTextNode(n.text);
+      context.replaceChild(parent, n.domRef, getDOMRef(c));
       break;
-    default:
-      context.replaceChild(parent, createElement(n, context), c.domRef);
+    case 0 /* VComp */:
+      createElement(parent, 1 /* REPLACE */, getDOMRef(c), n, context);
+      break;
+    case 1 /* VNode */:
+      createElement(parent, 1 /* REPLACE */, getDOMRef(c), n, context);
       break;
   }
   switch (c.type) {
@@ -68,7 +84,7 @@ function destroy(c, parent, context) {
       callBeforeDestroyedRecursive(c);
       break;
   }
-  context.removeChild(parent, c.domRef);
+  context.removeChild(parent, getDOMRef(c));
   switch (c.type) {
     case 2 /* VText */:
       break;
@@ -79,10 +95,20 @@ function destroy(c, parent, context) {
 }
 function callDestroyedRecursive(c) {
   callDestroyed(c);
-  for (const child of c.children) {
-    if (child.type === 1 /* VNode */ || child.type === 0 /* VComp */) {
-      callDestroyedRecursive(child);
-    }
+  switch (c.type) {
+    case 1 /* VNode */:
+      for (const child of c.children) {
+        if (child.type === 1 /* VNode */ || child.type === 0 /* VComp */) {
+          callDestroyedRecursive(child);
+        }
+      }
+      break;
+    case 0 /* VComp */:
+      if (c.child) {
+        if (c.child.type === 1 /* VNode */ || c.child.type === 0 /* VComp */)
+          callDestroyedRecursive(c.child);
+      }
+      break;
   }
 }
 function callDestroyed(c) {
@@ -107,18 +133,28 @@ function callBeforeDestroyed(c) {
 }
 function callBeforeDestroyedRecursive(c) {
   callBeforeDestroyed(c);
-  for (const child of c.children)
-    if (child.type === 1 /* VNode */ || child.type === 0 /* VComp */)
-      callBeforeDestroyedRecursive(child);
+  switch (c.type) {
+    case 1 /* VNode */:
+      for (const child of c.children) {
+        if (child.type === 2 /* VText */)
+          continue;
+        callBeforeDestroyedRecursive(child);
+      }
+      break;
+    case 0 /* VComp */:
+      if (c.child) {
+        if (c.child.type === 1 /* VNode */ || c.child.type === 0 /* VComp */)
+          callBeforeDestroyedRecursive(c.child);
+      }
+      break;
+  }
 }
 function diffAttrs(c, n, context) {
   diffProps(c ? c.props : {}, n.props, n.domRef, n.ns === "svg", context);
   diffClass(c ? c.classList : null, n.classList, n.domRef, context);
   diffCss(c ? c.css : {}, n.css, n.domRef, context);
-  if (n.type === 1 /* VNode */) {
-    diffChildren(c ? c.children : [], n.children, n.domRef, context);
-    drawCanvas(n);
-  }
+  diffChildren(c ? c.children : [], n.children, n.domRef, context);
+  drawCanvas(n);
 }
 function diffClass(c, n, domRef, context) {
   if (!c && !n) {
@@ -226,27 +262,35 @@ function populateDomRef(c, context) {
     c.domRef = context.createElement(c.tag);
   }
 }
-function callCreated(n, context) {
+function callCreated(parent, n, context) {
   switch (n.type) {
     case 0 /* VComp */:
-      if (n.onBeforeMounted)
-        n.onBeforeMounted();
-      mountComponent(n, context);
+      mountComponent(parent, 0 /* APPEND */, null, n, context);
       break;
     case 1 /* VNode */:
       if (n.onCreated)
         n.onCreated(n.domRef);
       break;
   }
-  return n.domRef;
 }
-function createElement(n, context) {
+function createElement(parent, op, replacing, n, context) {
   switch (n.type) {
+    case 2 /* VText */:
+      n.domRef = context.createTextNode(n.text);
+      switch (op) {
+        case 2 /* INSERT_BEFORE */:
+          context.insertBefore(parent, n.domRef, replacing);
+          break;
+        case 0 /* APPEND */:
+          context.appendChild(parent, n.domRef);
+          break;
+        case 1 /* REPLACE */:
+          context.replaceChild(parent, n.domRef, replacing);
+          break;
+      }
+      break;
     case 0 /* VComp */:
-      if (n.onBeforeMounted)
-        n.onBeforeMounted();
-      populateDomRef(n, context);
-      mountComponent(n, context);
+      mountComponent(parent, op, replacing, n, context);
       break;
     case 1 /* VNode */:
       if (n.onBeforeCreated)
@@ -254,10 +298,20 @@ function createElement(n, context) {
       populateDomRef(n, context);
       if (n.onCreated)
         n.onCreated(n.domRef);
+      diffAttrs(null, n, context);
+      switch (op) {
+        case 2 /* INSERT_BEFORE */:
+          context.insertBefore(parent, n.domRef, replacing);
+          break;
+        case 0 /* APPEND */:
+          context.appendChild(parent, n.domRef);
+          break;
+        case 1 /* REPLACE */:
+          context.replaceChild(parent, n.domRef, replacing);
+          break;
+      }
       break;
   }
-  diffAttrs(null, n, context);
-  return n.domRef;
 }
 function drawCanvas(c) {
   if (c.tag === "canvas" && c.draw)
@@ -265,25 +319,45 @@ function drawCanvas(c) {
 }
 function unmountComponent(c) {
   if (c.onUnmounted)
-    c.onUnmounted(c.domRef);
-  c.unmount(c.domRef);
+    c.onUnmounted(drill(c));
+  c.unmount(c.componentId);
 }
-function mountComponent(obj, context) {
-  obj.mount(obj, (componentId, componentTree) => {
-    obj.children.push(componentTree);
-    context.appendChild(obj.domRef, componentTree.domRef);
-    if (obj.onMounted)
-      obj.onMounted(obj.domRef);
+function mountComponent(parent, op, replacing, n, context) {
+  if (n.onBeforeMounted)
+    n.onBeforeMounted();
+  n.mount(parent, (componentId, componentTree) => {
+    n.componentId = componentId;
+    n.child = componentTree;
+    componentTree.parent = n;
+    if (componentTree.type !== 0 /* VComp */) {
+      const childDomRef = getDOMRef(componentTree);
+      if (op === 1 /* REPLACE */ && replacing) {
+        context.replaceChild(parent, childDomRef, replacing);
+      } else if (op === 2 /* INSERT_BEFORE */) {
+        context.insertBefore(parent, childDomRef, replacing);
+      }
+    }
   });
+  if (n.onMounted)
+    n.onMounted(drill(n));
 }
-function create(obj, parent, context) {
-  if (obj.type === 2 /* VText */) {
-    obj.domRef = context.createTextNode(obj.text);
-    context.appendChild(parent, obj.domRef);
+function create(n, parent, context) {
+  if (n.type === 2 /* VText */) {
+    n.domRef = context.createTextNode(n.text);
+    context.appendChild(parent, n.domRef);
   } else {
-    context.appendChild(parent, createElement(obj, context));
+    createElement(parent, 0 /* APPEND */, null, n, context);
   }
 }
+function insertBefore(parent, n, o, context) {
+  context.insertBefore(parent, getDOMRef(n), o ? getDOMRef(o) : null);
+}
+function removeChild(parent, n, context) {
+  context.removeChild(parent, getDOMRef(n));
+}
+function swapDOMRef(oLast, oFirst, parent, context) {
+  context.swapDOMRefs(getDOMRef(oLast), getDOMRef(oFirst), parent);
+}
 function syncChildren(os, ns, parent, context) {
   var oldFirstIndex = 0, newFirstIndex = 0, oldLastIndex = os.length - 1, newLastIndex = ns.length - 1, tmp, nFirst, nLast, oLast, oFirst, found, node;
   for (;; ) {
@@ -296,13 +370,13 @@ function syncChildren(os, ns, parent, context) {
     oLast = os[oldLastIndex];
     if (oldFirstIndex > oldLastIndex) {
       diff(null, nFirst, parent, context);
-      context.insertBefore(parent, nFirst.domRef, oFirst ? oFirst.domRef : null);
+      insertBefore(parent, nFirst, oFirst, context);
       os.splice(newFirstIndex, 0, nFirst);
       newFirstIndex++;
     } else if (newFirstIndex > newLastIndex) {
       tmp = oldLastIndex;
       while (oldLastIndex >= oldFirstIndex) {
-        context.removeChild(parent, os[oldLastIndex--].domRef);
+        removeChild(parent, os[oldLastIndex--], context);
       }
       os.splice(oldFirstIndex, tmp - oldFirstIndex + 1);
       break;
@@ -311,16 +385,16 @@ function syncChildren(os, ns, parent, context) {
     } else if (oLast.key === nLast.key) {
       diff(os[oldLastIndex--], ns[newLastIndex--], parent, context);
     } else if (oFirst.key === nLast.key && nFirst.key === oLast.key) {
-      context.swapDOMRefs(oLast.domRef, oFirst.domRef, parent);
+      swapDOMRef(oLast, oFirst, parent, context);
       swap(os, oldFirstIndex, oldLastIndex);
       diff(os[oldFirstIndex++], ns[newFirstIndex++], parent, context);
       diff(os[oldLastIndex--], ns[newLastIndex--], parent, context);
     } else if (oFirst.key === nLast.key) {
-      context.insertBefore(parent, oFirst.domRef, context.nextSibling(oLast));
+      insertBefore(parent, oFirst, oLast.nextSibling, context);
       os.splice(oldLastIndex, 0, os.splice(oldFirstIndex, 1)[0]);
       diff(os[oldLastIndex--], ns[newLastIndex--], parent, context);
     } else if (oLast.key === nFirst.key) {
-      context.insertBefore(parent, oLast.domRef, oFirst.domRef);
+      insertBefore(parent, oLast, oFirst, context);
       os.splice(oldFirstIndex, 0, os.splice(oldLastIndex, 1)[0]);
       diff(os[oldFirstIndex++], nFirst, parent, context);
       newFirstIndex++;
@@ -338,18 +412,10 @@ function syncChildren(os, ns, parent, context) {
       if (found) {
         os.splice(oldFirstIndex, 0, os.splice(tmp, 1)[0]);
         diff(os[oldFirstIndex++], nFirst, parent, context);
-        context.insertBefore(parent, node.domRef, os[oldFirstIndex].domRef);
+        insertBefore(parent, node, os[oldFirstIndex], context);
         newFirstIndex++;
       } else {
-        switch (nFirst.type) {
-          case 2 /* VText */:
-            nFirst.domRef = context.createTextNode(nFirst.text);
-            context.insertBefore(parent, nFirst.domRef, oFirst.domRef);
-            break;
-          default:
-            context.insertBefore(parent, createElement(nFirst, context), oFirst.domRef);
-            break;
-        }
+        createElement(parent, 2 /* INSERT_BEFORE */, getDOMRef(oFirst), nFirst, context);
         os.splice(oldFirstIndex++, 0, nFirst);
         newFirstIndex++;
         oldLastIndex++;
@@ -415,7 +481,19 @@ function delegateEvent(event, obj, stack, debug, context) {
     }
     return;
   } else if (stack.length > 1) {
-    if (obj.type === 0 /* VComp */ || obj.type === 1 /* VNode */) {
+    if (obj.type === 2 /* VText */) {
+      return;
+    } else if (obj.type === 0 /* VComp */) {
+      if (!obj.child) {
+        if (debug) {
+          console.error("VComp has no child property set during event delegation", obj);
+          console.error("This means the Component has not been fully mounted, this should never happen");
+          throw new Error("VComp has no .child property set during event delegation");
+        }
+        return;
+      }
+      return delegateEvent(event, obj.child, stack, debug, context);
+    } else if (obj.type === 1 /* VNode */) {
       if (context.isEqual(obj.domRef, stack[0])) {
         const eventObj = obj.events.captures[event.type];
         if (eventObj) {
@@ -432,15 +510,15 @@ function delegateEvent(event, obj, stack, debug, context) {
         stack.splice(0, 1);
       }
       for (const child of obj.children) {
-        if (child.type === 0 /* VComp */ || child.type === 1 /* VNode */) {
-          if (context.isEqual(child.domRef, stack[0])) {
-            delegateEvent(event, child, stack, debug, context);
-          }
-        }
+        delegateEvent(event, child, stack, debug, context);
       }
     }
   } else {
-    if (obj.type === 1 /* VNode */) {
+    if (obj.type === 0 /* VComp */) {
+      if (obj.child) {
+        delegateEvent(event, obj.child, stack, debug, context);
+      }
+    } else if (obj.type === 1 /* VNode */) {
       const eventCaptureObj = obj.events.captures[event.type];
       if (eventCaptureObj && !event["captureStopped"]) {
         const options = eventCaptureObj.options;
@@ -549,45 +627,16 @@ function collapseSiblingTextNodes(vs) {
   }
   return adjusted;
 }
-function preamble(mountPoint, context) {
-  var mountChildIdx = 0, node;
-  var root = context.getRoot();
-  if (!mountPoint) {
-    if (root.childNodes.length > 0) {
-      node = root.firstChild;
-    } else {
-      node = root.appendChild(context.createElement("div"));
-    }
-  } else if (mountPoint.childNodes.length === 0) {
-    node = mountPoint.appendChild(context.createElement("div"));
-  } else {
-    while (mountPoint.childNodes[mountChildIdx] && (mountPoint.childNodes[mountChildIdx].nodeType === 3 || mountPoint.childNodes[mountChildIdx].localName === "script")) {
-      mountChildIdx++;
-    }
-    if (!mountPoint.childNodes[mountChildIdx]) {
-      node = root.appendChild(context.createElement("div"));
-    } else {
-      node = mountPoint.childNodes[mountChildIdx];
-    }
-  }
-  return node;
-}
 function hydrate(logLevel, mountPoint, vtree, context, drawingContext) {
-  const node = preamble(mountPoint, drawingContext);
+  if (!vtree || !mountPoint)
+    return false;
+  let node = drawingContext.getRoot() === mountPoint ? mountPoint.firstChild : mountPoint;
   if (!walk(logLevel, vtree, node, context, drawingContext)) {
     if (logLevel) {
       console.warn("[DEBUG_HYDRATE] Could not copy DOM into virtual DOM, falling back to diff");
     }
     while (context.firstChild(node))
       drawingContext.removeChild(node, context.lastChild(node));
-    vtree.domRef = node;
-    switch (vtree.type) {
-      case 2 /* VText */:
-        break;
-      default:
-        diffAttrs(null, vtree, drawingContext);
-        break;
-    }
     return false;
   } else {
     if (logLevel) {
@@ -626,7 +675,7 @@ function check(result, vtree, context, drawingContext) {
       console.warn("VText node content differs", vtree);
       result = false;
     }
-  } else {
+  } else if (vtree.type === 1 /* VNode */) {
     if (vtree.tag.toUpperCase() !== context.getTag(vtree.domRef).toUpperCase()) {
       console.warn("Integrity check failed, tags differ", vtree.tag.toUpperCase(), context.getTag(vtree.domRef));
       result = false;
@@ -678,16 +727,25 @@ function check(result, vtree, context, drawingContext) {
 function walk(logLevel, vtree, node, context, drawingContext) {
   switch (vtree.type) {
     case 0 /* VComp */:
-      vtree.domRef = node;
-      callCreated(vtree, drawingContext);
+      if (!walk(logLevel, vtree.child, node, context, drawingContext)) {
+        return false;
+      }
       break;
     case 2 /* VText */:
+      if (node.nodeType !== 3 || vtree.text.trim() !== node.textContent.trim()) {
+        diagnoseError(logLevel, vtree, node);
+        return false;
+      }
       vtree.domRef = node;
       break;
     case 1 /* VNode */:
+      if (node.nodeType !== 1) {
+        diagnoseError(logLevel, vtree, node);
+        return false;
+      }
       vtree.domRef = node;
       vtree.children = collapseSiblingTextNodes(vtree.children);
-      callCreated(vtree, drawingContext);
+      callCreated(node, vtree, drawingContext);
       for (var i = 0;i < vtree.children.length; i++) {
         const vdomChild = vtree.children[i];
         const domChild = node.childNodes[i];
@@ -695,27 +753,11 @@ function walk(logLevel, vtree, node, context, drawingContext) {
           diagnoseError(logLevel, vdomChild, domChild);
           return false;
         }
-        switch (vdomChild.type) {
-          case 2 /* VText */:
-            if (domChild.nodeType !== 3) {
-              diagnoseError(logLevel, vdomChild, domChild);
-              return false;
-            }
-            if (vdomChild.text === domChild.textContent) {
-              vdomChild.domRef = context.children(node)[i];
-            } else {
-              diagnoseError(logLevel, vdomChild, domChild);
-              return false;
-            }
-            break;
-          default:
-            if (domChild.nodeType !== 1)
-              return false;
-            vdomChild.domRef = domChild;
-            walk(logLevel, vdomChild, domChild, context, drawingContext);
-            break;
+        if (!walk(logLevel, vdomChild, domChild, context, drawingContext)) {
+          return false;
         }
       }
+      break;
   }
   return true;
 }
@@ -790,20 +832,6 @@ function fetchCore(url, method, body, requestHeaders, successful, errorful, resp
     errorful({ body: null, error: err.message, headers, status });
   }
 }
-function getParentComponentId(vcompNode) {
-  var climb = function(node) {
-    let parentComponentId = null;
-    while (node && node.parentNode) {
-      if ("componentId" in node.parentNode) {
-        parentComponentId = node.parentNode["componentId"];
-        break;
-      }
-      node = node.parentNode;
-    }
-    return parentComponentId;
-  };
-  return climb(vcompNode);
-}
 function websocketConnect(url, onOpen, onClose, onMessageText, onMessageJSON, onMessageBLOB, onMessageArrayBuffer, onError, textOnly) {
   try {
     let socket = new WebSocket(url);
@@ -970,7 +998,15 @@ var componentContext = {
 };
 var drawingContext = {
   nextSibling: (node) => {
-    return node.domRef.nextSibling;
+    if (node.nextSibling) {
+      switch (node.nextSibling.type) {
+        case 0 /* VComp */:
+          return drill(node.nextSibling);
+        default:
+          return node.nextSibling.domRef;
+      }
+    }
+    return null;
   },
   createTextNode: (s) => {
     return document.createTextNode(s);
@@ -1001,10 +1037,10 @@ var drawingContext = {
   insertBefore: (parent, child, node) => {
     return parent.insertBefore(child, node);
   },
-  swapDOMRefs: (a, b, p) => {
-    const tmp = a.nextSibling;
-    p.insertBefore(a, b);
-    p.insertBefore(b, tmp);
+  swapDOMRefs: (oLast, oFirst, p) => {
+    const tmp = oLast.nextSibling;
+    p.insertBefore(oLast, oFirst);
+    p.insertBefore(oFirst, tmp);
     return;
   },
   setInlineStyle: (cCss, nCss, node) => {
@@ -1080,7 +1116,6 @@ globalThis["miso"] = {
   websocketSend,
   undelegate,
   populateClass,
-  getParentComponentId,
   integrityCheck,
   setDrawingContext: function(name) {
     const drawing = globalThis[name]["drawingContext"];
diff --git a/js/miso.prod.js b/js/miso.prod.js
index 8508c8121..d55dc543d 100644
--- a/js/miso.prod.js
+++ b/js/miso.prod.js
@@ -1 +1 @@
-function J(G,K,Q,X){if(!G&&!K)return;else if(!G)WG(K,Q,X);else if(!K)QG(G,Q,X);else if(G.type===2&&K.type===2)KG(G,K,X);else if(G.type===0&&K.type===0)if(K.tag===G.tag&&K.key===G.key)K.domRef=G.domRef,A(G,K,X);else E(G,K,Q,X);else if(G.type===1&&K.type===1)if(K.tag===G.tag&&K.key===G.key)K.domRef=G.domRef,A(G,K,X);else E(G,K,Q,X);else E(G,K,Q,X)}function KG(G,K,Q){if(G.text!==K.text)Q.setTextContent(G.domRef,K.text);K.domRef=G.domRef;return}function E(G,K,Q,X){switch(G.type){case 2:break;default:S(G);break}switch(K.type){case 2:switch(G.type){default:K.domRef=X.createTextNode(K.text),X.replaceChild(Q,K.domRef,G.domRef);break}break;default:X.replaceChild(Q,O(K,X),G.domRef);break}switch(G.type){case 2:break;default:N(G);break}}function QG(G,K,Q){switch(G.type){case 2:break;default:S(G);break}switch(Q.removeChild(K,G.domRef),G.type){case 2:break;default:N(G);break}}function N(G){UG(G);for(let K of G.children)if(K.type===1||K.type===0)N(K)}function UG(G){if(G.type===1&&G.onDestroyed)G.onDestroyed();if(G.type===0)HG(G)}function XG(G){switch(G.type){case 0:if(G.onBeforeUnmounted)G.onBeforeUnmounted();break;case 1:if(G.onBeforeDestroyed)G.onBeforeDestroyed();break;default:break}}function S(G){XG(G);for(let K of G.children)if(K.type===1||K.type===0)S(K)}function A(G,K,Q){if(ZG(G?G.props:{},K.props,K.domRef,K.ns==="svg",Q),YG(G?G.classList:null,K.classList,K.domRef,Q),_G(G?G.css:{},K.css,K.domRef,Q),K.type===1)qG(G?G.children:[],K.children,K.domRef,Q),zG(K)}function YG(G,K,Q,X){if(!G&&!K)return;if(!G){for(let U of K)X.addClass(U,Q);return}if(!K){for(let U of G)X.removeClass(U,Q);return}for(let U of G)if(!K.has(U))X.removeClass(U,Q);for(let U of K)if(!G.has(U))X.addClass(U,Q);return}function ZG(G,K,Q,X,U){var Z;for(let Y in G)if(Z=K[Y],Z===void 0)if(X||!(Y in Q)||Y==="disabled")U.removeAttribute(Q,Y);else U.setAttribute(Q,Y,"");else{if(Z===G[Y]&&Y!=="checked"&&Y!=="value")continue;if(X)if(Y==="href")U.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else U.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=Z;else U.setAttribute(Q,Y,Z)}for(let Y in K){if(G&&G[Y])continue;if(Z=K[Y],X)if(Y==="href")U.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else U.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=K[Y];else U.setAttribute(Q,Y,Z)}}function _G(G,K,Q,X){X.setInlineStyle(G,K,Q)}function $G(G,K){if(G.length===0||K.length===0)return!1;for(var Q=0;Q<G.length;Q++)if(G[Q].key===null||G[Q].key===void 0)return!1;for(var Q=0;Q<K.length;Q++)if(K[Q].key===null||K[Q].key===void 0)return!1;return!0}function qG(G,K,Q,X){if($G(G,K))JG(G,K,Q,X);else for(let U=0;U<Math.max(K.length,G.length);U++)J(G[U],K[U],Q,X)}function l(G,K){if(G.ns==="svg")G.domRef=K.createElementNS("http://www.w3.org/2000/svg",G.tag);else if(G.ns==="mathml")G.domRef=K.createElementNS("http://www.w3.org/1998/Math/MathML",G.tag);else G.domRef=K.createElement(G.tag)}function M(G,K){switch(G.type){case 0:if(G.onBeforeMounted)G.onBeforeMounted();x(G,K);break;case 1:if(G.onCreated)G.onCreated(G.domRef);break}return G.domRef}function O(G,K){switch(G.type){case 0:if(G.onBeforeMounted)G.onBeforeMounted();l(G,K),x(G,K);break;case 1:if(G.onBeforeCreated)G.onBeforeCreated();if(l(G,K),G.onCreated)G.onCreated(G.domRef);break}return A(null,G,K),G.domRef}function zG(G){if(G.tag==="canvas"&&G.draw)G.draw(G.domRef)}function HG(G){if(G.onUnmounted)G.onUnmounted(G.domRef);G.unmount(G.domRef)}function x(G,K){G.mount(G,(Q,X)=>{if(G.children.push(X),K.appendChild(G.domRef,X.domRef),G.onMounted)G.onMounted(G.domRef)})}function WG(G,K,Q){if(G.type===2)G.domRef=Q.createTextNode(G.text),Q.appendChild(K,G.domRef);else Q.appendChild(K,O(G,Q))}function JG(G,K,Q,X){var U=0,Z=0,Y=G.length-1,_=K.length-1,z,q,$,H,W,B,i;for(;;){if(Z>_&&U>Y)break;if(q=K[Z],$=K[_],W=G[U],H=G[Y],U>Y)J(null,q,Q,X),X.insertBefore(Q,q.domRef,W?W.domRef:null),G.splice(Z,0,q),Z++;else if(Z>_){z=Y;while(Y>=U)X.removeChild(Q,G[Y--].domRef);G.splice(U,z-U+1);break}else if(W.key===q.key)J(G[U++],K[Z++],Q,X);else if(H.key===$.key)J(G[Y--],K[_--],Q,X);else if(W.key===$.key&&q.key===H.key)X.swapDOMRefs(H.domRef,W.domRef,Q),AG(G,U,Y),J(G[U++],K[Z++],Q,X),J(G[Y--],K[_--],Q,X);else if(W.key===$.key)X.insertBefore(Q,W.domRef,X.nextSibling(H)),G.splice(Y,0,G.splice(U,1)[0]),J(G[Y--],K[_--],Q,X);else if(H.key===q.key)X.insertBefore(Q,H.domRef,W.domRef),G.splice(U,0,G.splice(Y,1)[0]),J(G[U++],q,Q,X),Z++;else{B=!1,z=U;while(z<=Y){if(G[z].key===q.key){B=!0,i=G[z];break}z++}if(B)G.splice(U,0,G.splice(z,1)[0]),J(G[U++],q,Q,X),X.insertBefore(Q,i.domRef,G[U].domRef),Z++;else{switch(q.type){case 2:q.domRef=X.createTextNode(q.text),X.insertBefore(Q,q.domRef,W.domRef);break;default:X.insertBefore(Q,O(q,X),W.domRef);break}G.splice(U++,0,q),Z++,Y++}}}}function AG(G,K,Q){let X=G[K];G[K]=G[Q],G[Q]=X}function P(G,K,Q,X,U){for(let Z of K)U.addEventListener(G,Z.name,function(Y){a(Y,G,Q,X,U)},Z.capture)}function L(G,K,Q,X,U){for(let Z of K)U.removeEventListener(G,Z.name,function(Y){a(Y,G,Q,X,U)},Z.capture)}function a(G,K,Q,X,U){Q(function(Z){if(Array.isArray(G))for(let Y of G)d(Y,Z,K,X,U);else d(G,Z,K,X,U)})}function d(G,K,Q,X,U){var Z=U.getTarget(G);if(Z){let Y=DG(Q,Z,U);r(G,K,Y,X,U)}}function DG(G,K,Q){var X=[];while(!Q.isEqual(G,K))if(X.unshift(K),K&&Q.parentNode(K))K=Q.parentNode(K);else return X;return X}function r(G,K,Q,X,U){if(!Q.length){if(X)console.warn('Event "'+G.type+'" did not find an event handler to dispatch on',K,G);return}else if(Q.length>1){if(K.type===0||K.type===1){if(U.isEqual(K.domRef,Q[0])){let Z=K.events.captures[G.type];if(Z){let Y=Z.options;if(Y.preventDefault)G.preventDefault();if(!G.captureStopped)Z.runEvent(G,K.domRef);if(Y.stopPropagation)G.captureStopped=!0}Q.splice(0,1)}for(let Z of K.children)if(Z.type===0||Z.type===1){if(U.isEqual(Z.domRef,Q[0]))r(G,Z,Q,X,U)}}}else if(K.type===1){let Z=K.events.captures[G.type];if(Z&&!G.captureStopped){let _=Z.options;if(U.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Z.runEvent(G,Q[0]),_.stopPropagation)G.captureStopped=!0}}let Y=K.events.bubbles[G.type];if(Y&&!G.captureStopped){let _=Y.options;if(U.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Y.runEvent(G,Q[0]),!_.stopPropagation)p(K.parent,G)}}else if(!G.captureStopped)p(K.parent,G)}}function p(G,K){while(G)switch(G.type){case 2:break;case 1:let Q=G.events.bubbles[K.type];if(Q){let X=Q.options;if(X.preventDefault)K.preventDefault();if(Q.runEvent(K,G.domRef),X.stopPropagation)return}G=G.parent;break;case 0:if(!G.eventPropagation)return;G=G.parent;break}}function D(G,K){if(typeof G[0]==="object"){var Q=[];for(var X=0;X<G.length;X++)Q.push(D(G[X],K));return Q}for(let _ of G)K=K[_];var U;if(K instanceof Array||"length"in K&&K.localName!=="select"){U=[];for(var Z=0;Z<K.length;Z++)U.push(D([],K[Z]));return U}U={};for(var Y in BG(K)){if(K.localName==="input"&&(Y==="selectionDirection"||Y==="selectionStart"||Y==="selectionEnd"))continue;if(typeof K[Y]=="string"||typeof K[Y]=="number"||typeof K[Y]=="boolean")U[Y]=K[Y]}return U}function BG(G){var K={},Q=0;do{var X=Object.getOwnPropertyNames(G);for(Q=0;Q<X.length;Q++)K[X[Q]]=null}while(G=Object.getPrototypeOf(G));return K}function EG(G){var K=0,Q=G.length>0?[G[0]]:[];for(var X=1;X<G.length;X++){if(Q[K].type===2&&G[X].type===2){Q[K].text+=G[X].text;continue}Q[++K]=G[X]}return Q}function RG(G,K){var Q=0,X,U=K.getRoot();if(!G)if(U.childNodes.length>0)X=U.firstChild;else X=U.appendChild(K.createElement("div"));else if(G.childNodes.length===0)X=G.appendChild(K.createElement("div"));else{while(G.childNodes[Q]&&(G.childNodes[Q].nodeType===3||G.childNodes[Q].localName==="script"))Q++;if(!G.childNodes[Q])X=U.appendChild(K.createElement("div"));else X=G.childNodes[Q]}return X}function V(G,K,Q,X,U){let Z=RG(K,U);if(!o(G,Q,Z,X,U)){if(G)console.warn("[DEBUG_HYDRATE] Could not copy DOM into virtual DOM, falling back to diff");while(X.firstChild(Z))U.removeChild(Z,X.lastChild(Z));switch(Q.domRef=Z,Q.type){case 2:break;default:A(null,Q,U);break}return!1}else if(G)console.info("[DEBUG_HYDRATE] Successfully prerendered page");return!0}function F(G,K,Q){if(G)console.warn("[DEBUG_HYDRATE] VTree differed from node",K,Q)}function s(G){if(G.substr(0,1)=="#"){let K=(G.length-1)/3,Q=[17,1,0.062272][K-1];return[Math.round(parseInt(G.substr(1,K),16)*Q),Math.round(parseInt(G.substr(1+K,K),16)*Q),Math.round(parseInt(G.substr(1+2*K,K),16)*Q)]}else return G.split("(")[1].split(")")[0].split(",").map((K)=>{return+K})}function I(G,K,Q){return c(!0,G,K,Q)}function c(G,K,Q,X){if(K.type==2){if(Q.getTag(K.domRef)!=="#text")console.warn("VText domRef not a TEXT_NODE",K),G=!1;else if(K.text!==Q.getTextContent(K.domRef))console.warn("VText node content differs",K),G=!1}else{if(K.tag.toUpperCase()!==Q.getTag(K.domRef).toUpperCase())console.warn("Integrity check failed, tags differ",K.tag.toUpperCase(),Q.getTag(K.domRef)),G=!1;if("children"in K&&K.children.length!==Q.children(K.domRef).length)console.warn("Integrity check failed, children lengths differ",K,K.children,Q.children(K.domRef)),G=!1;for(let U in K.props)if(U==="href"||U==="src"){let Z=window.location.origin+"/"+K.props[U],Y=Q.getAttribute(K.domRef,U),_=K.props[U];if(Z!==Y&&_!==Y&&_+"/"!==Y&&Z+"/"!==Y)console.warn("Property "+U+" differs",K.props[U],Q.getAttribute(K.domRef,U)),G=!1}else if(U==="height"||U==="width"){if(parseFloat(K.props[U])!==parseFloat(Q.getAttribute(K.domRef,U)))console.warn("Property "+U+" differs",K.props[U],Q.getAttribute(K.domRef,U)),G=!1}else if(U==="class"||U==="className"){if(K.props[U]!==Q.getAttribute(K.domRef,"class"))console.warn("Property class differs",K.props[U],Q.getAttribute(K.domRef,"class")),G=!1}else if(K.props[U]!==Q.getAttribute(K.domRef,U))console.warn("Property "+U+" differs",K.props[U],Q.getAttribute(K.domRef,U)),G=!1;for(let U in K.css)if(U==="color"){if(s(Q.getInlineStyle(K.domRef,U)).toString()!==s(K.css[U]).toString())console.warn("Style "+U+" differs",K.css[U],Q.getInlineStyle(K.domRef,U)),G=!1}else if(K.css[U]!==Q.getInlineStyle(K.domRef,U))console.warn("Style "+U+" differs",K.css[U],Q.getInlineStyle(K.domRef,U)),G=!1;for(let U of K.children){let Z=c(G,U,Q,X);G=G&&Z}}return G}function o(G,K,Q,X,U){switch(K.type){case 0:K.domRef=Q,M(K,U);break;case 2:K.domRef=Q;break;case 1:K.domRef=Q,K.children=EG(K.children),M(K,U);for(var Z=0;Z<K.children.length;Z++){let Y=K.children[Z],_=Q.childNodes[Z];if(!_)return F(G,Y,_),!1;switch(Y.type){case 2:if(_.nodeType!==3)return F(G,Y,_),!1;if(Y.text===_.textContent)Y.domRef=X.children(Q)[Z];else return F(G,Y,_),!1;break;default:if(_.nodeType!==1)return!1;Y.domRef=_,o(G,Y,_,X,U);break}}}return!0}var w="1.9.0.0";function f(G,K){var Q=function(){var X=document.getElementById(G);if(X&&X.focus)X.focus()};K>0?setTimeout(Q,K):Q()}function C(G,K){var Q=function(){var X=document.getElementById(G);if(X&&X.blur)X.blur()};K>0?setTimeout(Q,K):Q()}function j(G,K){var Q=function(){var X=document.getElementById(G);if(X&&typeof X.select==="function")X.select()};K>0?setTimeout(Q,K):Q()}function k(G,K,Q,X){var U=function(){var Z=document.getElementById(G);if(Z&&typeof Z.setSelectionRange==="function")Z.setSelectionRange(K,Q,"none")};X>0?setTimeout(U,X):U()}function T(G,K,Q,X,U,Z,Y){var _={method:K,headers:X};if(Q)_.body=Q;let z={},q=null;try{fetch(G,_).then(($)=>{q=$.status;for(let[H,W]of $.headers)z[H]=W;if(!$.ok)throw new Error($.statusText);if(Y=="json")return $.json();else if(Y=="text")return $.text();else if(Y==="arrayBuffer")return $.arrayBuffer();else if(Y==="blob")return $.blob();else if(Y==="bytes")return $.bytes();else if(Y==="formData")return $.formData();else if(Y==="none")return U({error:null,body:null,headers:z,status:q})}).then(($)=>U({error:null,body:$,headers:z,status:q})).catch(($)=>Z({error:null,body:$,headers:z,status:q}))}catch($){Z({body:null,error:$.message,headers:z,status:q})}}function b(G){var K=function(Q){let X=null;while(Q&&Q.parentNode){if("componentId"in Q.parentNode){X=Q.parentNode.componentId;break}Q=Q.parentNode}return X};return K(G)}function g(G,K,Q,X,U,Z,Y,_,z){try{let q=new WebSocket(G);return q.onopen=function(){K()},q.onclose=function($){Q($)},q.onerror=function($){console.error($),_("WebSocket error received")},q.onmessage=function($){if(typeof $.data==="string")try{if(z){if(X)X($.data);return}let H=JSON.parse($.data);if(U)U(H)}catch(H){if(z&&X)X($.data);else _(H.message)}else if($.data instanceof Blob){if(Z)Z($.data)}else if($.data instanceof ArrayBuffer){if(Y)Y($.data)}else console.error("Received unknown message type from WebSocket",$),_("Unknown message received from WebSocket")},q}catch(q){_(q.message)}}function h(G){if(G)G.close(),G=null}function u(G,K){if(K&&G&&G.readyState===WebSocket.OPEN)G.send(K)}function y(G,K,Q,X,U,Z){try{let Y=new EventSource(G);return Y.onopen=function(){K()},Y.onerror=function(){U("EventSource error received")},Y.onmessage=function(_){try{if(Z){if(Q)Q(_.data);return}let z=JSON.parse(_.data);if(X)X(z)}catch(z){if(Z&&Q)Q(_.data);else U(z.message)}},Y}catch(Y){U(Y.message)}}function m(G){if(G)G.close(),G=null}function v(G,K){if(!G.classList)G.classList=new Set;for(let Q of K)for(let X of Q.trim().split(" "))if(X)G.classList.add(X)}var n={addEventListener:(G,K,Q,X)=>{G.addEventListener(K,Q,X)},removeEventListener:(G,K,Q,X)=>{G.removeEventListener(K,Q,X)},isEqual:(G,K)=>{return G===K},getTarget:(G)=>{return G.target},parentNode:(G)=>{return G.parentNode}},t={getInlineStyle:(G,K)=>{return G.style[K]},firstChild:(G)=>{return G.firstChild},lastChild:(G)=>{return G.lastChild},getAttribute:(G,K)=>{if(K==="class")return G.className;if(K in G)return G[K];return G.getAttribute(K)},getTag:(G)=>{return G.nodeName},getTextContent:(G)=>{return G.textContent},children:(G)=>{return G.childNodes}},e={mountComponent:function(G,K,Q){return},unmountComponent:function(G){return},modelHydration:function(G){return}},GG={nextSibling:(G)=>{return G.domRef.nextSibling},createTextNode:(G)=>{return document.createTextNode(G)},createElementNS:(G,K)=>{return document.createElementNS(G,K)},appendChild:(G,K)=>{return G.appendChild(K)},replaceChild:(G,K,Q)=>{return G.replaceChild(K,Q)},removeChild:(G,K)=>{return G.removeChild(K)},createElement:(G)=>{return document.createElement(G)},addClass:(G,K)=>{if(G)K.classList.add(G)},removeClass:(G,K)=>{if(G)K.classList.remove(G)},insertBefore:(G,K,Q)=>{return G.insertBefore(K,Q)},swapDOMRefs:(G,K,Q)=>{let X=G.nextSibling;Q.insertBefore(G,K),Q.insertBefore(K,X);return},setInlineStyle:(G,K,Q)=>{var X;for(let U in G)if(X=K[U],!X)if(U in Q.style)Q.style[U]="";else Q.style.setProperty(U,"");else if(X!==G[U])if(U in Q.style)Q.style[U]=X;else Q.style.setProperty(U,X);for(let U in K){if(G&&G[U])continue;if(U in Q.style)Q.style[U]=K[U];else Q.style.setProperty(U,K[U])}return},setAttribute:(G,K,Q)=>{return G.setAttribute(K,Q)},setAttributeNS:(G,K,Q,X)=>{return G.setAttributeNS(K,Q,X)},removeAttribute:(G,K)=>{return G.removeAttribute(K)},setTextContent:(G,K)=>{G.textContent=K;return},flush:()=>{return},getRoot:function(){return document.body}};globalThis.miso={hydrationContext:t,eventContext:n,drawingContext:GG,componentContext:e,diff:J,hydrate:V,version:w,delegate:P,callBlur:C,callFocus:f,callSelect:j,callSetSelectionRange:k,eventJSON:D,fetchCore:T,eventSourceConnect:y,eventSourceClose:m,websocketConnect:g,websocketClose:h,websocketSend:u,undelegate:L,populateClass:v,getParentComponentId:b,integrityCheck:I,setDrawingContext:function(G){let K=globalThis[G].drawingContext,Q=globalThis[G].eventContext;if(!K)console.error('Custom rendering engine ("drawingContext") is not defined at globalThis[name].drawingContext',G);if(!Q)console.error('Custom event delegation ("eventContext") is not defined at globalThis[name].eventContext',G);globalThis.miso.drawingContext=K,globalThis.miso.eventContext=Q}};
+function W(G,K,Q,U){if(!G&&!K)return;else if(!G)JG(K,Q,U);else if(!K)UG(G,Q,U);else if(G.type===2&&K.type===2)QG(G,K,U);else if(G.type===0&&K.type===0){if(K.key===G.key){K.child=G.child;return}P(G,K,Q,U)}else if(G.type===1&&K.type===1)if(K.tag===G.tag&&K.key===G.key)K.domRef=G.domRef,d(G,K,U);else P(G,K,Q,U);else P(G,K,Q,U)}function QG(G,K,Q){if(G.text!==K.text)Q.setTextContent(G.domRef,K.text);K.domRef=G.domRef;return}function E(G){if(!G.child)throw new Error("'drill' called on an unmounted Component. This should never happen, please make an issue.");switch(G.child.type){case 0:return E(G.child);default:return G.child.domRef}}function J(G){switch(G.type){case 0:return E(G);default:return G.domRef}}function P(G,K,Q,U){switch(G.type){case 2:break;default:S(G);break}switch(K.type){case 2:K.domRef=U.createTextNode(K.text),U.replaceChild(Q,K.domRef,J(G));break;case 0:R(Q,1,J(G),K,U);break;case 1:R(Q,1,J(G),K,U);break}switch(G.type){case 2:break;default:D(G);break}}function UG(G,K,Q){switch(G.type){case 2:break;default:S(G);break}switch(Q.removeChild(K,J(G)),G.type){case 2:break;default:D(G);break}}function D(G){switch(XG(G),G.type){case 1:for(let K of G.children)if(K.type===1||K.type===0)D(K);break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)D(G.child)}break}}function XG(G){if(G.type===1&&G.onDestroyed)G.onDestroyed();if(G.type===0)AG(G)}function YG(G){switch(G.type){case 0:if(G.onBeforeUnmounted)G.onBeforeUnmounted();break;case 1:if(G.onBeforeDestroyed)G.onBeforeDestroyed();break;default:break}}function S(G){switch(YG(G),G.type){case 1:for(let K of G.children){if(K.type===2)continue;S(K)}break;case 0:if(G.child){if(G.child.type===1||G.child.type===0)S(G.child)}break}}function d(G,K,Q){_G(G?G.props:{},K.props,K.domRef,K.ns==="svg",Q),ZG(G?G.classList:null,K.classList,K.domRef,Q),$G(G?G.css:{},K.css,K.domRef,Q),zG(G?G.children:[],K.children,K.domRef,Q),WG(K)}function ZG(G,K,Q,U){if(!G&&!K)return;if(!G){for(let X of K)U.addClass(X,Q);return}if(!K){for(let X of G)U.removeClass(X,Q);return}for(let X of G)if(!K.has(X))U.removeClass(X,Q);for(let X of K)if(!G.has(X))U.addClass(X,Q);return}function _G(G,K,Q,U,X){var Z;for(let Y in G)if(Z=K[Y],Z===void 0)if(U||!(Y in Q)||Y==="disabled")X.removeAttribute(Q,Y);else X.setAttribute(Q,Y,"");else{if(Z===G[Y]&&Y!=="checked"&&Y!=="value")continue;if(U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=Z;else X.setAttribute(Q,Y,Z)}for(let Y in K){if(G&&G[Y])continue;if(Z=K[Y],U)if(Y==="href")X.setAttributeNS(Q,"http://www.w3.org/1999/xlink","href",Z);else X.setAttribute(Q,Y,Z);else if(Y in Q&&!(Y==="list"||Y==="form"))Q[Y]=K[Y];else X.setAttribute(Q,Y,Z)}}function $G(G,K,Q,U){U.setInlineStyle(G,K,Q)}function qG(G,K){if(G.length===0||K.length===0)return!1;for(var Q=0;Q<G.length;Q++)if(G[Q].key===null||G[Q].key===void 0)return!1;for(var Q=0;Q<K.length;Q++)if(K[Q].key===null||K[Q].key===void 0)return!1;return!0}function zG(G,K,Q,U){if(qG(G,K))NG(G,K,Q,U);else for(let X=0;X<Math.max(K.length,G.length);X++)W(G[X],K[X],Q,U)}function HG(G,K){if(G.ns==="svg")G.domRef=K.createElementNS("http://www.w3.org/2000/svg",G.tag);else if(G.ns==="mathml")G.domRef=K.createElementNS("http://www.w3.org/1998/Math/MathML",G.tag);else G.domRef=K.createElement(G.tag)}function p(G,K,Q){switch(K.type){case 0:a(G,0,null,K,Q);break;case 1:if(K.onCreated)K.onCreated(K.domRef);break}}function R(G,K,Q,U,X){switch(U.type){case 2:switch(U.domRef=X.createTextNode(U.text),K){case 2:X.insertBefore(G,U.domRef,Q);break;case 0:X.appendChild(G,U.domRef);break;case 1:X.replaceChild(G,U.domRef,Q);break}break;case 0:a(G,K,Q,U,X);break;case 1:if(U.onBeforeCreated)U.onBeforeCreated();if(HG(U,X),U.onCreated)U.onCreated(U.domRef);switch(d(null,U,X),K){case 2:X.insertBefore(G,U.domRef,Q);break;case 0:X.appendChild(G,U.domRef);break;case 1:X.replaceChild(G,U.domRef,Q);break}break}}function WG(G){if(G.tag==="canvas"&&G.draw)G.draw(G.domRef)}function AG(G){if(G.onUnmounted)G.onUnmounted(E(G));G.unmount(G.componentId)}function a(G,K,Q,U,X){if(U.onBeforeMounted)U.onBeforeMounted();if(U.mount(G,(Z,Y)=>{if(U.componentId=Z,U.child=Y,Y.parent=U,Y.type!==0){let _=J(Y);if(K===1&&Q)X.replaceChild(G,_,Q);else if(K===2)X.insertBefore(G,_,Q)}}),U.onMounted)U.onMounted(E(U))}function JG(G,K,Q){if(G.type===2)G.domRef=Q.createTextNode(G.text),Q.appendChild(K,G.domRef);else R(K,0,null,G,Q)}function N(G,K,Q,U){U.insertBefore(G,J(K),Q?J(Q):null)}function EG(G,K,Q){Q.removeChild(G,J(K))}function BG(G,K,Q,U){U.swapDOMRefs(J(G),J(K),Q)}function NG(G,K,Q,U){var X=0,Z=0,Y=G.length-1,_=K.length-1,z,q,$,H,A,F,x;for(;;){if(Z>_&&X>Y)break;if(q=K[Z],$=K[_],A=G[X],H=G[Y],X>Y)W(null,q,Q,U),N(Q,q,A,U),G.splice(Z,0,q),Z++;else if(Z>_){z=Y;while(Y>=X)EG(Q,G[Y--],U);G.splice(X,z-X+1);break}else if(A.key===q.key)W(G[X++],K[Z++],Q,U);else if(H.key===$.key)W(G[Y--],K[_--],Q,U);else if(A.key===$.key&&q.key===H.key)BG(H,A,Q,U),DG(G,X,Y),W(G[X++],K[Z++],Q,U),W(G[Y--],K[_--],Q,U);else if(A.key===$.key)N(Q,A,H.nextSibling,U),G.splice(Y,0,G.splice(X,1)[0]),W(G[Y--],K[_--],Q,U);else if(H.key===q.key)N(Q,H,A,U),G.splice(X,0,G.splice(Y,1)[0]),W(G[X++],q,Q,U),Z++;else{F=!1,z=X;while(z<=Y){if(G[z].key===q.key){F=!0,x=G[z];break}z++}if(F)G.splice(X,0,G.splice(z,1)[0]),W(G[X++],q,Q,U),N(Q,x,G[X],U),Z++;else R(Q,2,J(A),q,U),G.splice(X++,0,q),Z++,Y++}}}function DG(G,K,Q){let U=G[K];G[K]=G[Q],G[Q]=U}function L(G,K,Q,U,X){for(let Z of K)X.addEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function C(G,K,Q,U,X){for(let Z of K)X.removeEventListener(G,Z.name,function(Y){c(Y,G,Q,U,X)},Z.capture)}function c(G,K,Q,U,X){Q(function(Z){if(Array.isArray(G))for(let Y of G)s(Y,Z,K,U,X);else s(G,Z,K,U,X)})}function s(G,K,Q,U,X){var Z=X.getTarget(G);if(Z){let Y=SG(Q,Z,X);I(G,K,Y,U,X)}}function SG(G,K,Q){var U=[];while(!Q.isEqual(G,K))if(U.unshift(K),K&&Q.parentNode(K))K=Q.parentNode(K);else return U;return U}function I(G,K,Q,U,X){if(!Q.length){if(U)console.warn('Event "'+G.type+'" did not find an event handler to dispatch on',K,G);return}else if(Q.length>1){if(K.type===2)return;else if(K.type===0){if(!K.child){if(U)throw console.error("VComp has no child property set during event delegation",K),console.error("This means the Component has not been fully mounted, this should never happen"),new Error("VComp has no .child property set during event delegation");return}return I(G,K.child,Q,U,X)}else if(K.type===1){if(X.isEqual(K.domRef,Q[0])){let Z=K.events.captures[G.type];if(Z){let Y=Z.options;if(Y.preventDefault)G.preventDefault();if(!G.captureStopped)Z.runEvent(G,K.domRef);if(Y.stopPropagation)G.captureStopped=!0}Q.splice(0,1)}for(let Z of K.children)I(G,Z,Q,U,X)}}else if(K.type===0){if(K.child)I(G,K.child,Q,U,X)}else if(K.type===1){let Z=K.events.captures[G.type];if(Z&&!G.captureStopped){let _=Z.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Z.runEvent(G,Q[0]),_.stopPropagation)G.captureStopped=!0}}let Y=K.events.bubbles[G.type];if(Y&&!G.captureStopped){let _=Y.options;if(X.isEqual(Q[0],K.domRef)){if(_.preventDefault)G.preventDefault();if(Y.runEvent(G,Q[0]),!_.stopPropagation)r(K.parent,G)}}else if(!G.captureStopped)r(K.parent,G)}}function r(G,K){while(G)switch(G.type){case 2:break;case 1:let Q=G.events.bubbles[K.type];if(Q){let U=Q.options;if(U.preventDefault)K.preventDefault();if(Q.runEvent(K,G.domRef),U.stopPropagation)return}G=G.parent;break;case 0:if(!G.eventPropagation)return;G=G.parent;break}}function B(G,K){if(typeof G[0]==="object"){var Q=[];for(var U=0;U<G.length;U++)Q.push(B(G[U],K));return Q}for(let _ of G)K=K[_];var X;if(K instanceof Array||"length"in K&&K.localName!=="select"){X=[];for(var Z=0;Z<K.length;Z++)X.push(B([],K[Z]));return X}X={};for(var Y in RG(K)){if(K.localName==="input"&&(Y==="selectionDirection"||Y==="selectionStart"||Y==="selectionEnd"))continue;if(typeof K[Y]=="string"||typeof K[Y]=="number"||typeof K[Y]=="boolean")X[Y]=K[Y]}return X}function RG(G){var K={},Q=0;do{var U=Object.getOwnPropertyNames(G);for(Q=0;Q<U.length;Q++)K[U[Q]]=null}while(G=Object.getPrototypeOf(G));return K}function MG(G){var K=0,Q=G.length>0?[G[0]]:[];for(var U=1;U<G.length;U++){if(Q[K].type===2&&G[U].type===2){Q[K].text+=G[U].text;continue}Q[++K]=G[U]}return Q}function O(G,K,Q,U,X){if(!Q||!K)return!1;let Z=X.getRoot()===K?K.firstChild:K;if(!w(G,Q,Z,U,X)){if(G)console.warn("[DEBUG_HYDRATE] Could not copy DOM into virtual DOM, falling back to diff");while(U.firstChild(Z))X.removeChild(Z,U.lastChild(Z));return!1}else if(G)console.info("[DEBUG_HYDRATE] Successfully prerendered page");return!0}function V(G,K,Q){if(G)console.warn("[DEBUG_HYDRATE] VTree differed from node",K,Q)}function o(G){if(G.substr(0,1)=="#"){let K=(G.length-1)/3,Q=[17,1,0.062272][K-1];return[Math.round(parseInt(G.substr(1,K),16)*Q),Math.round(parseInt(G.substr(1+K,K),16)*Q),Math.round(parseInt(G.substr(1+2*K,K),16)*Q)]}else return G.split("(")[1].split(")")[0].split(",").map((K)=>{return+K})}function f(G,K,Q){return n(!0,G,K,Q)}function n(G,K,Q,U){if(K.type==2){if(Q.getTag(K.domRef)!=="#text")console.warn("VText domRef not a TEXT_NODE",K),G=!1;else if(K.text!==Q.getTextContent(K.domRef))console.warn("VText node content differs",K),G=!1}else if(K.type===1){if(K.tag.toUpperCase()!==Q.getTag(K.domRef).toUpperCase())console.warn("Integrity check failed, tags differ",K.tag.toUpperCase(),Q.getTag(K.domRef)),G=!1;if("children"in K&&K.children.length!==Q.children(K.domRef).length)console.warn("Integrity check failed, children lengths differ",K,K.children,Q.children(K.domRef)),G=!1;for(let X in K.props)if(X==="href"||X==="src"){let Z=window.location.origin+"/"+K.props[X],Y=Q.getAttribute(K.domRef,X),_=K.props[X];if(Z!==Y&&_!==Y&&_+"/"!==Y&&Z+"/"!==Y)console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="height"||X==="width"){if(parseFloat(K.props[X])!==parseFloat(Q.getAttribute(K.domRef,X)))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1}else if(X==="class"||X==="className"){if(K.props[X]!==Q.getAttribute(K.domRef,"class"))console.warn("Property class differs",K.props[X],Q.getAttribute(K.domRef,"class")),G=!1}else if(K.props[X]!==Q.getAttribute(K.domRef,X))console.warn("Property "+X+" differs",K.props[X],Q.getAttribute(K.domRef,X)),G=!1;for(let X in K.css)if(X==="color"){if(o(Q.getInlineStyle(K.domRef,X)).toString()!==o(K.css[X]).toString())console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1}else if(K.css[X]!==Q.getInlineStyle(K.domRef,X))console.warn("Style "+X+" differs",K.css[X],Q.getInlineStyle(K.domRef,X)),G=!1;for(let X of K.children){let Z=n(G,X,Q,U);G=G&&Z}}return G}function w(G,K,Q,U,X){switch(K.type){case 0:if(!w(G,K.child,Q,U,X))return!1;break;case 2:if(Q.nodeType!==3||K.text.trim()!==Q.textContent.trim())return V(G,K,Q),!1;K.domRef=Q;break;case 1:if(Q.nodeType!==1)return V(G,K,Q),!1;K.domRef=Q,K.children=MG(K.children),p(Q,K,X);for(var Z=0;Z<K.children.length;Z++){let Y=K.children[Z],_=Q.childNodes[Z];if(!_)return V(G,Y,_),!1;if(!w(G,Y,_,U,X))return!1}break}return!0}var j="1.9.0.0";function k(G,K){var Q=function(){var U=document.getElementById(G);if(U&&U.focus)U.focus()};K>0?setTimeout(Q,K):Q()}function b(G,K){var Q=function(){var U=document.getElementById(G);if(U&&U.blur)U.blur()};K>0?setTimeout(Q,K):Q()}function h(G,K){var Q=function(){var U=document.getElementById(G);if(U&&typeof U.select==="function")U.select()};K>0?setTimeout(Q,K):Q()}function T(G,K,Q,U){var X=function(){var Z=document.getElementById(G);if(Z&&typeof Z.setSelectionRange==="function")Z.setSelectionRange(K,Q,"none")};U>0?setTimeout(X,U):X()}function u(G,K,Q,U,X,Z,Y){var _={method:K,headers:U};if(Q)_.body=Q;let z={},q=null;try{fetch(G,_).then(($)=>{q=$.status;for(let[H,A]of $.headers)z[H]=A;if(!$.ok)throw new Error($.statusText);if(Y=="json")return $.json();else if(Y=="text")return $.text();else if(Y==="arrayBuffer")return $.arrayBuffer();else if(Y==="blob")return $.blob();else if(Y==="bytes")return $.bytes();else if(Y==="formData")return $.formData();else if(Y==="none")return X({error:null,body:null,headers:z,status:q})}).then(($)=>X({error:null,body:$,headers:z,status:q})).catch(($)=>Z({error:null,body:$,headers:z,status:q}))}catch($){Z({body:null,error:$.message,headers:z,status:q})}}function g(G,K,Q,U,X,Z,Y,_,z){try{let q=new WebSocket(G);return q.onopen=function(){K()},q.onclose=function($){Q($)},q.onerror=function($){console.error($),_("WebSocket error received")},q.onmessage=function($){if(typeof $.data==="string")try{if(z){if(U)U($.data);return}let H=JSON.parse($.data);if(X)X(H)}catch(H){if(z&&U)U($.data);else _(H.message)}else if($.data instanceof Blob){if(Z)Z($.data)}else if($.data instanceof ArrayBuffer){if(Y)Y($.data)}else console.error("Received unknown message type from WebSocket",$),_("Unknown message received from WebSocket")},q}catch(q){_(q.message)}}function m(G){if(G)G.close(),G=null}function y(G,K){if(K&&G&&G.readyState===WebSocket.OPEN)G.send(K)}function i(G,K,Q,U,X,Z){try{let Y=new EventSource(G);return Y.onopen=function(){K()},Y.onerror=function(){X("EventSource error received")},Y.onmessage=function(_){try{if(Z){if(Q)Q(_.data);return}let z=JSON.parse(_.data);if(U)U(z)}catch(z){if(Z&&Q)Q(_.data);else X(z.message)}},Y}catch(Y){X(Y.message)}}function v(G){if(G)G.close(),G=null}function l(G,K){if(!G.classList)G.classList=new Set;for(let Q of K)for(let U of Q.trim().split(" "))if(U)G.classList.add(U)}var t={addEventListener:(G,K,Q,U)=>{G.addEventListener(K,Q,U)},removeEventListener:(G,K,Q,U)=>{G.removeEventListener(K,Q,U)},isEqual:(G,K)=>{return G===K},getTarget:(G)=>{return G.target},parentNode:(G)=>{return G.parentNode}},e={getInlineStyle:(G,K)=>{return G.style[K]},firstChild:(G)=>{return G.firstChild},lastChild:(G)=>{return G.lastChild},getAttribute:(G,K)=>{if(K==="class")return G.className;if(K in G)return G[K];return G.getAttribute(K)},getTag:(G)=>{return G.nodeName},getTextContent:(G)=>{return G.textContent},children:(G)=>{return G.childNodes}},GG={mountComponent:function(G,K,Q){return},unmountComponent:function(G){return},modelHydration:function(G){return}},KG={nextSibling:(G)=>{if(G.nextSibling)switch(G.nextSibling.type){case 0:return E(G.nextSibling);default:return G.nextSibling.domRef}return null},createTextNode:(G)=>{return document.createTextNode(G)},createElementNS:(G,K)=>{return document.createElementNS(G,K)},appendChild:(G,K)=>{return G.appendChild(K)},replaceChild:(G,K,Q)=>{return G.replaceChild(K,Q)},removeChild:(G,K)=>{return G.removeChild(K)},createElement:(G)=>{return document.createElement(G)},addClass:(G,K)=>{if(G)K.classList.add(G)},removeClass:(G,K)=>{if(G)K.classList.remove(G)},insertBefore:(G,K,Q)=>{return G.insertBefore(K,Q)},swapDOMRefs:(G,K,Q)=>{let U=G.nextSibling;Q.insertBefore(G,K),Q.insertBefore(K,U);return},setInlineStyle:(G,K,Q)=>{var U;for(let X in G)if(U=K[X],!U)if(X in Q.style)Q.style[X]="";else Q.style.setProperty(X,"");else if(U!==G[X])if(X in Q.style)Q.style[X]=U;else Q.style.setProperty(X,U);for(let X in K){if(G&&G[X])continue;if(X in Q.style)Q.style[X]=K[X];else Q.style.setProperty(X,K[X])}return},setAttribute:(G,K,Q)=>{return G.setAttribute(K,Q)},setAttributeNS:(G,K,Q,U)=>{return G.setAttributeNS(K,Q,U)},removeAttribute:(G,K)=>{return G.removeAttribute(K)},setTextContent:(G,K)=>{G.textContent=K;return},flush:()=>{return},getRoot:function(){return document.body}};globalThis.miso={hydrationContext:e,eventContext:t,drawingContext:KG,componentContext:GG,diff:W,hydrate:O,version:j,delegate:L,callBlur:b,callFocus:k,callSelect:h,callSetSelectionRange:T,eventJSON:B,fetchCore:u,eventSourceConnect:i,eventSourceClose:v,websocketConnect:g,websocketClose:m,websocketSend:y,undelegate:C,populateClass:l,integrityCheck:f,setDrawingContext:function(G){let K=globalThis[G].drawingContext,Q=globalThis[G].eventContext;if(!K)console.error('Custom rendering engine ("drawingContext") is not defined at globalThis[name].drawingContext',G);if(!Q)console.error('Custom event delegation ("eventContext") is not defined at globalThis[name].eventContext',G);globalThis.miso.drawingContext=K,globalThis.miso.eventContext=Q}};
diff --git a/src/Miso.hs b/src/Miso.hs
index 3668b241e..5aebe5bf6 100644
--- a/src/Miso.hs
+++ b/src/Miso.hs
@@ -28,6 +28,8 @@ module Miso
   , startComponent
   , component
   , (+>)
+  , mount
+  , mount_
     -- ** Sink
   , withSink
   , Sink
@@ -132,7 +134,7 @@ miso :: Eq model => (URI -> App model action) -> JSM ()
 miso f = withJS $ do
   vcomp <- f <$> getURI
   body <- FFI.getBody
-  initialize Hydrate isRoot vcomp (pure body)
+  initialize rootComponentId Hydrate isRoot vcomp (pure body)
 -----------------------------------------------------------------------------
 -- | Synonym for 'startComponent'.
 --
@@ -181,8 +183,8 @@ initComponent
   => Component parent model action
   -> JSM (ComponentState model action)
 initComponent vcomp@Component {..} = do
-  mount <- mountElement (getMountPoint mountPoint)
-  initialize Draw isRoot vcomp (pure mount)
+  root <- mountElement (getMountPoint mountPoint)
+  initialize rootComponentId Draw isRoot vcomp (pure root)
 ----------------------------------------------------------------------------
 isRoot :: Bool
 isRoot = True
diff --git a/src/Miso/Effect.hs b/src/Miso/Effect.hs
index c5b7f7ac3..b3836dafd 100644
--- a/src/Miso/Effect.hs
+++ b/src/Miso/Effect.hs
@@ -171,9 +171,9 @@ type Effect parent model action = RWS (ComponentInfo parent) [Schedule action] m
 --
 -- All t'IO' is by default asynchronous, use the 'sync' function for synchronous
 -- execution. Beware 'sync' can block the render thread for a specific
--- 'Component'.
+-- t'Miso.Types.Component'.
 --
--- N.B. During 'Miso.Types.Component' unmounting, all effects are evaluated
+-- N.B. During t'Miso.Types.Component' unmounting, all effects are evaluated
 -- synchronously.
 --
 -- @since 1.9.0.0
diff --git a/src/Miso/FFI.hs b/src/Miso/FFI.hs
index df8b8a546..b8424fad2 100644
--- a/src/Miso/FFI.hs
+++ b/src/Miso/FFI.hs
@@ -58,9 +58,6 @@ module Miso.FFI
   , toLocaleString
   , getSeconds
   , getMilliseconds
-    -- ** 'Miso.Types.Component'
-  , getParentComponentId
-  , getComponentId
     -- ** DOM Traversal
   , nextSibling
   , previousSibling
diff --git a/src/Miso/FFI/Internal.hs b/src/Miso/FFI/Internal.hs
index 8f53fa064..e24b7238b 100644
--- a/src/Miso/FFI/Internal.hs
+++ b/src/Miso/FFI/Internal.hs
@@ -112,9 +112,6 @@ module Miso.FFI.Internal
    -- * Utils
    , getMilliseconds
    , getSeconds
-   -- * 'Miso.Types.Component'
-   , getParentComponentId
-   , getComponentId
    -- * Element
    , files
    , click
@@ -393,7 +390,7 @@ eventJSON x y = do
   moduleMiso <- jsg "miso"
   moduleMiso # "eventJSON" $ [x,y]
 -----------------------------------------------------------------------------
--- | Populate the `classList` Set on the virtual DOM.
+-- | Populate the 'Miso.Html.Property.classList' Set on the virtual DOM.
 populateClass
     :: JSVal
     -- ^ Node
@@ -516,13 +513,13 @@ undelegate mountPoint events debug callback ctx = do
 --
 -- See [hydration](https://en.wikipedia.org/wiki/Hydration_(web_development))
 --
-hydrate :: Bool -> JSVal -> JSVal -> JSM ()
-hydrate logLevel mountPoint vtree = void $ do
+hydrate :: Bool -> JSVal -> JSVal -> JSM JSVal
+hydrate logLevel mountPoint vtree = do
   ll <- toJSVal logLevel
   drawingContext <- getDrawingContext
   hydrationContext <- getHydrationContext
   moduleMiso <- jsg "miso"
-  void $ moduleMiso # "hydrate" $ [ll, mountPoint, vtree, hydrationContext, drawingContext]
+  moduleMiso # "hydrate" $ (ll, mountPoint, vtree, hydrationContext, drawingContext)
 -----------------------------------------------------------------------------
 -- | Fails silently if the element is not found.
 --
@@ -747,18 +744,6 @@ getSeconds date =
   fromJSValUnchecked =<< do
     date # "getSeconds" $ ([] :: [MisoString])
 -----------------------------------------------------------------------------
--- | Climb the tree, get the parent.
-getParentComponentId :: JSVal -> JSM (Maybe Int)
-getParentComponentId domRef =
-  fromJSVal =<< do
-    jsg "miso" # "getParentComponentId" $ [domRef]
------------------------------------------------------------------------------
--- | Get access to the 'Miso.Effect.ComponentId'
--- N.B. you * must * call this on the DOMRef, otherwise, problems.
--- For use in 'Miso.Event.onMounted', etc.
-getComponentId :: JSVal -> JSM Int
-getComponentId vtree = fromJSValUnchecked =<< vtree ! "componentId"
------------------------------------------------------------------------------
 -- | Fetch next sibling DOM node
 --
 -- @since 1.9.0.0
diff --git a/src/Miso/Html/Render.hs b/src/Miso/Html/Render.hs
index 52dc0f282..6d7f7ae9b 100644
--- a/src/Miso/Html/Render.hs
+++ b/src/Miso/Html/Render.hs
@@ -96,8 +96,8 @@ renderBuilder (VNode ns tag attrs children) = mconcat
               , ns == MATHML
               ]
 
-renderBuilder (VComp ns tag attrs (SomeComponent vcomp)) =
-  renderBuilder (VNode ns tag attrs vkids)
+renderBuilder (VComp _ (SomeComponent vcomp)) =
+  foldMap renderBuilder vkids
     where
 #ifdef SSR
       vkids = [ unsafeCoerce $ (view vcomp) $ getInitialComponentModel vcomp ]
@@ -113,6 +113,7 @@ renderAttrs (ClassList classes) =
   , fromMisoString (MS.unwords classes)
   , stringUtf8 "\""
   ]
+renderAttrs (Property "key" _) = mempty
 renderAttrs (Property key value) =
   mconcat
   [ fromMisoString key
diff --git a/src/Miso/Hydrate.hs b/src/Miso/Hydrate.hs
index cbcce369f..62eb55334 100644
--- a/src/Miso/Hydrate.hs
+++ b/src/Miso/Hydrate.hs
@@ -20,8 +20,9 @@ import qualified Miso.FFI.Internal as FFI
 import           Miso.Types
 -----------------------------------------------------------------------------
 -- | Hydration of a t'VTree'
-hydrate :: LogLevel -> DOMRef -> VTree -> JSM ()
+hydrate :: LogLevel -> DOMRef -> VTree -> JSM Bool
 hydrate loggingLevel domRef vtree = do
   jval <- toJSVal vtree
-  FFI.hydrate (loggingLevel `elem` [DebugHydrate, DebugAll]) domRef jval
+  fromJSValUnchecked =<<
+    FFI.hydrate (loggingLevel `elem` [DebugHydrate, DebugAll]) domRef jval
 -----------------------------------------------------------------------------
diff --git a/src/Miso/Runtime.hs b/src/Miso/Runtime.hs
index 89e7542db..3db818bdd 100644
--- a/src/Miso/Runtime.hs
+++ b/src/Miso/Runtime.hs
@@ -120,14 +120,15 @@ import           Miso.Effect ( ComponentInfo(..), Sub, Sink, Effect, Schedule(..
 -- | Helper function to abstract out initialization of t'Miso.Types.Component' between top-level API functions.
 initialize
   :: (Eq parent, Eq model)
-  => Hydrate
+  => ComponentId
+  -> Hydrate
   -> Bool
   -- ^ Is the root node being rendered?
   -> Component parent model action
   -> JSM DOMRef
   -- ^ Callback function is used for obtaining the t'Miso.Types.Component' 'DOMRef'.
   -> JSM (ComponentState model action)
-initialize hydrate isRoot Component {..} getComponentMountPoint = do
+initialize componentParentId hydrate isRoot Component {..} getComponentMountPoint = do
   Waiter {..} <- liftIO waiter
   componentActions <- liftIO (newIORef S.empty)
   let
@@ -152,22 +153,25 @@ initialize hydrate isRoot Component {..} getComponentMountPoint = do
 #ifdef BENCH
     start <- if isRoot then FFI.now else pure 0
 #endif
-    vtree <- buildVTree hydrate componentSink logLevel events (view initializedModel)
+    vtree <- buildVTree componentId hydrate componentSink logLevel events (view initializedModel)
 #ifdef BENCH
     end <- if isRoot then FFI.now else pure 0
     when isRoot $ FFI.consoleLog $ ms (printf "buildVTree: %.3f ms" (end - start) :: String)
 #endif
+    ref <- liftIO (newIORef vtree)
     case hydrate of
       Draw -> do
         Diff.diff Nothing (Just vtree) componentDOMRef
+        pure ref
       Hydrate -> do
-        Hydrate.hydrate logLevel componentDOMRef vtree
-    liftIO (newIORef vtree)
+        when isRoot $ do
+          hydrated <- Hydrate.hydrate logLevel componentDOMRef vtree
+          when (not hydrated) $ do
+            newTree <- buildVTree componentId Draw componentSink logLevel events (view initializedModel)
+            liftIO (atomicWriteIORef ref newTree)
+            Diff.diff Nothing (Just newTree) componentDOMRef
+        pure ref
   componentDOMRef <# ("componentId" :: MisoString) $ componentId
-  componentParentId <- do
-    FFI.getParentComponentId componentDOMRef >>= \case
-      Nothing -> pure rootComponentId
-      Just parentId -> pure parentId
   componentSubThreads <- liftIO (newIORef M.empty)
   forM_ subs $ \sub -> do
     threadId <- FFI.forkJSM (sub componentSink)
@@ -185,7 +189,7 @@ initialize hydrate isRoot Component {..} getComponentMountPoint = do
       updatedName <- liftIO $ updatedModel `seq` makeStableName updatedModel
       isDirty <- liftIO (readTVarIO componentIsDirty)
       when ((currentName /= updatedName && currentModel /= updatedModel) || isDirty) $ do
-        newVTree <- buildVTree Draw componentSink logLevel events (view updatedModel)
+        newVTree <- buildVTree componentId Draw componentSink logLevel events (view updatedModel)
         oldVTree <- liftIO (readIORef componentVTree)
         void waitForAnimationFrame
         Diff.diff (Just oldVTree) (Just newVTree) componentDOMRef
@@ -233,14 +237,14 @@ initialize hydrate isRoot Component {..} getComponentMountPoint = do
   let vcomp = ComponentState
         { componentNotify = notify
         , componentEvents = events
+        , componentParentId = componentParentId
         , ..
         }
 
   registerComponent vcomp
   if isRoot
     then
-      delegator componentDOMRef componentVTree
-        events (logLevel `elem` [DebugEvents, DebugAll])
+      delegator componentDOMRef componentVTree events (logLevel `elem` [DebugEvents, DebugAll])
     else
       addToDelegatedEvents logLevel events
   forM_ initialAction componentSink
@@ -820,33 +824,47 @@ killSubscribers componentId =
 -- process we go between the Haskell heap and the JS heap.
 buildVTree
   :: Eq model
-  => Hydrate
+  => ComponentId
+  -> Hydrate
   -> Sink action
   -> LogLevel
   -> Events
   -> View model action
   -> JSM VTree
-buildVTree hydrate snk logLevel_ events_ = \case
-  VComp ns tag attrs (SomeComponent app) -> do
+buildVTree parentId hydrate snk logLevel_ events_ = \case
+  VComp attrs (SomeComponent app) -> do
+    vcomp <- create
+
     mountCallback <- do
-      FFI.syncCallback2 $ \vcomp continuation -> do
-        domRef <- vcomp ! ("domRef" :: MisoString)
-        ComponentState {..} <- initialize hydrate False app (pure domRef)
+      FFI.syncCallback2 $ \parent_ continuation -> do
+        ComponentState {..} <- initialize parentId Draw False app (pure parent_)
         vtree <- toJSVal =<< liftIO (readIORef componentVTree)
         FFI.set "parent" vcomp (Object vtree)
         vcompId <- toJSVal componentId
-        FFI.set "componentId" vcompId (Object domRef)
         void $ call continuation global [vcompId, vtree]
+
     unmountCallback <- toJSVal =<< do
-      FFI.syncCallback1 $ \domRef -> do
-        componentId <- liftJSM (FFI.getComponentId domRef)
+      FFI.syncCallback1 $ \vcompId -> do
+        componentId <- fromJSValUnchecked vcompId
         IM.lookup componentId <$> liftIO (readIORef components) >>= \case
           Nothing -> pure ()
           Just componentState ->
             unmount app componentState
-    vcomp <- createNode "vcomp" ns tag
+
+    case hydrate of
+      Hydrate -> do
+        -- Mock .domRef for use during hydration
+        domRef <- toJSVal =<< create
+        ComponentState {..} <- initialize parentId hydrate False app (pure domRef)
+        vtree <- toJSVal =<< liftIO (readIORef componentVTree)
+        FFI.set "parent" vcomp (Object vtree)
+        vcompId <- toJSVal componentId
+        FFI.set "componentId" vcompId vcomp
+        FFI.set "child" vtree vcomp
+      Draw -> do
+        FFI.set "child" jsNull vcomp        
+      
     setAttrs vcomp attrs snk (logLevel app) (events app)
-    flip (FFI.set "children") vcomp =<< toJSVal ([] :: [MisoString])
     flip (FFI.set "mount") vcomp =<< toJSVal mountCallback
     FFI.set "unmount" unmountCallback vcomp
     FFI.set "eventPropagation" (eventPropagation app) vcomp
@@ -858,11 +876,11 @@ buildVTree hydrate snk logLevel_ events_ = \case
     vchildren <- toJSVal =<< procreate vnode
     flip (FFI.set "children") vnode vchildren
     flip (FFI.set "type") vnode =<< toJSVal VNodeType
-    pure $ VTree vnode
+    pure (VTree vnode)
       where
         procreate parentVTree = do
           kidsViews <- forM kids $ \kid -> do
-            VTree child <- buildVTree hydrate snk logLevel_ events_ kid
+            VTree child <- buildVTree parentId hydrate snk logLevel_ events_ kid
             FFI.set "parent" parentVTree child
             pure child
           setNextSibling kidsViews
@@ -876,7 +894,7 @@ buildVTree hydrate snk logLevel_ events_ = \case
     forM_ key $ \k -> FFI.set "key" (ms k) vtree
     FFI.set "ns" ("text" :: JSString) vtree
     FFI.set "text" t vtree
-    pure $ VTree vtree
+    pure (VTree vtree)
 -----------------------------------------------------------------------------
 -- | @createNode@
 -- A helper function for constructing a vtree (used for @vcomp@ and @vnode@)
diff --git a/src/Miso/Types.hs b/src/Miso/Types.hs
index bc361a1c7..84365f73f 100644
--- a/src/Miso/Types.hs
+++ b/src/Miso/Types.hs
@@ -62,6 +62,8 @@ module Miso.Types
   , (<---)
   -- ** Component mounting
   , (+>)
+  , mount
+  , mount_
   -- ** Utils
   , getMountPoint
   , optionalAttrs
@@ -83,13 +85,13 @@ module Miso.Types
   , ms
   ) where
 -----------------------------------------------------------------------------
-import           Data.Aeson (Value, ToJSON)
+import           Data.Aeson (Value, ToJSON(..))
 import           Data.JSString (JSString)
 import qualified Data.Map.Strict as M
 import           Data.Maybe (fromMaybe, isJust)
 import           Data.String (IsString, fromString)
 import qualified Data.Text as T
-import           Language.Javascript.JSaddle (ToJSVal(toJSVal), Object(..), JSM)
+import           Language.Javascript.JSaddle (ToJSVal(toJSVal), Object(..), JSM, MakeObject)
 import           Prelude
 -----------------------------------------------------------------------------
 import           Miso.Binding ((<--), (-->), (<-->), (<---), (--->), (<--->), Binding(..))
@@ -264,7 +266,7 @@ data LogLevel
 data View model action
   = VNode NS MisoString [Attribute action] [View model action]
   | VText (Maybe Key) MisoString
-  | VComp NS MisoString [Attribute action] (SomeComponent model)
+  | VComp [Attribute action] (SomeComponent model)
   deriving Functor
 -----------------------------------------------------------------------------
 -- | Existential wrapper allowing nesting of t'Miso.Types.Component' in t'Miso.Types.Component'
@@ -277,26 +279,51 @@ data SomeComponent parent
 -- Used in the @view@ function to mount a t'Miso.Types.Component' on any 'VNode'.
 --
 -- @
---   div_ [ key_ "component-id" ] +> component model noop $ \\m ->
+--   "component-id" +> component model noop $ \\m ->
 --     div_ [ id_ "foo" ] [ text (ms m) ]
 -- @
 --
 -- @since 1.9.0.0
 (+>)
   :: forall child model action a . Eq child
-  => ([View model a] -> View model a)
+  => MisoString
   -> Component model child action
   -> View model a
 infixr 0 +>
-(+>) mkNode vcomp =
-  case mkNode [] of
-    VNode ns tag attrs _ ->
-      VComp ns tag attrs
-        (SomeComponent vcomp)
-    VComp ns tag attrs vcomp_ ->
-      VComp ns tag attrs vcomp_
-    _ ->
-      error "Impossible: cannot mount on a Text node"
+key +> vcomp = VComp [ Property "key" (toJSON key) ] (SomeComponent vcomp)
+-----------------------------------------------------------------------------
+-- | t'Miso.Types.Component' mounting combinator. Takes '[Attribute a]' as arguments.
+--
+-- @
+--   mount_ [ key_ "foo", onMounted Mounted ] $ component model noop $ \\m ->
+--     div_ [ id_ "foo" ] [ text (ms m) ]
+-- @
+--
+-- @since 1.9.0.0
+mount_
+  :: Eq m
+  => [Attribute action]
+  -> Component p m a
+  -> View p action
+mount_ attrs vcomp = VComp attrs (SomeComponent vcomp)
+-----------------------------------------------------------------------------
+-- | t'Miso.Types.Component' mounting combinator.
+--
+-- Note: only use this if you're certain you won't be diffing two t'Miso.Types.Component'
+-- against each other. Otherwise, you will need a key to distinguish between
+-- the two t'Miso.Types.Component', to ensure unmounting and mounting occurs.
+--
+-- @
+--   mount $ component model noop $ \\m ->
+--     div_ [ id_ "foo" ] [ text (ms m) ]
+-- @
+--
+-- @since 1.9.0.0
+mount
+  :: Eq m
+  => Component p m a
+  -> View p action
+mount = mount_ []
 -----------------------------------------------------------------------------
 -- | DOM element namespace.
 data NS
@@ -381,6 +408,7 @@ instance IsString (View model action) where
 --   Used for diffing, patching and event delegation.
 --   Not meant to be constructed directly, see t'Miso.Types.View' instead.
 newtype VTree = VTree { getTree :: Object }
+  deriving (MakeObject)
 -----------------------------------------------------------------------------
 instance ToJSVal VTree where
   toJSVal (VTree (Object vtree)) = pure vtree
diff --git a/tests/app/Main.hs b/tests/app/Main.hs
index 5be6836eb..af2ad989d 100644
--- a/tests/app/Main.hs
+++ b/tests/app/Main.hs
@@ -91,7 +91,7 @@ main = do
         _ <- jsm $ do
           startApp $
             component (0 :: Int) noop $ \_ ->
-              div_ [] (replicate 9999 (div_ [] +> testComponent))
+              div_ [] (replicate 9999 (mount testComponent))
         mountedComponents >>= (`shouldBe` 10000)
 #endif
 -----------------------------------------------------------------------------
diff --git a/ts/index.ts b/ts/index.ts
index 9fe13cb91..00fe95e36 100644
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -10,7 +10,6 @@ import {
   eventJSON,
   fetchCore,
   undelegate,
-  getParentComponentId,
   integrityCheck,
   eventSourceConnect,
   eventSourceClose,
@@ -50,7 +49,6 @@ globalThis['miso'] = {
     websocketSend,
     undelegate,
     populateClass,
-    getParentComponentId,
     integrityCheck,
     setDrawingContext : function (name) {
       // dmj: this looks for a custom globally defined rendering / event context
diff --git a/ts/miso.ts b/ts/miso.ts
index 2a5dfb5b4..1d7d36ca6 100644
--- a/ts/miso.ts
+++ b/ts/miso.ts
@@ -9,7 +9,6 @@ import {
    callSelect,
    callSetSelectionRange,
    fetchCore,
-   getParentComponentId,
    websocketConnect,
    websocketClose,
    websocketSend,
@@ -52,7 +51,6 @@ export {
   fetchCore,
   undelegate,
   integrityCheck,
-  getParentComponentId,
   websocketConnect,
   websocketClose,
   websocketSend,
diff --git a/ts/miso/context/dom.ts b/ts/miso/context/dom.ts
index 21cc7f794..c45318fe6 100644
--- a/ts/miso/context/dom.ts
+++ b/ts/miso/context/dom.ts
@@ -8,8 +8,11 @@ import
   , DOMRef
   , ComponentContext
   , VTree
+  , VTreeType
   } from '../types';
 
+import { drill } from '../dom'; 
+
 export const eventContext : EventContext<DOMRef> = {
   addEventListener : (mount: DOMRef, event: string, listener, capture: boolean) => {
       mount.addEventListener(event, listener, capture);
@@ -39,9 +42,9 @@ export const hydrationContext : HydrationContext<DOMRef> = {
     return node.lastChild as DOMRef;
   },
   getAttribute: (node: DOMRef, key: string) => {
-      if (key === 'class') return node.className;
-      if (key in node) return node[key];
-      return node.getAttribute(key);
+    if (key === 'class') return node.className;
+    if (key in node) return node[key];
+    return node.getAttribute(key);
   },
   getTag: (node: DOMRef) => {
     return node.nodeName;
@@ -68,7 +71,15 @@ export const componentContext : ComponentContext = {
 
 export const drawingContext : DrawingContext<DOMRef> = {
   nextSibling : (node: VTree<DOMRef>) => {
-    return node.domRef.nextSibling as DOMRef;
+    if (node.nextSibling) {
+      switch (node.nextSibling.type) {
+        case VTreeType.VComp:
+          return drill(node.nextSibling) as DOMRef;
+        default:
+          return node.nextSibling.domRef as DOMRef;
+      }
+    }
+    return null;
   },
   createTextNode : (s: string) => {
     return document.createTextNode(s) as any; // dmj: hrm
@@ -97,10 +108,10 @@ export const drawingContext : DrawingContext<DOMRef> = {
   insertBefore : (parent: DOMRef, child: DOMRef, node: DOMRef) => {
     return parent.insertBefore(child, node);
   },
-  swapDOMRefs : (a: DOMRef, b: DOMRef, p: DOMRef) => {
-    const tmp = a.nextSibling;
-    p.insertBefore(a, b);
-    p.insertBefore(b, tmp);
+  swapDOMRefs : (oLast: DOMRef, oFirst: DOMRef, p: DOMRef) => {
+    const tmp = oLast.nextSibling;
+    p.insertBefore(oLast, oFirst);
+    p.insertBefore(oFirst, tmp);
     return;
   },
   setInlineStyle: (cCss: CSS, nCss: CSS, node: DOMRef) => {
diff --git a/ts/miso/context/patch.ts b/ts/miso/context/patch.ts
index 1662b5bd2..43b4d6a25 100644
--- a/ts/miso/context/patch.ts
+++ b/ts/miso/context/patch.ts
@@ -2,12 +2,15 @@ import {
   ComponentId,
   EventCapture,
   DrawingContext,
-  VNode,
   NodeId,
   CSS,
-  ComponentContext
+  ComponentContext,
+  VTree,
+  VTreeType,
 } from '../types';
 
+import { drill } from '../dom';
+
 /*
 
   This file is used to provide testing for miso-lynx, or other patch-based architectures
@@ -93,8 +96,16 @@ export const componentContext : ComponentContext = {
 };
 
 export const patchDrawingContext : DrawingContext<NodeId> = {
-  nextSibling : (node: VNode<NodeId>) => {
-    return node.nextSibling.domRef;
+  nextSibling : (node: VTree<NodeId>) => {
+    if (node.nextSibling) {
+      switch (node.nextSibling.type) {
+        case VTreeType.VComp:
+          const drilled = drill (node.nextSibling);
+          return drilled ? drilled : null;
+        default:
+          return node.nextSibling.domRef as NodeId;
+      }
+    }
   },
   createTextNode : (value : string) => {
       const nodeId: number = nextNodeId ();
diff --git a/ts/miso/dom.ts b/ts/miso/dom.ts
index ced4bf0bd..009fb1494 100644
--- a/ts/miso/dom.ts
+++ b/ts/miso/dom.ts
@@ -1,23 +1,19 @@
-import { Class, DrawingContext, CSS, VNode, VText, VComp, ComponentId, VTree, Props, VTreeType } from './types';
+import { Class, DrawingContext, CSS, VNode, VText, VComp, ComponentId, VTree, Props, VTreeType, OP } from './types';
 
 /* virtual-dom diffing algorithm, applies patches as detected */
 export function diff<T>(c: VTree<T>, n: VTree<T>, parent: T, context: DrawingContext<T>): void {
-    if (!c && !n)
-        return;
-    else if (!c)
-        create(n, parent, context);
-    else if (!n)
-        destroy(c, parent, context);
+    if (!c && !n) return;
+    else if (!c) create(n, parent, context);
+    else if (!n) destroy(c, parent, context);
     else if (c.type === VTreeType.VText && n.type === VTreeType.VText) {
         diffVText(c, n, context);
     }
     else if (c.type === VTreeType.VComp && n.type === VTreeType.VComp) {
-        if (n.tag === c.tag && n.key === c.key) {
-          n.domRef = c.domRef;
-          diffAttrs(c, n, context);
-        } else {
-          replace(c, n, parent, context);
+        if (n.key === c.key) {
+          n.child = c.child;
+          return;
         }
+        replace(c, n, parent, context);
     }
     else if (c.type === VTreeType.VNode && n.type === VTreeType.VNode) {
         if (n.tag === c.tag && n.key === c.key) {
@@ -28,7 +24,7 @@ export function diff<T>(c: VTree<T>, n: VTree<T>, parent: T, context: DrawingCon
         }
     }
     else
-        replace(c, n, parent, context);
+      replace(c, n, parent, context);
 }
 
 function diffVText<T>(c: VText<T>, n: VText<T>, context : DrawingContext<T>): void {
@@ -37,6 +33,27 @@ function diffVText<T>(c: VText<T>, n: VText<T>, context : DrawingContext<T>): vo
   return;
 }
 
+//c.child should never be null
+export function drill<T>(c: VComp<T>): T {
+  if (!c.child) throw new Error ("'drill' called on an unmounted Component. This should never happen, please make an issue.");
+  switch (c.child.type) {
+    case VTreeType.VComp:
+      return drill (c.child)
+    default:
+      return c.child.domRef;
+  }
+}
+
+// Extract DOM reference from any VTree (handles VComp drilling)
+function getDOMRef<T>(tree: VTree<T>): T {
+  switch (tree.type) {
+    case VTreeType.VComp:
+      return drill(tree);
+    default:
+      return tree.domRef;
+  }
+}
+
 
 // replace everything function
 function replace<T>(c: VTree<T>, n: VTree<T>, parent: T, context : DrawingContext<T>): void {
@@ -50,16 +67,15 @@ function replace<T>(c: VTree<T>, n: VTree<T>, parent: T, context : DrawingContex
   }
   switch (n.type) {
       case VTreeType.VText:
-          switch (c.type) {
-              default:
-                n.domRef = context.createTextNode(n.text);
-                context.replaceChild(parent, n.domRef, c.domRef);
-                break;
-          }
+          n.domRef = context.createTextNode(n.text);
+          context.replaceChild(parent, n.domRef, getDOMRef(c));
           break;
-      default:
-        context.replaceChild(parent, createElement(n, context), c.domRef as T);
-        break;
+      case VTreeType.VComp:
+          createElement(parent, OP.REPLACE, getDOMRef(c), n, context);
+          break;
+      case VTreeType.VNode:
+          createElement(parent, OP.REPLACE, getDOMRef(c), n, context);
+          break;    
   }
   // step 3: call destroyed hooks, call created hooks
   switch (c.type) {
@@ -82,7 +98,7 @@ function destroy<T>(c: VTree<T>, parent: T, context: DrawingContext<T>): void {
           break;
   }
   // step 2: destroy
-  context.removeChild(parent, c.domRef);
+  context.removeChild(parent, getDOMRef(c));
   // step 3: invoke post-hooks for vnode and vcomp
   switch (c.type) {
       case VTreeType.VText:
@@ -96,10 +112,20 @@ function destroy<T>(c: VTree<T>, parent: T, context: DrawingContext<T>): void {
 // ** recursive calls to hooks
 function callDestroyedRecursive<T>(c: VNode<T> | VComp<T>): void {
   callDestroyed(c);
-  for (const child of c.children) {
-    if (child.type === VTreeType.VNode || child.type === VTreeType.VComp) {
-       callDestroyedRecursive(child);
-    }
+  switch (c.type) {
+    case VTreeType.VNode:
+      for (const child of c.children) {
+        if (child.type === VTreeType.VNode || child.type === VTreeType.VComp) {
+           callDestroyedRecursive(child);
+        }
+      }
+      break;
+    case VTreeType.VComp:
+      if (c.child) {
+        if (c.child.type === VTreeType.VNode || c.child.type === VTreeType.VComp)
+          callDestroyedRecursive(c.child);
+      }
+      break;
   }
 }
 
@@ -123,19 +149,28 @@ function callBeforeDestroyed<T>(c: VNode<T> | VComp<T>): void {
 
 function callBeforeDestroyedRecursive<T>(c: VNode<T> | VComp<T>): void {
   callBeforeDestroyed(c);
-  for (const child of c.children)
-    if (child.type === VTreeType.VNode || child.type === VTreeType.VComp)
-       callBeforeDestroyedRecursive(child);
+  switch (c.type) {
+    case VTreeType.VNode:
+      for (const child of c.children) {
+         if (child.type === VTreeType.VText) continue;
+         callBeforeDestroyedRecursive(child);
+      }
+      break;
+    case VTreeType.VComp:
+      if (c.child) { 
+        if (c.child.type === VTreeType.VNode || c.child.type === VTreeType.VComp)
+          callBeforeDestroyedRecursive(c.child);
+      }
+      break;
+  }
 }
 
-export function diffAttrs<T>(c: VNode<T> | VComp<T> | null, n: VNode<T> | VComp<T>, context: DrawingContext<T>): void {
+export function diffAttrs<T>(c: VNode<T> | null, n: VNode<T>, context: DrawingContext<T>): void {
     diffProps(c ? c.props : {}, n.props, n.domRef, n.ns === 'svg', context);
     diffClass(c ? c.classList : null, n.classList, n.domRef, context);
     diffCss(c ? c.css : {}, n.css, n.domRef, context);
-    if (n.type === VTreeType.VNode) {
-      diffChildren(c ? c.children : [], n.children, n.domRef, context);
-      drawCanvas(n);
-    }
+    diffChildren(c ? c.children : [], n.children, n.domRef, context);
+    drawCanvas(n);
 }
 
 export function diffClass<T> (c: Class, n: Class, domRef: T, context: DrawingContext<T>): void {
@@ -252,7 +287,7 @@ function diffChildren<T>(cs: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
   }
 }
 
-function populateDomRef<T>(c: VComp<T> | VNode<T>, context: DrawingContext<T>): void {
+function populateDomRef<T>(c: VNode<T>, context: DrawingContext<T>): void {
   if (c.ns === 'svg') {
     c.domRef = context.createElementNS('http://www.w3.org/2000/svg', c.tag);
   } else if (c.ns === 'mathml') {
@@ -263,34 +298,54 @@ function populateDomRef<T>(c: VComp<T> | VNode<T>, context: DrawingContext<T>):
 }
 
 /* used in hydrate.ts */
-export function callCreated<T>(n: VComp<T> | VNode<T>, context: DrawingContext<T>): T {
+export function callCreated<T>(parent: T, n: VComp<T> | VNode<T>, context: DrawingContext<T>): void {
   switch (n.type) {
       case VTreeType.VComp:
-          if (n.onBeforeMounted) n.onBeforeMounted();
-          mountComponent(n, context);
+          mountComponent(parent, OP.APPEND, null, n, context);
           break;
       case VTreeType.VNode:
           if (n.onCreated) n.onCreated(n.domRef);
           break;
   }
-  return n.domRef;
 }
 
-function createElement<T>(n: VComp<T> | VNode<T>, context: DrawingContext<T>): T {
+function createElement<T>(parent : T, op: OP, replacing : T | null, n: VTree<T>, context: DrawingContext<T>): void {
   switch (n.type) {
+    case VTreeType.VText:
+      n.domRef = context.createTextNode(n.text);
+      switch (op) {
+        case OP.INSERT_BEFORE:
+          context.insertBefore(parent, n.domRef, replacing);
+          break;
+        case OP.APPEND:
+          context.appendChild(parent, n.domRef);
+          break;
+        case OP.REPLACE:
+          context.replaceChild(parent, n.domRef, replacing);
+          break;
+      }
+      break;
     case VTreeType.VComp:
-      if (n.onBeforeMounted) n.onBeforeMounted();
-      populateDomRef(n, context);
-      mountComponent(n, context);
+      mountComponent(parent, op, replacing, n as VComp<T>, context);
       break;
     case VTreeType.VNode:
       if (n.onBeforeCreated) n.onBeforeCreated();
       populateDomRef(n, context);
       if (n.onCreated) n.onCreated(n.domRef);
+      diffAttrs(null, n, context);
+      switch (op) {
+        case OP.INSERT_BEFORE:
+          context.insertBefore(parent, n.domRef, replacing);
+          break;
+        case OP.APPEND:
+          context.appendChild(parent, n.domRef);
+          break;
+        case OP.REPLACE:
+          context.replaceChild(parent, n.domRef, replacing);
+          break;
+      }
       break;
   }
-  diffAttrs(null, n, context);
-  return n.domRef;
 }
 
 /* draw the canvas if you need to */
@@ -301,30 +356,58 @@ function drawCanvas<T> (c: VNode<T>) {
 
 // unmount components
 function unmountComponent<T>(c: VComp<T>): void {
-  if (c.onUnmounted) c.onUnmounted(c.domRef);
-  c.unmount(c.domRef);
+  if (c.onUnmounted) c.onUnmounted((drill(c)));
+  c.unmount(c.componentId);
 }
 
 // mounts vcomp by calling into Haskell side.
 // unmount is handled with pre-destroy recursive hooks
-function mountComponent<T>(obj: VComp<T>, context: DrawingContext<T>): void {
-  obj.mount(obj, (componentId: ComponentId, componentTree: VNode<T>) => {
-    // mount() gives us the VTree from the Haskell side, so we just attach it here
-    // to tie the knot (attach to both vdom and real dom).
-    obj.children.push(componentTree);
-    context.appendChild(obj.domRef, componentTree.domRef);
-    if (obj.onMounted) obj.onMounted(obj.domRef);
+function mountComponent<T>(parent: T, op : OP, replacing: T | null, n: VComp<T>, context: DrawingContext<T>): void {
+  if (n.onBeforeMounted) n.onBeforeMounted();
+
+  // 'mount()' should be executed synchronously, including its callback function argument.
+  n.mount(parent, (componentId: ComponentId, componentTree: VTree<T>) => {
+    // mount() gives us the VTree from the Haskell side
+    n.componentId = componentId;
+    n.child = componentTree;
+    componentTree.parent = n;
+    if (componentTree.type !== VTreeType.VComp) {
+      // Handle DOM placement for non-VComp child nodes
+      const childDomRef = getDOMRef(componentTree);
+      if (op === OP.REPLACE && replacing) {
+        context.replaceChild(parent, childDomRef, replacing);
+      } else if (op === OP.INSERT_BEFORE) {
+        context.insertBefore(parent, childDomRef, replacing);
+      }
+      // For OP.APPEND, this happens naturally in mount()
+    }
   });
+
+  if (n.onMounted) n.onMounted(drill(n));
 }
-// creates nodes on virtual and dom (vtext, vcomp, vnode)
-function create<T>(obj: VTree<T>, parent: T, context: DrawingContext<T>): void {
-  if (obj.type === VTreeType.VText) {
-    obj.domRef = context.createTextNode(obj.text);
-    context.appendChild(parent, obj.domRef);
+
+// Creates nodes on virtual dom (vtext, vcomp, vnode)
+function create<T>(n: VTree<T>, parent: T, context: DrawingContext<T>): void {
+  if (n.type === VTreeType.VText) {
+    n.domRef = context.createTextNode(n.text);
+    context.appendChild(parent, n.domRef);
   } else {
-    context.appendChild(parent, createElement(obj, context));
+    createElement(parent, OP.APPEND, null, n, context);
   }
 }
+
+function insertBefore<T>(parent: T, n: VTree<T>, o: VTree<T> | null, context: DrawingContext<T>): void {
+  context.insertBefore(parent, getDOMRef(n), o ? getDOMRef(o) : null);
+} 
+
+function removeChild<T>(parent: T, n: VTree<T>, context: DrawingContext<T>): void {
+  context.removeChild(parent, getDOMRef(n));
+}
+
+function swapDOMRef<T>(oLast: VTree<T>, oFirst: VTree<T>, parent: T, context: DrawingContext<T>): void {
+  context.swapDOMRefs(getDOMRef(oLast), getDOMRef(oFirst), parent);
+}
+
 /* Child reconciliation algorithm, inspired by kivi and Bobril */
 function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, context: DrawingContext<T>): void {
   var oldFirstIndex: number = 0,
@@ -360,7 +443,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
       /* insertBefore's semantics will append a node if the second argument provided is `null` or `undefined`.
          Otherwise, it will insert node.domRef before oLast.domRef.
       */
-      context.insertBefore(parent, nFirst.domRef, oFirst ? oFirst.domRef : null);
+      insertBefore(parent, nFirst, oFirst, context);
       os.splice(newFirstIndex, 0, nFirst);
       newFirstIndex++;
     } /* No more new nodes, delete all remaining nodes in old list
@@ -370,7 +453,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
     else if (newFirstIndex > newLastIndex) {
       tmp = oldLastIndex;
       while (oldLastIndex >= oldFirstIndex) {
-        context.removeChild(parent, os[oldLastIndex--].domRef);
+        removeChild(parent, os[oldLastIndex--], context);
       }
       os.splice(oldFirstIndex, tmp - oldFirstIndex + 1);
       break;
@@ -392,7 +475,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
                -> [ c b a ] <- new children
       */
      else if (oFirst.key === nLast.key && nFirst.key === oLast.key) {
-      context.swapDOMRefs(oLast.domRef, oFirst.domRef, parent);
+      swapDOMRef(oLast, oFirst, parent, context);
       swap<VTree<T>>(os, oldFirstIndex, oldLastIndex);
       diff(os[oldFirstIndex++], ns[newFirstIndex++], parent, context);
       diff(os[oldLastIndex--], ns[newLastIndex--], parent, context);
@@ -408,7 +491,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
         and now we happy path */
     else if (oFirst.key === nLast.key) {
       /* insertAfter */
-      context.insertBefore(parent, oFirst.domRef, context.nextSibling(oLast));
+      insertBefore(parent, oFirst, oLast.nextSibling, context);
       /* swap positions in old vdom */
       os.splice(oldLastIndex, 0, os.splice(oldFirstIndex, 1)[0]);
       diff(os[oldLastIndex--], ns[newLastIndex--], parent, context);
@@ -422,7 +505,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
          and now we happy path */
     else if (oLast.key === nFirst.key) {
       /* insertAfter */
-      context.insertBefore(parent, oLast.domRef, oFirst.domRef);
+      insertBefore(parent, oLast, oFirst, context);
       /* swap positions in old vdom */
       os.splice(oldFirstIndex, 0, os.splice(oldLastIndex, 1)[0]);
       diff(os[oldFirstIndex++], nFirst, parent, context);
@@ -463,7 +546,7 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
         /* optionally perform `diff` here */
         diff(os[oldFirstIndex++], nFirst, parent, context);
         /* Swap DOM references */
-        context.insertBefore(parent, node.domRef, os[oldFirstIndex].domRef);
+        insertBefore(parent, node, os[oldFirstIndex], context);
         /* increment counters */
         newFirstIndex++;
       } /* If new key was *not* found in the old map this means it must now be created, example below
@@ -477,18 +560,10 @@ function syncChildren<T>(os: Array<VTree<T>>, ns: Array<VTree<T>>, parent: T, co
         -> [ b e a j   ] <- new children
              ^
         */ else {
-            switch (nFirst.type) {
-              case VTreeType.VText:
-                nFirst.domRef = context.createTextNode(nFirst.text);
-                context.insertBefore(parent, nFirst.domRef, oFirst.domRef);
-                break;
-              default:
-                context.insertBefore(parent, createElement(nFirst, context), oFirst.domRef);
-                break;
-            }
-        os.splice(oldFirstIndex++, 0, nFirst);
-        newFirstIndex++;
-        oldLastIndex++;
+            createElement(parent, OP.INSERT_BEFORE, getDOMRef(oFirst), nFirst, context);
+            os.splice(oldFirstIndex++, 0, nFirst);
+            newFirstIndex++;
+            oldLastIndex++;
       }
     }
   }
diff --git a/ts/miso/event.ts b/ts/miso/event.ts
index bbdfc7081..2e81a871f 100644
--- a/ts/miso/event.ts
+++ b/ts/miso/event.ts
@@ -95,7 +95,21 @@ function delegateEvent <T>(
     return;
   } /* stack not length 1, recurse */
   else if (stack.length > 1) {
-      if (obj.type === VTreeType.VComp || obj.type === VTreeType.VNode) {
+      if (obj.type === VTreeType.VText) {
+        return;
+      }
+      else if (obj.type === VTreeType.VComp) {
+        if (!obj.child) {
+          if (debug) {
+            console.error('VComp has no child property set during event delegation', obj);
+            console.error('This means the Component has not been fully mounted, this should never happen');
+            throw new Error('VComp has no .child property set during event delegation');
+          }
+          return;
+        }
+        return delegateEvent(event, obj.child, stack, debug, context);
+      }
+      else if (obj.type === VTreeType.VNode) {
         if (context.isEqual(obj.domRef, stack[0])) {
           const eventObj: EventObject<T> = obj.events.captures[event.type];
           if (eventObj) {
@@ -111,17 +125,19 @@ function delegateEvent <T>(
           }
           stack.splice(0,1);
         }
-      for (const child of obj.children) {
-          if (child.type === VTreeType.VComp || child.type === VTreeType.VNode) {
-            if (context.isEqual(child.domRef, stack[0])) {
-              delegateEvent(event, child, stack, debug, context);
-            }
-          }
+        for (const child of obj.children) {
+          delegateEvent(event, child, stack, debug, context);
         }
       }
     } else {
+    /* stack.length === 1, we're at the target */
+    if (obj.type === VTreeType.VComp) {
+      /* VComp doesn't have events directly, delegate to its child */
+      if (obj.child) {
+        delegateEvent(event, obj.child, stack, debug, context);
+      }
+    } else if (obj.type === VTreeType.VNode) {
     /* captures run first */
-    if (obj.type === VTreeType.VNode) {
       const eventCaptureObj: EventObject<T> = obj.events.captures[event.type];
       if (eventCaptureObj && !event['captureStopped']) {
         const options: Options = eventCaptureObj.options;
diff --git a/ts/miso/hydrate.ts b/ts/miso/hydrate.ts
index ac81111e9..5e790650c 100644
--- a/ts/miso/hydrate.ts
+++ b/ts/miso/hydrate.ts
@@ -1,5 +1,5 @@
-import { callCreated, diffAttrs } from './dom';
-import { DrawingContext, HydrationContext, VTree, VComp, VText, DOMRef, VTreeType } from './types';
+import { callCreated } from './dom';
+import { DrawingContext, HydrationContext, VTree, VText, DOMRef, VTreeType } from './types';
 
 /* prerendering / hydration / isomorphic support */
 function collapseSiblingTextNodes(vs: Array<VTree<DOMRef>>): Array<VTree<DOMRef>> {
@@ -14,64 +14,21 @@ function collapseSiblingTextNodes(vs: Array<VTree<DOMRef>>): Array<VTree<DOMRef>
   return adjusted;
 }
 
-/* function to determine if <script> tags are present in `body` top-level
-   if so we work around them */
-function preamble(mountPoint: DOMRef | Text, context : DrawingContext<DOMRef>): Node {
-  /* this needs to be abstracted out for native as well ... at some point */
-  var mountChildIdx = 0,
-    node: ChildNode;
-  var root = context.getRoot();
-  if (!mountPoint) {
-    if (root.childNodes.length > 0) {
-        node = root.firstChild;
-    } else {
-      node = root.appendChild(context.createElement('div'));
-    }
-  } else if (mountPoint.childNodes.length === 0) {
-    node = mountPoint.appendChild(context.createElement('div'));
-  } else {
-    while (
-      mountPoint.childNodes[mountChildIdx] &&
-      (mountPoint.childNodes[mountChildIdx].nodeType === 3 ||
-        (mountPoint.childNodes[mountChildIdx] as Element).localName === 'script')
-    ) {
-      mountChildIdx++;
-    }
-    if (!mountPoint.childNodes[mountChildIdx]) {
-      node = root.appendChild(context.createElement('div'));
-    } else {
-      node = mountPoint.childNodes[mountChildIdx];
-    }
-  }
-  return node;
-}
-
 export function hydrate(logLevel: boolean, mountPoint: DOMRef | Text, vtree: VTree<DOMRef>, context: HydrationContext<DOMRef>, drawingContext: DrawingContext<DOMRef>): boolean {
+
   // If script tags are rendered first in body, skip them.
-  const node: Node = preamble(mountPoint, drawingContext);
+  if (!vtree || !mountPoint) return false;
+  let node: Node = drawingContext.getRoot() === mountPoint ? mountPoint.firstChild : mountPoint;
 
   // begin walking the DOM, report the result
-    if (!walk(logLevel, vtree, node, context, drawingContext)) {
+  if (!walk(logLevel, vtree, node, context, drawingContext)) {
     // If we failed to prerender because the structures were different, fallback to drawing
-    if (logLevel) {
-      console.warn('[DEBUG_HYDRATE] Could not copy DOM into virtual DOM, falling back to diff');
-    }
-
-    // Remove all children before rebuilding DOM
-    while (context.firstChild(node as DOMRef))
-      drawingContext.removeChild(node as DOMRef, context.lastChild(node as DOMRef));
-
-    (vtree.domRef as Node) = node;
-
-     switch (vtree.type) {
-         case VTreeType.VText:
-             break;
-         default:
-             diffAttrs(null, vtree, drawingContext);
-             break;
-     }
-
-    return false;
+      if (logLevel) {
+        console.warn('[DEBUG_HYDRATE] Could not copy DOM into virtual DOM, falling back to diff');
+      }
+      while (context.firstChild(node as DOMRef))
+        drawingContext.removeChild(node as DOMRef, context.lastChild(node as DOMRef));
+     return false;
   } else {
     if (logLevel) {
       console.info('[DEBUG_HYDRATE] Successfully prerendered page');
@@ -79,6 +36,7 @@ export function hydrate(logLevel: boolean, mountPoint: DOMRef | Text, vtree: VTr
   }
   return true;
 }
+
 function diagnoseError(logLevel: boolean, vtree: VTree<DOMRef>, node: Node): void {
   if (logLevel) console.warn('[DEBUG_HYDRATE] VTree differed from node', vtree, node);
 }
@@ -117,7 +75,7 @@ function check(result: boolean, vtree: VTree<DOMRef>, context: HydrationContext<
       result = false;
     }
   } // if vnode / vcomp, must be the same
-  else {
+  else if (vtree.type === VTreeType.VNode) {
     // tags must be identical
     if (vtree.tag.toUpperCase() !== context.getTag(vtree.domRef).toUpperCase()) {
       console.warn(
@@ -198,17 +156,26 @@ function walk(logLevel: boolean, vtree: VTree<DOMRef>, node: Node, context: Hydr
   // We handle this in collapseSiblingTextNodes
   switch (vtree.type) {
     case VTreeType.VComp:
-      (vtree as VComp<DOMRef>).domRef = node as DOMRef;
-      callCreated(vtree, drawingContext);
-      break;
+       if (!walk(logLevel, vtree.child, node, context, drawingContext)) {
+          return false;
+       }
+       break;
     case VTreeType.VText:
-      (vtree as VText<DOMRef>).domRef = node as DOMRef;
+       if (node.nodeType !== 3 || vtree.text.trim() !== node.textContent.trim()) {
+         diagnoseError(logLevel, vtree, node);
+         return false;
+       }
+      vtree.domRef = node as DOMRef;
       break;
     case VTreeType.VNode:
+      if (node.nodeType !== 1) {
+         diagnoseError(logLevel, vtree, node);
+         return false;
+      }
       vtree.domRef = node as DOMRef;
       vtree.children = collapseSiblingTextNodes(vtree.children);
       // Fire onCreated events as though the elements had just been created.
-      callCreated(vtree, drawingContext);
+      callCreated(node, vtree, drawingContext);
 
       for (var i = 0; i < vtree.children.length; i++) {
         const vdomChild = vtree.children[i];
@@ -217,26 +184,11 @@ function walk(logLevel: boolean, vtree: VTree<DOMRef>, node: Node, context: Hydr
           diagnoseError(logLevel, vdomChild, domChild);
           return false;
         }
-        switch (vdomChild.type) {
-          case VTreeType.VText:
-            if (domChild.nodeType !== 3) {
-              diagnoseError(logLevel, vdomChild, domChild);
-              return false;
-            }
-            if (vdomChild.text === domChild.textContent) {
-              vdomChild.domRef = context.children(node as DOMRef)[i];
-            } else {
-              diagnoseError(logLevel, vdomChild, domChild);
-              return false;
-            }
-            break;
-          default:
-            if (domChild.nodeType !== 1) return false;
-            vdomChild.domRef = domChild as DOMRef;
-             walk(logLevel, vdomChild, domChild, context, drawingContext);
-            break;
+        if (!walk(logLevel, vdomChild, domChild, context, drawingContext)) {
+          return false;
         }
       }
+      break;
   }
   return true;
 }
diff --git a/ts/miso/patch.ts b/ts/miso/patch.ts
index 11ab47d42..bd8c72d31 100644
--- a/ts/miso/patch.ts
+++ b/ts/miso/patch.ts
@@ -90,7 +90,7 @@ export function patch<T> (context: DrawingContext<T>, patch: PATCH, components:
                 break;
             case "swapDOMRefs":
                 /* dmj: swap it in the component environemnt too */
-                context.swapDOMRefs (component.nodes[patch.nodeA], component.nodes[patch.nodeB], component.nodes[patch.parent]);
+                context.swapDOMRefs (component.nodes[patch.nodeB], component.nodes[patch.nodeA], component.nodes[patch.parent]);
                 break;
             case "replaceChild":
                 context.replaceChild (component.nodes[patch.parent], component.nodes[patch.new], component.nodes[patch.current]);
diff --git a/ts/miso/types.ts b/ts/miso/types.ts
index bc3be7eb2..89e414551 100644
--- a/ts/miso/types.ts
+++ b/ts/miso/types.ts
@@ -16,27 +16,29 @@ export enum VTreeType {
   VText = 2
 }
 
+export enum OP {
+  APPEND = 0,
+  REPLACE = 1,
+  INSERT_BEFORE = 2
+}
+
 export type VComp<T> = {
   type: VTreeType.VComp;
-  domRef: T;
-  ns: 'html';
-  tag: string;
+  child: VTree<T>;
+  // used w/ drill to get domRef.
+  componentId?: ComponentId;
+  // ^ set post-mounting
   key: string;
-  props: Props;
-  css: CSS;
-  classList: Class;
-  events: Events<T>;
-  parent: Parent<T>;
-  children: Array<VTree<T>>;
 
+  parent: Parent<T>;
+  nextSibling: VTree<T>;
   eventPropagation: boolean;
   onBeforeMounted: () => void;
   onMounted: (domRef: T) => void;
   onBeforeUnmounted: () => void;
   onUnmounted: (domRef: T) => void;
-  mount: (vcomp: VComp<T>, callback: ((componentId : ComponentId, component: VTree<T>) => void)) => void;
-  unmount: (e: T) => void;
-  nextSibling: VTree<T>;
+  mount: (parent: T, callback: ((componentId : ComponentId, component: VTree<T>) => void)) => void;
+  unmount: (componentId: ComponentId) => void;
 };
 
 export type VNode<T> = {
diff --git a/ts/miso/util.ts b/ts/miso/util.ts
index 1032ff4b3..16236f579 100644
--- a/ts/miso/util.ts
+++ b/ts/miso/util.ts
@@ -85,31 +85,6 @@ export function fetchCore (
   }
 }
 
-/*
-   'getParentComponentId'
-   dmj: Used to fetch the parent's componentId
-
-   Climbs up the tree, finds the immediate component ancestor (parent) and returns its componentId
-   This should be called on the DOMRef of a VComp, otherwise it will return the current componentId.
-
-*/
-export function getParentComponentId (
-  vcompNode: ParentNode
-): number {
-    var climb = function (node : ParentNode) {
-      let parentComponentId = null;
-      while (node && node.parentNode) {
-          if ('componentId' in node.parentNode) {
-              parentComponentId = node.parentNode['componentId'];
-              break;
-          }
-          node = node.parentNode;
-      }
-      return parentComponentId;
-    }
-    return climb (vcompNode);
-}
-
 export function websocketConnect (
     url: string,
     onOpen,
diff --git a/ts/spec/component.spec.ts b/ts/spec/component.spec.ts
index 4b140882d..d0ebf190c 100644
--- a/ts/spec/component.spec.ts
+++ b/ts/spec/component.spec.ts
@@ -23,10 +23,11 @@ describe ('Component tests', () => {
     test('Should unmount recursively in order', () => {
     let unmounts = [];
     const build = (name, children) => {
-        return vcomp<DOMRef> ({
-          children: children,
-          mount: () => {
-            
+        return vcomp<DOMRef> ({ 
+          mount: (domRef, callback) => {
+            const childVNode = vnode<DOMRef>({ tag: 'div', children });
+            diff<DOMRef>(null, childVNode, domRef, drawingContext);
+            callback(0, childVNode);
           },
           unmount: () => {
             unmounts.push(name);
@@ -45,19 +46,16 @@ describe ('Component tests', () => {
     var newNode = vcomp<DOMRef>({
       mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
       unmount: () => {
         unmountCount++;
       },
-      props: { id: 'vcomp-foo' },
-      css: {
-        'backgroundColor': 'red',
-      },
     });
     diff<DOMRef>(null, newNode, document.body, drawingContext);
     expect(mountCount).toBe(1);
-    expect(newNode.domRef.id).toBe('vcomp-foo');
-    expect(newNode.domRef.style['backgroundColor']).toBe('red');
     diff<DOMRef>(newNode, null, document.body, drawingContext);
     expect(unmountCount).toBe(1);
   });
@@ -65,10 +63,13 @@ describe ('Component tests', () => {
     // populate DOM
     var mountCount = 0;
     var compNode1 = vcomp<DOMRef>({
-      mount: () => {
+      key: 'comp1',
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div', css: { backgroundColor: 'red' } });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
-      css: { 'backgroundColor': 'red' },
     });
     diff<DOMRef>(null, compNode1, document.body, drawingContext);
     expect(mountCount).toBe(1);
@@ -80,10 +81,13 @@ describe ('Component tests', () => {
     // Replace node
     mountCount = 0;
     var compNode2 = vcomp<DOMRef>({
-      mount: () => {
+      key: 'comp2',
+      mount: (domRef, callback) => {
         mountCount++;
-      },
-      css: { 'backgroundColor': 'green' },
+        const child = vnode<DOMRef>({ tag: 'div', css: { backgroundColor: 'green' } });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
+      }
     });
     diff<DOMRef>(compNode1, compNode2, document.body, drawingContext);
     expect((document.body.childNodes[0] as HTMLElement).style['backgroundColor']).toBe('green');
@@ -94,12 +98,14 @@ describe ('Component tests', () => {
     var unmountCount = 0, mountCount = 0;
     var comp1 = vcomp<DOMRef>({
         key : 'a',
-        tag: 'a',
         unmount: () => {
             unmountCount++
         },
-        mount: () => {
+        mount: (domRef, callback) => {
             mountCount++;
+            const child = vnode<DOMRef>({ tag: 'a' });
+            diff<DOMRef>(null, child, domRef, drawingContext);
+            callback(0, child);
         },
     });
     // dmj: tag always 'div' for component, this is just for a test to ensure swap property
@@ -112,8 +118,11 @@ describe ('Component tests', () => {
     // Replace node
     var comp2 = vcomp<DOMRef>({
       key : 'b',
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
     });
     diff<DOMRef>(comp1, comp2, document.body, drawingContext);
@@ -131,6 +140,11 @@ describe ('Component tests', () => {
     var unmountCount = 0
     var comp1 = vcomp<DOMRef>({
       key: 'a',
+      mount: (domRef, callback) => {
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
+      },
       unmount: () => {
         unmountCount++
       }
@@ -145,8 +159,11 @@ describe ('Component tests', () => {
     var mountCount = 0;
     var comp2 = vcomp<DOMRef>({
       key : 'a',
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
     });
     diff<DOMRef>(comp1, comp2, document.body, drawingContext);
@@ -169,8 +186,11 @@ describe ('Component tests', () => {
     // Replace node
     var mountCount = 0;
     var compNode = vcomp<DOMRef>({
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
     });
     diff<DOMRef>(node, compNode, document.body, drawingContext);
@@ -191,8 +211,11 @@ describe ('Component tests', () => {
     // Replace node
     var mountCount = 0;
     var compNode = vcomp<DOMRef>({
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
     });
     diff<DOMRef>(node, compNode, document.body, drawingContext);
@@ -204,8 +227,11 @@ describe ('Component tests', () => {
   test('Should replace Component with TextNode', () => {
     var mountCount = 0, unmountCount = 0;
     var component = vcomp<DOMRef>({
-      mount: () => {
-        return mountCount++;
+      mount: (domRef, callback) => {
+        mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
       unmount: () => {
         return unmountCount++;
@@ -231,8 +257,11 @@ describe ('Component tests', () => {
     var mountCount = 0,
       unmountCount = 0;
     var component = vcomp<DOMRef>({
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
       unmount: () => {
         unmountCount++;
@@ -241,7 +270,7 @@ describe ('Component tests', () => {
     diff<DOMRef>(null, component, document.body, drawingContext);
 
     // Test component was populated
-    expect(document.childNodes.length).toBe(1);
+    expect(document.body.childNodes.length).toBe(1);
     expect(mountCount).toBe(1);
     expect(unmountCount).toBe(0);
 
@@ -260,8 +289,11 @@ describe ('Component tests', () => {
     let unmountCount = 0;
 
     let component = vcomp<DOMRef>({
-      mount: () => {
+      mount: (domRef, callback) => {
         mountCount++;
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
       unmount: () => {
         unmountCount++;
@@ -271,7 +303,7 @@ describe ('Component tests', () => {
     diff<DOMRef>(null, node, document.body, drawingContext);
 
     // Test component was populated
-    expect(document.childNodes.length).toBe(1);
+    expect(document.body.childNodes.length).toBe(1);
     expect(mountCount).toBe(0);
     expect(unmountCount).toBe(0);
 
@@ -280,9 +312,32 @@ describe ('Component tests', () => {
 
     // Test node is removed from DOM
     expect(document.body.children[0].tagName).toBe('DIV');
+    expect(document.body.children.length).toBe(1);
     expect(unmountCount).toBe(0);
     expect(mountCount).toBe(1);
   });
 
+  test('Should allow recursive Component mounting', () => {
+    // populate DOM
+    let component = vcomp<DOMRef>({
+      mount: (domRef, callback) => {
+        const childVComp = vcomp<DOMRef>({
+          mount: (ref, cb) => {
+            const child1 = vnode<DOMRef>({ tag: 'div' });
+            diff<DOMRef>(null, child1, ref, drawingContext);
+            cb(1, child1);
+          }
+        });
+        diff<DOMRef>(null, childVComp, domRef, drawingContext);
+        callback(0, childVComp);
+      }
+    });
+
+    diff<DOMRef>(null, component, document.body, drawingContext);
+
+    // Test component was populated
+    expect(document.body.childNodes.length).toBe(1);
+    expect(document.body.children[0].tagName).toBe('DIV');
+  });
 
 })
diff --git a/ts/spec/context-dom.spec.ts b/ts/spec/context-dom.spec.ts
index 464a96b28..0e144e84e 100644
--- a/ts/spec/context-dom.spec.ts
+++ b/ts/spec/context-dom.spec.ts
@@ -1,7 +1,8 @@
 import { test, expect, describe, afterEach, beforeAll } from 'bun:test';
 import { eventContext, hydrationContext, componentContext, drawingContext } from '../miso/context/dom';
 import { vnode, vcomp } from '../miso/smart';
-import { DOMRef } from '../miso/types';
+import { VNode, DOMRef } from '../miso/types';
+import { diff } from '../miso/dom';
 
 /* silence */
 beforeAll(() => {
@@ -167,46 +168,41 @@ describe('ComponentContext tests', () => {
 
   test('Should call modelHydration without errors', () => {
     expect(() => {
-      componentContext.modelHydration({});
+      componentContext.modelHydration(0, {});
     }).not.toThrow();
   });
 });
 
 describe('DrawingContext tests', () => {
   test('Should get next sibling for VNode', () => {
-    const parent = document.createElement('div');
-    const child1 = document.createElement('div');
-    const child2 = document.createElement('span');
-    parent.append(child1, child2);
-
     const node1 = vnode<DOMRef>({ tag: 'div' });
     const node2 = vnode<DOMRef>({ tag: 'span' });
-    node1.domRef = child1 as DOMRef;
-    node2.domRef = child2 as DOMRef;
     node1.nextSibling = node2;
-
-    const next = drawingContext.nextSibling(node1);
-    expect(next).toBe(child2 as DOMRef);
+    const p = vnode<DOMRef>({ tag: 'span', children: [ node1, node2] });
+    diff (null, p, document.body, drawingContext);
+    expect(drawingContext.nextSibling(node1)).toBe(node2.domRef);
   });
 
   test('Should get next sibling for VComp by drilling', () => {
-    const parent = document.createElement('div');
-    const child1 = document.createElement('span');
-    const child2 = document.createElement('div');
-    parent.append(child1, child2);
+    const comp = vcomp<DOMRef>({ mount : (p, cb) => {
+      const node1 = vnode<DOMRef>({ tag: 'div' });
+      diff (null, node1, p, drawingContext);
+      cb (0, node1);
+    }});
 
-    const node = vnode<DOMRef>({ tag: 'span' });
-    node.domRef = child1 as DOMRef;
-
-    const comp = vcomp<DOMRef>({ mount: () => {}, unmount: () => {} });
-    (comp as any).domRef = child2 as DOMRef;
-    node.nextSibling = comp;
+    const node1 = vnode<DOMRef>({ tag: 'div' });
+    comp.nextSibling = node1;
+    let p = vnode<DOMRef>({ tag: 'span', children: [ comp, node1 ] });
+    diff (null, p, document.body, drawingContext);
+    expect(drawingContext.nextSibling(comp)).toBe(node1.domRef);
 
-    const next = drawingContext.nextSibling(node);
-    expect(next).toBe(child2 as DOMRef);
+    node1.nextSibling = comp;
+    p = vnode<DOMRef>({ tag: 'span', children: [ node1, comp ] });
+    diff (null, p, document.body, drawingContext);
+    expect(drawingContext.nextSibling(node1)).toBe((comp.child as VNode<DOMRef>).domRef);
   });
 
-  test('Should return undefined when no next sibling', () => {
+   test('Should return undefined when no next sibling', () => {
     const parent = document.createElement('div');
     const only = document.createElement('div');
     parent.appendChild(only);
@@ -216,6 +212,26 @@ describe('DrawingContext tests', () => {
 
     const next = drawingContext.nextSibling(node);
     expect(next).toBeNull();
+   });
+
+  test('Should return undefined when no next sibling', () => {
+    const comp = vcomp<DOMRef>({ mount : (p, cb) => {
+      const node1 = vnode<DOMRef>({ tag: 'div' });
+      diff (null, node1, p, drawingContext);
+      cb (0, node1);
+    }});
+
+    const node1 = vnode<DOMRef>({ tag: 'div' });
+    // comp.nextSibling = node1; -- dmj: intentional
+    let p = vnode<DOMRef>({ tag: 'span', children: [ comp, node1 ] });
+    diff (null, p, document.body, drawingContext);
+
+    expect(drawingContext.nextSibling(comp)).toBe(null);
+
+    p = vnode<DOMRef>({ tag: 'span', children: [ node1, comp ] });
+    diff (null, p, document.body, drawingContext);
+
+    expect(drawingContext.nextSibling(comp)).toBe(null);
   });
 
   test('Should create text node', () => {
@@ -308,18 +324,15 @@ describe('DrawingContext tests', () => {
     const parent = document.createElement('div');
     const a = document.createElement('span');
     const b = document.createElement('p');
-    const c = document.createElement('div');
     parent.appendChild(a);
     parent.appendChild(b);
-    parent.appendChild(c);
 
     // Just verify the function executes without error
-    expect(() => {
-      drawingContext.swapDOMRefs(a as DOMRef, b as DOMRef, parent as DOMRef);
-    }).not.toThrow();
+    drawingContext.swapDOMRefs(b, a as DOMRef, parent as DOMRef);
 
     // Verify all children are still in parent
-    expect(parent.children.length).toBe(3);
+    expect((parent.childNodes[0] as HTMLElement).tagName).toBe('P');
+    expect((parent.childNodes[1] as HTMLElement).tagName).toBe('SPAN');
   });
 
   test('Should set inline style - remove style when not in new CSS', () => {
diff --git a/ts/spec/dom.spec.ts b/ts/spec/dom.spec.ts
index d166439d4..38e217cdf 100644
--- a/ts/spec/dom.spec.ts
+++ b/ts/spec/dom.spec.ts
@@ -1,6 +1,6 @@
 import { diff } from '../miso/dom';
 import { vnode, vcomp, vtext, vnodeKeyed, vtextKeyed } from '../miso/smart';
-import { VNode, VTree, DOMRef } from '../miso/types';
+import { VNode, VText, VTree, DOMRef } from '../miso/types';
 import { test, expect, describe, afterEach, beforeAll } from 'bun:test';
 import { drawingContext } from '../miso/context/dom';
 
@@ -438,9 +438,14 @@ describe('DOM tests', () => {
       onBeforeMounted: () => {
         beforeMounted++;
       },
-      mount: () => {
+      onMounted : () => {
+        mounted++;
+      },
+      mount: (domRef, callback) => {
         mount++;
-        mounted++; //dmj : 'onMounted' is called inside of 'mount' callback in dom.ts
+        const child = vnode<DOMRef>({ tag: 'div' });
+        diff<DOMRef>(null, child, domRef, drawingContext);
+        callback(0, child);
       },
       onBeforeUnmounted: () => {
         beforeUnmounted++;
@@ -577,7 +582,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
       expect(newNode.children[i].key).toBe(currentNode.children[i].key);
-      expect(newNode.children[i].domRef).toBe(currentNode.children[i].domRef);
+      expect((newNode.children[i] as VNode<DOMRef>).domRef).toBe((currentNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -597,7 +602,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -617,7 +622,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -637,7 +642,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -657,7 +662,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -734,7 +739,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -766,7 +771,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -796,7 +801,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -816,7 +821,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -849,7 +854,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(currentNode.children[i].key).toEqual(newNode.children[i].key);
-        expect(currentNode.children[i].domRef).toEqual(newNode.children[i].domRef);
+        expect((currentNode.children[i] as VNode<DOMRef>).domRef).toEqual((newNode.children[i] as VNode<DOMRef>).domRef);
     }
     expect(currentNode.domRef.children).toEqual(newNode.domRef.children);
     expect(currentNode.domRef.childNodes).toEqual(newNode.domRef.childNodes);
@@ -868,7 +873,7 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
       expect(newNode.children[i].key).toBe(currentNode.children[i].key);
-      expect(newNode.children[i].domRef).toBe(currentNode.children[i].domRef);
+      expect((newNode.children[i] as VNode<DOMRef>).domRef).toBe((currentNode.children[i] as VNode<DOMRef>).domRef);
     }
   });
 
@@ -894,8 +899,547 @@ describe('DOM tests', () => {
     expect(newNode.children.length).toBe(currentNode.children.length);
     for (var i = 0; i < newNode.children.length; i++) {
         expect(newNode.children[i].key).toBe(currentNode.children[i].key);
-        expect(newNode.children[i].domRef).toBe(currentNode.children[i].domRef);
+        expect((newNode.children[i] as VNode<DOMRef>).domRef).toBe((currentNode.children[i] as VNode<DOMRef>).domRef);
     }
   });
 
+  test('Should destroy VText nodes', () => {
+    var currentNode = vtext<DOMRef>('foo');
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    expect(document.body.childNodes.length).toBe(1);
+    diff<DOMRef>(currentNode, null, document.body, drawingContext);
+    expect(document.body.childNodes.length).toBe(0);
+  });
+
+  test('Should add classes when none existed', () => {
+    var node = vnode<DOMRef>({
+      classList: new Set(['foo', 'bar'])
+    });
+    diff<DOMRef>(null, node, document.body, drawingContext);
+    expect(node.domRef.classList.contains('foo')).toBe(true);
+    expect(node.domRef.classList.contains('bar')).toBe(true);
+  });
+
+  test('Should remove classes when going from classes to no classes', () => {
+    var currentNode = vnode<DOMRef>({
+      classList: new Set(['foo', 'bar'])
+    });
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    expect(currentNode.domRef.classList.contains('foo')).toBe(true);
+    expect(currentNode.domRef.classList.contains('bar')).toBe(true);
+    
+    var newNode = vnode<DOMRef>({});
+    (newNode as any).domRef = currentNode.domRef;
+    diff<DOMRef>(currentNode, newNode, document.body, drawingContext);
+    expect(newNode.domRef.classList.contains('foo')).toBe(false);
+    expect(newNode.domRef.classList.contains('bar')).toBe(false);
+  });
+
+  test('Should handle class updates with removals and additions', () => {
+    var currentNode = vnode<DOMRef>({
+      classList: new Set(['foo', 'bar', 'baz'])
+    });
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    
+    var newNode = vnode<DOMRef>({
+      classList: new Set(['bar', 'qux'])
+    });
+    (newNode as any).domRef = currentNode.domRef;
+    diff<DOMRef>(currentNode, newNode, document.body, drawingContext);
+    
+    expect(newNode.domRef.classList.contains('foo')).toBe(false);
+    expect(newNode.domRef.classList.contains('bar')).toBe(true);
+    expect(newNode.domRef.classList.contains('baz')).toBe(false);
+    expect(newNode.domRef.classList.contains('qux')).toBe(true);
+  });
+
+  test('Should create VText with INSERT_BEFORE operation', () => {
+    var first = vnode<DOMRef>({});
+    diff<DOMRef>(null, first, document.body, drawingContext);
+
+    var second = vnode<DOMRef>({});
+    diff<DOMRef>(null, second, document.body, drawingContext);
+    
+    // Create a tree that will use INSERT_BEFORE for a text node
+    var container = vnode<DOMRef>({
+      children: [vtext<DOMRef>('a')]
+    });
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, container, document.body, drawingContext);
+    
+    var updated = vnode<DOMRef>({
+      children: [vtext<DOMRef>('x'), vtext<DOMRef>('a')]
+    });
+    (updated as VNode<DOMRef>).domRef = (container as VNode<DOMRef>).domRef;
+    (updated.children[1] as VText<DOMRef>).domRef = ((container as VNode<DOMRef>).children[0] as VText<DOMRef>).domRef;
+    diff<DOMRef>(container, updated, document.body, drawingContext);
+    
+    expect(document.body.children[0].childNodes.length).toBe(2);
+  });
+
+  test('Should create VText with REPLACE operation', () => {
+    var first = vtext<DOMRef>('foo');
+    diff<DOMRef>(null, first, document.body, drawingContext);
+    expect(first.domRef.textContent).toBe('foo');
+    
+    var second = vtext<DOMRef>('bar');
+    diff<DOMRef>(first, second, document.body, drawingContext);
+    expect(second.domRef.textContent).toBe('bar');
+  });
+
+  test('Should create VNode with INSERT_BEFORE operation', () => {
+    var first = vnode<DOMRef>({ tag: 'span' });
+    diff<DOMRef>(null, first, document.body, drawingContext);
+    
+    var container = vnode<DOMRef>({
+      children: [first]
+    });
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, container, document.body, drawingContext);
+    
+    var newFirst = vnode<DOMRef>({ tag: 'div' });
+    var updated = vnode<DOMRef>({
+      children: [newFirst, first]
+    });
+    (updated as VNode<DOMRef>).domRef = (container as VNode<DOMRef>).domRef;
+    (updated.children[1] as VNode<DOMRef>).domRef = ((container as VNode<DOMRef>).children[0] as VNode<DOMRef>).domRef;
+    diff<DOMRef>(container, updated, document.body, drawingContext);
+    
+    expect(document.body.children[0].children.length).toBe(2);
+  });
+
+  test('Should create VNode with onBeforeCreated hook', () => {
+    let beforeCreatedCalled = false;
+    var node = vnode<DOMRef>({
+      onBeforeCreated: () => {
+        beforeCreatedCalled = true;
+      }
+    });
+    diff<DOMRef>(null, node, document.body, drawingContext);
+    expect(beforeCreatedCalled).toBe(true);
+  });
+
+  test('Should handle shouldSync with arrays having null/undefined keys', () => {
+    var currentNode = vnode<DOMRef>({
+      children: [
+        vnodeKeyed('div', 'a'),
+        vnodeKeyed('div', null as any)
+      ]
+    });
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    
+    var newNode = vnode<DOMRef>({
+      children: [
+        vnodeKeyed('div', 'a'),
+        vnodeKeyed('div', 'b')
+      ]
+    });
+    diff<DOMRef>(currentNode, newNode, document.body, drawingContext);
+    // Should not use sync algorithm and just diff normally
+    expect(newNode.children.length).toBe(2);
+  });
+
+  test('Should handle shouldSync with new array having undefined keys', () => {
+    var currentNode = vnode<DOMRef>({
+      children: [
+        vnodeKeyed('div', 'a')
+      ]
+    });
+    diff<DOMRef>(null, currentNode, document.body, drawingContext);
+    
+    var newNode = vnode<DOMRef>({
+      children: [
+        vnodeKeyed('div', 'a'),
+        vnodeKeyed('div', undefined as any)
+      ]
+    });
+    diff<DOMRef>(currentNode, newNode, document.body, drawingContext);
+    // Should not use sync algorithm
+    expect(newNode.children.length).toBe(2);
+  });
+
+  test('Should preserve VComp child when keys match', () => {
+    let componentMounted = false;
+    let componentMounted2 = false;
+    
+    const comp1 = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        componentMounted = true;
+        const tree = vnode<DOMRef>({});
+        callback(1 as any, tree);
+      },
+      unmount: () => {}
+    });
+    comp1.key = 'test-comp';
+    
+    diff<DOMRef>(null, comp1, document.body, drawingContext);
+    expect(componentMounted).toBe(true);
+    
+    const comp2 = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        componentMounted2 = true;
+        const tree = vnode<DOMRef>({});
+        callback(2 as any, tree);
+      },
+      unmount: () => {}
+    });
+    comp2.key = 'test-comp';
+    
+    diff<DOMRef>(comp1, comp2, document.body, drawingContext);
+    // Should not have called mount2 because keys matched
+    expect(componentMounted2).toBe(false);
+    // Should have preserved child from comp1
+    expect(comp2.child).toBe(comp1.child);
+  });
+
+  test('Should handle recursive drill for nested components', () => {
+    let outerComponentMounted = false;
+    const outerComp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        outerComponentMounted = true;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    diff<DOMRef>(null, outerComp, document.body, drawingContext);
+    expect(outerComponentMounted).toBe(true);
+    expect(outerComp.child).toBeTruthy();
+  });
+
+  test('Should handle component with same key not remounting', () => {
+    let mountCount = 0;
+    
+    const comp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        mountCount++;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    comp.key = 'same-key';
+    
+    diff<DOMRef>(null, comp, document.body, drawingContext);
+    expect(mountCount).toBe(1);
+    
+    const comp2 = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        mountCount++;
+        const vn = vnode<DOMRef>({ tag: 'span' });
+        callback(2 as any, vn);
+      },
+      unmount: () => {}
+    });
+    comp2.key = 'same-key';
+    
+    // Should preserve child and not mount again
+    diff<DOMRef>(comp, comp2, document.body, drawingContext);
+    expect(mountCount).toBe(1);
+    expect(comp2.child).toBe(comp.child);
+  });
+
+  test('Should call VNode onCreated hook in callCreated', () => {
+    let onCreatedCalled = false;
+    const node = vnode<DOMRef>({
+      onCreated: () => {
+        onCreatedCalled = true;
+      }
+    });
+    
+    // Use callCreated directly
+    const { callCreated } = require('../miso/dom');
+    callCreated(document.body, node, drawingContext);
+    expect(onCreatedCalled).toBe(true);
+  });
+
+  test('Should handle VNode createElement with APPEND operation', () => {
+    var node = vnode<DOMRef>({ tag: 'div' });
+    var container = vnode<DOMRef>({
+      children: [node]
+    });
+    
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, container, document.body, drawingContext);
+    
+    expect(document.body.children[0].children.length).toBe(1);
+    expect(document.body.children[0].children[0]).toBe(node.domRef);
+  });
+
+  test('Should handle VNode createElement with REPLACE operation', () => {
+    var oldNode = vnode<DOMRef>({ tag: 'span' });
+    diff<DOMRef>(null, oldNode, document.body, drawingContext);
+    
+    var newNode = vnode<DOMRef>({ tag: 'div' });
+    diff<DOMRef>(oldNode, newNode, document.body, drawingContext);
+    
+    expect(document.body.children[0]).toBe(newNode.domRef);
+    expect(newNode.domRef.tagName).toBe('DIV');
+  });
+
+  test('Should call onBeforeCreated hook for VNode', () => {
+    let beforeCreatedCalled = false;
+    let createdCalled = false;
+    
+    const node = vnode<DOMRef>({
+      tag: 'div',
+      onBeforeCreated: () => {
+        beforeCreatedCalled = true;
+        expect(createdCalled).toBe(false);
+      },
+      onCreated: () => {
+        createdCalled = true;
+      }
+    });
+    
+    diff<DOMRef>(null, node, document.body, drawingContext);
+    
+    expect(beforeCreatedCalled).toBe(true);
+    expect(createdCalled).toBe(true);
+  });
+
+  test('Should mount VComp in callCreated', () => {
+    let mounted = false;
+    const comp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        mounted = true;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    const { callCreated } = require('../miso/dom');
+    callCreated(document.body, comp, drawingContext);
+    expect(mounted).toBe(true);
+  });
+
+  test('Should handle VNode createElement with INSERT_BEFORE', () => {
+    // Create a parent with first child
+    const first = vnode<DOMRef>({ tag: 'span', key: 'first' });
+    const parent = vnode<DOMRef>({
+      children: [first]
+    });
+    
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, parent, document.body, drawingContext);
+    const parentDom = parent.domRef;
+    
+    // Now create a parent with new first child inserted before existing
+    const newFirst = vnode<DOMRef>({ tag: 'div', key: 'new' });
+    const updated = vnode<DOMRef>({
+      children: [newFirst, first]
+    });
+    (updated as VNode<DOMRef>).domRef = parentDom;
+    (updated.children[1] as VNode<DOMRef>).domRef = (first as VNode<DOMRef>).domRef;
+    (updated.children[1] as VNode<DOMRef>).key = (first as VNode<DOMRef>).key;
+    
+    diff<DOMRef>(parent, updated, document.body, drawingContext);
+    
+    expect(parentDom.children.length).toBe(2);
+    expect(parentDom.children[0]).toBe(newFirst.domRef);
+    expect(parentDom.children[1]).toBe(first.domRef);
+  });
+
+  test('Should handle VComp creation with OP.APPEND', () => {
+    let mountCalled = false;
+    const comp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        mountCalled = true;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    diff<DOMRef>(null, comp, document.body, drawingContext);
+    
+    expect(mountCalled).toBe(true);
+    expect(comp.child).toBeTruthy();
+  });
+
+  test('Should handle nested VComp with final VNode', () => {
+    let outerMounted = false;
+    
+    const outerComp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        outerMounted = true;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    diff<DOMRef>(null, outerComp, document.body, drawingContext);
+    
+    expect(outerMounted).toBe(true);
+    expect(outerComp.child).toBeTruthy();
+    expect(outerComp.child.type).toBe(1); // VNode type
+  });
+
+  test('Should handle canvas draw callback', () => {
+    let drawCalled = false;
+    const canvas = vnode<DOMRef>({
+      tag: 'canvas',
+      draw: (domRef) => {
+        drawCalled = true;
+        expect(domRef).toBe(canvas.domRef);
+      }
+    });
+    
+    diff<DOMRef>(null, canvas, document.body, drawingContext);
+    expect(drawCalled).toBe(true);
+  });
+
+  test('Should replace VComp with another VComp', () => {
+    let firstUnmounted = false;
+    let secondMounted = false;
+    
+    const first = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        const vn = vnode<DOMRef>({ tag: 'span' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {
+        firstUnmounted = true;
+      }
+    });
+    
+    diff<DOMRef>(null, first, document.body, drawingContext);
+    
+    const second = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        secondMounted = true;
+        const vn = vnode<DOMRef>({ tag: 'div' });
+        callback(2 as any, vn);
+      },
+      unmount: () => {}
+    });
+    second.key = 'different-key';
+    
+    diff<DOMRef>(first, second, document.body, drawingContext);
+    expect(firstUnmounted).toBe(true);
+    expect(secondMounted).toBe(true);
+  });
+
+  test('Should replace VNode with another VNode via replace', () => {
+    const first = vnode<DOMRef>({ tag: 'span' });
+    diff<DOMRef>(null, first, document.body, drawingContext);
+    
+    const second = vnode<DOMRef>({ tag: 'div', key: 'different' });
+    diff<DOMRef>(first, second, document.body, drawingContext);
+    
+    expect(document.body.children[0]).toBe(second.domRef);
+    expect(second.domRef.tagName).toBe('DIV');
+  });
+
+  test('Should handle mountComponent callback with non-VComp child', () => {
+    let mounted = false;
+    const comp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        mounted = true;
+        const vn = vnode<DOMRef>({ tag: 'article' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    diff<DOMRef>(null, comp, document.body, drawingContext);
+    expect(mounted).toBe(true);
+    expect(comp.child.type).toBe(1);  // VNode
+  });
+
+  test('Should get DOM reference from drilled VComp', () => {
+    const comp = vcomp<DOMRef>({
+      mount: (parent, callback) => {
+        const vn = vnode<DOMRef>({ tag: 'section' });
+        callback(1 as any, vn);
+      },
+      unmount: () => {}
+    });
+    
+    diff<DOMRef>(null, comp, document.body, drawingContext);
+    
+    // Verify that mount callback was invoked and child was set
+    expect(comp.child).toBeTruthy();
+    expect(comp.componentId).toBe(1);
+  });
+
+  test('Should create VText with INSERT_BEFORE in createElement', () => {
+    // Create initial text nodes
+    const first = vtext<DOMRef>('first');
+    const second = vtext<DOMRef>('second');
+    
+    const parent = vnode<DOMRef>({
+      children: [first, second]
+    });
+    
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, parent, document.body, drawingContext);
+    
+    // Insert new text before second
+    const newFirst = vtext<DOMRef>('new');
+    const updated = vnode<DOMRef>({
+      children: [newFirst, first, second]
+    });
+    (updated as VNode<DOMRef>).domRef = parent.domRef;
+    (updated.children[1] as VText<DOMRef>).domRef = (first as VText<DOMRef>).domRef;
+    (updated.children[2] as VText<DOMRef>).domRef = (second as VText<DOMRef>).domRef;
+    
+    diff<DOMRef>(parent, updated, document.body, drawingContext);
+    
+    expect(parent.domRef.childNodes.length).toBe(3);
+    expect((parent.domRef.childNodes[0] as any).textContent).toBe('new');
+  });
+
+  test('Should create VText with REPLACE in createElement', () => {
+    const first = vtext<DOMRef>('foo');
+    const second = vtext<DOMRef>('bar');
+    
+    const parent = vnode<DOMRef>({
+      children: [first, second]
+    });
+    
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, parent, document.body, drawingContext);
+    
+    // Replace first text
+    const updated = vnode<DOMRef>({
+      children: [vtext<DOMRef>('replaced'), second]
+    });
+    (updated as VNode<DOMRef>).domRef = parent.domRef;
+    (updated.children[1] as VText<DOMRef>).domRef = (second as VText<DOMRef>).domRef;
+    
+    diff<DOMRef>(parent, updated, document.body, drawingContext);
+    
+    expect(parent.domRef.childNodes.length).toBe(2);
+    expect((parent.domRef.childNodes[0] as any).textContent).toBe('replaced');
+  });
+
+  test('Should create VNode with REPLACE in createElement', () => {
+    const first = vnode<DOMRef>({ tag: 'span' });
+    const second = vnode<DOMRef>({ tag: 'p' });
+    
+    const parent = vnode<DOMRef>({
+      children: [first, second]
+    });
+    
+    document.body.innerHTML = '';
+    diff<DOMRef>(null, parent, document.body, drawingContext);
+    
+    // Replace first node
+    const newFirst = vnode<DOMRef>({ tag: 'div' });
+    const updated = vnode<DOMRef>({
+      children: [newFirst, second]
+    });
+    (updated as VNode<DOMRef>).domRef = parent.domRef;
+    (updated.children[1] as VNode<DOMRef>).domRef = (second as VNode<DOMRef>).domRef;
+    
+    diff<DOMRef>(parent, updated, document.body, drawingContext);
+    
+    expect(parent.domRef.children[0]).toBe(newFirst.domRef);
+    expect(parent.domRef.children[0].tagName).toBe('DIV');
+  });
+
 });
diff --git a/ts/spec/event.spec.ts b/ts/spec/event.spec.ts
index d008c664a..8cb90a8f6 100644
--- a/ts/spec/event.spec.ts
+++ b/ts/spec/event.spec.ts
@@ -1,6 +1,6 @@
 import { diff } from '../miso/dom';
 import { delegate, undelegate } from '../miso/event';
-import { DOMRef, EventCapture } from '../miso/types';
+import { DOMRef, EventCapture, VNode } from '../miso/types';
 import { vnode, vcomp } from '../miso/smart';
 import { test, expect, describe, afterEach, beforeAll } from 'bun:test';
 import { eventContext, drawingContext } from '../miso/context/dom';
@@ -99,10 +99,9 @@ describe ('Event tests', () => {
     });
 
     var childVComp = vcomp({
-      children: [child],
       eventPropagation: true,
-      mount : function (vcomp, f) {
-        diff(null, child, vcomp.domRef, drawingContext);
+      mount : function (p, f) {
+        diff(null, child, p, drawingContext);
         return f(0, child);
       }
     });
@@ -113,11 +112,9 @@ describe ('Event tests', () => {
     });
 
     var parentVComp = vcomp({
-      events: events,
-      children: [parent],
-      mount : function (vcomp, f) {
-        diff(null, parent, vcomp.domRef, drawingContext);
-        return f(1, child);
+      mount : function (p, f) {
+        diff(null, parent, p, drawingContext);
+        return f(1, parent);
       }
     });
 
@@ -169,10 +166,9 @@ describe ('Event tests', () => {
     });
 
     var childVComp = vcomp({
-      children: [child],
       eventPropagation: false,
-      mount : function (vcomp, f) {
-        diff(null, child, vcomp.domRef, drawingContext);
+      mount : function (p, f) {
+        diff(null, child, p, drawingContext);
         return f(0, child);
       }
     });
@@ -183,11 +179,9 @@ describe ('Event tests', () => {
     });
 
     var parentVComp = vcomp({
-      events: events,
-      children: [parent],
-      mount : function (vcomp, f) {
-        diff(null, parent, vcomp.domRef, drawingContext);
-        return f(1, child);
+      mount : function (p, f) {
+        diff(null, parent, p, drawingContext);
+        return f(1, parent);
       }
     });
 
@@ -239,11 +233,10 @@ describe ('Event tests', () => {
     });
 
     var childVComp = vcomp({
-      children: [child],
       eventPropagation: true,
-      mount : function (vcomp, f) {
-        diff(null, child, vcomp.domRef, drawingContext);
-        return f(0, child);
+      mount : function (p: DOMRef, f) {
+        diff(null, child, p, drawingContext);
+        return f(0, child as VNode<DOMRef>);
       }
     });
 
@@ -253,17 +246,15 @@ describe ('Event tests', () => {
     });
 
     var parentVComp = vcomp({
-      events: events,
-      children: [parent],
-      mount : function (vcomp, f) {
-        diff(null, parent, vcomp.domRef, drawingContext);
-        return f(1, child);
+      mount : function (p: DOMRef, f) {
+        diff(null, parent, p, drawingContext);
+        return f(1, parent as VNode<DOMRef>);
       }
     });
 
     /* create hierarchy */
     child.parent = childVComp;
-    childVComp.parent = parent;
+    childVComp.parent = parent as VNode<DOMRef>;
     parent.parent = parentVComp;
 
     /* initial page draw */
@@ -467,4 +458,82 @@ describe ('Event tests', () => {
     undelegate(document.body, delegatedEvents, getVTree, true, eventContext);
   });
 
+  test('Should delegate events through recursively mounted components (vcomp -> vcomp -> vnode)', () => {
+    var body = document.body;
+    var count = 0;
+    var events = {
+      captures: {},
+      bubbles: {
+        click: {
+          runEvent: (e: Event, o: Node) => {
+            count++;
+          },
+          options: {
+            preventDefault: true,
+            stopPropagation: false,
+          },
+        }
+      }
+    };
+
+    // Innermost vnode with button that has click event
+    var innerNode = vnode({
+      tag: 'div',
+      children: [vnode({ tag: 'button', events })],
+      events
+    });
+
+    // Middle vcomp wrapping the vnode
+    var middleVComp = vcomp({
+      eventPropagation: true,
+      mount: function (p, f) {
+        diff(null, innerNode, p, drawingContext);
+        return f(1, innerNode);
+      }
+    });
+
+    // Outer vcomp wrapping the middle vcomp
+    var outerVComp = vcomp({
+      eventPropagation: true,
+      mount: function (p, f) {
+        diff(null, middleVComp, p, drawingContext);
+        return f(0, middleVComp);
+      }
+    });
+
+    // Set up parent hierarchy
+    const buttonNode = innerNode.children[0] as VNode<DOMRef>;
+    (buttonNode as any).parent = innerNode;
+    (innerNode as any).parent = middleVComp;
+    (middleVComp as any).parent = outerVComp;
+
+    /* initial page draw */
+    diff(null, outerVComp, document.body, drawingContext);
+
+    /* verify DOM structure is correct - recursively mounted components create the inner div */
+    expect(document.body.childNodes.length).toBeGreaterThanOrEqual(1);
+    const divElement = Array.from(document.body.childNodes).find(
+      node => (node as Element).tagName === 'DIV'
+    ) as Element;
+    expect(divElement).toBeDefined();
+    expect(divElement.tagName).toBe('DIV');
+
+    /* setup event delegation */
+    var getVTree = (cb: any) => {
+      cb(outerVComp);
+    };
+    const delegatedEvents: Array<EventCapture> = [{ name: 'click', capture: true }];
+    delegate(body, delegatedEvents, getVTree, true, eventContext);
+
+    /* initiate click event on the button inside nested components */
+    const button = buttonNode.domRef as HTMLElement;
+    button.click();
+
+    /* check results - event should propagate through the component hierarchy */
+    expect(count).toEqual(2);
+
+    /* unmount delegation */
+    undelegate(document.body, delegatedEvents, getVTree, true, eventContext);
+  });
+
 });
diff --git a/ts/spec/hydrate.spec.ts b/ts/spec/hydrate.spec.ts
index 308509043..d12958104 100644
--- a/ts/spec/hydrate.spec.ts
+++ b/ts/spec/hydrate.spec.ts
@@ -1,7 +1,7 @@
 /* imports */
 import { hydrate, integrityCheck } from '../miso/hydrate';
-import { vnode, vtext, vnodeKids } from '../miso/smart';
-import { VText, DOMRef } from '../miso/types';
+import { vnode, vtext, vcomp } from '../miso/smart';
+import { VText, VNode, DOMRef, VComp } from '../miso/types';
 import { test, expect, describe, afterEach, beforeAll } from 'bun:test';
 import { hydrationContext, drawingContext } from '../miso/context/dom';
 
@@ -28,10 +28,12 @@ describe ("Hydration tests", () => {
     div.appendChild(nestedDiv);
     var txt = document.createTextNode('foo');
     nestedDiv.appendChild(txt);
-    var currentNode : any = vnode<DOMRef>({
+
+    const currentNode : VNode<DOMRef> = vnode<DOMRef>({
       children: [vnode<DOMRef>({ children: [vtext('foo')] })],
     });
-    hydrate(false, document.body, currentNode, hydrationContext, drawingContext);
+    const result = hydrate(false, document.body, currentNode, hydrationContext, drawingContext);
+    expect(result).toBe(true);
     expect(currentNode.children[0].children[0].text).toEqual('foo');
   });
 
@@ -81,74 +83,9 @@ describe ("Hydration tests", () => {
     var currentNode = vnode<DOMRef>({
       children: [vtext('foo'), vtext('bar'), vtext('baz')],
     });
-    hydrate(false, document.body, currentNode, hydrationContext, drawingContext);
-    expect(div.childNodes[0].textContent).toEqual('foobarbaz');
-  });
-
-  test('Should copy DOM into VTree with multiple consecutive text nodes and collapse them without mount point', () => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    const txt = document.createTextNode('foobarbaz');
-    div.appendChild(txt);
-    const currentNode = vnode<DOMRef>({
-      children: [
-        vtext('foo'),
-        vtext('bar'),
-        vtext('baz'),
-        vnode<DOMRef>({}),
-        vtext('foo'),
-        vtext('bar'),
-        vtext('baz'),
-      ],
-    });
-    hydrate(false, null, currentNode, hydrationContext, drawingContext);
-    //Expect "foobarbaz" to be split up into three nodes in the DOM
+    const result = hydrate(false, document.body, currentNode, hydrationContext, drawingContext);
+    expect(result).toBe(true);
     expect(div.childNodes[0].textContent).toEqual('foobarbaz');
-    expect(div.childNodes[2].textContent).toEqual('foobarbaz');
-  });
-
-  test('Should copy DOM into VTree at mountPoint', () => {
-    var unrelatedDiv = document.createElement('div');
-    document.body.appendChild(document.createElement('script'));
-    document.body.appendChild(document.createTextNode('test'));
-    document.body.appendChild(unrelatedDiv);
-    var unrelatedTxt = document.createTextNode('Not part of Miso app');
-    unrelatedDiv.appendChild(unrelatedTxt);
-    var misoDiv = document.createElement('div');
-    document.body.appendChild(misoDiv);
-    var nestedDiv1 = document.createElement('div');
-    misoDiv.appendChild(nestedDiv1);
-    var nestedDiv2 = document.createElement('div');
-    nestedDiv1.appendChild(nestedDiv2);
-    var txt = document.createTextNode('foo');
-    nestedDiv2.appendChild(txt);
-    var tree:any = vnode<DOMRef>({ children: [vnode<DOMRef>({ children: [vtext('foo')] })] });
-    var succeeded = hydrate(false, misoDiv, tree, hydrationContext, drawingContext);
-    expect(tree.children[0].children[0].domRef).toEqual(txt);
-    expect(succeeded).toEqual(true);
-  });
-
-  test('Should copy DOM into VTree at body w/ script / text siblings', () => {
-    var unrelatedDiv = document.createElement('div');
-    document.body.appendChild(document.createElement('script'));
-    document.body.appendChild(document.createTextNode('test'));
-    document.body.appendChild(unrelatedDiv);
-    var unrelatedTxt = document.createTextNode('Not part of Miso app');
-    unrelatedDiv.appendChild(unrelatedTxt);
-    var misoDiv = document.createElement('div');
-    document.body.appendChild(misoDiv);
-    var nestedDiv1 = document.createElement('div');
-    misoDiv.appendChild(nestedDiv1);
-    var nestedDiv2 = document.createElement('div');
-    nestedDiv1.appendChild(nestedDiv2);
-    var txt = document.createTextNode('foo');
-    nestedDiv2.appendChild(txt);
-    var currentNode : any = vnodeKids('div', [vnodeKids('div', [vtext('foo')])]);
-    var succeeded = hydrate(true, document.body, currentNode, hydrationContext, drawingContext);
-    expect(currentNode.children[0].children[0].domRef.textContent).toEqual(
-        new Text('foo').textContent
-    );
-    expect(succeeded).toEqual(false);
   });
 
   test('Should fail to mount on a text node', () => {
@@ -348,7 +285,7 @@ describe ("Hydration tests", () => {
     const result = hydrate(false, document.body, tree, hydrationContext, drawingContext);
     expect(result).toEqual(true);
     expect(integrityCheck(tree, hydrationContext, drawingContext)).toBe(true);
-    tree.children[0].domRef = document.createElement('div');
+    (tree.children[0] as VNode<DOMRef>).domRef = document.createElement('div');
     expect(integrityCheck(tree, hydrationContext, drawingContext)).toBe(false);
   });
 
@@ -367,4 +304,194 @@ describe ("Hydration tests", () => {
     expect(integrityCheck(tree, hydrationContext, drawingContext)).toBe(false);
   });
 
+  test('Should not call mountComponent when hydrating VComp', () => {
+    const txt = document.createTextNode('component content');
+    const div = document.createElement('div');
+    div.appendChild(txt);
+    document.body.appendChild(div);
+
+    let mountCalled = false;
+    let componentId: any = null;
+    let componentTree: any = null;
+
+    const comp = vcomp<DOMRef>({
+      key: 'test-comp',
+      componentId : 1,
+      child: vnode({ children: [vtext<DOMRef>('component content')] }),
+      mount: (parent: any, callback: any) => {
+        mountCalled = true;
+        callback(componentId, componentTree);
+      },
+      unmount: () => {},
+    }) as VComp<DOMRef>;
+
+    const result = hydrate(false, document.body, comp, hydrationContext, drawingContext);
+
+    expect(result).toBe(true);
+    expect(mountCalled).toBe(false);
+    expect(comp.componentId).toBe(1);
+    expect(comp.child).toBeTruthy();
+  });
+
+  test('Should not call mountComponent with onBeforeMounted hook', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    let beforeMountedCalled = false;
+    let onMountedCalled = false;
+
+    const comp = vcomp<DOMRef>({
+      key: 'test-comp-hooks',
+      onBeforeMounted: () => {
+        beforeMountedCalled = true;
+      },
+      onMounted: (domRef: any) => {
+        onMountedCalled = true;
+      },
+      mount: (parent: any, callback: any) => {
+        callback(2, vtext<DOMRef>('mounted component'));
+      },
+      unmount: () => {},
+    }) as VComp<DOMRef>;
+
+    const tree = vnode<DOMRef>({
+      children: [comp],
+    });
+
+    const result = hydrate(false, document.body, tree, hydrationContext, drawingContext);
+
+    expect(result).toBe(false); // Hydration fails, falls back to mounting
+    expect(beforeMountedCalled).toBe(false);
+    expect(onMountedCalled).toBe(false);
+  });
+
+  test('Should handle VComp with nested child VTree', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    let childComponentTree: any = null;
+
+    const comp = vcomp<DOMRef>({
+      key: 'nested-comp',
+      child: vnode<DOMRef>({
+        tag: 'span',
+        children: [vtext<DOMRef>('nested child')],
+      }),
+      mount: (parent: any, callback: any) => {
+
+      },
+      unmount: () => {},
+    }) as VComp<DOMRef>;
+
+    const tree = vnode<DOMRef>({
+      children: [comp],
+    });
+
+    const result = hydrate(false, document.body, tree, hydrationContext, drawingContext);
+    expect(result).toBe(false); // Hydration fails, falls back to mounting
+    expect((comp.child as VNode<DOMRef>).tag).toBe('span');
+  });
+
+  test('Should log warning when hydration fails with logLevel enabled', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    // Create mismatched structure - DOM has div, VTree expects span
+    const tree = vnode<DOMRef>({ tag: 'span', children: [vtext<DOMRef>('mismatch')] });
+
+    const result = hydrate(true, document.body, tree, hydrationContext, drawingContext);
+
+    expect(result).toBe(false);
+  });
+
+  test('Should log success when hydration succeeds with logLevel enabled', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const txt = document.createTextNode('test');
+    div.appendChild(txt);
+
+    const tree = vnode<DOMRef>({
+      children: [vtext<DOMRef>('test')],
+    });
+
+    const result = hydrate(true, document.body, tree, hydrationContext, drawingContext);
+
+    expect(result).toBe(true);
+  });
+
+  test('Should handle preamble with no mount point children after scripts', () => {
+    // Create mount point with only script tags
+    const mountDiv = document.createElement('div');
+    const script1 = document.createElement('script');
+    const script2 = document.createElement('script');
+    mountDiv.appendChild(script1);
+    mountDiv.appendChild(script2);
+    document.body.appendChild(mountDiv);
+
+    const tree = vnode<DOMRef>({
+      children: [vtext<DOMRef>('content')],
+    });
+
+    const result = hydrate(false, mountDiv as any, tree, hydrationContext, drawingContext);
+
+    // Should create a new div since only scripts are present
+    expect(result).toBe(false);
+  });
+
+  test('Should parse RGB color correctly', () => {
+    const div = document.createElement('div');
+    div.style.color = 'rgb(255, 128, 64)';
+    document.body.appendChild(div);
+
+    const tree = vnode<DOMRef>({
+      css: { color: 'rgb(255, 128, 64)' },
+    });
+
+    const hydrated = hydrate(false, document.body, tree, hydrationContext, drawingContext);
+    expect(hydrated).toBe(true);      
+
+    expect(integrityCheck(tree, hydrationContext, drawingContext)).toBe(true);
+  });
+
+  test('Should successfully walk and hydrate VComp in DOM', () => {
+    const div = document.createElement('div');
+    const span = document.createElement('span');
+    div.appendChild(span);
+    document.body.appendChild(div);
+
+    const comp = vcomp<DOMRef>({
+      key: 'walk-comp',
+      componentId: 6,
+      child: vnode<DOMRef>({ tag: 'span' }),
+      mount: (parent: any, callback: any) => {
+      },
+      unmount: () => {},
+    }) as VComp<DOMRef>;
+
+    const tree = vnode<DOMRef>({
+      children: [comp],
+    });
+
+    const result = hydrate(false, document.body, tree, hydrationContext, drawingContext);
+    expect(result).toBe(true);
+    expect(comp.componentId).toBe(6);
+    expect(comp.child).toBeDefined();
+  });
+
+  test('Should handle VNode with VNode child in walk function', () => {
+    const div = document.createElement('div');
+    const child = document.createElement('span');
+    div.appendChild(child);
+    document.body.appendChild(div);
+
+    const tree = vnode<DOMRef>({
+      children: [vnode<DOMRef>({ tag: 'span' })],
+    });
+
+    const result = hydrate(false, document.body, tree, hydrationContext, drawingContext);
+
+    expect(result).toBe(true);
+    expect(tree.domRef).toBeDefined();
+  });
+
 });
diff --git a/ts/spec/util.spec.ts b/ts/spec/util.spec.ts
index e40d2b1c3..9a147018c 100644
--- a/ts/spec/util.spec.ts
+++ b/ts/spec/util.spec.ts
@@ -1,4 +1,4 @@
-import { populateClass, callFocus, callBlur, callSelect, callSetSelectionRange, getParentComponentId, fetchCore, websocketConnect, websocketClose, websocketSend, eventSourceConnect, eventSourceClose } from '../miso/util';
+import { populateClass, callFocus, callBlur, callSelect, callSetSelectionRange, fetchCore, websocketConnect, websocketClose, websocketSend, eventSourceConnect, eventSourceClose } from '../miso/util';
 import { vnode } from '../miso/smart';
 import { VNode } from '../miso/types';
 import { test, expect, describe, afterEach, beforeAll, mock } from 'bun:test';
@@ -45,22 +45,6 @@ describe ('Utils tests', () => {
     expect(document.activeElement).toEqual(document.body);
   });
 
-  test('Should get parentComponentId', () => {
-    /* build */
-    const grandparent = document.createElement('div');
-    grandparent['componentId'] = 100;
-    const parent = document.createElement('div');
-    grandparent.appendChild(parent);
-    const child = document.createElement('div');
-    parent.appendChild(child);
-    /* test */
-    let vcomp = child;
-    expect(getParentComponentId(vcomp)).toBe(100);
-    vcomp = parent;
-    expect(getParentComponentId(vcomp)).toBe(100);
-    expect(getParentComponentId(grandparent)).toBe(null);
-  });
-
   test('Should populate class', () => {
       let node : VNode<number> = vnode({});
       expect(node.classList).toBe(null);
diff --git a/tsconfig.json b/tsconfig.json
index 4119574d3..502b7550b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "moduleResolution": "bundler",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "exclude": ["out-tsc/*"]
   }
 }