@tanstack/router-core 1.167.4 → 1.168.0

package/dist/esm/router.js

@@ -1,4 +1,3 @@
-import { batch as batch$1 } from "./utils/batch.js";
 import { DEFAULT_PROTOCOL_ALLOWLIST, createControlledPromise, decodePath, deepEqual, encodePathLikeUrl, findLast, functionalUpdate, isDangerousProtocol, last, nullReplaceEqualDeep, replaceEqualDeep } from "./utils.js";
 import { createLRUCache } from "./lru-cache.js";
 import { findFlatMatch, findRouteMatch, findSingleMatch, processRouteMasks, processRouteTree } from "./new-process-route-tree.js";
@@ -10,7 +9,7 @@ import { rootRouteId } from "./root.js";
 import { isRedirect, redirect } from "./redirect.js";
 import { loadMatches, loadRouteChunk, routeNeedsPreload } from "./load-matches.js";
 import { composeRewrites, executeRewriteInput, executeRewriteOutput, rewriteBasepath } from "./rewrite.js";
-import { createStore } from "@tanstack/store";
+import { createRouterStores } from "./stores.js";
 import { createBrowserHistory, parseHref } from "@tanstack/history";
 import { isServer } from "@tanstack/router-core/isServer";
 //#region src/router.ts
@@ -37,11 +36,11 @@ var trailingSlashOptions = {
 };
 /**
 * Compute whether path, href or hash changed between previous and current
-* resolved locations in router state.
+* resolved locations.
 */
-function getLocationChangeInfo(routerState) {
-	const fromLocation = routerState.resolvedLocation;
-	const toLocation = routerState.location;
+function getLocationChangeInfo(location, resolvedLocation) {
+	const fromLocation = resolvedLocation;
+	const toLocation = location;
 	return {
 		fromLocation,
 		toLocation,
@@ -50,24 +49,20 @@ function getLocationChangeInfo(routerState) {
 		hashChanged: fromLocation?.hash !== toLocation.hash
 	};
 }
-function filterRedirectedCachedMatches(matches) {
-	const filtered = matches.filter((d) => d.status !== "redirected");
-	return filtered.length === matches.length ? matches : filtered;
-}
-function createServerStore(initialState) {
-	const store = {
-		state: initialState,
-		setState: (updater) => {
-			store.state = updater(store.state);
-		}
-	};
-	return store;
-}
+/**
+* Core, framework-agnostic router engine that powers TanStack Router.
+*
+* Provides navigation, matching, loading, preloading, caching and event APIs
+* used by framework adapters (React/Solid). Prefer framework helpers like
+* `createRouter` in app code.
+*
+* @link https://tanstack.com/router/latest/docs/framework/react/api/router/RouterType
+*/
 var RouterCore = class {
 	/**
 	* @deprecated Use the `createRouter` function instead
 	*/
-	constructor(options) {
+	constructor(options, getStoreConfig) {
 		this.tempLocationKey = `${Math.round(Math.random() * 1e7)}`;
 		this.resetNextScroll = true;
 		this.shouldViewTransition = void 0;
@@ -116,10 +111,11 @@ var RouterCore = class {
 				}
 				this.setRoutes(processRouteTreeResult);
 			}
-			if (!this.__store && this.latestLocation) if (isServer ?? this.isServer) this.__store = createServerStore(getInitialRouterState(this.latestLocation));
-			else {
-				this.__store = createStore(getInitialRouterState(this.latestLocation));
-				setupScrollRestoration(this);
+			if (!this.stores && this.latestLocation) {
+				const config = this.getStoreConfig(this);
+				this.batch = config.batch;
+				this.stores = createRouterStores(getInitialRouterState(this.latestLocation), config);
+				if (!(isServer ?? this.isServer)) setupScrollRestoration(this);
 			}
 			let needsLocationUpdate = false;
 			const nextBasepath = this.options.basepath ?? "/";
@@ -134,10 +130,7 @@ var RouterCore = class {
 				if (this.history) this.updateLatestLocation();
 				needsLocationUpdate = true;
 			}
-			if (needsLocationUpdate && this.__store) this.__store.setState((s) => ({
-				...s,
-				location: this.latestLocation
-			}));
+			if (needsLocationUpdate && this.stores) this.stores.location.setState(() => this.latestLocation);
 			if (typeof window !== "undefined" && "CSS" in window && typeof window.CSS?.supports === "function") this.isViewTransitionTypesSupported = window.CSS.supports("selector(:active-view-transition-type(a)");
 		};
 		this.updateLatestLocation = () => {
@@ -241,14 +234,14 @@ var RouterCore = class {
 			match._nonReactive.pendingTimeout = void 0;
 		};
 		this.cancelMatches = () => {
-			const currentPendingMatches = this.state.matches.filter((match) => match.status === "pending");
-			const currentLoadingMatches = this.state.matches.filter((match) => match.isFetching === "loader");
-			new Set([
-				...this.state.pendingMatches ?? [],
-				...currentPendingMatches,
-				...currentLoadingMatches
-			]).forEach((match) => {
-				this.cancelMatch(match.id);
+			this.stores.pendingMatchesId.state.forEach((matchId) => {
+				this.cancelMatch(matchId);
+			});
+			this.stores.matchesId.state.forEach((matchId) => {
+				if (this.stores.pendingMatchStoresById.has(matchId)) return;
+				const match = this.stores.activeMatchStoresById.get(matchId)?.state;
+				if (!match) return;
+				if (match.status === "pending" || match.isFetching === "loader") this.cancelMatch(matchId);
 			});
 		};
 		this.buildLocation = (opts) => {
@@ -514,83 +507,85 @@ var RouterCore = class {
 				}
 			}
 			const pendingMatches = this.matchRoutes(this.latestLocation);
-			this.__store.setState((s) => ({
-				...s,
-				status: "pending",
-				statusCode: 200,
-				isLoading: true,
-				location: this.latestLocation,
-				pendingMatches,
-				cachedMatches: s.cachedMatches.filter((d) => !pendingMatches.some((e) => e.id === d.id))
-			}));
+			const nextCachedMatches = this.stores.cachedMatchesSnapshot.state.filter((d) => !pendingMatches.some((e) => e.id === d.id));
+			this.batch(() => {
+				this.stores.status.setState(() => "pending");
+				this.stores.statusCode.setState(() => 200);
+				this.stores.isLoading.setState(() => true);
+				this.stores.location.setState(() => this.latestLocation);
+				this.stores.setPendingMatches(pendingMatches);
+				this.stores.setCachedMatches(nextCachedMatches);
+			});
 		};
 		this.load = async (opts) => {
 			let redirect;
 			let notFound;
 			let loadPromise;
-			const previousLocation = this.state.resolvedLocation ?? this.state.location;
+			const previousLocation = this.stores.resolvedLocation.state ?? this.stores.location.state;
 			loadPromise = new Promise((resolve) => {
 				this.startTransition(async () => {
 					try {
 						this.beforeLoad();
 						const next = this.latestLocation;
-						const prevLocation = this.state.resolvedLocation;
-						if (!this.state.redirect) this.emit({
+						const prevLocation = this.stores.resolvedLocation.state;
+						const locationChangeInfo = getLocationChangeInfo(next, prevLocation);
+						if (!this.stores.redirect.state) this.emit({
 							type: "onBeforeNavigate",
-							...getLocationChangeInfo({
-								resolvedLocation: prevLocation,
-								location: next
-							})
+							...locationChangeInfo
 						});
 						this.emit({
 							type: "onBeforeLoad",
-							...getLocationChangeInfo({
-								resolvedLocation: prevLocation,
-								location: next
-							})
+							...locationChangeInfo
 						});
 						await loadMatches({
 							router: this,
 							sync: opts?.sync,
 							forceStaleReload: previousLocation.href === next.href,
-							matches: this.state.pendingMatches,
+							matches: this.stores.pendingMatchesSnapshot.state,
 							location: next,
 							updateMatch: this.updateMatch,
 							onReady: async () => {
 								this.startTransition(() => {
 									this.startViewTransition(async () => {
-										let exitingMatches = [];
-										let hookExitingMatches = [];
-										let hookEnteringMatches = [];
-										let hookStayingMatches = [];
-										batch$1(() => {
-											this.__store.setState((s) => {
-												const previousMatches = s.matches;
-												const newMatches = s.pendingMatches || s.matches;
-												exitingMatches = previousMatches.filter((match) => !newMatches.some((d) => d.id === match.id));
-												hookExitingMatches = previousMatches.filter((match) => !newMatches.some((d) => d.routeId === match.routeId));
-												hookEnteringMatches = newMatches.filter((match) => !previousMatches.some((d) => d.routeId === match.routeId));
-												hookStayingMatches = newMatches.filter((match) => previousMatches.some((d) => d.routeId === match.routeId));
-												return {
-													...s,
-													isLoading: false,
-													loadedAt: Date.now(),
-													matches: newMatches,
-													pendingMatches: void 0,
-													cachedMatches: [...s.cachedMatches, ...exitingMatches.filter((d) => d.status !== "error" && d.status !== "notFound" && d.status !== "redirected")]
-												};
-											});
-											this.clearExpiredCache();
+										let exitingMatches = null;
+										let hookExitingMatches = null;
+										let hookEnteringMatches = null;
+										let hookStayingMatches = null;
+										this.batch(() => {
+											const pendingMatches = this.stores.pendingMatchesSnapshot.state;
+											const mountPending = pendingMatches.length;
+											const currentMatches = this.stores.activeMatchesSnapshot.state;
+											exitingMatches = mountPending ? currentMatches.filter((match) => !this.stores.pendingMatchStoresById.has(match.id)) : null;
+											const pendingRouteIds = /* @__PURE__ */ new Set();
+											for (const s of this.stores.pendingMatchStoresById.values()) if (s.routeId) pendingRouteIds.add(s.routeId);
+											const activeRouteIds = /* @__PURE__ */ new Set();
+											for (const s of this.stores.activeMatchStoresById.values()) if (s.routeId) activeRouteIds.add(s.routeId);
+											hookExitingMatches = mountPending ? currentMatches.filter((match) => !pendingRouteIds.has(match.routeId)) : null;
+											hookEnteringMatches = mountPending ? pendingMatches.filter((match) => !activeRouteIds.has(match.routeId)) : null;
+											hookStayingMatches = mountPending ? pendingMatches.filter((match) => activeRouteIds.has(match.routeId)) : currentMatches;
+											this.stores.isLoading.setState(() => false);
+											this.stores.loadedAt.setState(() => Date.now());
+											/**
+											* When committing new matches, cache any exiting matches that are still usable.
+											* Routes that resolved with `status: 'error'` or `status: 'notFound'` are
+											* deliberately excluded from `cachedMatches` so that subsequent invalidations
+											* or reloads re-run their loaders instead of reusing the failed/not-found data.
+											*/
+											if (mountPending) {
+												this.stores.setActiveMatches(pendingMatches);
+												this.stores.setPendingMatches([]);
+												this.stores.setCachedMatches([...this.stores.cachedMatchesSnapshot.state, ...exitingMatches.filter((d) => d.status !== "error" && d.status !== "notFound" && d.status !== "redirected")]);
+												this.clearExpiredCache();
+											}
 										});
-										[
+										for (const [matches, hook] of [
 											[hookExitingMatches, "onLeave"],
 											[hookEnteringMatches, "onEnter"],
 											[hookStayingMatches, "onStay"]
-										].forEach(([matches, hook]) => {
-											matches.forEach((match) => {
-												this.looseRoutesById[match.routeId].options[hook]?.(match);
-											});
-										});
+										]) {
+											if (!matches) continue;
+											for (const match of matches) this.looseRoutesById[match.routeId].options[hook]?.(match);
+										}
 									});
 								});
 							}
@@ -604,11 +599,11 @@ var RouterCore = class {
 								ignoreBlocker: true
 							});
 						} else if (isNotFound(err)) notFound = err;
-						this.__store.setState((s) => ({
-							...s,
-							statusCode: redirect ? redirect.status : notFound ? 404 : s.matches.some((d) => d.status === "error") ? 500 : 200,
-							redirect
-						}));
+						const nextStatusCode = redirect ? redirect.status : notFound ? 404 : this.stores.activeMatchesSnapshot.state.some((d) => d.status === "error") ? 500 : 200;
+						this.batch(() => {
+							this.stores.statusCode.setState(() => nextStatusCode);
+							this.stores.redirect.setState(() => redirect);
+						});
 					}
 					if (this.latestLoadPromise === loadPromise) {
 						this.commitLocationPromise?.resolve();
@@ -623,11 +618,8 @@ var RouterCore = class {
 			while (this.latestLoadPromise && loadPromise !== this.latestLoadPromise) await this.latestLoadPromise;
 			let newStatusCode = void 0;
 			if (this.hasNotFoundMatch()) newStatusCode = 404;
-			else if (this.__store.state.matches.some((d) => d.status === "error")) newStatusCode = 500;
-			if (newStatusCode !== void 0) this.__store.setState((s) => ({
-				...s,
-				statusCode: newStatusCode
-			}));
+			else if (this.stores.activeMatchesSnapshot.state.some((d) => d.status === "error")) newStatusCode = 500;
+			if (newStatusCode !== void 0) this.stores.statusCode.setState(() => newStatusCode);
 		};
 		this.startViewTransition = (fn) => {
 			const shouldViewTransition = this.shouldViewTransition ?? this.options.defaultViewTransition;
@@ -636,11 +628,8 @@ var RouterCore = class {
 				let startViewTransitionParams;
 				if (typeof shouldViewTransition === "object" && this.isViewTransitionTypesSupported) {
 					const next = this.latestLocation;
-					const prevLocation = this.state.resolvedLocation;
-					const resolvedViewTransitionTypes = typeof shouldViewTransition.types === "function" ? shouldViewTransition.types(getLocationChangeInfo({
-						resolvedLocation: prevLocation,
-						location: next
-					})) : shouldViewTransition.types;
+					const prevLocation = this.stores.resolvedLocation.state;
+					const resolvedViewTransitionTypes = typeof shouldViewTransition.types === "function" ? shouldViewTransition.types(getLocationChangeInfo(next, prevLocation)) : shouldViewTransition.types;
 					if (resolvedViewTransitionTypes === false) {
 						fn();
 						return;
@@ -655,20 +644,27 @@ var RouterCore = class {
 		};
 		this.updateMatch = (id, updater) => {
 			this.startTransition(() => {
-				const matchesKey = this.state.pendingMatches?.some((d) => d.id === id) ? "pendingMatches" : this.state.matches.some((d) => d.id === id) ? "matches" : this.state.cachedMatches.some((d) => d.id === id) ? "cachedMatches" : "";
-				if (matchesKey) if (matchesKey === "cachedMatches") this.__store.setState((s) => ({
-					...s,
-					cachedMatches: filterRedirectedCachedMatches(s.cachedMatches.map((d) => d.id === id ? updater(d) : d))
-				}));
-				else this.__store.setState((s) => ({
-					...s,
-					[matchesKey]: s[matchesKey]?.map((d) => d.id === id ? updater(d) : d)
-				}));
+				const pendingMatch = this.stores.pendingMatchStoresById.get(id);
+				if (pendingMatch) {
+					pendingMatch.setState(updater);
+					return;
+				}
+				const activeMatch = this.stores.activeMatchStoresById.get(id);
+				if (activeMatch) {
+					activeMatch.setState(updater);
+					return;
+				}
+				const cachedMatch = this.stores.cachedMatchStoresById.get(id);
+				if (cachedMatch) {
+					const next = updater(cachedMatch.state);
+					if (next.status === "redirected") {
+						if (this.stores.cachedMatchStoresById.delete(id)) this.stores.cachedMatchesId.setState((prev) => prev.filter((matchId) => matchId !== id));
+					} else cachedMatch.setState(() => next);
+				}
 			});
 		};
 		this.getMatch = (matchId) => {
-			const findFn = (d) => d.id === matchId;
-			return this.state.cachedMatches.find(findFn) ?? this.state.pendingMatches?.find(findFn) ?? this.state.matches.find(findFn);
+			return this.stores.cachedMatchStoresById.get(matchId)?.state ?? this.stores.pendingMatchStoresById.get(matchId)?.state ?? this.stores.activeMatchStoresById.get(matchId)?.state;
 		};
 		this.invalidate = (opts) => {
 			const invalidate = (d) => {
@@ -682,12 +678,11 @@ var RouterCore = class {
 				};
 				return d;
 			};
-			this.__store.setState((s) => ({
-				...s,
-				matches: s.matches.map(invalidate),
-				cachedMatches: s.cachedMatches.map(invalidate),
-				pendingMatches: s.pendingMatches?.map(invalidate)
-			}));
+			this.batch(() => {
+				this.stores.setActiveMatches(this.stores.activeMatchesSnapshot.state.map(invalidate));
+				this.stores.setCachedMatches(this.stores.cachedMatchesSnapshot.state.map(invalidate));
+				this.stores.setPendingMatches(this.stores.pendingMatchesSnapshot.state.map(invalidate));
+			});
 			this.shouldViewTransition = false;
 			return this.load({ sync: opts?.sync });
 		};
@@ -715,26 +710,17 @@ var RouterCore = class {
 		};
 		this.clearCache = (opts) => {
 			const filter = opts?.filter;
-			if (filter !== void 0) this.__store.setState((s) => {
-				return {
-					...s,
-					cachedMatches: s.cachedMatches.filter((m) => !filter(m))
-				};
-			});
-			else this.__store.setState((s) => {
-				return {
-					...s,
-					cachedMatches: []
-				};
-			});
+			if (filter !== void 0) this.stores.setCachedMatches(this.stores.cachedMatchesSnapshot.state.filter((m) => !filter(m)));
+			else this.stores.setCachedMatches([]);
 		};
 		this.clearExpiredCache = () => {
+			const now = Date.now();
 			const filter = (d) => {
 				const route = this.looseRoutesById[d.routeId];
 				if (!route.options.loader) return true;
 				const gcTime = (d.preload ? route.options.preloadGcTime ?? this.options.defaultPreloadGcTime : route.options.gcTime ?? this.options.defaultGcTime) ?? 300 * 1e3;
 				if (d.status === "error") return true;
-				return Date.now() - d.updatedAt >= gcTime;
+				return now - d.updatedAt >= gcTime;
 			};
 			this.clearCache({ filter });
 		};
@@ -746,16 +732,13 @@ var RouterCore = class {
 				preload: true,
 				dest: opts
 			});
-			const activeMatchIds = new Set([...this.state.matches, ...this.state.pendingMatches ?? []].map((d) => d.id));
-			const loadedMatchIds = new Set([...activeMatchIds, ...this.state.cachedMatches.map((d) => d.id)]);
-			batch$1(() => {
-				matches.forEach((match) => {
-					if (!loadedMatchIds.has(match.id)) this.__store.setState((s) => ({
-						...s,
-						cachedMatches: [...s.cachedMatches, match]
-					}));
-				});
-			});
+			const activeMatchIds = new Set([...this.stores.matchesId.state, ...this.stores.pendingMatchesId.state]);
+			const loadedMatchIds = new Set([...activeMatchIds, ...this.stores.cachedMatchesId.state]);
+			const matchesToCache = matches.filter((match) => !loadedMatchIds.has(match.id));
+			if (matchesToCache.length) {
+				const cachedMatches = this.stores.cachedMatchesSnapshot.state;
+				this.stores.setCachedMatches([...cachedMatches, ...matchesToCache]);
+			}
 			try {
 				matches = await loadMatches({
 					router: this,
@@ -788,8 +771,8 @@ var RouterCore = class {
 				leaveParams: true
 			};
 			const next = this.buildLocation(matchLocation);
-			if (opts?.pending && this.state.status !== "pending") return false;
-			const baseLocation = (opts?.pending === void 0 ? !this.state.isLoading : opts.pending) ? this.latestLocation : this.state.resolvedLocation || this.state.location;
+			if (opts?.pending && this.stores.status.state !== "pending") return false;
+			const baseLocation = (opts?.pending === void 0 ? !this.stores.isLoading.state : opts.pending) ? this.latestLocation : this.stores.resolvedLocation.state || this.stores.location.state;
 			const match = findSingleMatch(next.pathname, opts?.caseSensitive ?? false, opts?.fuzzy ?? false, baseLocation.pathname, this.processedTree);
 			if (!match) return false;
 			if (location.params) {
@@ -799,8 +782,9 @@ var RouterCore = class {
 			return match.rawParams;
 		};
 		this.hasNotFoundMatch = () => {
-			return this.__store.state.matches.some((d) => d.status === "notFound" || d.globalNotFound);
+			return this.stores.activeMatchesSnapshot.state.some((d) => d.status === "notFound" || d.globalNotFound);
 		};
+		this.getStoreConfig = getStoreConfig;
 		this.update({
 			defaultPreloadDelay: 50,
 			defaultPendingMs: 1e3,
@@ -822,7 +806,7 @@ var RouterCore = class {
 		return !!this.options.isPrerendering;
 	}
 	get state() {
-		return this.__store.state;
+		return this.stores.__store.state;
 	}
 	setRoutes({ routesById, routesByPath, processedTree }) {
 		this.routesById = routesById;
@@ -849,7 +833,8 @@ var RouterCore = class {
 		else isGlobalNotFound = true;
 		const globalNotFoundRouteId = isGlobalNotFound ? findGlobalNotFoundRouteId(this.options.notFoundMode, matchedRoutes) : void 0;
 		const matches = new Array(matchedRoutes.length);
-		const previousMatchesByRouteId = new Map(this.state.matches.map((match) => [match.routeId, match]));
+		const previousActiveMatchesByRouteId = /* @__PURE__ */ new Map();
+		for (const store of this.stores.activeMatchStoresById.values()) if (store.routeId) previousActiveMatchesByRouteId.set(store.routeId, store.state);
 		for (let index = 0; index < matchedRoutes.length; index++) {
 			const route = matchedRoutes[index];
 			const parentMatch = matches[index - 1];
@@ -889,7 +874,7 @@ var RouterCore = class {
 			});
 			const matchId = route.id + interpolatedPath + loaderDepsHash;
 			const existingMatch = this.getMatch(matchId);
-			const previousMatch = previousMatchesByRouteId.get(route.id);
+			const previousMatch = previousActiveMatchesByRouteId.get(route.id);
 			const strictParams = existingMatch?._strictParams ?? usedParams;
 			let paramsError = void 0;
 			if (!existingMatch) try {
@@ -960,7 +945,7 @@ var RouterCore = class {
 			const match = matches[index];
 			const route = this.looseRoutesById[match.routeId];
 			const existingMatch = this.getMatch(match.id);
-			const previousMatch = previousMatchesByRouteId.get(match.routeId);
+			const previousMatch = previousActiveMatchesByRouteId.get(match.routeId);
 			match.params = previousMatch ? nullReplaceEqualDeep(previousMatch.params, routeParams) : routeParams;
 			if (!existingMatch) {
 				const parentMatch = matches[index - 1];
@@ -1005,8 +990,9 @@ var RouterCore = class {
 		for (const route of matchedRoutes) try {
 			Object.assign(accumulatedSearch, validateSearch(route.options.validateSearch, accumulatedSearch));
 		} catch {}
-		const lastStateMatch = last(this.state.matches);
-		const canReuseParams = lastStateMatch && lastStateMatch.routeId === lastRoute.id && location.pathname === this.state.location.pathname;
+		const lastStateMatchId = last(this.stores.matchesId.state);
+		const lastStateMatch = lastStateMatchId && this.stores.activeMatchStoresById.get(lastStateMatchId)?.state;
+		const canReuseParams = lastStateMatch && lastStateMatch.routeId === lastRoute.id && lastStateMatch.pathname === location.pathname;
 		let params;
 		if (canReuseParams) params = lastStateMatch.params;
 		else {
@@ -1051,8 +1037,6 @@ function getInitialRouterState(location) {
 		resolvedLocation: void 0,
 		location,
 		matches: [],
-		pendingMatches: [],
-		cachedMatches: [],
 		statusCode: 200
 	};
 }