tanstack-router-cache 0.1.6 → 0.1.8

package/dist/components/cached-outlet.cjs

@@ -0,0 +1,12 @@
+let _tanstack_react_router = require("@tanstack/react-router");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/cached-outlet.tsx
+function CachedOutlet(props) {
+	const { matchId, routerSnapshot } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_router.RouterContextProvider, {
+		router: routerSnapshot,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tanstack_react_router.Match, { matchId })
+	});
+}
+//#endregion
+exports.default = CachedOutlet;

package/dist/components/cached-outlet.js

@@ -0,0 +1,12 @@
+import { Match, RouterContextProvider } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/cached-outlet.tsx
+function CachedOutlet(props) {
+	const { matchId, routerSnapshot } = props;
+	return /* @__PURE__ */ jsx(RouterContextProvider, {
+		router: routerSnapshot,
+		children: /* @__PURE__ */ jsx(Match, { matchId })
+	});
+}
+//#endregion
+export { CachedOutlet as default };

package/dist/components/off-screen-in.cjs

@@ -0,0 +1,130 @@
+const require_dismiss_transient_ui = require("../dom/dismiss-transient-ui.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/off-screen-in.tsx
+const windowScrollPositions = /* @__PURE__ */ new Map();
+const IMMEDIATE_SCROLL_RESTORE_DELAY = 0;
+const EARLY_SCROLL_RESTORE_DELAY = 80;
+const MIDDLE_SCROLL_RESTORE_DELAY = 240;
+const LATE_SCROLL_RESTORE_DELAY = 600;
+const FINAL_SCROLL_RESTORE_DELAY = 1e3;
+const SCROLL_TRACKING_INTERVAL_MS = 200;
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	" ",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp"
+]);
+const SCROLL_RESTORE_DELAYS = [
+	IMMEDIATE_SCROLL_RESTORE_DELAY,
+	EARLY_SCROLL_RESTORE_DELAY,
+	MIDDLE_SCROLL_RESTORE_DELAY,
+	LATE_SCROLL_RESTORE_DELAY,
+	FINAL_SCROLL_RESTORE_DELAY
+];
+function OffScreenIn(props) {
+	const { mode, children, containerRef, pathname } = props;
+	const localContainerRef = (0, react.useRef)(null);
+	const attachContainerRef = (node) => {
+		localContainerRef.current = node;
+		if (containerRef) containerRef.current = node;
+	};
+	(0, react.useLayoutEffect)(() => {
+		if (typeof document === "undefined") return;
+		require_dismiss_transient_ui.initializeTransientUiTracking(document);
+	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (!pathname) return;
+		require_dismiss_transient_ui.syncTransientUiRouteActivity(pathname, mode);
+	}, [mode, pathname]);
+	(0, react.useLayoutEffect)(() => {
+		const visibleContainer = localContainerRef.current;
+		return () => {
+			if (!pathname || mode !== "visible") return;
+			require_dismiss_transient_ui.dismissTransientUi(visibleContainer, pathname);
+		};
+	}, [mode, pathname]);
+	(0, react.useLayoutEffect)(() => {
+		if (typeof globalThis === "undefined" || !pathname) return;
+		const saveScrollPosition = () => {
+			windowScrollPositions.set(pathname, {
+				x: globalThis.scrollX,
+				y: globalThis.scrollY
+			});
+		};
+		if (mode === "hidden") return;
+		const savedPosition = windowScrollPositions.get(pathname);
+		let userRequestedScroll = false;
+		let scrollTrackingIntervalId;
+		const startScrollTracking = () => {
+			scrollTrackingIntervalId ??= globalThis.setInterval(saveScrollPosition, SCROLL_TRACKING_INTERVAL_MS);
+		};
+		const handleScroll = () => {
+			if (!savedPosition || userRequestedScroll) saveScrollPosition();
+		};
+		const markUserRequestedScroll = () => {
+			userRequestedScroll = true;
+		};
+		const handleKeyDown = (event) => {
+			if (SCROLL_KEYS.has(event.key)) markUserRequestedScroll();
+		};
+		globalThis.addEventListener("scroll", handleScroll, { passive: true });
+		globalThis.addEventListener("wheel", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("touchstart", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("pointerdown", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("keydown", handleKeyDown);
+		if (!savedPosition) {
+			startScrollTracking();
+			saveScrollPosition();
+			return () => {
+				if (scrollTrackingIntervalId !== void 0) globalThis.clearInterval(scrollTrackingIntervalId);
+				globalThis.removeEventListener("scroll", handleScroll);
+				globalThis.removeEventListener("wheel", markUserRequestedScroll);
+				globalThis.removeEventListener("touchstart", markUserRequestedScroll);
+				globalThis.removeEventListener("pointerdown", markUserRequestedScroll);
+				globalThis.removeEventListener("keydown", handleKeyDown);
+			};
+		}
+		const restoreScrollPosition = () => {
+			if (userRequestedScroll) return;
+			globalThis.scrollTo(savedPosition.x, savedPosition.y);
+			saveScrollPosition();
+			startScrollTracking();
+		};
+		const timeoutIds = [];
+		let rafId = globalThis.requestAnimationFrame(() => {
+			rafId = globalThis.requestAnimationFrame(() => {
+				restoreScrollPosition();
+				for (const delay of SCROLL_RESTORE_DELAYS) timeoutIds.push(globalThis.setTimeout(restoreScrollPosition, delay));
+			});
+		});
+		return () => {
+			globalThis.cancelAnimationFrame(rafId);
+			for (const timeoutId of timeoutIds) globalThis.clearTimeout(timeoutId);
+			if (scrollTrackingIntervalId !== void 0) globalThis.clearInterval(scrollTrackingIntervalId);
+			globalThis.removeEventListener("scroll", handleScroll);
+			globalThis.removeEventListener("wheel", markUserRequestedScroll);
+			globalThis.removeEventListener("touchstart", markUserRequestedScroll);
+			globalThis.removeEventListener("pointerdown", markUserRequestedScroll);
+			globalThis.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [mode, pathname]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
+		mode,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex min-h-full w-full flex-1 flex-col",
+			"data-router-cache-container": "true",
+			"data-router-cache-mode": mode,
+			"data-router-cache-pathname": pathname,
+			ref: attachContainerRef,
+			children
+		})
+	});
+}
+//#endregion
+exports.default = OffScreenIn;

package/dist/components/off-screen-in.js

@@ -0,0 +1,130 @@
+import { dismissTransientUi, initializeTransientUiTracking, syncTransientUiRouteActivity } from "../dom/dismiss-transient-ui.js";
+import { Activity, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/off-screen-in.tsx
+const windowScrollPositions = /* @__PURE__ */ new Map();
+const IMMEDIATE_SCROLL_RESTORE_DELAY = 0;
+const EARLY_SCROLL_RESTORE_DELAY = 80;
+const MIDDLE_SCROLL_RESTORE_DELAY = 240;
+const LATE_SCROLL_RESTORE_DELAY = 600;
+const FINAL_SCROLL_RESTORE_DELAY = 1e3;
+const SCROLL_TRACKING_INTERVAL_MS = 200;
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	" ",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp"
+]);
+const SCROLL_RESTORE_DELAYS = [
+	IMMEDIATE_SCROLL_RESTORE_DELAY,
+	EARLY_SCROLL_RESTORE_DELAY,
+	MIDDLE_SCROLL_RESTORE_DELAY,
+	LATE_SCROLL_RESTORE_DELAY,
+	FINAL_SCROLL_RESTORE_DELAY
+];
+function OffScreenIn(props) {
+	const { mode, children, containerRef, pathname } = props;
+	const localContainerRef = useRef(null);
+	const attachContainerRef = (node) => {
+		localContainerRef.current = node;
+		if (containerRef) containerRef.current = node;
+	};
+	useLayoutEffect(() => {
+		if (typeof document === "undefined") return;
+		initializeTransientUiTracking(document);
+	}, []);
+	useLayoutEffect(() => {
+		if (!pathname) return;
+		syncTransientUiRouteActivity(pathname, mode);
+	}, [mode, pathname]);
+	useLayoutEffect(() => {
+		const visibleContainer = localContainerRef.current;
+		return () => {
+			if (!pathname || mode !== "visible") return;
+			dismissTransientUi(visibleContainer, pathname);
+		};
+	}, [mode, pathname]);
+	useLayoutEffect(() => {
+		if (typeof globalThis === "undefined" || !pathname) return;
+		const saveScrollPosition = () => {
+			windowScrollPositions.set(pathname, {
+				x: globalThis.scrollX,
+				y: globalThis.scrollY
+			});
+		};
+		if (mode === "hidden") return;
+		const savedPosition = windowScrollPositions.get(pathname);
+		let userRequestedScroll = false;
+		let scrollTrackingIntervalId;
+		const startScrollTracking = () => {
+			scrollTrackingIntervalId ??= globalThis.setInterval(saveScrollPosition, SCROLL_TRACKING_INTERVAL_MS);
+		};
+		const handleScroll = () => {
+			if (!savedPosition || userRequestedScroll) saveScrollPosition();
+		};
+		const markUserRequestedScroll = () => {
+			userRequestedScroll = true;
+		};
+		const handleKeyDown = (event) => {
+			if (SCROLL_KEYS.has(event.key)) markUserRequestedScroll();
+		};
+		globalThis.addEventListener("scroll", handleScroll, { passive: true });
+		globalThis.addEventListener("wheel", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("touchstart", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("pointerdown", markUserRequestedScroll, { passive: true });
+		globalThis.addEventListener("keydown", handleKeyDown);
+		if (!savedPosition) {
+			startScrollTracking();
+			saveScrollPosition();
+			return () => {
+				if (scrollTrackingIntervalId !== void 0) globalThis.clearInterval(scrollTrackingIntervalId);
+				globalThis.removeEventListener("scroll", handleScroll);
+				globalThis.removeEventListener("wheel", markUserRequestedScroll);
+				globalThis.removeEventListener("touchstart", markUserRequestedScroll);
+				globalThis.removeEventListener("pointerdown", markUserRequestedScroll);
+				globalThis.removeEventListener("keydown", handleKeyDown);
+			};
+		}
+		const restoreScrollPosition = () => {
+			if (userRequestedScroll) return;
+			globalThis.scrollTo(savedPosition.x, savedPosition.y);
+			saveScrollPosition();
+			startScrollTracking();
+		};
+		const timeoutIds = [];
+		let rafId = globalThis.requestAnimationFrame(() => {
+			rafId = globalThis.requestAnimationFrame(() => {
+				restoreScrollPosition();
+				for (const delay of SCROLL_RESTORE_DELAYS) timeoutIds.push(globalThis.setTimeout(restoreScrollPosition, delay));
+			});
+		});
+		return () => {
+			globalThis.cancelAnimationFrame(rafId);
+			for (const timeoutId of timeoutIds) globalThis.clearTimeout(timeoutId);
+			if (scrollTrackingIntervalId !== void 0) globalThis.clearInterval(scrollTrackingIntervalId);
+			globalThis.removeEventListener("scroll", handleScroll);
+			globalThis.removeEventListener("wheel", markUserRequestedScroll);
+			globalThis.removeEventListener("touchstart", markUserRequestedScroll);
+			globalThis.removeEventListener("pointerdown", markUserRequestedScroll);
+			globalThis.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [mode, pathname]);
+	return /* @__PURE__ */ jsx(Activity, {
+		mode,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-full w-full flex-1 flex-col",
+			"data-router-cache-container": "true",
+			"data-router-cache-mode": mode,
+			"data-router-cache-pathname": pathname,
+			ref: attachContainerRef,
+			children
+		})
+	});
+}
+//#endregion
+export { OffScreenIn as default };

package/dist/components/off-screen.cjs

@@ -0,0 +1,8 @@
+const require_off_screen_in = require("./off-screen-in.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/off-screen.tsx
+function OffScreen(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_off_screen_in.default, { ...props });
+}
+//#endregion
+exports.default = OffScreen;

package/dist/components/off-screen.js

@@ -0,0 +1,8 @@
+import OffScreenIn from "./off-screen-in.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/off-screen.tsx
+function OffScreen(props) {
+	return /* @__PURE__ */ jsx(OffScreenIn, { ...props });
+}
+//#endregion
+export { OffScreen as default };

package/dist/components/restore-cached-href.cjs

@@ -0,0 +1,28 @@
+//#region src/components/restore-cached-href.ts
+const FALLBACK_ORIGIN = "http://tanstack-router-cache.local";
+function parseHref(href) {
+	try {
+		const url = new URL(href, FALLBACK_ORIGIN);
+		return {
+			hasHash: url.hash.length > 0,
+			hasSearch: url.search.length > 0,
+			pathname: url.pathname
+		};
+	} catch {
+		return null;
+	}
+}
+function isBareRouteHref(href, currentPathname) {
+	const candidateHref = href ?? currentPathname;
+	const parsedHref = parseHref(candidateHref);
+	if (!parsedHref) return candidateHref === currentPathname;
+	return parsedHref.pathname === currentPathname && !parsedHref.hasSearch && !parsedHref.hasHash;
+}
+function shouldRestoreCachedHref({ cachedHref, currentHref, currentPathname, isRouteCacheEnabled, previousPathname }) {
+	if (!(isRouteCacheEnabled && cachedHref)) return false;
+	if (!previousPathname || previousPathname === currentPathname) return false;
+	if (!isBareRouteHref(currentHref, currentPathname)) return false;
+	return cachedHref !== (currentHref ?? currentPathname);
+}
+//#endregion
+exports.shouldRestoreCachedHref = shouldRestoreCachedHref;

package/dist/components/restore-cached-href.d.ts

@@ -5,6 +5,5 @@ type RestoreCachedHrefInput = {
     isRouteCacheEnabled?: boolean;
     previousPathname?: string;
 };
-export declare function isBareRouteHref(href: string | undefined, currentPathname: string): boolean;
 export declare function shouldRestoreCachedHref({ cachedHref, currentHref, currentPathname, isRouteCacheEnabled, previousPathname, }: RestoreCachedHrefInput): boolean;
 export {};

package/dist/components/restore-cached-href.js

@@ -0,0 +1,28 @@
+//#region src/components/restore-cached-href.ts
+const FALLBACK_ORIGIN = "http://tanstack-router-cache.local";
+function parseHref(href) {
+	try {
+		const url = new URL(href, FALLBACK_ORIGIN);
+		return {
+			hasHash: url.hash.length > 0,
+			hasSearch: url.search.length > 0,
+			pathname: url.pathname
+		};
+	} catch {
+		return null;
+	}
+}
+function isBareRouteHref(href, currentPathname) {
+	const candidateHref = href ?? currentPathname;
+	const parsedHref = parseHref(candidateHref);
+	if (!parsedHref) return candidateHref === currentPathname;
+	return parsedHref.pathname === currentPathname && !parsedHref.hasSearch && !parsedHref.hasHash;
+}
+function shouldRestoreCachedHref({ cachedHref, currentHref, currentPathname, isRouteCacheEnabled, previousPathname }) {
+	if (!(isRouteCacheEnabled && cachedHref)) return false;
+	if (!previousPathname || previousPathname === currentPathname) return false;
+	if (!isBareRouteHref(currentHref, currentPathname)) return false;
+	return cachedHref !== (currentHref ?? currentPathname);
+}
+//#endregion
+export { shouldRestoreCachedHref };