tanstack-router-cache 0.1.7 → 0.1.9

package/dist/components/route-cache-manager.cjs

@@ -0,0 +1,485 @@
+const require_pathname = require("../pathname.cjs");
+const require_route_cache_static_data = require("../route-cache-static-data.cjs");
+const require_router_cache = require("../contexts/router-cache.cjs");
+const require_use_event_listener = require("../hooks/use-event-listener.cjs");
+const require_use_router_cache_debug = require("../hooks/use-router-cache-debug.cjs");
+const require_cached_outlet = require("./cached-outlet.cjs");
+const require_off_screen = require("./off-screen.cjs");
+const require_restore_cached_href = require("./restore-cached-href.cjs");
+let _tanstack_react_router = require("@tanstack/react-router");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/route-cache-manager.tsx
+const LIVE_ROUTER_METHODS = [
+	"buildLocation",
+	"commitLocation",
+	"invalidate",
+	"loadRouteChunk",
+	"navigate",
+	"preloadRoute"
+];
+const routerSnapshotUpdaters = /* @__PURE__ */ new WeakMap();
+function createSnapshotStore(value) {
+	let currentValue = value;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => currentValue,
+		set: (nextValue) => {
+			if (Object.is(currentValue, nextValue)) return;
+			currentValue = nextValue;
+			for (const listener of listeners) listener(currentValue);
+		},
+		subscribe: (listener) => {
+			if (listener) listeners.add(listener);
+			return { unsubscribe: listener ? () => {
+				listeners.delete(listener);
+			} : () => void 0 };
+		}
+	};
+}
+function createRouterSnapshotData({ matches, router, routerLocation, routerResolvedLocation }) {
+	const snapshotMatches = matches.reduce((snapshot, match) => {
+		const nextMatch = snapshotMatch(match, routerLocation);
+		if (isRouterMatch(nextMatch)) snapshot.push(nextMatch);
+		return snapshot;
+	}, []);
+	return {
+		matches: snapshotMatches,
+		state: {
+			...router.stores.__store.get(),
+			matches: snapshotMatches,
+			location: routerLocation,
+			resolvedLocation: routerResolvedLocation
+		}
+	};
+}
+function createMatchStore(match) {
+	return Object.assign(createSnapshotStore(match), { routeId: match.routeId });
+}
+function syncRouterSnapshot(routerSnapshot, input) {
+	const update = routerSnapshotUpdaters.get(routerSnapshot);
+	if (!update) return false;
+	update(input);
+	return true;
+}
+function getLiveRouterMethodDescriptors(router) {
+	return Object.fromEntries(LIVE_ROUTER_METHODS.flatMap((methodName) => {
+		const method = router[methodName];
+		if (typeof method !== "function") return [];
+		return [[methodName, { value: method.bind(router) }]];
+	}));
+}
+function toRouterLocation(location) {
+	return { ...location };
+}
+function isReadyCachedRoute(route) {
+	return Boolean(route && require_route_cache_static_data.isRouteCacheEnabled(route.staticData) && !require_route_cache_static_data.isCachedRouteStale(route) && route.ready && route.matchId && route.routerSnapshot);
+}
+function hasErroredRouteMatch(matches) {
+	return matches.some((match) => match?.status === "error");
+}
+function hasRetainedRouteError(erroredRouteCounts, pathname) {
+	return (erroredRouteCounts[pathname] ?? 0) > 0;
+}
+function hasCurrentRouterMatchError({ matches, resolvedPathname, routerPathname }) {
+	return routerPathname === resolvedPathname && hasErroredRouteMatch(matches);
+}
+function hasCurrentRouteError({ erroredRouteCounts, matches, resolvedPathname, routerPathname }) {
+	return hasRetainedRouteError(erroredRouteCounts, routerPathname) || hasCurrentRouterMatchError({
+		matches,
+		resolvedPathname,
+		routerPathname
+	});
+}
+function isRouterMatch(match) {
+	return Boolean(match?.id && match.routeId);
+}
+function snapshotMatch(match, routerLocation) {
+	if (!isRouterMatch(match)) return;
+	const isLocationMatch = match.pathname ? require_pathname.normalizeCachedRoutePathname(match.pathname) === require_pathname.normalizeCachedRoutePathname(routerLocation.pathname) : false;
+	return {
+		...match,
+		...isLocationMatch ? {
+			_strictSearch: routerLocation.search,
+			search: routerLocation.search
+		} : {},
+		_nonReactive: { ...match._nonReactive }
+	};
+}
+function isCurrentUnmanagedCachedRoute(route, routerHref) {
+	return Boolean(route && require_route_cache_static_data.isRouteCacheEnabled(route.staticData) && route.ready && route.routerSnapshot && route.href === routerHref);
+}
+function syncReadyCachedRoute({ matchId, matches, routeId, route, routerLocation, router, routerResolvedLocation, routerHref, routerPathname, setCachedRoutes, staticData }) {
+	const routerSnapshotInput = {
+		matches,
+		router,
+		routerLocation,
+		routerResolvedLocation
+	};
+	let routerSnapshot = matchId ? route?.routerSnapshot : void 0;
+	if (routerSnapshot && !syncRouterSnapshot(routerSnapshot, routerSnapshotInput)) {
+		if (isCurrentUnmanagedCachedRoute(route, routerHref)) return;
+		routerSnapshot = void 0;
+	}
+	if (matchId && !routerSnapshot) routerSnapshot = createRouterSnapshot(routerSnapshotInput);
+	setCachedRoutes(routerPathname, {
+		href: routerHref,
+		matchId,
+		routeId,
+		ready: true,
+		routerSnapshot,
+		staticData
+	});
+}
+function syncCachedRouteState({ isCurrentMatchReady, isCurrentMatchResolved, deleteCachedRoutes, isCurrentRouteErrored, matchId, matches, route, routeId, router, routerHref, routerLocation, routerPathname, routerResolvedLocation, setCachedRoutes, staticData }) {
+	if (isCurrentRouteErrored) {
+		if (route) deleteCachedRoutes([routerPathname]);
+		return;
+	}
+	if (!isCurrentMatchResolved) return;
+	if (staticData && require_route_cache_static_data.isRouteCacheEnabled(staticData)) {
+		if (!isCurrentMatchReady) return;
+		syncReadyCachedRoute({
+			matchId,
+			matches,
+			routeId,
+			route,
+			routerLocation,
+			router,
+			routerResolvedLocation,
+			routerHref,
+			routerPathname,
+			setCachedRoutes,
+			staticData
+		});
+		return;
+	}
+	if (route) deleteCachedRoutes([routerPathname]);
+}
+function createRouterSnapshot(input) {
+	const { router, routerLocation, routerResolvedLocation } = input;
+	const snapshotData = createRouterSnapshotData(input);
+	const snapshotMatches = snapshotData.matches;
+	const matchStores = new Map(snapshotMatches.map((match) => [match.id, createMatchStore(match)]));
+	const routeMatchStoreCache = /* @__PURE__ */ new Map();
+	const stores = {
+		...router.stores,
+		status: createSnapshotStore(router.stores.status.get()),
+		loadedAt: createSnapshotStore(router.stores.loadedAt.get()),
+		isLoading: createSnapshotStore(router.stores.isLoading.get()),
+		isTransitioning: createSnapshotStore(router.stores.isTransitioning.get()),
+		location: createSnapshotStore(routerLocation),
+		resolvedLocation: createSnapshotStore(routerResolvedLocation),
+		statusCode: createSnapshotStore(router.stores.statusCode.get()),
+		redirect: createSnapshotStore(router.stores.redirect.get()),
+		matchesId: createSnapshotStore(snapshotMatches.map((match) => match.id)),
+		pendingIds: createSnapshotStore([]),
+		cachedIds: createSnapshotStore([]),
+		matches: createSnapshotStore(snapshotMatches),
+		pendingMatches: createSnapshotStore([]),
+		cachedMatches: createSnapshotStore([]),
+		firstId: createSnapshotStore(snapshotMatches[0]?.id),
+		hasPending: createSnapshotStore(snapshotMatches.some((match) => match.status === "pending")),
+		matchRouteDeps: createSnapshotStore({
+			locationHref: routerLocation.href,
+			resolvedLocationHref: routerResolvedLocation?.href,
+			status: snapshotData.state.status
+		}),
+		__store: createSnapshotStore(snapshotData.state),
+		matchStores,
+		pendingMatchStores: /* @__PURE__ */ new Map(),
+		cachedMatchStores: /* @__PURE__ */ new Map(),
+		getRouteMatchStore: (routeId) => {
+			let cached = routeMatchStoreCache.get(routeId);
+			if (!cached) {
+				cached = createSnapshotStore(snapshotMatches.find((match) => match.routeId === routeId));
+				routeMatchStoreCache.set(routeId, cached);
+			}
+			return cached;
+		},
+		setMatches: () => void 0,
+		setPending: () => void 0,
+		setCached: () => void 0
+	};
+	const updateSnapshot = (nextInput) => {
+		const nextData = createRouterSnapshotData(nextInput);
+		const nextMatches = nextData.matches;
+		const nextMatchIds = new Set(nextMatches.map((match) => match.id));
+		const nextMatchesByRouteId = new Map(nextMatches.map((match) => [match.routeId, match]));
+		for (const match of nextMatches) {
+			const store = matchStores.get(match.id);
+			if (store) {
+				store.set(match);
+				continue;
+			}
+			matchStores.set(match.id, createMatchStore(match));
+		}
+		for (const [matchId] of matchStores) if (!nextMatchIds.has(matchId)) matchStores.delete(matchId);
+		stores.status.set(nextInput.router.stores.status.get());
+		stores.loadedAt.set(nextInput.router.stores.loadedAt.get());
+		stores.isLoading.set(nextInput.router.stores.isLoading.get());
+		stores.isTransitioning.set(nextInput.router.stores.isTransitioning.get());
+		stores.location.set(nextInput.routerLocation);
+		stores.resolvedLocation.set(nextInput.routerResolvedLocation);
+		stores.statusCode.set(nextInput.router.stores.statusCode.get());
+		stores.redirect.set(nextInput.router.stores.redirect.get());
+		stores.matchesId.set(nextMatches.map((match) => match.id));
+		stores.pendingIds.set([]);
+		stores.cachedIds.set([]);
+		stores.matches.set(nextMatches);
+		stores.pendingMatches.set([]);
+		stores.cachedMatches.set([]);
+		stores.firstId.set(nextMatches[0]?.id);
+		stores.hasPending.set(nextMatches.some((match) => match.status === "pending"));
+		stores.matchRouteDeps.set({
+			locationHref: nextInput.routerLocation.href,
+			resolvedLocationHref: nextInput.routerResolvedLocation?.href,
+			status: nextData.state.status
+		});
+		stores.__store.set(nextData.state);
+		for (const [routeId, store] of routeMatchStoreCache) store.set(nextMatchesByRouteId.get(routeId));
+	};
+	const routerSnapshot = Object.create(router);
+	Object.defineProperties(routerSnapshot, {
+		stores: { value: stores },
+		latestLocation: { get: () => stores.location.get() },
+		getMatch: { value: (matchId) => matchStores.get(matchId)?.get() },
+		updateMatch: { value: () => void 0 },
+		...getLiveRouterMethodDescriptors(router)
+	});
+	routerSnapshotUpdaters.set(routerSnapshot, updateSnapshot);
+	return routerSnapshot;
+}
+function getRouterCacheStaticData(childMatches, isCurrentMatchResolved) {
+	if (!isCurrentMatchResolved) return;
+	for (let i = childMatches.length - 1; i >= 0; i--) {
+		const match = childMatches[i];
+		if (match?.staticData && require_route_cache_static_data.isRouteCacheEnabled(match.staticData)) return match.staticData;
+	}
+}
+function restoreCachedHref(router, href) {
+	router.navigate({
+		href,
+		replace: true,
+		resetScroll: false
+	}).catch(() => void 0);
+}
+function renderCachedRoute({ bypassCachedPathname, pathname, route, routerPathname }) {
+	if (pathname === bypassCachedPathname) return null;
+	if (require_route_cache_static_data.isCachedRouteStale(route)) return null;
+	const content = route.matchId && route.routerSnapshot ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_cached_outlet.default, {
+		matchId: route.matchId,
+		routerSnapshot: route.routerSnapshot
+	}) : null;
+	if (!content) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_off_screen.default, {
+		mode: routerPathname === pathname ? "visible" : "hidden",
+		pathname,
+		children: content
+	}, pathname);
+}
+function getStaleCachedRoutePathnames(cachedRoutes) {
+	const now = Date.now();
+	return Object.entries(cachedRoutes).flatMap(([pathname, route]) => require_route_cache_static_data.isCachedRouteStale(route, now) ? [pathname] : []);
+}
+function buildRouteCacheModes(cachedRoutes, routerPathname) {
+	const nextModes = /* @__PURE__ */ new Map();
+	for (const pathname of Object.keys(cachedRoutes)) nextModes.set(pathname, routerPathname === pathname ? "visible" : "hidden");
+	return nextModes;
+}
+function syncCachedRouteActivityEvents(params) {
+	const nextModes = buildRouteCacheModes(params.cachedRoutes, params.routerPathname);
+	for (const [pathname, mode] of nextModes) {
+		const previousMode = params.previousRouteCacheModes.get(pathname);
+		if (previousMode === void 0 && mode === "hidden") continue;
+		if (previousMode === mode) continue;
+		params.eventListener.emit("activeChange", {
+			pathname,
+			mode
+		});
+	}
+	for (const [pathname] of params.previousRouteCacheModes) {
+		if (nextModes.has(pathname)) continue;
+		params.eventListener.emit("activeChange", {
+			pathname,
+			mode: "hidden"
+		});
+	}
+	return nextModes;
+}
+function RouteCacheManager() {
+	const { cachedRoutes, deleteCachedRoutes, erroredRouteCounts, setCachedRoutes, touchCachedRoutes } = require_router_cache.useRouterCacheContext();
+	const { eventListener } = require_use_event_listener.useEventListener();
+	const pendingCachedNavigationRef = (0, react.useRef)(null);
+	const previousPathnameRef = (0, react.useRef)(void 0);
+	const previousHrefRef = (0, react.useRef)(void 0);
+	const previousRouteCacheModesRef = (0, react.useRef)(null);
+	previousRouteCacheModesRef.current ??= /* @__PURE__ */ new Map();
+	const previousVisiblePathnameRef = (0, react.useRef)(void 0);
+	const routerLocation = (0, _tanstack_react_router.useRouterState)({ select: (state) => toRouterLocation(state.location) });
+	const routerHref = routerLocation.href;
+	const routerPathname = require_pathname.normalizeCachedRoutePathname(routerLocation.pathname);
+	const routerResolvedLocation = (0, _tanstack_react_router.useRouterState)({ select: (state) => state.resolvedLocation ? toRouterLocation(state.resolvedLocation) : void 0 });
+	const resolvedPathname = require_pathname.normalizeCachedRoutePathname(routerResolvedLocation?.pathname ?? routerPathname);
+	const destinationRoute = cachedRoutes[routerPathname];
+	const matches = (0, _tanstack_react_router.useMatches)();
+	const childMatches = (0, _tanstack_react_router.useChildMatches)();
+	const router = (0, _tanstack_react_router.useRouter)();
+	const currentMatch = matches.length ? matches.at(-1) : void 0;
+	const outletRootMatch = childMatches.length ? childMatches[0] : currentMatch;
+	const isCurrentMatchResolved = (currentMatch?.pathname ? require_pathname.normalizeCachedRoutePathname(currentMatch.pathname) : void 0) === routerPathname;
+	const isCurrentMatchReady = isCurrentMatchResolved && currentMatch?.status === "success";
+	const staticData = getRouterCacheStaticData(childMatches, isCurrentMatchResolved);
+	const matchId = isCurrentMatchResolved && outletRootMatch ? outletRootMatch.id : void 0;
+	const routeId = isCurrentMatchResolved && outletRootMatch ? outletRootMatch.routeId : void 0;
+	const currentCachedRoute = cachedRoutes[routerPathname];
+	const isCurrentRouteErrored = hasCurrentRouteError({
+		erroredRouteCounts,
+		matches,
+		resolvedPathname,
+		routerPathname
+	});
+	const bypassCachedPathname = isCurrentRouteErrored ? routerPathname : void 0;
+	const previousPathname = previousPathnameRef.current;
+	previousHrefRef.current;
+	const shouldRestoreDestinationHref = require_restore_cached_href.shouldRestoreCachedHref({
+		cachedHref: destinationRoute?.href,
+		currentHref: routerHref,
+		currentPathname: routerPathname,
+		isRouteCacheEnabled: require_route_cache_static_data.isRouteCacheEnabled(destinationRoute?.staticData),
+		previousPathname
+	});
+	(0, react.useLayoutEffect)(() => {
+		const stalePathnames = getStaleCachedRoutePathnames(cachedRoutes);
+		if (stalePathnames.length > 0) deleteCachedRoutes(stalePathnames);
+	}, [cachedRoutes, deleteCachedRoutes]);
+	(0, react.useLayoutEffect)(() => {
+		if (shouldRestoreDestinationHref) return;
+		syncCachedRouteState({
+			isCurrentMatchReady,
+			isCurrentMatchResolved,
+			isCurrentRouteErrored,
+			matchId,
+			matches,
+			routeId,
+			route: currentCachedRoute,
+			routerLocation,
+			router,
+			routerResolvedLocation,
+			routerHref,
+			routerPathname,
+			deleteCachedRoutes,
+			setCachedRoutes,
+			staticData
+		});
+	}, [
+		currentCachedRoute,
+		deleteCachedRoutes,
+		isCurrentRouteErrored,
+		isCurrentMatchReady,
+		isCurrentMatchResolved,
+		matchId,
+		matches,
+		routeId,
+		router,
+		routerLocation,
+		routerResolvedLocation,
+		routerHref,
+		routerPathname,
+		staticData,
+		setCachedRoutes,
+		shouldRestoreDestinationHref
+	]);
+	(0, react.useLayoutEffect)(() => {
+		const lastVisitedPathname = previousPathnameRef.current;
+		const pendingNavigation = pendingCachedNavigationRef.current;
+		if (pendingNavigation && pendingNavigation.pathname !== routerPathname) {
+			eventListener.emit("cachedNavigationCancel", pendingNavigation);
+			pendingCachedNavigationRef.current = null;
+		}
+		if (!lastVisitedPathname || lastVisitedPathname === routerPathname) return;
+		if (!isReadyCachedRoute(destinationRoute)) return;
+		if (pendingCachedNavigationRef.current?.pathname === routerPathname) return;
+		const nextNavigation = {
+			pathname: routerPathname,
+			startedAt: performance.now()
+		};
+		pendingCachedNavigationRef.current = nextNavigation;
+		eventListener.emit("cachedNavigationStart", nextNavigation);
+	}, [
+		destinationRoute,
+		eventListener,
+		routerPathname
+	]);
+	(0, react.useLayoutEffect)(() => {
+		previousRouteCacheModesRef.current ??= /* @__PURE__ */ new Map();
+		previousRouteCacheModesRef.current = syncCachedRouteActivityEvents({
+			cachedRoutes,
+			eventListener,
+			previousRouteCacheModes: previousRouteCacheModesRef.current,
+			routerPathname
+		});
+	}, [
+		cachedRoutes,
+		eventListener,
+		routerPathname
+	]);
+	(0, react.useLayoutEffect)(() => {
+		if (previousVisiblePathnameRef.current === routerPathname || !cachedRoutes[routerPathname]) {
+			previousVisiblePathnameRef.current = routerPathname;
+			return;
+		}
+		previousVisiblePathnameRef.current = routerPathname;
+		touchCachedRoutes([routerPathname]);
+	}, [
+		cachedRoutes,
+		touchCachedRoutes,
+		routerPathname
+	]);
+	(0, react.useEffect)(() => {
+		const pendingNavigation = pendingCachedNavigationRef.current;
+		if (routerPathname !== pendingNavigation?.pathname) return;
+		let firstFrameId = 0;
+		let secondFrameId = 0;
+		firstFrameId = globalThis.requestAnimationFrame(() => {
+			const visibleAt = performance.now();
+			secondFrameId = globalThis.requestAnimationFrame(() => {
+				const paintedAt = performance.now();
+				if (pendingCachedNavigationRef.current?.pathname !== pendingNavigation.pathname) return;
+				pendingCachedNavigationRef.current = null;
+				eventListener.emit("cachedNavigationComplete", {
+					...pendingNavigation,
+					duration: paintedAt - pendingNavigation.startedAt,
+					paintedAt,
+					visibleAt
+				});
+			});
+		});
+		return () => {
+			globalThis.cancelAnimationFrame(firstFrameId);
+			globalThis.cancelAnimationFrame(secondFrameId);
+		};
+	}, [eventListener, routerPathname]);
+	(0, react.useLayoutEffect)(() => {
+		if (!(shouldRestoreDestinationHref && destinationRoute?.href)) return;
+		restoreCachedHref(router, destinationRoute.href);
+	}, [
+		destinationRoute?.href,
+		router,
+		shouldRestoreDestinationHref
+	]);
+	(0, react.useEffect)(() => {
+		previousPathnameRef.current = routerPathname;
+		previousHrefRef.current = routerHref;
+	}, [routerHref, routerPathname]);
+	const shouldRenderLiveOutlet = routerPathname === bypassCachedPathname || !isReadyCachedRoute(destinationRoute);
+	require_use_router_cache_debug.useRouterCacheDebug(cachedRoutes, routerPathname);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [Object.entries(cachedRoutes).map(([pathname, route]) => renderCachedRoute({
+		bypassCachedPathname,
+		pathname,
+		route,
+		routerPathname
+	})), shouldRenderLiveOutlet ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_router.Outlet, {}, `live-${routerPathname}`) : null] });
+}
+//#endregion
+exports.default = RouteCacheManager;