@reckona/mreact-router 0.0.194 → 0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-router",
-  "version": "0.0.194",
+  "version": "0.0.195",
   "description": "File-system app router, SSR, actions, and deployment adapters for mreact.",
   "keywords": [
     "jsx",
@@ -111,20 +111,20 @@
   "dependencies": {
     "@typescript/typescript6": "^6.0.2",
     "esbuild": ">=0.28.1 <0.29",
-    "@reckona/mreact": "0.0.194",
-    "@reckona/mreact-compat": "0.0.194",
-    "@reckona/mreact-devtools": "0.0.194",
-    "@reckona/mreact-compiler": "0.0.194",
-    "@reckona/mreact-reactive-core": "0.0.194",
-    "@reckona/mreact-query": "0.0.194",
-    "@reckona/mreact-reactive-dom": "0.0.194",
-    "@reckona/mreact-server": "0.0.194",
-    "@reckona/mreact-shared": "0.0.194"
+    "@reckona/mreact-compat": "0.0.195",
+    "@reckona/mreact": "0.0.195",
+    "@reckona/mreact-compiler": "0.0.195",
+    "@reckona/mreact-devtools": "0.0.195",
+    "@reckona/mreact-query": "0.0.195",
+    "@reckona/mreact-reactive-core": "0.0.195",
+    "@reckona/mreact-shared": "0.0.195",
+    "@reckona/mreact-server": "0.0.195",
+    "@reckona/mreact-reactive-dom": "0.0.195"
   },
   "peerDependencies": {
     "vite": ">=8.1.4 <9"
   },
   "optionalDependencies": {
-    "@reckona/mreact-router-native": "0.0.194"
+    "@reckona/mreact-router-native": "0.0.195"
   }
 }

package/src/client.ts

@@ -4150,13 +4150,15 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
     return false;
   }
 
-  const placeholders = Array.from(marker.querySelectorAll("template[data-mreact-client-boundary]"));
+  let hydrated = false;
 
-  if (placeholders.length === 0) {
-    return false;
-  }
+  while (true) {
+    const placeholder = marker.querySelector("template[data-mreact-client-boundary]");
+
+    if (placeholder === null) {
+      return hydrated;
+    }
 
-  for (const placeholder of placeholders) {
     const name = placeholder.getAttribute("data-mreact-client-boundary");
     const entry = name === null ? undefined : components.get(name);
     const component = typeof entry === "function" ? entry : entry?.component;
@@ -4190,6 +4192,7 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
       const root = __mreactCompatCreateRoot(container);
       container.__mreactCompatRoot = root;
       root.render(__mreactCompatCreateElement(component, props));
+      hydrated = true;
       continue;
     }
 
@@ -4197,9 +4200,8 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
 
     placeholder.replaceWith(node);
     propsElement?.remove();
+    hydrated = true;
   }
-
-  return true;
 }
 
 function __mreactClientBoundaryParentContainer(placeholder, propsElement) {
@@ -4276,6 +4278,8 @@ function __mreactClientBoundaryPropsElement(placeholder, name) {
 }
 
 function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
+  const componentFallback =
+    placeholder.getAttribute("data-mreact-client-boundary-fallback") === "component";
   const nodes = [];
   let next = placeholder.nextSibling;
 
@@ -4292,6 +4296,13 @@ function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
     nodes.push(current);
   }
 
+  if (componentFallback) {
+    return __mreactExtractClientBoundaryChildren(
+      nodes,
+      placeholder.getAttribute("data-mreact-client-boundary"),
+    );
+  }
+
   if (nodes.length === 0) {
     return undefined;
   }
@@ -4299,6 +4310,80 @@ function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
   return nodes.length === 1 ? nodes[0] : nodes;
 }
 
+function __mreactExtractClientBoundaryChildren(nodes, name) {
+  const startMarker = "mreact-client-boundary-children-start";
+  const endMarker = "mreact-client-boundary-children-end";
+  const archive = nodes.find(
+    (node) =>
+      node.nodeType === Node.ELEMENT_NODE &&
+      node.tagName === "TEMPLATE" &&
+      node.getAttribute("data-mreact-client-boundary-children") === name,
+  );
+
+  const roots = archive === undefined ? nodes : Array.from(archive.content.childNodes);
+  const markers = [];
+  const visit = (node) => {
+    if (
+      node.nodeType === Node.COMMENT_NODE &&
+      (node.nodeValue === startMarker || node.nodeValue === endMarker)
+    ) {
+      markers.push(node);
+    }
+
+    for (const child of Array.from(node.childNodes ?? [])) {
+      visit(child);
+    }
+  };
+
+  for (const root of roots) {
+    visit(root);
+  }
+
+  let start;
+  let depth = 0;
+
+  for (const marker of markers) {
+    if (marker.nodeValue === startMarker) {
+      if (depth === 0) {
+        start = marker;
+      }
+      depth += 1;
+      continue;
+    }
+
+    if (depth === 0 || start === undefined) {
+      continue;
+    }
+
+    depth -= 1;
+
+    if (depth !== 0) {
+      continue;
+    }
+
+    if (start.parentNode !== marker.parentNode) {
+      start = undefined;
+      continue;
+    }
+
+    const children = [];
+    let current = start.nextSibling;
+
+    while (current !== null && current !== marker) {
+      const next = current.nextSibling;
+      current.remove();
+      children.push(current);
+      current = next;
+    }
+
+    start.remove();
+    marker.remove();
+    return children.length === 0 ? "" : children.length === 1 ? children[0] : children;
+  }
+
+  return undefined;
+}
+
 function __mreactResumeRoute(marker, nextNode) {
   if (nextNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
     marker.replaceChildren(nextNode);
@@ -4314,12 +4399,23 @@ function __mreactResumeRoute(marker, nextNode) {
 
   __mreactResumeNode(current, nextNode);
 
-  if (current.parentNode !== marker) {
+  const active = current.parentNode === marker
+    ? current
+    : nextNode.parentNode === marker
+      ? nextNode
+      : null;
+
+  if (active === null) {
     return;
   }
 
-  while (marker.childNodes.length > 1) {
-    marker.lastChild?.remove();
+  for (const child of Array.from(marker.childNodes)) {
+    if (child === active) {
+      continue;
+    }
+
+    __mreactUnmountCompatBoundaries(child);
+    child.remove();
   }
 }