@ilha/router 0.11.9 → 0.11.11

package/dist/index.d.ts

@@ -90,7 +90,9 @@ export interface RenderPageOptions {
     markers?: boolean;
 }
 export interface RouterBuilder {
-    route: (pattern: string, page: Page) => RouterBuilder;
+    route: (pattern: string, page: Page, opts?: {
+        layouts?: LayoutHandler[];
+    }) => RouterBuilder;
     errorBoundary: (pattern: string, handler: ErrorHandler) => RouterBuilder;
     routes: () => RouteRecord[];
     prime: () => void;
@@ -134,6 +136,33 @@ export declare const prime: () => void;
 export declare const beforeNavigate: (fn: BeforeNavigateHook) => (() => void);
 export declare const afterNavigate: (fn: AfterNavigateHook) => (() => void);
 export declare const navigate: (to: string, opts?: NavigateOptions) => void;
+export interface SearchParamOptions<T> {
+    /** Value when the param is absent. Writing it removes the param. */
+    default: T;
+    /** Decode the raw param. Default: the raw string. */
+    parse?: (raw: string) => T;
+    /** Encode a value for the URL. Default: `String(value)`. */
+    serialize?: (value: T) => string;
+}
+export interface SearchParam<T> {
+    (): T;
+    set: (next: T) => void;
+    update: (f: (current: T) => T) => void;
+}
+export interface SearchParamFn {
+    /** String param: `parse` is optional. */
+    (name: string, opts: SearchParamOptions<string>): SearchParam<string>;
+    /** Non-string param: `parse` is required to decode the raw string. */
+    <T>(name: string, opts: SearchParamOptions<T> & {
+        parse: (raw: string) => T;
+    }): SearchParam<T>;
+}
+/**
+ * Read and write one query param through the router. Writes `replace` the
+ * history entry without scrolling, so the mounted router re-renders the
+ * current route in place instead of remounting it.
+ */
+export declare const searchParam: SearchParamFn;
 export type LinkInterceptionOptions = Record<string, never>;
 export declare const enableLinkInterception: (root?: Element | Document, _options?: LinkInterceptionOptions) => (() => void);
 export interface IsActiveOptions {

package/dist/index.js

@@ -1,6 +1,6 @@
 import { t as REQUEST_ALS_KEY } from "./als-key-CVxbuM3z.js";
 import { a as withHeadStore, i as serializeHead, n as head, r as openBrowserHead, t as applyHeadEntriesToDocument } from "./head-WG_AtbdX.js";
-import { h, mount, renderToString } from "ilha";
+import { ErrorBoundary, atom, h, mount, renderToString } from "ilha";
 
 //#region src/hash.ts
 const isBrowser$1 = globalThis.window !== void 0 && globalThis.document !== void 0;
@@ -448,6 +448,36 @@ const navigate = (to, opts = {}) => {
 		type
 	});
 };
+/**
+* Read and write one query param through the router. Writes `replace` the
+* history entry without scrolling, so the mounted router re-renders the
+* current route in place instead of remounting it.
+*/
+const searchParam = (name, opts) => {
+	const serialize = opts.serialize ?? String;
+	const read = () => {
+		const raw = new URLSearchParams(_search).get(name);
+		if (raw === null) return opts.default;
+		return opts.parse ? opts.parse(raw) : raw;
+	};
+	const set = (next) => {
+		const params = new URLSearchParams(_search);
+		const encoded = serialize(next);
+		if (encoded === serialize(opts.default)) params.delete(name);
+		else params.set(name, encoded);
+		const qs = params.toString();
+		navigate(`${_path}${qs ? `?${qs}` : ""}${_hash}`, {
+			replace: true,
+			scroll: false
+		});
+	};
+	return Object.assign(read, {
+		set,
+		update: (f) => {
+			set(f(read()));
+		}
+	});
+};
 const NON_NAV_SCHEME = /^(?:mailto|tel|javascript):/iu;
 const resolveClickTarget = (_href, url) => {
 	if (getHistoryMode() === "hash") {
@@ -456,31 +486,32 @@ const resolveClickTarget = (_href, url) => {
 	}
 	return url.pathname + url.search + url.hash;
 };
+const onLinkClick = (event) => {
+	const mouseEvent = event;
+	if (mouseEvent.defaultPrevented || mouseEvent.button !== 0 || mouseEvent.metaKey || mouseEvent.ctrlKey || mouseEvent.shiftKey || mouseEvent.altKey) return;
+	const { target } = mouseEvent;
+	if (!(target instanceof Element)) return;
+	const anchor = target.closest("a");
+	if (!anchor || anchor.hasAttribute("download") || anchor.getAttribute("target") === "_blank" || anchor.matches("[data-no-intercept]")) return;
+	const href = anchor.getAttribute("href");
+	if (!href || NON_NAV_SCHEME.test(href)) return;
+	if (href.startsWith("#") && getHistoryMode() !== "hash") return;
+	if (href.startsWith("#") && !href.startsWith("#/")) return;
+	let url;
+	try {
+		url = new URL(href, location.href);
+	} catch {
+		return;
+	}
+	if (url.origin !== location.origin) return;
+	mouseEvent.preventDefault();
+	navigate(resolveClickTarget(href, url));
+};
 const enableLinkInterception = (root = document, _options = {}) => {
 	if (!isBrowser) return noop;
-	const clickHandler = (event) => {
-		const mouseEvent = event;
-		if (mouseEvent.defaultPrevented || mouseEvent.button !== 0 || mouseEvent.metaKey || mouseEvent.ctrlKey || mouseEvent.shiftKey || mouseEvent.altKey) return;
-		const { target } = mouseEvent;
-		if (!(target instanceof Element)) return;
-		const anchor = target.closest("a");
-		if (!anchor || anchor.hasAttribute("download") || anchor.getAttribute("target") === "_blank" || anchor.matches("[data-no-intercept]")) return;
-		const href = anchor.getAttribute("href");
-		if (!href || NON_NAV_SCHEME.test(href)) return;
-		if (href.startsWith("#") && getHistoryMode() !== "hash") return;
-		if (href.startsWith("#") && !href.startsWith("#/")) return;
-		let url;
-		try {
-			url = new URL(href, location.href);
-		} catch {
-			return;
-		}
-		if (url.origin !== location.origin) return;
-		mouseEvent.preventDefault();
-		navigate(resolveClickTarget(href, url));
-	};
-	root.addEventListener("click", clickHandler);
-	return () => root.removeEventListener("click", clickHandler);
+	const listener = { handleEvent: onLinkClick };
+	root.addEventListener("click", listener);
+	return () => root.removeEventListener("click", listener);
 };
 const isActive = (pattern, options = {}) => {
 	if (options.end) return _path === pattern;
@@ -516,10 +547,16 @@ const resolveRequestUrl = (urlOrRequest) => {
 		return new URL("http://localhost/");
 	}
 };
-const pageForPath = (pathname, routes, notFound) => {
+const composedPageForPath = (pathname, routes, notFound) => {
 	const match = matchRoute(routes, pathname);
-	if (match) return match.data.page;
-	return notFound;
+	if (!match) return notFound;
+	const { layouts } = match.data;
+	let { page } = match.data;
+	for (let j = layouts.length - 1; j >= 0; j -= 1) {
+		const layout = layouts[j];
+		if (layout) page = wrapLayout(layout, page);
+	}
+	return page;
 };
 const renderPage = (page, opts) => renderToString(page, opts);
 const buildRespondBody = (result, respondOpts, head) => {
@@ -577,25 +614,51 @@ const router = (options = {}) => {
 			let mounted = true;
 			const prevScroll = "scrollRestoration" in history ? history.scrollRestoration : null;
 			if (prevScroll !== null) history.scrollRestoration = "manual";
-			let unmountView = null;
+			let unmountShell = null;
 			let headSession = null;
-			const remount = () => {
-				unmountView?.();
-				headSession?.close();
-				headSession = null;
-				const page = pageForPath(_path, routes, notFound);
-				if (!page) {
-					unmountView = null;
-					applyHeadEntriesToDocument([]);
-					return;
+			let bumpShell = null;
+			const Shell = () => {
+				const tick = atom(0);
+				bumpShell = () => {
+					tick.update((t) => t + 1);
+				};
+				tick();
+				const match = matchRoute(routes, _path);
+				if (!match) return notFound ? h(notFound, null) : "";
+				const { errorHandler, layouts, page } = match.data;
+				let view = h(page, null);
+				for (let j = layouts.length - 1; j >= 0; j -= 1) {
+					const layout = layouts[j];
+					if (layout) view = h(layout, null, view);
+				}
+				if (errorHandler) {
+					const onBoundary = errorHandler;
+					view = h(ErrorBoundary, { fallback: ({ error }) => onBoundary({ message: error.message }, snapshot()) }, view);
 				}
+				return view;
+			};
+			const mountShell = () => {
+				headSession?.close();
 				const session = openBrowserHead();
 				headSession = session;
-				unmountView = mount(host, page, { hydrate: unmountView === null && hydrate });
+				unmountShell = mount(host, Shell, { hydrate });
 				queueMicrotask(() => {
 					session.flush();
 				});
 			};
+			const refresh = () => {
+				if (bumpShell) {
+					headSession?.close();
+					const session = openBrowserHead();
+					headSession = session;
+					bumpShell();
+					queueMicrotask(() => {
+						session.flush();
+					});
+					return;
+				}
+				mountShell();
+			};
 			const popHandler = () => {
 				if (!mounted) return;
 				const prevPath = _path + _search + _hash;
@@ -611,18 +674,20 @@ const router = (options = {}) => {
 					to: _path + _search + _hash,
 					type: "pop"
 				});
-				remount();
+				refresh();
 			};
 			navChangeCleanup = getAdapter().onChange(popHandler);
 			linkCleanup = mountInterceptLinks ?? defaultInterceptLinks ? enableLinkInterception(document) : null;
-			remount();
+			mountShell();
 			const offNav = afterNavigate(() => {
-				if (mounted) remount();
+				if (mounted) refresh();
 			});
 			return () => {
 				mounted = false;
 				offNav();
-				unmountView?.();
+				bumpShell = null;
+				unmountShell?.();
+				unmountShell = null;
 				headSession?.close();
 				headSession = null;
 				navChangeCleanup?.();
@@ -642,7 +707,7 @@ const router = (options = {}) => {
 			syncFromParts(parsed.pathname, parsed.search, parsed.hash, routes);
 			const store = { entries: [] };
 			try {
-				const page = pageForPath(parsed.pathname, routes, notFound);
+				const page = composedPageForPath(parsed.pathname, routes, notFound);
 				if (!page) throw new RouteError(404, "Not found");
 				let captured;
 				const wrapped = async () => {
@@ -711,8 +776,9 @@ const router = (options = {}) => {
 				status: result.kind === "error" ? result.status : result.status ?? 200
 			});
 		},
-		route(pattern, page) {
+		route(pattern, page, opts = {}) {
 			const data = {
+				layouts: opts.layouts ?? [],
 				page,
 				pattern
 			};
@@ -732,4 +798,4 @@ const router = (options = {}) => {
 };
 
 //#endregion
-export { EMPTY_HEAD, Redirect, RouteError, afterNavigate, beforeNavigate, defineLayout, enableLinkInterception, throwAppError as error, getHistoryMode, head, httpResponse, isActive, navigate, navigating, prime, redirect, resolveRedirectTarget, routeHash, routeParams, routePath, routeSearch, router, serializeHead, setHistoryMode, useContext, useRoute, wrapError, wrapLayout };
+export { EMPTY_HEAD, Redirect, RouteError, afterNavigate, beforeNavigate, defineLayout, enableLinkInterception, throwAppError as error, getHistoryMode, head, httpResponse, isActive, navigate, navigating, prime, redirect, resolveRedirectTarget, routeHash, routeParams, routePath, routeSearch, router, searchParam, serializeHead, setHistoryMode, useContext, useRoute, wrapError, wrapLayout };

package/dist/{plugin-Cn_H92L0.js → plugin-FVaWBiNQ.js}

@@ -465,10 +465,13 @@ const pushLayoutErrorImports = (imports, entry, index, importPath) => {
 	for (const [j, l] of entry.layouts.entries()) imports.push(`import { default as _layout${index}_${j} } from ${JSON.stringify(importPath(l))};`);
 	for (const [j, e] of entry.errors.entries()) imports.push(`import { default as _error${index}_${j} } from ${JSON.stringify(importPath(e))};`);
 };
-const pushRegistryAndRoutes = (entry, index, entriesLength, wrappedId, registryLines, routeLines, includeRoutes) => {
+const pushRegistryAndRoutes = (entry, index, entriesLength, wrappedId, registryLines, routeLines, includeRoutes, decomposeLayouts = false) => {
 	registryLines.push(`  ${JSON.stringify(entry.name)}: ${wrappedId}${index < entriesLength - 1 ? "," : ""}`);
 	if (!includeRoutes) return;
-	routeLines.push(`  .route(${JSON.stringify(entry.pattern)}, ${wrappedId})`);
+	if (decomposeLayouts && entry.layouts.length > 0) {
+		const layouts = entry.layouts.map((_, j) => `_layout${index}_${j}`).join(", ");
+		routeLines.push(`  .route(${JSON.stringify(entry.pattern)}, _page${index}, { layouts: [${layouts}] })`);
+	} else routeLines.push(`  .route(${JSON.stringify(entry.pattern)}, ${wrappedId})`);
 	if (entry.errors.length > 0) routeLines.push(`  .errorBoundary(${JSON.stringify(entry.pattern)}, _error${index}_${entry.errors.length - 1})`);
 };
 const buildServerFile = (entries, serverFile) => {
@@ -510,7 +513,7 @@ const emitClientEntry = (entry, index, entriesLength, isStatic, clientImport, im
 	const expr = wrapIslandExpr(`_page${index}`, entry.layouts.length, entry.errors.length, index);
 	const wrappedId = `_wrapped${index}`;
 	wrappedIslandLines.push(`const ${wrappedId} = ${expr};`);
-	pushRegistryAndRoutes(entry, index, entriesLength, wrappedId, registryLines, routeLines, !isStatic);
+	pushRegistryAndRoutes(entry, index, entriesLength, wrappedId, registryLines, routeLines, !isStatic, true);
 };
 const buildClientFile = (entries, clientFile, opts) => {
 	const { isStatic, interceptLinks } = opts;

package/dist/rsbuild.js

@@ -1,4 +1,4 @@
-import { t as ilhaPages } from "./plugin-Cn_H92L0.js";
+import { t as ilhaPages } from "./plugin-FVaWBiNQ.js";
 
 //#region src/rsbuild.ts
 /** Rsbuild plugin — use via `@ilha/router/rsbuild`. */

package/dist/server-island.js

@@ -178,15 +178,15 @@ const hydrateServerIsland = (host, id, wiring, props, moduleKey) => {
 				const actionFn = actionKey === null || actionKey === void 0 ? void 0 : wiring.actions?.[actionKey];
 				if (!actionFn) continue;
 				const boundKey = actionKey;
+				const run = async () => {
+					try {
+						await Promise.resolve(actionFn(...callArgs));
+						hooks.repaintModule();
+					} catch (error) {
+						console.error(`[ilha-router] action "${String(boundKey)}" failed:`, error);
+					}
+				};
 				const listener = () => {
-					const run = async () => {
-						try {
-							await Promise.resolve(actionFn(...callArgs));
-							hooks.repaintModule();
-						} catch (error) {
-							console.error(`[ilha-router] action "${String(boundKey)}" failed:`, error);
-						}
-					};
 					run();
 				};
 				el.addEventListener(eventType, listener);
@@ -209,14 +209,12 @@ const hydrateServerIsland = (host, id, wiring, props, moduleKey) => {
 			if (!actionFn) continue;
 			let args = [];
 			if (Array.isArray(marker.a)) args = marker.a;
-			const revived = (..._runtimeArgs) => {
-				const run = async () => {
-					const result = await Promise.resolve(actionFn(...args));
-					hooks.repaintModule();
-					return result;
-				};
-				return run();
+			const run = async () => {
+				const result = await Promise.resolve(actionFn(...args));
+				hooks.repaintModule();
+				return result;
 			};
+			const revived = (..._runtimeArgs) => run();
 			Object.assign(next, { [key]: revived });
 		}
 		return next;

package/dist/vite.js

@@ -1,4 +1,4 @@
-import { t as ilhaPages } from "./plugin-Cn_H92L0.js";
+import { t as ilhaPages } from "./plugin-FVaWBiNQ.js";
 
 //#region src/vite.ts
 /** Vite plugin — use via `@ilha/router/vite`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilha/router",
-  "version": "0.11.9",
+  "version": "0.11.11",
   "description": "A tiny SPA router for Ilha",
   "keywords": [
     "frontend",
@@ -69,17 +69,17 @@
     "test": "bun test"
   },
   "dependencies": {
-    "effect": "4.0.0-rc.112",
+    "effect": "4.0.0-rc.118",
     "unplugin": "3.3.0"
   },
   "devDependencies": {
-    "ilha": "^0.14.6",
-    "oxidejs": "^0.3.2",
-    "vite": "^8.2.2"
+    "ilha": "^0.14.8",
+    "oxidejs": "^0.5.7",
+    "vite": "^8.3.1"
   },
   "peerDependencies": {
-    "ilha": ">=0.14.6",
-    "oxidejs": ">=0.3.2"
+    "ilha": ">=0.14.8",
+    "oxidejs": ">=0.5.7"
   },
   "peerDependenciesMeta": {
     "oxidejs": {