@pyreon/router 0.12.13 → 0.12.15

package/README.md

@@ -98,3 +98,17 @@ const data = useLoaderData<typeof loader>()
 ### Types
 
 `ExtractParams`, `RouteMeta`, `ResolvedRoute`, `RouteRecord`, `RouterOptions`, `Router`, `NavigationGuard`, `AfterEachHook`, `ScrollBehaviorFn`, `LoaderContext`, `RouteLoaderFn`
+
+## View Transitions
+
+Route changes are wrapped in `document.startViewTransition()` automatically when the browser supports it. Opt out per-route with `meta: { viewTransition: false }`.
+
+`await router.push()` / `.replace()` resolves once the DOM has committed to the new route -- specifically, when the ViewTransition's `updateCallbackDone` promise settles. It does NOT wait for the full animation (`.finished`, 200-300ms), because blocking every programmatic navigation on an animation is unacceptable.
+
+| Promise | Resolves when | Router awaits? |
+| --- | --- | --- |
+| `updateCallbackDone` | Callback done; DOM swapped; state live | yes |
+| `ready` | Snapshot captured, pseudo-elements ready | no -- `.catch()` only |
+| `finished` | Full animation completed | no -- `.catch()` only |
+
+`afterEach` hooks and scroll restoration fire after the VT callback completes, so they observe the new route state when invoked.

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":"a014a385-1","name":"loader.ts"},{"uid":"a014a385-3","name":"match.ts"},{"uid":"a014a385-5","name":"scroll.ts"},{"uid":"a014a385-7","name":"types.ts"},{"uid":"a014a385-9","name":"router.ts"},{"uid":"a014a385-11","name":"components.tsx"},{"uid":"a014a385-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"a014a385-1":{"renderedLength":2855,"gzipLength":1243,"brotliLength":0,"metaUid":"a014a385-0"},"a014a385-3":{"renderedLength":12203,"gzipLength":3691,"brotliLength":0,"metaUid":"a014a385-2"},"a014a385-5":{"renderedLength":1816,"gzipLength":765,"brotliLength":0,"metaUid":"a014a385-4"},"a014a385-7":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"a014a385-6"},"a014a385-9":{"renderedLength":22335,"gzipLength":6159,"brotliLength":0,"metaUid":"a014a385-8"},"a014a385-11":{"renderedLength":7106,"gzipLength":2622,"brotliLength":0,"metaUid":"a014a385-10"},"a014a385-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"a014a385-12"}},"nodeMetas":{"a014a385-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"a014a385-1"},"imported":[{"uid":"a014a385-14"}],"importedBy":[{"uid":"a014a385-12"},{"uid":"a014a385-10"}]},"a014a385-2":{"id":"/src/match.ts","moduleParts":{"index.js":"a014a385-3"},"imported":[],"importedBy":[{"uid":"a014a385-12"},{"uid":"a014a385-8"}]},"a014a385-4":{"id":"/src/scroll.ts","moduleParts":{"index.js":"a014a385-5"},"imported":[],"importedBy":[{"uid":"a014a385-8"}]},"a014a385-6":{"id":"/src/types.ts","moduleParts":{"index.js":"a014a385-7"},"imported":[],"importedBy":[{"uid":"a014a385-12"},{"uid":"a014a385-8"}]},"a014a385-8":{"id":"/src/router.ts","moduleParts":{"index.js":"a014a385-9"},"imported":[{"uid":"a014a385-14"},{"uid":"a014a385-15"},{"uid":"a014a385-2"},{"uid":"a014a385-4"},{"uid":"a014a385-6"}],"importedBy":[{"uid":"a014a385-12"},{"uid":"a014a385-10"}]},"a014a385-10":{"id":"/src/components.tsx","moduleParts":{"index.js":"a014a385-11"},"imported":[{"uid":"a014a385-14"},{"uid":"a014a385-0"},{"uid":"a014a385-8"}],"importedBy":[{"uid":"a014a385-12"}]},"a014a385-12":{"id":"/src/index.ts","moduleParts":{"index.js":"a014a385-13"},"imported":[{"uid":"a014a385-10"},{"uid":"a014a385-0"},{"uid":"a014a385-2"},{"uid":"a014a385-8"},{"uid":"a014a385-6"}],"importedBy":[],"isEntry":true},"a014a385-14":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"a014a385-10"},{"uid":"a014a385-0"},{"uid":"a014a385-8"}]},"a014a385-15":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"a014a385-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":"792f9763-1","name":"loader.ts"},{"uid":"792f9763-3","name":"match.ts"},{"uid":"792f9763-5","name":"scroll.ts"},{"uid":"792f9763-7","name":"types.ts"},{"uid":"792f9763-9","name":"router.ts"},{"uid":"792f9763-11","name":"components.tsx"},{"uid":"792f9763-13","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"792f9763-1":{"renderedLength":2824,"gzipLength":1233,"brotliLength":0,"metaUid":"792f9763-0"},"792f9763-3":{"renderedLength":12203,"gzipLength":3691,"brotliLength":0,"metaUid":"792f9763-2"},"792f9763-5":{"renderedLength":2194,"gzipLength":899,"brotliLength":0,"metaUid":"792f9763-4"},"792f9763-7":{"renderedLength":385,"gzipLength":246,"brotliLength":0,"metaUid":"792f9763-6"},"792f9763-9":{"renderedLength":23157,"gzipLength":6355,"brotliLength":0,"metaUid":"792f9763-8"},"792f9763-11":{"renderedLength":7106,"gzipLength":2622,"brotliLength":0,"metaUid":"792f9763-10"},"792f9763-13":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"792f9763-12"}},"nodeMetas":{"792f9763-0":{"id":"/src/loader.ts","moduleParts":{"index.js":"792f9763-1"},"imported":[{"uid":"792f9763-14"}],"importedBy":[{"uid":"792f9763-12"},{"uid":"792f9763-10"}]},"792f9763-2":{"id":"/src/match.ts","moduleParts":{"index.js":"792f9763-3"},"imported":[],"importedBy":[{"uid":"792f9763-12"},{"uid":"792f9763-8"}]},"792f9763-4":{"id":"/src/scroll.ts","moduleParts":{"index.js":"792f9763-5"},"imported":[],"importedBy":[{"uid":"792f9763-8"}]},"792f9763-6":{"id":"/src/types.ts","moduleParts":{"index.js":"792f9763-7"},"imported":[],"importedBy":[{"uid":"792f9763-12"},{"uid":"792f9763-8"}]},"792f9763-8":{"id":"/src/router.ts","moduleParts":{"index.js":"792f9763-9"},"imported":[{"uid":"792f9763-14"},{"uid":"792f9763-15"},{"uid":"792f9763-2"},{"uid":"792f9763-4"},{"uid":"792f9763-6"}],"importedBy":[{"uid":"792f9763-12"},{"uid":"792f9763-10"}]},"792f9763-10":{"id":"/src/components.tsx","moduleParts":{"index.js":"792f9763-11"},"imported":[{"uid":"792f9763-14"},{"uid":"792f9763-0"},{"uid":"792f9763-8"}],"importedBy":[{"uid":"792f9763-12"}]},"792f9763-12":{"id":"/src/index.ts","moduleParts":{"index.js":"792f9763-13"},"imported":[{"uid":"792f9763-10"},{"uid":"792f9763-0"},{"uid":"792f9763-2"},{"uid":"792f9763-8"},{"uid":"792f9763-6"}],"importedBy":[],"isEntry":true},"792f9763-14":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"792f9763-10"},{"uid":"792f9763-0"},{"uid":"792f9763-8"}]},"792f9763-15":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"792f9763-8"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -34,7 +34,6 @@ function useLoaderData() {
 async function prefetchLoaderData(router, path) {
 	const route = router._resolve(path);
 	const ac = new AbortController();
-	router._abortController = ac;
 	await Promise.all(route.matched.filter((r) => r.loader).map(async (r) => {
 		const data = await r.loader?.({
 			params: route.params,
@@ -498,6 +497,7 @@ function buildNameIndex(routes) {
 * Saves scroll position before each navigation and restores it when
 * navigating back to a previously visited path.
 */
+const MAX_SCROLL_POSITIONS = 100;
 var ScrollManager = class {
 	_positions = /* @__PURE__ */ new Map();
 	_behavior;
@@ -506,7 +506,14 @@ var ScrollManager = class {
 	}
 	/** Call before navigating away — saves current scroll position for `fromPath` */
 	save(fromPath) {
+		if (typeof window === "undefined") return;
+		if (this._positions.has(fromPath)) this._positions.delete(fromPath);
 		this._positions.set(fromPath, window.scrollY);
+		while (this._positions.size > MAX_SCROLL_POSITIONS) {
+			const oldest = this._positions.keys().next().value;
+			if (oldest === void 0) break;
+			this._positions.delete(oldest);
+		}
 	}
 	/** Call after navigation is committed — applies scroll behavior */
 	restore(to, from) {
@@ -519,6 +526,7 @@ var ScrollManager = class {
 		this._applyResult(behavior, to.path);
 	}
 	_applyResult(result, toPath) {
+		if (typeof window === "undefined") return;
 		const hashIdx = toPath.indexOf("#");
 		if (hashIdx >= 0) {
 			const id = toPath.slice(hashIdx + 1);
@@ -588,12 +596,12 @@ function setActiveRouter(router) {
 }
 function useRouter() {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	return router;
 }
 function useRoute() {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	return router.currentRoute;
 }
 /**
@@ -608,7 +616,7 @@ function useRoute() {
 */
 function onBeforeRouteLeave(guard) {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	const currentMatched = router.currentRoute().matched;
 	const wrappedGuard = (to, from) => {
 		if (!from.matched.some((r) => currentMatched.includes(r))) return void 0;
@@ -630,7 +638,7 @@ function onBeforeRouteLeave(guard) {
 */
 function onBeforeRouteUpdate(guard) {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	const currentMatched = router.currentRoute().matched;
 	const wrappedGuard = (to, from) => {
 		if (!to.matched.some((r) => currentMatched.includes(r))) return void 0;
@@ -656,7 +664,7 @@ function onBeforeRouteUpdate(guard) {
 */
 function useBlocker(fn) {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	router._blockers.add(fn);
 	const beforeUnloadHandler = _isBrowser ? (e) => {
 		e.preventDefault();
@@ -699,7 +707,7 @@ function useBlocker(fn) {
 */
 function useIsActive(path, exact = false) {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	return () => {
 		const current = router.currentRoute().path;
 		if (exact) return matchSegments(current, path, true);
@@ -804,7 +812,7 @@ function useTypedSearchParams(schema) {
 }
 function _getRouter() {
 	const router = useContext(RouterContext) ?? _activeRouter;
-	if (!router) throw new Error("[pyreon-router] No router installed. Wrap your app in <RouterProvider router={router}>.");
+	if (!router) throw new Error("[Pyreon] No router installed. Wrap your app in <RouterProvider router={router}>.");
 	return router;
 }
 /**
@@ -867,15 +875,10 @@ function createRouter(options) {
 	};
 	const currentPath = signal(normalizeTrailingSlash(getInitialLocation(), trailingSlash));
 	const currentRoute = computed(() => resolveRoute(currentPath(), routes));
-	let _popstateHandler = null;
-	let _hashchangeHandler = null;
-	if (_isBrowser) if (mode === "history") {
-		_popstateHandler = () => currentPath.set(getCurrentLocation());
-		window.addEventListener("popstate", _popstateHandler);
-	} else {
-		_hashchangeHandler = () => currentPath.set(getCurrentLocation());
-		window.addEventListener("hashchange", _hashchangeHandler);
-	}
+	const _popstateHandler = _isBrowser && mode === "history" ? () => currentPath.set(getCurrentLocation()) : null;
+	const _hashchangeHandler = _isBrowser && mode !== "history" ? () => currentPath.set(getCurrentLocation()) : null;
+	if (_popstateHandler) window.addEventListener("popstate", _popstateHandler);
+	if (_hashchangeHandler) window.addEventListener("hashchange", _hashchangeHandler);
 	const componentCache = /* @__PURE__ */ new Map();
 	const loadingSignal = signal(0);
 	async function evaluateGuard(guard, to, from, gen) {
@@ -984,7 +987,7 @@ function createRouter(options) {
 		if (swr.length > 0) revalidateSwrLoaders(swr, to, ac);
 		return true;
 	}
-	function commitNavigation(path, replace, to, from) {
+	async function commitNavigation(path, replace, to, from) {
 		scrollManager.save(from.path);
 		const doCommit = () => {
 			currentPath.set(path);
@@ -992,10 +995,18 @@ function createRouter(options) {
 			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();
+		if (_isBrowser && to.meta.viewTransition !== false && typeof document.startViewTransition === "function") {
+			const vt = document.startViewTransition(() => {
+				doCommit();
+			});
+			if (vt) {
+				vt.ready?.catch(() => {});
+				vt.finished?.catch(() => {});
+				if (vt.updateCallbackDone) try {
+					await vt.updateCallbackDone;
+				} catch {}
+			}
+		} else doCommit();
 		for (const hook of afterHooks) try {
 			hook(to, from);
 		} catch (err) {
@@ -1071,7 +1082,7 @@ function createRouter(options) {
 			loadingSignal.update((n) => n - 1);
 			return;
 		}
-		commitNavigation(path, replace, to, from);
+		await commitNavigation(path, replace, to, from);
 		loadingSignal.update((n) => n - 1);
 	}
 	let _readyResolve = null;
@@ -1133,15 +1144,32 @@ function createRouter(options) {
 		isReady() {
 			return router._readyPromise;
 		},
+		async preload(path) {
+			const resolved = resolveRoute(path, routes);
+			await Promise.all(resolved.matched.map(async (record) => {
+				if (componentCache.has(record)) return;
+				const raw = record.component;
+				if (!isLazy(raw)) {
+					componentCache.set(record, raw);
+					return;
+				}
+				const mod = await raw.loader();
+				const comp = typeof mod === "function" ? mod : mod.default;
+				componentCache.set(record, comp);
+			}));
+			const ac = new AbortController();
+			await Promise.all(resolved.matched.filter((r) => r.loader).map(async (r) => {
+				const data = await r.loader?.({
+					params: resolved.params,
+					query: resolved.query,
+					signal: ac.signal
+				});
+				router._loaderData.set(r, data);
+			}));
+		},
 		destroy() {
-			if (_popstateHandler) {
-				window.removeEventListener("popstate", _popstateHandler);
-				_popstateHandler = null;
-			}
-			if (_hashchangeHandler) {
-				window.removeEventListener("hashchange", _hashchangeHandler);
-				_hashchangeHandler = null;
-			}
+			if (_popstateHandler) window.removeEventListener("popstate", _popstateHandler);
+			if (_hashchangeHandler) window.removeEventListener("hashchange", _hashchangeHandler);
 			guards.length = 0;
 			afterHooks.length = 0;
 			router._blockers.clear();