@ilha/router 0.6.1 → 0.6.2

package/README.md

@@ -580,6 +580,8 @@ Wraps a page island with a layout handler. Used internally by the Vite plugin co
 
 On client hydration, `wrapLayout` mounts the full layout island (layout child slots `p:*` and the keyed page slot `k:page`) from existing SSR DOM — it does not re-render layout markup from serialized props. Interactive components in `+layout.tsx` (state, event handlers, nested islands) hydrate the same way as the page.
 
+With **nested** layouts (codegen: `wrapLayout(outer, wrapLayout(inner, page))`), `renderHydratable()` composes layout markup by awaiting the **leaf** page’s `hydratable()` envelope and injecting that HTML into each layout’s `k:page` slot (outer slot receives the inner layout tree; the innermost slot receives the page). Page state snapshots always come from the leaf page island.
+
 ```ts
 import { wrapLayout } from "@ilha/router";
 

package/dist/index.js

@@ -1,2 +1,2 @@
-import { C as wrapError, E as setHistoryMode, S as useRoute, T as getHistoryMode, _ as routeParams, a as RouterView, b as router, c as enableLinkInterception, d as loader, f as navigate, g as routeHash, h as redirect, i as RouterLink, l as error, m as prime, n as LoaderError, o as composeLoaders, p as prefetch, r as Redirect, s as defineLayout, t as LOADER_ENDPOINT, u as isActive, v as routePath, w as wrapLayout, x as src_default, y as routeSearch } from "./src-BP38YTMC.js";
+import { C as wrapError, E as setHistoryMode, S as useRoute, T as getHistoryMode, _ as routeParams, a as RouterView, b as router, c as enableLinkInterception, d as loader, f as navigate, g as routeHash, h as redirect, i as RouterLink, l as error, m as prime, n as LoaderError, o as composeLoaders, p as prefetch, r as Redirect, s as defineLayout, t as LOADER_ENDPOINT, u as isActive, v as routePath, w as wrapLayout, x as src_default, y as routeSearch } from "./src-B_DKbd_R.js";
 export { LOADER_ENDPOINT, LoaderError, Redirect, RouterLink, RouterView, composeLoaders, src_default as default, defineLayout, enableLinkInterception, error, getHistoryMode, isActive, loader, navigate, prefetch, prime, redirect, routeHash, routeParams, routePath, routeSearch, router, setHistoryMode, useRoute, wrapError, wrapLayout };

package/dist/rolldown.js

@@ -1,4 +1,4 @@
-import { C as wrapError, w as wrapLayout } from "./src-BP38YTMC.js";
+import { C as wrapError, w as wrapLayout } from "./src-B_DKbd_R.js";
 import { t as ilhaPages } from "./plugin-Cq0xpVL8.js";
 //#region src/rolldown.ts
 /** Rolldown plugin — use via `@ilha/router/rolldown`. */

package/dist/rspack.js

@@ -1,4 +1,4 @@
-import { C as wrapError, w as wrapLayout } from "./src-BP38YTMC.js";
+import { C as wrapError, w as wrapLayout } from "./src-B_DKbd_R.js";
 import { t as ilhaPages } from "./plugin-Cq0xpVL8.js";
 //#region src/rspack.ts
 /** Rspack plugin — use via `@ilha/router/rspack`. */

package/dist/{src-BP38YTMC.js → src-B_DKbd_R.js}

@@ -179,10 +179,70 @@ function composeLoaders(loaders) {
 		return Object.assign({}, ...results);
 	};
 }
+const WRAP_LAYOUT_LEAF = Symbol.for("ilha.router.wrapLayout.leaf");
+function extractHydratableInnerHtml(block) {
+	const m = block.match(/^<([a-zA-Z][\w-]*)\s[^>]*>([\s\S]*)<\/\1>\s*$/);
+	return m ? m[2] : block;
+}
+function parseHydratableOpenTag(block) {
+	const m = block.match(/^<([a-zA-Z][\w-]*)\s([^>]*)>/);
+	if (!m) return null;
+	return {
+		tag: m[1],
+		attrs: m[2]
+	};
+}
+function findKPageSlotSpans(layoutHtml) {
+	const spans = [];
+	for (const m of layoutHtml.matchAll(/<div\s[^>]*data-ilha-slot="k:page"[^>]*>/g)) {
+		const openEnd = m.index + m[0].length;
+		let depth = 1;
+		let i = openEnd;
+		while (i < layoutHtml.length && depth > 0) {
+			const nextOpen = layoutHtml.indexOf("<div", i);
+			const nextClose = layoutHtml.indexOf("</div>", i);
+			if (nextClose === -1) break;
+			if (nextOpen !== -1 && nextOpen < nextClose) {
+				depth += 1;
+				i = nextOpen + 4;
+			} else {
+				depth -= 1;
+				if (depth === 0) {
+					spans.push({
+						openEnd,
+						closeStart: nextClose
+					});
+					break;
+				}
+				i = nextClose + 6;
+			}
+		}
+	}
+	return spans;
+}
+/** Replace inner HTML of the first or innermost `k:page` slot (empty or pre-filled). */
+function injectKPageSlot(layoutHtml, slotInnerHtml, which) {
+	const spans = findKPageSlotSpans(layoutHtml);
+	if (spans.length === 0) return layoutHtml;
+	const target = which === "innermost" ? spans[spans.length - 1] : spans[0];
+	return layoutHtml.slice(0, target.openEnd) + slotInnerHtml + layoutHtml.slice(target.closeStart);
+}
+async function wrapLayoutSlotMarkup(innerWrapped, leafPage, props, opts) {
+	const pageInner = extractHydratableInnerHtml(await leafPage.hydratable(props, opts));
+	return injectKPageSlot(innerWrapped.toString(props), pageInner, "innermost");
+}
 function wrapLayout(layout, page) {
+	const leafPage = page[WRAP_LAYOUT_LEAF] ?? page;
+	const childWrapped = leafPage !== page ? page : null;
 	const Wrapped = layout(Object.assign(page.key("page"), { toString: page.toString.bind(page) }));
+	Wrapped[WRAP_LAYOUT_LEAF] = leafPage;
 	function pageMountHost(host) {
-		return host.querySelector("[data-ilha-slot=\"k:page\"]") ?? host;
+		const slots = [...host.querySelectorAll("[data-ilha-slot=\"k:page\"]")].filter((slot) => {
+			const boundary = slot.closest("[data-ilha]");
+			return boundary === null || boundary === host;
+		});
+		if (slots.length === 0) return host;
+		return slots[slots.length - 1];
 	}
 	function preparePageMountHost(outer, mountHost) {
 		if (mountHost.hasAttribute("data-ilha-state")) return;
@@ -215,11 +275,13 @@ function wrapLayout(layout, page) {
 	Wrapped.hydratable = async (props, opts) => {
 		if (!opts?.name) throw new Error("wrapLayout: hydratable requires options.name");
 		const resolvedProps = props ?? {};
-		const pageBlock = await page.hydratable(resolvedProps, opts);
-		const openTag = pageBlock.match(/^<([a-zA-Z][\w-]*)\s([^>]*)>/);
-		if (!openTag) return pageBlock;
-		const layoutInner = Wrapped.toString(resolvedProps);
-		return `<${openTag[1]} ${openTag[2]}>${layoutInner}</${openTag[1]}>`;
+		const pageBlock = await leafPage.hydratable(resolvedProps, opts);
+		const open = parseHydratableOpenTag(pageBlock);
+		if (!open) return pageBlock;
+		const pageInner = extractHydratableInnerHtml(pageBlock);
+		const slotContent = childWrapped ? await wrapLayoutSlotMarkup(childWrapped, leafPage, resolvedProps, opts) : pageInner;
+		const layoutInnerOut = injectKPageSlot(Wrapped.toString(resolvedProps), slotContent, "first");
+		return `<${open.tag} ${open.attrs}>${layoutInnerOut}</${open.tag}>`;
 	};
 	return Wrapped;
 }

package/dist/vite.js

@@ -1,4 +1,4 @@
-import { C as wrapError, w as wrapLayout } from "./src-BP38YTMC.js";
+import { C as wrapError, w as wrapLayout } from "./src-B_DKbd_R.js";
 import { t as ilhaPages } from "./plugin-Cq0xpVL8.js";
 //#region src/vite.ts
 /** Vite plugin — use via `@ilha/router/vite`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/router",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A tiny SPA router for Ilha",
   "license": "MIT",
   "author": "Ryuz <ryuzer@proton.me>",