@ilha/router 0.11.9 → 0.11.10

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") {
@@ -516,10 +546,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 +613,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 +673,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 +706,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 +775,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 +797,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/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.10",
   "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",
+    "ilha": "^0.14.7",
+    "oxidejs": "^0.5.7",
     "vite": "^8.2.2"
   },
   "peerDependencies": {
-    "ilha": ">=0.14.6",
-    "oxidejs": ">=0.3.2"
+    "ilha": ">=0.14.7",
+    "oxidejs": ">=0.5.7"
   },
   "peerDependenciesMeta": {
     "oxidejs": {