@ilha/router 0.8.5 → 0.8.7

package/dist/index.d.ts

@@ -65,6 +65,10 @@ export type Loader<T> = (ctx: LoaderContext) => Promise<T> | T;
 /**
  * Identity function for declaring a loader. Exists purely as a type anchor and
  * a marker for the Vite plugin to detect by export name.
+ *
+ * Loaders must read `ctx.params`/`ctx.url` rather than `useRoute()` — the
+ * route store still holds the previous route while a navigation's loader is
+ * in flight, so `useRoute().params()` inside a loader reads stale params.
  */
 export declare function loader<T>(fn: Loader<T>): Loader<T>;
 /** Extract the return type of a loader. */

package/dist/index.js

@@ -1,3 +1,3 @@
-import { A as wrapLayout, C as routePath, D as src_default, E as serializeHead, M as setHistoryMode, O as useRoute, S as routeParams, T as router, _ as navigating, a as RouterView, b as redirect, c as composeLoaders, d as error, f as head, g as navigate, h as loader, i as RouterLink, j as getHistoryMode, k as wrapError, l as defineLayout, m as isActive, n as LoaderError, o as afterNavigate, p as invalidate, r as Redirect, s as beforeNavigate, t as LOADER_ENDPOINT, u as enableLinkInterception, v as prefetch, w as routeSearch, x as routeHash, y as prime } from "./src-C2_zEYnV.js";
+import { A as wrapLayout, C as routePath, D as src_default, E as serializeHead, M as setHistoryMode, O as useRoute, S as routeParams, T as router, _ as navigating, a as RouterView, b as redirect, c as composeLoaders, d as error, f as head, g as navigate, h as loader, i as RouterLink, j as getHistoryMode, k as wrapError, l as defineLayout, m as isActive, n as LoaderError, o as afterNavigate, p as invalidate, r as Redirect, s as beforeNavigate, t as LOADER_ENDPOINT, u as enableLinkInterception, v as prefetch, w as routeSearch, x as routeHash, y as prime } from "./src-Dfq3JPRz.js";
 
 export { LOADER_ENDPOINT, LoaderError, Redirect, RouterLink, RouterView, afterNavigate, beforeNavigate, composeLoaders, src_default as default, defineLayout, enableLinkInterception, error, getHistoryMode, head, invalidate, isActive, loader, navigate, navigating, prefetch, prime, redirect, routeHash, routeParams, routePath, routeSearch, router, serializeHead, setHistoryMode, useRoute, wrapError, wrapLayout };

package/dist/{src-C2_zEYnV.js → src-Dfq3JPRz.js}

@@ -1,4 +1,4 @@
-import ilha, { ISLAND_MOUNT_INTERNAL, context, html, mount } from "ilha";
+import ilha, { ISLAND_MOUNT_HANDLES, ISLAND_MOUNT_INTERNAL, context, html, mount } from "ilha";
 import { addRoute, createRouter, findRoute } from "rou3";
 
 //#region src/hash.ts
@@ -136,6 +136,10 @@ const isBrowser = typeof window !== "undefined" && typeof document !== "undefine
 /**
 * Identity function for declaring a loader. Exists purely as a type anchor and
 * a marker for the Vite plugin to detect by export name.
+*
+* Loaders must read `ctx.params`/`ctx.url` rather than `useRoute()` — the
+* route store still holds the previous route while a navigation's loader is
+* in flight, so `useRoute().params()` inside a loader reads stale params.
 */
 function loader(fn) {
 	return fn;
@@ -306,7 +310,6 @@ function injectKPageSlot(layoutHtml, slotInnerHtml, which) {
 	const target = which === "innermost" ? spans[spans.length - 1] : spans[0];
 	return layoutHtml.slice(0, target.openEnd) + slotInnerHtml + layoutHtml.slice(target.closeStart);
 }
-/** Layout shell HTML with an empty `k:page` — avoids scanning MDX/twoslash inside `Wrapped.toString()`. */
 function layoutHtmlWithEmptyKPage(wrappedLayout, props) {
 	const handler = wrappedLayout[WRAP_LAYOUT_HANDLER];
 	if (!handler) return wrappedLayout.toString(props);
@@ -393,6 +396,43 @@ function wrapLayout(layout, page) {
 		};
 	}
 	wrapLeafPageMountHooks(leafPage);
+	const pageHandles = /* @__PURE__ */ new Map();
+	const pageInternalBase = page[ISLAND_MOUNT_INTERNAL];
+	if (typeof pageInternalBase === "function") page[ISLAND_MOUNT_INTERNAL] = (host, props) => {
+		const handle = pageInternalBase(host, props);
+		const entry = {
+			handle,
+			mountProps: props
+		};
+		pageHandles.set(host, entry);
+		return {
+			unmount: () => {
+				if (pageHandles.get(host) === entry) pageHandles.delete(host);
+				return handle.unmount();
+			},
+			updateProps: (p) => {
+				entry.mountProps = p;
+				handle.updateProps(p);
+			}
+		};
+	};
+	/**
+	* In-place prop update for one mounted layout instance: refresh the
+	* merged-input ref (so any layout re-render passes fresh props to `k:page`),
+	* push the merged loader props directly into the page mounted under *this*
+	* layout host (spread over its latest slot props so layout-provided extras
+	* survive), then update the layout island's own input. Page-first ordering
+	* lets a layout that *does* read its input re-render afterwards and win with
+	* its own fresher slot props.
+	*/
+	const layoutUpdateProps = (layoutHost, coreUpdate) => (p) => {
+		setLayoutMergedInput(p);
+		for (const [pageHost, entry] of pageHandles) if (layoutHost.contains(pageHost)) entry.handle.updateProps({
+			...entry.mountProps ?? {},
+			...p ?? {}
+		});
+		coreUpdate?.(p);
+	};
 	const layoutMount = Wrapped.mount.bind(Wrapped);
 	const layoutInternal = Wrapped[ISLAND_MOUNT_INTERNAL];
 	function prepareLayoutMountHost(host) {
@@ -401,16 +441,27 @@ function wrapLayout(layout, page) {
 	Wrapped.mount = (host, props) => {
 		setLayoutMergedInput(props);
 		prepareLayoutMountHost(host);
-		return layoutMount(host, props);
+		const unmount = layoutMount(host, props);
+		const core = ISLAND_MOUNT_HANDLES.get(host);
+		ISLAND_MOUNT_HANDLES.set(host, {
+			unmount,
+			updateProps: layoutUpdateProps(host, core?.updateProps)
+		});
+		return unmount;
 	};
 	Wrapped[ISLAND_MOUNT_INTERNAL] = (host, props) => {
 		setLayoutMergedInput(props);
 		prepareLayoutMountHost(host);
-		if (typeof layoutInternal === "function") return layoutInternal(host, props);
-		return {
+		const base = typeof layoutInternal === "function" ? layoutInternal(host, props) : {
 			unmount: layoutMount(host, props),
 			updateProps: () => {}
 		};
+		const enhanced = {
+			unmount: base.unmount,
+			updateProps: layoutUpdateProps(host, base.updateProps)
+		};
+		ISLAND_MOUNT_HANDLES.set(host, enhanced);
+		return enhanced;
 	};
 	Wrapped.hydratable = async (props, opts) => {
 		if (!opts?.name) throw new Error("wrapLayout: hydratable requires options.name");
@@ -640,6 +691,51 @@ function prefetch(pathWithSearch) {
 		expires: Date.now() + PREFETCH_TTL_MS
 	});
 }
+const noopRouteHandle = () => ({
+	unmount: () => {},
+	updateProps: null
+});
+/** Mount an island keeping the full internal handle so later same-island
+* navigations can push new loader props instead of remounting. */
+function mountIslandWithHandle(island, host, props) {
+	const internal = island[ISLAND_MOUNT_INTERNAL];
+	if (typeof internal === "function") {
+		const h = internal(host, props);
+		return {
+			unmount: () => void h.unmount(),
+			updateProps: (p) => h.updateProps(p)
+		};
+	}
+	return {
+		unmount: island.mount(host, props),
+		updateProps: null
+	};
+}
+/**
+* Same-island fast path: fetch fresh loader data and push it into the mounted
+* island via `updateProps` — ilha's fine-grained morph reconciles the DOM, so
+* focus, caret, selection, and scroll survive (the reason persistQuery-driven
+* filter inputs don't blur while typing). Returns "updated" when applied (or
+* redirected), "remount" when the caller must run the full teardown + mount
+* path (loader error / not-found need boundary DOM; the full path re-fetches,
+* accepted for these rare cases). Throws AbortError when superseded.
+*/
+async function updateRouteInPlace(handle, pathWithSearch, signal) {
+	if (!handle.updateProps) return "remount";
+	const result = !!findRoute(_rou3, "GET", pathWithSearch.split("?")[0] ?? "")?.data?.hasLoader ? await fetchLoaderData(pathWithSearch, signal) : {
+		kind: "data",
+		data: {}
+	};
+	signal.throwIfAborted();
+	if (result.kind === "redirect") {
+		clientRedirect(result.to);
+		return "updated";
+	}
+	if (result.kind !== "data") return "remount";
+	if (result.headEntries?.length) applyHeadEntriesToDocument([...result.headEntries]);
+	handle.updateProps(result.data);
+	return "updated";
+}
 /**
 * Mounts a route island with proper hydration for client-side navigation.
 * Looks up the island in the reverse registry, runs the loader (via fetch),
@@ -652,13 +748,16 @@ async function mountRouteWithHydration(island, host, pathWithSearch, signal, reg
 			return withViewSwap(() => {
 				host.innerHTML = `<div data-router-view data-router-not-found>${nf.toString()}</div>`;
 				const nfHost = host.firstElementChild;
-				return nfHost ? nf.mount(nfHost) : () => {};
+				return {
+					unmount: nfHost ? nf.mount(nfHost) : () => {},
+					updateProps: null
+				};
 			});
 		}
 		await withViewSwap(() => {
 			host.innerHTML = `<div data-router-empty></div>`;
 		});
-		return () => {};
+		return noopRouteHandle();
 	}
 	const clientMatch = findRoute(_rou3, "GET", pathWithSearch.split("?")[0] ?? "");
 	const hasLoader = !!clientMatch?.data?.hasLoader;
@@ -669,22 +768,25 @@ async function mountRouteWithHydration(island, host, pathWithSearch, signal, reg
 	};
 	if (loaderResult.kind === "redirect") {
 		clientRedirect(loaderResult.to);
-		return () => {};
+		return noopRouteHandle();
 	}
 	if (loaderResult.kind === "error") {
 		const boundary = clientMatch?.data?.errorHandler;
-		if (boundary) return withViewSwap(() => mountLoaderErrorBoundary(boundary, host, loaderResult.status, loaderResult.message));
+		if (boundary) return withViewSwap(() => ({
+			unmount: mountLoaderErrorBoundary(boundary, host, loaderResult.status, loaderResult.message),
+			updateProps: null
+		}));
 		const escaped = escapeHtml(loaderResult.message);
 		await withViewSwap(() => {
 			host.innerHTML = `<div data-router-view data-router-error="${loaderResult.status}">${escaped}</div>`;
 		});
-		return () => {};
+		return noopRouteHandle();
 	}
 	if (loaderResult.kind === "not-found") {
 		await withViewSwap(() => {
 			host.innerHTML = `<div data-router-empty></div>`;
 		});
-		return () => {};
+		return noopRouteHandle();
 	}
 	props = loaderResult.data;
 	const headStore = { entries: [...loaderResult.headEntries ?? []] };
@@ -695,7 +797,7 @@ async function mountRouteWithHydration(island, host, pathWithSearch, signal, reg
 			applyHeadEntriesToDocument(headStore.entries);
 			host.innerHTML = `<div data-router-view>${html}</div>`;
 		});
-		return () => {};
+		return noopRouteHandle();
 	}
 	const name = reverseRegistry?.get(island) ?? Object.entries(registry).find(([, v]) => v === island)?.[0];
 	if (!name) {
@@ -705,7 +807,7 @@ async function mountRouteWithHydration(island, host, pathWithSearch, signal, reg
 			applyHeadEntriesToDocument(headStore.entries);
 			host.innerHTML = `<div data-router-view>${html}</div>`;
 		});
-		return () => {};
+		return noopRouteHandle();
 	}
 	const html = await withHeadStore(headStore, () => island.hydratable(props, {
 		name,
@@ -716,7 +818,7 @@ async function mountRouteWithHydration(island, host, pathWithSearch, signal, reg
 		applyHeadEntriesToDocument(headStore.entries);
 		host.innerHTML = `<div data-router-view>${html}</div>`;
 		const islandHost = host.querySelector(`[data-ilha="${name}"]`);
-		return islandHost ? island.mount(islandHost) : () => {};
+		return islandHost ? mountIslandWithHandle(island, islandHost) : noopRouteHandle();
 	});
 }
 /** Render + mount a `+error` boundary island for a failed loader. */
@@ -960,7 +1062,12 @@ function navigate(to, opts = {}) {
 	}
 	_lastNavKey = currentNavKey();
 	syncRouteFromLocation();
-	if (opts.scroll !== false) scrollAfterNavigate(adapter.readLocation().hash);
+	if (opts.scroll !== false) {
+		const dest = adapter.readLocation();
+		const fromMatch = findRoute(_rou3, "GET", cur.pathname);
+		const destMatch = findRoute(_rou3, "GET", dest.pathname);
+		if (!(fromMatch?.data?.island != null && destMatch?.data?.island === fromMatch.data.island) || dest.hash && dest.hash !== "#") scrollAfterNavigate(dest.hash);
+	}
 	runAfterNavigateHooks({
 		from: current,
 		to,
@@ -1534,11 +1641,23 @@ function router(options = {}) {
 				if (getHistoryMode() === "hash") console.warn("[ilha-router] mount({ hydrate: true }) was called in hash mode. SSR + hydration assumes the server can render the active route, but in hash mode the server only ever sees the document URL. Use plain SPA mode (`mount(target)` without `hydrate: true`) for hash-mode apps.");
 				const viewHost = host.querySelector("[data-router-view]") ?? host;
 				let currentMountedIsland = activeIsland();
+				let currentMountedPath = routePath() + routeSearch();
+				let viewHandle = null;
+				const adoptHydratedHandle = () => {
+					const el = viewHost.querySelector("[data-ilha]");
+					if (!el) return null;
+					const h = ISLAND_MOUNT_HANDLES.get(el);
+					return h ? {
+						unmount: () => void h.unmount(),
+						updateProps: (p) => h.updateProps(p)
+					} : null;
+				};
 				const reverseRegistry = registry ? buildReverseRegistry(registry) : void 0;
 				let navVersion = 0;
 				const NavHandler = ilha.render(() => {
 					const current = activeIsland();
-					if (current !== currentMountedIsland) {
+					const pathWithSearch = routePath() + routeSearch();
+					if (current !== currentMountedIsland || pathWithSearch !== currentMountedPath) {
 						const thisNav = ++navVersion;
 						navAbort?.abort();
 						navAbort = new AbortController();
@@ -1546,11 +1665,20 @@ function router(options = {}) {
 						queueMicrotask(async () => {
 							if (thisNav !== navVersion) return;
 							const settle = beginNavigation();
-							unmountView?.();
-							unmountView = null;
 							try {
-								const loc = getAdapter().readLocation();
-								unmountView = await mountRouteWithHydration(current, viewHost, loc.pathname + loc.search, signal, registry, reverseRegistry);
+								if (current !== null && current === currentMountedIsland) {
+									const handle = viewHandle ?? adoptHydratedHandle();
+									if (handle?.updateProps) {
+										if (await updateRouteInPlace(handle, pathWithSearch, signal) === "updated") {
+											viewHandle = handle;
+											currentMountedPath = pathWithSearch;
+											return;
+										}
+									}
+								}
+								viewHandle?.unmount();
+								viewHandle = null;
+								viewHandle = await mountRouteWithHydration(current, viewHost, pathWithSearch, signal, registry, reverseRegistry);
 							} catch (e) {
 								if (e?.name === "AbortError") return;
 								console.error("[ilha-router] navigation failed:", e);
@@ -1560,6 +1688,7 @@ function router(options = {}) {
 								settle();
 							}
 							currentMountedIsland = current;
+							currentMountedPath = pathWithSearch;
 						});
 					}
 					return "";
@@ -1580,8 +1709,8 @@ function router(options = {}) {
 						navAbort = ac;
 						try {
 							const um = await mountRouteWithHydration(island, viewHost, pathWithSearch, ac.signal, registry, reverseRegistry);
-							if (thisNav === navVersion) unmountView = um;
-							else um();
+							if (thisNav === navVersion) viewHandle = um;
+							else um.unmount();
 						} catch (e) {
 							if (e?.name !== "AbortError") console.error("[ilha-router] initial client loader render failed:", e);
 						}
@@ -1607,12 +1736,26 @@ function router(options = {}) {
 					const settle = beginNavigation();
 					try {
 						const loc = getAdapter().readLocation();
-						const um = await mountRouteWithHydration(island, viewHost, loc.pathname + loc.search, ac.signal, registry, reverseRegistry);
+						const pathWithSearch = loc.pathname + loc.search;
+						if (island !== null && island === currentMountedIsland) {
+							const handle = viewHandle ?? adoptHydratedHandle();
+							if (handle?.updateProps) {
+								if (await updateRouteInPlace(handle, pathWithSearch, ac.signal) === "updated") {
+									if (thisNav === navVersion) {
+										viewHandle = handle;
+										currentMountedPath = pathWithSearch;
+									}
+									return;
+								}
+							}
+						}
+						const um = await mountRouteWithHydration(island, viewHost, pathWithSearch, ac.signal, registry, reverseRegistry);
 						if (thisNav === navVersion) {
-							unmountView?.();
-							unmountView = um;
+							viewHandle?.unmount();
+							viewHandle = um;
 							currentMountedIsland = island;
-						} else um();
+							currentMountedPath = pathWithSearch;
+						} else um.unmount();
 					} catch (e) {
 						if (e?.name !== "AbortError") console.error("[ilha-router] invalidate failed:", e);
 					} finally {
@@ -1626,7 +1769,7 @@ function router(options = {}) {
 					navAbort?.abort();
 					unmountNavHandler();
 					navHost.remove();
-					unmountView?.();
+					viewHandle?.unmount();
 					_linkCleanup?.();
 					_navChangeCleanup?.();
 					_linkCleanup = null;
@@ -1634,8 +1777,10 @@ function router(options = {}) {
 					if (prevScrollRestoration !== null) history.scrollRestoration = prevScrollRestoration;
 				};
 			}
-			let unmountIsland = null;
+			let mountedHandle = null;
+			let mountedHandleIsland = null;
 			let currentMountedIsland = null;
+			let currentMountedPath = null;
 			let navVersion = 0;
 			unmountView = RouterView.mount(host);
 			/**
@@ -1644,12 +1789,21 @@ function router(options = {}) {
 			* render would have no access to loader data.
 			*/
 			async function mountActiveIsland(island, signal) {
-				unmountIsland?.();
-				unmountIsland = null;
+				const sameIsland = island !== null && island === mountedHandleIsland && mountedHandle?.updateProps != null;
+				const teardown = () => {
+					mountedHandle?.unmount();
+					mountedHandle = null;
+					mountedHandleIsland = null;
+				};
+				if (!sameIsland) teardown();
 				currentMountedIsland = island;
+				currentMountedPath = routePath() + routeSearch();
 				if (!island) {
 					const nfHost = host?.querySelector("[data-router-not-found]");
-					if (_notFound && nfHost) unmountIsland = _notFound.mount(nfHost);
+					if (_notFound && nfHost) mountedHandle = {
+						unmount: _notFound.mount(nfHost),
+						updateProps: null
+					};
 					return;
 				}
 				const viewHost = host?.querySelector("[data-router-view]");
@@ -1666,9 +1820,13 @@ function router(options = {}) {
 					return;
 				}
 				if (result.kind === "error") {
+					if (sameIsland) teardown();
 					const boundary = clientMatch?.data?.errorHandler;
 					if (boundary) {
-						unmountIsland = await withViewSwap(() => mountLoaderErrorBoundary(boundary, viewHost, result.status, result.message));
+						mountedHandle = await withViewSwap(() => ({
+							unmount: mountLoaderErrorBoundary(boundary, viewHost, result.status, result.message),
+							updateProps: null
+						}));
 						return;
 					}
 					const escaped = escapeHtml(result.message);
@@ -1678,13 +1836,19 @@ function router(options = {}) {
 					return;
 				}
 				const props = result.kind === "data" ? result.data : {};
+				if (sameIsland && mountedHandle?.updateProps) {
+					if (result.kind === "data" && result.headEntries?.length) applyHeadEntriesToDocument([...result.headEntries]);
+					mountedHandle.updateProps(props);
+					return;
+				}
 				const headStore = { entries: [...result.kind === "data" ? result.headEntries ?? [] : []] };
 				const html = await withHeadStore(headStore, () => island.toString(props));
-				unmountIsland = await withViewSwap(() => {
+				mountedHandle = await withViewSwap(() => {
 					applyHeadEntriesToDocument(headStore.entries);
 					viewHost.innerHTML = html;
-					return island.mount(viewHost, props);
+					return mountIslandWithHandle(island, viewHost, props);
 				});
+				mountedHandleIsland = island;
 			}
 			navAbort = new AbortController();
 			mountActiveIsland(activeIsland(), navAbort.signal).catch((e) => {
@@ -1693,7 +1857,8 @@ function router(options = {}) {
 			});
 			const NavHandler = ilha.render(() => {
 				const current = activeIsland();
-				if (current !== currentMountedIsland) {
+				const pathWithSearch = routePath() + routeSearch();
+				if (current !== currentMountedIsland || pathWithSearch !== currentMountedPath) {
 					const thisNav = ++navVersion;
 					navAbort?.abort();
 					navAbort = new AbortController();
@@ -1731,7 +1896,7 @@ function router(options = {}) {
 				++navVersion;
 				_revalidate = null;
 				navAbort?.abort();
-				unmountIsland?.();
+				mountedHandle?.unmount();
 				unmountNavHandler();
 				navHost.remove();
 				unmountView?.();

package/dist/ssr.js

@@ -1,4 +1,4 @@
-import { t as LOADER_ENDPOINT } from "./src-C2_zEYnV.js";
+import { t as LOADER_ENDPOINT } from "./src-Dfq3JPRz.js";
 import { pageRouter, registry } from "ilha:pages/server";
 import "ilha:loaders";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/router",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "A tiny SPA router for Ilha",
   "keywords": [
     "frontend",
@@ -68,10 +68,10 @@
     "unplugin": "3.3.0"
   },
   "devDependencies": {
-    "ilha": "0.9.2",
+    "ilha": "0.9.3",
     "vite": "^8.1.3"
   },
   "peerDependencies": {
-    "ilha": ">=0.9.2"
+    "ilha": ">=0.9.3"
   }
 }