tanstack-router-cache 0.1.6 → 0.1.8

package/dist/hooks/use-route-cache-effect.cjs

@@ -0,0 +1,38 @@
+const require_use_route_cache_activity = require("./use-route-cache-activity.cjs");
+let react = require("react");
+//#region src/hooks/use-route-cache-effect.ts
+function areDependenciesEqual(previousDeps, nextDeps) {
+	if (previousDeps?.length !== nextDeps.length) return false;
+	for (let index = 0; index < nextDeps.length; index += 1) if (!Object.is(previousDeps[index], nextDeps[index])) return false;
+	return true;
+}
+function useRouteCacheEffect(activeCallback, deps = []) {
+	const returnValue = (0, react.useRef)(void 0);
+	const isActiveRef = (0, react.useRef)(false);
+	const previousCallbackRef = (0, react.useRef)(void 0);
+	const previousDepsRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		const callbackChanged = previousCallbackRef.current !== activeCallback;
+		const dependenciesChanged = !areDependenciesEqual(previousDepsRef.current, deps);
+		if (!(callbackChanged || dependenciesChanged)) return;
+		previousCallbackRef.current = activeCallback;
+		previousDepsRef.current = deps;
+		if (!isActiveRef.current) return;
+		returnValue.current?.();
+		returnValue.current = activeCallback();
+	});
+	(0, react.useEffect)(() => () => {
+		returnValue.current?.();
+	}, []);
+	require_use_route_cache_activity.useRouteCacheActivity((active) => {
+		if (active) {
+			isActiveRef.current = true;
+			returnValue.current = activeCallback();
+			return;
+		}
+		isActiveRef.current = false;
+		returnValue.current?.();
+	});
+}
+//#endregion
+exports.useRouteCacheEffect = useRouteCacheEffect;

package/dist/hooks/use-route-cache-effect.js

@@ -0,0 +1,38 @@
+import { useRouteCacheActivity } from "./use-route-cache-activity.js";
+import { useEffect, useRef } from "react";
+//#region src/hooks/use-route-cache-effect.ts
+function areDependenciesEqual(previousDeps, nextDeps) {
+	if (previousDeps?.length !== nextDeps.length) return false;
+	for (let index = 0; index < nextDeps.length; index += 1) if (!Object.is(previousDeps[index], nextDeps[index])) return false;
+	return true;
+}
+function useRouteCacheEffect(activeCallback, deps = []) {
+	const returnValue = useRef(void 0);
+	const isActiveRef = useRef(false);
+	const previousCallbackRef = useRef(void 0);
+	const previousDepsRef = useRef(void 0);
+	useEffect(() => {
+		const callbackChanged = previousCallbackRef.current !== activeCallback;
+		const dependenciesChanged = !areDependenciesEqual(previousDepsRef.current, deps);
+		if (!(callbackChanged || dependenciesChanged)) return;
+		previousCallbackRef.current = activeCallback;
+		previousDepsRef.current = deps;
+		if (!isActiveRef.current) return;
+		returnValue.current?.();
+		returnValue.current = activeCallback();
+	});
+	useEffect(() => () => {
+		returnValue.current?.();
+	}, []);
+	useRouteCacheActivity((active) => {
+		if (active) {
+			isActiveRef.current = true;
+			returnValue.current = activeCallback();
+			return;
+		}
+		isActiveRef.current = false;
+		returnValue.current?.();
+	});
+}
+//#endregion
+export { useRouteCacheEffect };

package/dist/hooks/use-route-cache-error-boundary.cjs

@@ -0,0 +1,23 @@
+const require_pathname = require("../pathname.cjs");
+const require_router_cache = require("../contexts/router-cache.cjs");
+let _tanstack_react_router = require("@tanstack/react-router");
+let react = require("react");
+//#region src/hooks/use-route-cache-error-boundary.ts
+function useRouteCacheErrorBoundary(pathname) {
+	const context = require_router_cache.useOptionalRouterCacheContext();
+	const routePathname = (0, _tanstack_react_router.useLocation)({ select: (location) => location.pathname });
+	(0, react.useEffect)(() => {
+		if (!context) return;
+		const targetPathname = require_pathname.normalizeCachedRoutePathname(pathname ?? routePathname);
+		context.retainErroredRoute(targetPathname);
+		return () => {
+			context.releaseErroredRoute(targetPathname);
+		};
+	}, [
+		context,
+		pathname,
+		routePathname
+	]);
+}
+//#endregion
+exports.useRouteCacheErrorBoundary = useRouteCacheErrorBoundary;

package/dist/hooks/use-route-cache-error-boundary.js

@@ -0,0 +1,23 @@
+import { normalizeCachedRoutePathname } from "../pathname.js";
+import { useOptionalRouterCacheContext } from "../contexts/router-cache.js";
+import { useLocation } from "@tanstack/react-router";
+import { useEffect } from "react";
+//#region src/hooks/use-route-cache-error-boundary.ts
+function useRouteCacheErrorBoundary(pathname) {
+	const context = useOptionalRouterCacheContext();
+	const routePathname = useLocation({ select: (location) => location.pathname });
+	useEffect(() => {
+		if (!context) return;
+		const targetPathname = normalizeCachedRoutePathname(pathname ?? routePathname);
+		context.retainErroredRoute(targetPathname);
+		return () => {
+			context.releaseErroredRoute(targetPathname);
+		};
+	}, [
+		context,
+		pathname,
+		routePathname
+	]);
+}
+//#endregion
+export { useRouteCacheErrorBoundary };

package/dist/hooks/use-route-cache-navigation.cjs

@@ -0,0 +1,36 @@
+const require_use_event_listener = require("./use-event-listener.cjs");
+let react = require("react");
+//#region src/hooks/use-route-cache-navigation.ts
+const INITIAL_STATE = {
+	activeNavigation: null,
+	lastCompletedNavigation: null
+};
+function useRouteCacheNavigation() {
+	const [state, setState] = (0, react.useState)(INITIAL_STATE);
+	require_use_event_listener.useEventListener({ on: {
+		cachedNavigationStart: (navigation) => {
+			setState((current) => ({
+				...current,
+				activeNavigation: navigation
+			}));
+		},
+		cachedNavigationCancel: (navigation) => {
+			setState((current) => {
+				if (current.activeNavigation?.pathname !== navigation.pathname) return current;
+				return {
+					...current,
+					activeNavigation: null
+				};
+			});
+		},
+		cachedNavigationComplete: (navigation) => {
+			setState((current) => ({
+				activeNavigation: current.activeNavigation?.pathname === navigation.pathname ? null : current.activeNavigation,
+				lastCompletedNavigation: navigation
+			}));
+		}
+	} });
+	return state;
+}
+//#endregion
+exports.useRouteCacheNavigation = useRouteCacheNavigation;

package/dist/hooks/use-route-cache-navigation.js

@@ -0,0 +1,36 @@
+import { useEventListener } from "./use-event-listener.js";
+import { useState } from "react";
+//#region src/hooks/use-route-cache-navigation.ts
+const INITIAL_STATE = {
+	activeNavigation: null,
+	lastCompletedNavigation: null
+};
+function useRouteCacheNavigation() {
+	const [state, setState] = useState(INITIAL_STATE);
+	useEventListener({ on: {
+		cachedNavigationStart: (navigation) => {
+			setState((current) => ({
+				...current,
+				activeNavigation: navigation
+			}));
+		},
+		cachedNavigationCancel: (navigation) => {
+			setState((current) => {
+				if (current.activeNavigation?.pathname !== navigation.pathname) return current;
+				return {
+					...current,
+					activeNavigation: null
+				};
+			});
+		},
+		cachedNavigationComplete: (navigation) => {
+			setState((current) => ({
+				activeNavigation: current.activeNavigation?.pathname === navigation.pathname ? null : current.activeNavigation,
+				lastCompletedNavigation: navigation
+			}));
+		}
+	} });
+	return state;
+}
+//#endregion
+export { useRouteCacheNavigation };

package/dist/hooks/use-router-cache-debug.cjs

@@ -0,0 +1,85 @@
+let react = require("react");
+//#region src/hooks/use-router-cache-debug.ts
+const DYNAMIC_SEGMENT_PATTERNS = [
+	/^\d{4,}$/u,
+	/^[0-9a-f]{8,}$/iu,
+	/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu
+];
+function isDynamicLookingSegment(segment) {
+	for (const pattern of DYNAMIC_SEGMENT_PATTERNS) if (pattern.test(segment)) return true;
+	return false;
+}
+function isDynamicLookingPathname(pathname) {
+	return pathname.split("/").filter(Boolean).some(isDynamicLookingSegment);
+}
+function countHiddenContainers() {
+	if (typeof document === "undefined") return 0;
+	return document.querySelectorAll("[data-router-cache-container=\"true\"][data-router-cache-mode=\"hidden\"]").length;
+}
+function buildSnapshot(cachedRoutes, visiblePathname) {
+	const cachedRoutePathnames = Object.keys(cachedRoutes).sort((a, b) => a.localeCompare(b));
+	const dynamicLookingRoutePathnames = cachedRoutePathnames.filter(isDynamicLookingPathname);
+	const hiddenCachedRoutePathnames = cachedRoutePathnames.filter((pathname) => pathname !== visiblePathname);
+	return {
+		cachedRoutePathnames,
+		dynamicLookingRouteCount: dynamicLookingRoutePathnames.length,
+		dynamicLookingRoutePathnames,
+		hiddenCachedRouteCount: hiddenCachedRoutePathnames.length,
+		hiddenContainerCount: countHiddenContainers(),
+		totalCachedRouteCount: cachedRoutePathnames.length,
+		visiblePathname
+	};
+}
+function getDebugWindow() {
+	return globalThis.window;
+}
+function isProduction() {
+	return globalThis.process?.env?.NODE_ENV === "production";
+}
+function useRouterCacheDebug(cachedRoutes, visiblePathname) {
+	const warningThresholdRef = (0, react.useRef)(null);
+	const lastWarnedCountRef = (0, react.useRef)(null);
+	const lastSnapshotRef = (0, react.useRef)(null);
+	if (lastSnapshotRef.current === null) lastSnapshotRef.current = buildSnapshot(cachedRoutes, visiblePathname);
+	const snapshot = (0, react.useMemo)(() => buildSnapshot(cachedRoutes, visiblePathname), [cachedRoutes, visiblePathname]);
+	(0, react.useEffect)(() => {
+		if (isProduction()) return;
+		const debugWindow = getDebugWindow();
+		if (!debugWindow) return;
+		const refresh = () => {
+			lastSnapshotRef.current = buildSnapshot(cachedRoutes, visiblePathname);
+			return lastSnapshotRef.current;
+		};
+		const api = {
+			getSnapshot: () => lastSnapshotRef.current ?? snapshot,
+			lastSnapshot: snapshot,
+			refresh,
+			setWarningThreshold: (nextThreshold) => {
+				warningThresholdRef.current = typeof nextThreshold === "number" ? nextThreshold : null;
+				lastWarnedCountRef.current = null;
+			},
+			warningThreshold: warningThresholdRef.current
+		};
+		debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = api;
+		const rafId = globalThis.requestAnimationFrame(() => {
+			const nextSnapshot = refresh();
+			debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = {
+				...api,
+				lastSnapshot: nextSnapshot,
+				warningThreshold: warningThresholdRef.current
+			};
+			const warningThreshold = warningThresholdRef.current;
+			if (typeof warningThreshold === "number" && nextSnapshot.totalCachedRouteCount > warningThreshold && lastWarnedCountRef.current !== nextSnapshot.totalCachedRouteCount) lastWarnedCountRef.current = nextSnapshot.totalCachedRouteCount;
+		});
+		return () => {
+			globalThis.cancelAnimationFrame(rafId);
+			if (debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ === api) debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = void 0;
+		};
+	}, [
+		cachedRoutes,
+		snapshot,
+		visiblePathname
+	]);
+}
+//#endregion
+exports.useRouterCacheDebug = useRouterCacheDebug;

package/dist/hooks/use-router-cache-debug.js

@@ -0,0 +1,85 @@
+import { useEffect, useMemo, useRef } from "react";
+//#region src/hooks/use-router-cache-debug.ts
+const DYNAMIC_SEGMENT_PATTERNS = [
+	/^\d{4,}$/u,
+	/^[0-9a-f]{8,}$/iu,
+	/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu
+];
+function isDynamicLookingSegment(segment) {
+	for (const pattern of DYNAMIC_SEGMENT_PATTERNS) if (pattern.test(segment)) return true;
+	return false;
+}
+function isDynamicLookingPathname(pathname) {
+	return pathname.split("/").filter(Boolean).some(isDynamicLookingSegment);
+}
+function countHiddenContainers() {
+	if (typeof document === "undefined") return 0;
+	return document.querySelectorAll("[data-router-cache-container=\"true\"][data-router-cache-mode=\"hidden\"]").length;
+}
+function buildSnapshot(cachedRoutes, visiblePathname) {
+	const cachedRoutePathnames = Object.keys(cachedRoutes).sort((a, b) => a.localeCompare(b));
+	const dynamicLookingRoutePathnames = cachedRoutePathnames.filter(isDynamicLookingPathname);
+	const hiddenCachedRoutePathnames = cachedRoutePathnames.filter((pathname) => pathname !== visiblePathname);
+	return {
+		cachedRoutePathnames,
+		dynamicLookingRouteCount: dynamicLookingRoutePathnames.length,
+		dynamicLookingRoutePathnames,
+		hiddenCachedRouteCount: hiddenCachedRoutePathnames.length,
+		hiddenContainerCount: countHiddenContainers(),
+		totalCachedRouteCount: cachedRoutePathnames.length,
+		visiblePathname
+	};
+}
+function getDebugWindow() {
+	return globalThis.window;
+}
+function isProduction() {
+	return globalThis.process?.env?.NODE_ENV === "production";
+}
+function useRouterCacheDebug(cachedRoutes, visiblePathname) {
+	const warningThresholdRef = useRef(null);
+	const lastWarnedCountRef = useRef(null);
+	const lastSnapshotRef = useRef(null);
+	if (lastSnapshotRef.current === null) lastSnapshotRef.current = buildSnapshot(cachedRoutes, visiblePathname);
+	const snapshot = useMemo(() => buildSnapshot(cachedRoutes, visiblePathname), [cachedRoutes, visiblePathname]);
+	useEffect(() => {
+		if (isProduction()) return;
+		const debugWindow = getDebugWindow();
+		if (!debugWindow) return;
+		const refresh = () => {
+			lastSnapshotRef.current = buildSnapshot(cachedRoutes, visiblePathname);
+			return lastSnapshotRef.current;
+		};
+		const api = {
+			getSnapshot: () => lastSnapshotRef.current ?? snapshot,
+			lastSnapshot: snapshot,
+			refresh,
+			setWarningThreshold: (nextThreshold) => {
+				warningThresholdRef.current = typeof nextThreshold === "number" ? nextThreshold : null;
+				lastWarnedCountRef.current = null;
+			},
+			warningThreshold: warningThresholdRef.current
+		};
+		debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = api;
+		const rafId = globalThis.requestAnimationFrame(() => {
+			const nextSnapshot = refresh();
+			debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = {
+				...api,
+				lastSnapshot: nextSnapshot,
+				warningThreshold: warningThresholdRef.current
+			};
+			const warningThreshold = warningThresholdRef.current;
+			if (typeof warningThreshold === "number" && nextSnapshot.totalCachedRouteCount > warningThreshold && lastWarnedCountRef.current !== nextSnapshot.totalCachedRouteCount) lastWarnedCountRef.current = nextSnapshot.totalCachedRouteCount;
+		});
+		return () => {
+			globalThis.cancelAnimationFrame(rafId);
+			if (debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ === api) debugWindow.__TANSTACK_ROUTER_CACHE_DEBUG__ = void 0;
+		};
+	}, [
+		cachedRoutes,
+		snapshot,
+		visiblePathname
+	]);
+}
+//#endregion
+export { useRouterCacheDebug };

package/dist/hooks/use-router-cache.cjs

@@ -0,0 +1,32 @@
+const require_pathname = require("../pathname.cjs");
+const require_router_cache = require("../contexts/router-cache.cjs");
+const require_use_event_listener = require("./use-event-listener.cjs");
+const require_use_update = require("./use-update.cjs");
+//#region src/hooks/use-router-cache.ts
+function useRouterCache() {
+	const { cachedRoutes, deleteCachedRoutes } = require_router_cache.useRouterCacheContext();
+	const update = require_use_update.useUpdate();
+	require_use_event_listener.useEventListener({ on: { activeChange: () => {
+		update();
+	} } });
+	const destroy = (pathname) => {
+		deleteCachedRoutes(Array.isArray(pathname) ? pathname : [pathname]);
+	};
+	const destroyAll = () => {
+		deleteCachedRoutes(Object.keys(cachedRoutes));
+	};
+	const invalidateWhere = (predicate) => {
+		const pathnames = Object.entries(cachedRoutes).flatMap(([pathname, route]) => predicate(pathname, route) ? [pathname] : []);
+		if (pathnames.length > 0) deleteCachedRoutes(pathnames);
+		return pathnames;
+	};
+	return {
+		cachedRoutes,
+		destroy,
+		destroyAll,
+		invalidateWhere,
+		isCached: (pathname) => Object.hasOwn(cachedRoutes, require_pathname.normalizeCachedRoutePathname(pathname))
+	};
+}
+//#endregion
+exports.useRouterCache = useRouterCache;

package/dist/hooks/use-router-cache.js

@@ -0,0 +1,32 @@
+import { normalizeCachedRoutePathname } from "../pathname.js";
+import { useRouterCacheContext } from "../contexts/router-cache.js";
+import { useEventListener } from "./use-event-listener.js";
+import { useUpdate } from "./use-update.js";
+//#region src/hooks/use-router-cache.ts
+function useRouterCache() {
+	const { cachedRoutes, deleteCachedRoutes } = useRouterCacheContext();
+	const update = useUpdate();
+	useEventListener({ on: { activeChange: () => {
+		update();
+	} } });
+	const destroy = (pathname) => {
+		deleteCachedRoutes(Array.isArray(pathname) ? pathname : [pathname]);
+	};
+	const destroyAll = () => {
+		deleteCachedRoutes(Object.keys(cachedRoutes));
+	};
+	const invalidateWhere = (predicate) => {
+		const pathnames = Object.entries(cachedRoutes).flatMap(([pathname, route]) => predicate(pathname, route) ? [pathname] : []);
+		if (pathnames.length > 0) deleteCachedRoutes(pathnames);
+		return pathnames;
+	};
+	return {
+		cachedRoutes,
+		destroy,
+		destroyAll,
+		invalidateWhere,
+		isCached: (pathname) => Object.hasOwn(cachedRoutes, normalizeCachedRoutePathname(pathname))
+	};
+}
+//#endregion
+export { useRouterCache };

package/dist/hooks/use-update.cjs

@@ -0,0 +1,8 @@
+let react = require("react");
+//#region src/hooks/use-update.ts
+function useUpdate() {
+	const [, setState] = (0, react.useState)({});
+	return (0, react.useCallback)(() => setState({}), []);
+}
+//#endregion
+exports.useUpdate = useUpdate;

package/dist/hooks/use-update.js

@@ -0,0 +1,8 @@
+import { useCallback, useState } from "react";
+//#region src/hooks/use-update.ts
+function useUpdate() {
+	const [, setState] = useState({});
+	return useCallback(() => setState({}), []);
+}
+//#endregion
+export { useUpdate };