@pyreon/router 0.12.3 → 0.12.5

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"6db74575-1","name":"loader.ts"},{"uid":"6db74575-3","name":"match.ts"},{"uid":"6db74575-5","name":"scroll.ts"},{"uid":"6db74575-7","name":"types.ts"},{"uid":"6db74575-9","name":"router.ts"},{"uid":"6db74575-11","name":"components.tsx"},{"uid":"6db74575-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"6db74575-1":{"renderedLength":2855,"gzipLength":1243,"brotliLength":0,"metaUid":"6db74575-0"},"6db74575-3":{"renderedLength":12203,"gzipLength":3691,"brotliLength":0,"metaUid":"6db74575-2"},"6db74575-5":{"renderedLength":1367,"gzipLength":576,"brotliLength":0,"metaUid":"6db74575-4"},"6db74575-7":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"6db74575-6"},"6db74575-9":{"renderedLength":18583,"gzipLength":5270,"brotliLength":0,"metaUid":"6db74575-8"},"6db74575-11":{"renderedLength":6581,"gzipLength":2480,"brotliLength":0,"metaUid":"6db74575-10"},"6db74575-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"6db74575-12"}},"nodeMetas":{"6db74575-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"6db74575-1"},"imported":[{"uid":"6db74575-14"}],"importedBy":[{"uid":"6db74575-12"},{"uid":"6db74575-10"}]},"6db74575-2":{"id":"/src/match.ts","moduleParts":{"index.js":"6db74575-3"},"imported":[],"importedBy":[{"uid":"6db74575-12"},{"uid":"6db74575-8"}]},"6db74575-4":{"id":"/src/scroll.ts","moduleParts":{"index.js":"6db74575-5"},"imported":[],"importedBy":[{"uid":"6db74575-8"}]},"6db74575-6":{"id":"/src/types.ts","moduleParts":{"index.js":"6db74575-7"},"imported":[],"importedBy":[{"uid":"6db74575-12"},{"uid":"6db74575-8"}]},"6db74575-8":{"id":"/src/router.ts","moduleParts":{"index.js":"6db74575-9"},"imported":[{"uid":"6db74575-14"},{"uid":"6db74575-15"},{"uid":"6db74575-2"},{"uid":"6db74575-4"},{"uid":"6db74575-6"}],"importedBy":[{"uid":"6db74575-12"},{"uid":"6db74575-10"}]},"6db74575-10":{"id":"/src/components.tsx","moduleParts":{"index.js":"6db74575-11"},"imported":[{"uid":"6db74575-14"},{"uid":"6db74575-0"},{"uid":"6db74575-8"}],"importedBy":[{"uid":"6db74575-12"}]},"6db74575-12":{"id":"/src/index.ts","moduleParts":{"index.js":"6db74575-13"},"imported":[{"uid":"6db74575-10"},{"uid":"6db74575-0"},{"uid":"6db74575-2"},{"uid":"6db74575-8"},{"uid":"6db74575-6"}],"importedBy":[],"isEntry":true},"6db74575-14":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"6db74575-10"},{"uid":"6db74575-0"},{"uid":"6db74575-8"}]},"6db74575-15":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"6db74575-8"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"cec65230-1","name":"loader.ts"},{"uid":"cec65230-3","name":"match.ts"},{"uid":"cec65230-5","name":"scroll.ts"},{"uid":"cec65230-7","name":"types.ts"},{"uid":"cec65230-9","name":"router.ts"},{"uid":"cec65230-11","name":"components.tsx"},{"uid":"cec65230-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"cec65230-1":{"renderedLength":2855,"gzipLength":1243,"brotliLength":0,"metaUid":"cec65230-0"},"cec65230-3":{"renderedLength":12203,"gzipLength":3691,"brotliLength":0,"metaUid":"cec65230-2"},"cec65230-5":{"renderedLength":1816,"gzipLength":765,"brotliLength":0,"metaUid":"cec65230-4"},"cec65230-7":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"cec65230-6"},"cec65230-9":{"renderedLength":22377,"gzipLength":6164,"brotliLength":0,"metaUid":"cec65230-8"},"cec65230-11":{"renderedLength":6957,"gzipLength":2564,"brotliLength":0,"metaUid":"cec65230-10"},"cec65230-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"cec65230-12"}},"nodeMetas":{"cec65230-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"cec65230-1"},"imported":[{"uid":"cec65230-14"}],"importedBy":[{"uid":"cec65230-12"},{"uid":"cec65230-10"}]},"cec65230-2":{"id":"/src/match.ts","moduleParts":{"index.js":"cec65230-3"},"imported":[],"importedBy":[{"uid":"cec65230-12"},{"uid":"cec65230-8"}]},"cec65230-4":{"id":"/src/scroll.ts","moduleParts":{"index.js":"cec65230-5"},"imported":[],"importedBy":[{"uid":"cec65230-8"}]},"cec65230-6":{"id":"/src/types.ts","moduleParts":{"index.js":"cec65230-7"},"imported":[],"importedBy":[{"uid":"cec65230-12"},{"uid":"cec65230-8"}]},"cec65230-8":{"id":"/src/router.ts","moduleParts":{"index.js":"cec65230-9"},"imported":[{"uid":"cec65230-14"},{"uid":"cec65230-15"},{"uid":"cec65230-2"},{"uid":"cec65230-4"},{"uid":"cec65230-6"}],"importedBy":[{"uid":"cec65230-12"},{"uid":"cec65230-10"}]},"cec65230-10":{"id":"/src/components.tsx","moduleParts":{"index.js":"cec65230-11"},"imported":[{"uid":"cec65230-14"},{"uid":"cec65230-0"},{"uid":"cec65230-8"}],"importedBy":[{"uid":"cec65230-12"}]},"cec65230-12":{"id":"/src/index.ts","moduleParts":{"index.js":"cec65230-13"},"imported":[{"uid":"cec65230-10"},{"uid":"cec65230-0"},{"uid":"cec65230-2"},{"uid":"cec65230-8"},{"uid":"cec65230-6"}],"importedBy":[],"isEntry":true},"cec65230-14":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"cec65230-10"},{"uid":"cec65230-0"},{"uid":"cec65230-8"}]},"cec65230-15":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"cec65230-8"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { createContext, createRef, h, onUnmount, provide, useContext } from "@pyreon/core";
+import { ErrorBoundary, createContext, createRef, h, onUnmount, provide, useContext } from "@pyreon/core";
 import { computed, signal } from "@pyreon/reactivity";
 
 //#region src/loader.ts
@@ -519,6 +519,22 @@ var ScrollManager = class {
 		this._applyResult(behavior, to.path);
 	}
 	_applyResult(result, toPath) {
+		const hashIdx = toPath.indexOf("#");
+		if (hashIdx >= 0) {
+			const id = toPath.slice(hashIdx + 1);
+			if (id) {
+				requestAnimationFrame(() => {
+					const el = document.getElementById(id);
+					if (el) {
+						el.scrollIntoView({ behavior: "smooth" });
+						return;
+					}
+					const namedEl = document.querySelector(`[name="${CSS.escape(id)}"]`);
+					if (namedEl) namedEl.scrollIntoView({ behavior: "smooth" });
+				});
+				return;
+			}
+		}
 		if (result === "none") return;
 		if (result === "top" || result === void 0) {
 			window.scrollTo({
@@ -702,9 +718,29 @@ function matchSegments(current, pattern, exact) {
 	if (ps.length > cs.length) return false;
 	return ps.every((seg, i) => seg.startsWith(":") || seg === cs[i]);
 }
+/**
+* Read and write URL search params reactively.
+*
+* @example Basic (untyped)
+* ```ts
+* const [params, setParams] = useSearchParams({ page: "1" })
+* params().page // "1"
+* setParams({ page: "2" }) // updates URL
+* ```
+*
+* @example Typed with schema
+* ```ts
+* const [params, setParams] = useSearchParams({
+*   page: 'number',
+*   sort: 'string',
+*   desc: 'boolean',
+* })
+* params().page  // number (auto-coerced)
+* params().desc  // boolean
+* ```
+*/
 function useSearchParams(defaults) {
-	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	const router = _getRouter();
 	const get = () => {
 		const query = router.currentRoute().query;
 		if (!defaults) return query;
@@ -723,6 +759,90 @@ function useSearchParams(defaults) {
 	};
 	return [get, set];
 }
+/**
+* Typed search params with auto-coercion.
+*
+* Schema values define the type: `'string'`, `'number'`, or `'boolean'`.
+* Query string values are automatically coerced to the declared type.
+*
+* @example
+* ```ts
+* const [params, setParams] = useTypedSearchParams({
+*   page: 'number',
+*   sort: 'string',
+*   desc: 'boolean',
+* })
+* params().page  // number (coerced from "3" → 3)
+* params().desc  // boolean (coerced from "true" → true)
+* setParams({ page: 2 }) // updates URL with ?page=2
+* ```
+*/
+function useTypedSearchParams(schema) {
+	const router = _getRouter();
+	const get = () => {
+		const query = router.currentRoute().query;
+		const result = {};
+		for (const [key, type] of Object.entries(schema)) {
+			const raw = query[key];
+			if (type === "number") result[key] = raw !== void 0 ? Number(raw) : 0;
+			else if (type === "boolean") result[key] = raw === "true" || raw === "1";
+			else result[key] = raw ?? "";
+		}
+		return result;
+	};
+	const set = (updates) => {
+		const current = get();
+		const merged = {};
+		for (const [k, v] of Object.entries({
+			...current,
+			...updates
+		})) merged[k] = String(v);
+		const path = router.currentRoute().path + stringifyQuery(merged);
+		return router.replace(path);
+	};
+	return [get, set];
+}
+function _getRouter() {
+	const router = useContext(RouterContext) ?? _activeRouter;
+	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	return router;
+}
+/**
+* Returns true while a navigation is in progress (guards + loaders running).
+* Use this to show loading indicators during route transitions.
+*
+* @example
+* ```tsx
+* const isNavigating = useTransition()
+* <Show when={isNavigating}>
+*   <LoadingBar />
+* </Show>
+* ```
+*/
+function useTransition() {
+	const router = _getRouter();
+	return () => router._loadingSignal() > 0;
+}
+/**
+* Read data accumulated by route middleware.
+*
+* @example
+* ```ts
+* // In middleware:
+* const authMiddleware: RouteMiddleware = async (ctx) => {
+*   ctx.data.user = await getUser(ctx.to)
+*   if (!ctx.data.user) return '/login'
+* }
+*
+* // In component:
+* const data = useMiddlewareData()
+* const user = () => data().user as User
+* ```
+*/
+function useMiddlewareData() {
+	const router = _getRouter();
+	return () => router.currentRoute()._middlewareData ?? {};
+}
 function createRouter(options) {
 	const opts = Array.isArray(options) ? { routes: options } : options;
 	const { routes, mode = "hash", scrollBehavior, onError, maxCacheSize = 100, trailingSlash = "strip" } = opts;
@@ -866,10 +986,16 @@ function createRouter(options) {
 	}
 	function commitNavigation(path, replace, to, from) {
 		scrollManager.save(from.path);
-		currentPath.set(path);
-		syncBrowserUrl(path, replace);
-		if (_isBrowser && to.meta.title) document.title = to.meta.title;
-		for (const record of router._loaderData.keys()) if (!to.matched.includes(record)) router._loaderData.delete(record);
+		const doCommit = () => {
+			currentPath.set(path);
+			syncBrowserUrl(path, replace);
+			if (_isBrowser && to.meta.title) document.title = to.meta.title;
+			for (const record of router._loaderData.keys()) if (!to.matched.includes(record)) router._loaderData.delete(record);
+		};
+		if (_isBrowser && to.meta.viewTransition !== false && typeof document.startViewTransition === "function") document.startViewTransition(() => {
+			doCommit();
+		});
+		else doCommit();
 		for (const hook of afterHooks) try {
 			hook(to, from);
 		} catch (err) {
@@ -884,6 +1010,29 @@ function createRouter(options) {
 		}
 		return "continue";
 	}
+	/** Run per-route middleware chain. Middleware from all matched routes execute in order. */
+	async function runMiddleware(to, from, gen) {
+		const ctx = {
+			to,
+			from,
+			data: {}
+		};
+		for (const record of to.matched) {
+			if (!record.middleware) continue;
+			const mws = Array.isArray(record.middleware) ? record.middleware : [record.middleware];
+			for (const mw of mws) {
+				if (gen !== _navGen) return { action: "cancel" };
+				const result = await mw(ctx);
+				if (result === false) return { action: "cancel" };
+				if (typeof result === "string") return {
+					action: "redirect",
+					target: result
+				};
+			}
+		}
+		to._middlewareData = ctx.data;
+		return { action: "continue" };
+	}
 	async function navigate(rawPath, replace, redirectDepth = 0) {
 		if (redirectDepth > 10) {
 			if (__DEV__) console.warn(`[Pyreon] Navigation to "${rawPath}" aborted: redirect depth exceeded 10 levels. This likely indicates a redirect loop in your route configuration.`);
@@ -903,6 +1052,12 @@ function createRouter(options) {
 			loadingSignal.update((n) => n - 1);
 			return;
 		}
+		const mwResult = await runMiddleware(to, from, gen);
+		if (mwResult.action !== "continue") {
+			loadingSignal.update((n) => n - 1);
+			if (mwResult.action === "redirect") return navigate(sanitizePath(mwResult.target), replace, redirectDepth + 1);
+			return;
+		}
 		const guardOutcome = await runAllGuards(to, from, gen);
 		if (guardOutcome.action !== "continue") {
 			loadingSignal.update((n) => n - 1);
@@ -1217,7 +1372,17 @@ function renderWithLoader(router, record, Comp, route) {
 		query: route.query,
 		meta: route.meta
 	};
+	if (record.errorComponent) return h(ErrorBoundary, {
+		fallback: (error) => h(record.errorComponent, {
+			...routeProps,
+			error
+		}),
+		children: record.loader ? renderLoaderContent(router, record, Comp, routeProps) : h(Comp, routeProps)
+	});
 	if (!record.loader) return h(Comp, routeProps);
+	return renderLoaderContent(router, record, Comp, routeProps);
+}
+function renderLoaderContent(router, record, Comp, routeProps) {
 	const data = router._loaderData.get(record);
 	if (data === void 0 && record.errorComponent) return h(record.errorComponent, routeProps);
 	return h(LoaderDataProvider, {
@@ -1264,5 +1429,5 @@ function isStaleChunk(err) {
 }
 
 //#endregion
-export { RouterContext, RouterLink, RouterProvider, RouterView, buildPath, createRouter, findRouteByName, hydrateLoaderData, lazy, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, parseQueryMulti, prefetchLoaderData, resolveRoute, serializeLoaderData, stringifyQuery, useBlocker, useIsActive, useLoaderData, useRoute, useRouter, useSearchParams };
+export { RouterContext, RouterLink, RouterProvider, RouterView, buildPath, createRouter, findRouteByName, hydrateLoaderData, lazy, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, parseQueryMulti, prefetchLoaderData, resolveRoute, serializeLoaderData, stringifyQuery, useBlocker, useIsActive, useLoaderData, useMiddlewareData, useRoute, useRouter, useSearchParams, useTransition, useTypedSearchParams };
 //# sourceMappingURL=index.js.map