@tanstack/solid-router 2.0.0-alpha.6 → 2.0.0-alpha.7

package/dist/esm/Match.js

@@ -1,7 +1,6 @@
 import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js";
 import { useRouter } from "./useRouter.js";
-import { useRouterState } from "./useRouterState.js";
-import { matchContext } from "./matchContext.js";
+import { nearestMatchContext } from "./matchContext.js";
 import { SafeFragment } from "./SafeFragment.js";
 import { CatchNotFound } from "./not-found.js";
 import { renderRouteNotFound } from "./renderRouteNotFound.js";
@@ -10,309 +9,329 @@ import { createControlledPromise, getLocationChangeInfo, isNotFound, isRedirect,
 import { Dynamic, createComponent, memo, mergeProps } from "@solidjs/web";
 import * as Solid from "solid-js";
 import warning from "tiny-warning";
-import { isServer } from "@tanstack/router-core/isServer";
+import { isServer as isServer$1 } from "@tanstack/router-core/isServer";
 import invariant from "tiny-invariant";
 //#region src/Match.tsx
-var MatchContext = matchContext;
+var NearestMatchContext = nearestMatchContext;
 var Match = (props) => {
 	const router = useRouter();
-	const matchState = useRouterState({ select: (s) => {
-		const match = s.matches.find((d) => d.id === props.matchId);
-		if (!match) return null;
+	const match = Solid.createMemo(() => {
+		const id = props.matchId;
+		if (!id) return void 0;
+		return router.stores.activeMatchStoresById.get(id)?.state;
+	});
+	const rawMatchState = Solid.createMemo(() => {
+		const currentMatch = match();
+		if (!currentMatch) return null;
+		const routeId = currentMatch.routeId;
+		const parentRouteId = router.routesById[routeId]?.parentRoute?.id;
 		return {
-			routeId: match.routeId,
-			ssr: match.ssr,
-			_displayPending: match._displayPending
+			matchId: currentMatch.id,
+			routeId,
+			ssr: currentMatch.ssr,
+			_displayPending: currentMatch._displayPending,
+			parentRouteId
 		};
-	} });
-	if (!Solid.untrack(matchState)) return null;
-	const route = () => router.routesById[matchState().routeId];
-	const resolvePendingComponent = () => route().options.pendingComponent ?? router.options.defaultPendingComponent;
-	const routeErrorComponent = () => route().options.errorComponent ?? router.options.defaultErrorComponent;
-	const routeOnCatch = () => route().options.onCatch ?? router.options.defaultOnCatch;
-	const routeNotFoundComponent = () => route().isRoot ? route().options.notFoundComponent ?? router.options.notFoundRoute?.options.component : route().options.notFoundComponent;
-	const resolvedNoSsr = Solid.createMemo(() => matchState().ssr === false || matchState().ssr === "data-only");
-	const ResolvedSuspenseBoundary = () => resolvedNoSsr() ? SafeFragment : Solid.Loading;
-	const ResolvedCatchBoundary = () => routeErrorComponent() ? CatchBoundary : SafeFragment;
-	const ResolvedNotFoundBoundary = () => routeNotFoundComponent() ? CatchNotFound : SafeFragment;
-	const resetKey = useRouterState({ select: (s) => s.loadedAt });
-	const parentRouteId = useRouterState({ select: (s) => {
-		const index = s.matches.findIndex((d) => d.id === props.matchId);
-		return s.matches[index - 1]?.routeId;
-	} });
-	const ShellComponent = Solid.createMemo(() => route().isRoot ? route().options.shellComponent ?? SafeFragment : SafeFragment);
-	return createComponent(Dynamic, {
-		get component() {
-			return ShellComponent();
+	});
+	const nearestMatch = {
+		matchId: () => rawMatchState()?.matchId,
+		routeId: () => rawMatchState()?.routeId,
+		match,
+		hasPending: Solid.createMemo(() => {
+			const currentRouteId = rawMatchState()?.routeId;
+			return currentRouteId ? Boolean(router.stores.pendingRouteIds.state[currentRouteId]) : false;
+		})
+	};
+	return createComponent(Solid.Show, {
+		get when() {
+			return rawMatchState();
 		},
-		get children() {
-			return [createComponent(MatchContext, {
-				value: () => props.matchId,
+		children: (currentMatchState) => {
+			const route = Solid.createMemo(() => router.routesById[currentMatchState().routeId]);
+			const resolvePendingComponent = Solid.createMemo(() => route().options.pendingComponent ?? router.options.defaultPendingComponent);
+			const routeErrorComponent = Solid.createMemo(() => route().options.errorComponent ?? router.options.defaultErrorComponent);
+			const routeOnCatch = Solid.createMemo(() => route().options.onCatch ?? router.options.defaultOnCatch);
+			const routeNotFoundComponent = Solid.createMemo(() => route().isRoot ? route().options.notFoundComponent ?? router.options.notFoundRoute?.options.component : route().options.notFoundComponent);
+			const resolvedNoSsr = Solid.createMemo(() => currentMatchState().ssr === false || currentMatchState().ssr === "data-only");
+			const ResolvedSuspenseBoundary = Solid.createMemo(() => resolvedNoSsr() ? SafeFragment : Solid.Loading);
+			const ResolvedCatchBoundary = Solid.createMemo(() => routeErrorComponent() ? CatchBoundary : SafeFragment);
+			const ResolvedNotFoundBoundary = Solid.createMemo(() => routeNotFoundComponent() ? CatchNotFound : SafeFragment);
+			const ShellComponent = Solid.createMemo(() => route().isRoot ? route().options.shellComponent ?? SafeFragment : SafeFragment);
+			return createComponent(Dynamic, {
+				get component() {
+					return ShellComponent();
+				},
 				get children() {
-					return createComponent(Dynamic, {
-						get component() {
-							return ResolvedSuspenseBoundary();
-						},
-						get fallback() {
-							return memo(() => !!((isServer ?? router.isServer) || resolvedNoSsr()))() ? void 0 : createComponent(Dynamic, { get component() {
-								return resolvePendingComponent();
-							} });
-						},
+					return [createComponent(NearestMatchContext, {
+						value: nearestMatch,
 						get children() {
 							return createComponent(Dynamic, {
 								get component() {
-									return ResolvedCatchBoundary();
+									return ResolvedSuspenseBoundary();
 								},
-								getResetKey: () => resetKey(),
-								get errorComponent() {
-									return routeErrorComponent() || ErrorComponent;
-								},
-								onCatch: (error) => {
-									if (isNotFound(error)) throw error;
-									warning(false, `Error in route match: ${Solid.untrack(matchState).routeId}`);
-									routeOnCatch()?.(error);
+								get fallback() {
+									return memo(() => !!((isServer$1 ?? router.isServer) && resolvedNoSsr()))() ? void 0 : createComponent(Dynamic, { get component() {
+										return resolvePendingComponent();
+									} });
 								},
 								get children() {
 									return createComponent(Dynamic, {
 										get component() {
-											return ResolvedNotFoundBoundary();
+											return ResolvedCatchBoundary();
+										},
+										getResetKey: () => router.stores.loadedAt.state,
+										get errorComponent() {
+											return routeErrorComponent() || ErrorComponent;
 										},
-										fallback: (error) => {
-											if (!routeNotFoundComponent() || error.routeId && error.routeId !== matchState().routeId || !error.routeId && !route().isRoot) throw error;
-											return createComponent(Dynamic, mergeProps({ get component() {
-												return routeNotFoundComponent();
-											} }, error));
+										onCatch: (error) => {
+											if (isNotFound(error)) throw error;
+											warning(false, `Error in route match: ${currentMatchState().routeId}`);
+											routeOnCatch()?.(error);
 										},
 										get children() {
-											return createComponent(Solid.Switch, { get children() {
-												return [createComponent(Solid.Match, {
-													get when() {
-														return resolvedNoSsr();
-													},
-													get children() {
-														return createComponent(Solid.Show, {
+											return createComponent(Dynamic, {
+												get component() {
+													return ResolvedNotFoundBoundary();
+												},
+												fallback: (error) => {
+													if (!routeNotFoundComponent() || error.routeId && error.routeId !== currentMatchState().routeId || !error.routeId && !route().isRoot) throw error;
+													return createComponent(Dynamic, mergeProps({ get component() {
+														return routeNotFoundComponent();
+													} }, error));
+												},
+												get children() {
+													return createComponent(Solid.Switch, { get children() {
+														return [createComponent(Solid.Match, {
 															get when() {
-																return !(isServer ?? router.isServer);
+																return resolvedNoSsr();
 															},
-															get fallback() {
-																return createComponent(Dynamic, { get component() {
-																	return resolvePendingComponent();
-																} });
+															get children() {
+																return createComponent(Solid.Show, {
+																	get when() {
+																		return !(isServer$1 ?? router.isServer);
+																	},
+																	get fallback() {
+																		return createComponent(Dynamic, { get component() {
+																			return resolvePendingComponent();
+																		} });
+																	},
+																	get children() {
+																		return createComponent(MatchInner, {});
+																	}
+																});
+															}
+														}), createComponent(Solid.Match, {
+															get when() {
+																return !resolvedNoSsr();
 															},
 															get children() {
-																return createComponent(MatchInner, { get matchId() {
-																	return props.matchId;
-																} });
+																return createComponent(MatchInner, {});
 															}
-														});
-													}
-												}), createComponent(Solid.Match, {
-													get when() {
-														return !resolvedNoSsr();
-													},
-													get children() {
-														return createComponent(MatchInner, { get matchId() {
-															return props.matchId;
-														} });
-													}
-												})];
-											} });
+														})];
+													} });
+												}
+											});
 										}
 									});
 								}
 							});
 						}
-					});
+					}), memo(() => memo(() => currentMatchState().parentRouteId === rootRouteId)() ? [createComponent(OnRendered, {}), createComponent(ScrollRestoration, {})] : null)];
 				}
-			}), memo(() => memo(() => parentRouteId() === rootRouteId)() ? [createComponent(OnRendered, {}), createComponent(ScrollRestoration, {})] : null)];
+			});
 		}
 	});
 };
 var lastOnRenderedKey = /* @__PURE__ */ new WeakMap();
 function OnRendered() {
 	const router = useRouter();
-	const location = useRouterState({ select: (s) => {
-		return s.resolvedLocation?.state.__TSR_key;
-	} });
-	Solid.createEffect(() => [location()], ([location]) => {
+	const location = Solid.createMemo(() => router.stores.resolvedLocation.state?.state.__TSR_key);
+	const locationState = Solid.createMemo(() => router.stores.location.state);
+	const resolvedLocationState = Solid.createMemo(() => router.stores.resolvedLocation.state);
+	Solid.createEffect(() => [
+		location(),
+		locationState(),
+		resolvedLocationState()
+	], ([location, currentLocationState, currentResolvedLocationState]) => {
 		if (!location) return;
 		if (lastOnRenderedKey.get(router) === location) return;
 		lastOnRenderedKey.set(router, location);
 		router.emit({
 			type: "onRendered",
-			...getLocationChangeInfo(router.state)
+			...getLocationChangeInfo(currentLocationState, currentResolvedLocationState)
 		});
 	});
 	return null;
 }
-var MatchInner = (props) => {
+var MatchInner = () => {
 	const router = useRouter();
-	const matchState = useRouterState({ select: (s) => {
-		const match = s.matches.find((d) => d.id === props.matchId);
-		if (!match) return null;
-		const routeId = match.routeId;
+	const match = Solid.useContext(nearestMatchContext).match;
+	const rawMatchState = Solid.createMemo(() => {
+		const currentMatch = match();
+		if (!currentMatch) return null;
+		const routeId = currentMatch.routeId;
 		const remountDeps = (router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps)?.({
 			routeId,
-			loaderDeps: match.loaderDeps,
-			params: match._strictParams,
-			search: match._strictSearch
+			loaderDeps: currentMatch.loaderDeps,
+			params: currentMatch._strictParams,
+			search: currentMatch._strictSearch
 		});
 		return {
 			key: remountDeps ? JSON.stringify(remountDeps) : void 0,
 			routeId,
 			match: {
-				id: match.id,
-				status: match.status,
-				error: match.error,
-				_forcePending: match._forcePending,
-				_displayPending: match._displayPending
+				id: currentMatch.id,
+				status: currentMatch.status,
+				error: currentMatch.error,
+				_forcePending: currentMatch._forcePending ?? false,
+				_displayPending: currentMatch._displayPending ?? false
 			}
 		};
-	} });
-	if (!Solid.untrack(matchState)) return null;
-	const route = () => router.routesById[matchState().routeId];
-	const match = () => matchState().match;
-	const componentKey = () => matchState().key ?? matchState().match.id;
-	const out = () => {
-		const Comp = Solid.untrack(route).options.component ?? router.options.defaultComponent;
-		if (Comp) return createComponent(Comp, {});
-		return createComponent(Outlet, {});
-	};
-	const keyedOut = () => createComponent(Solid.Show, {
+	});
+	return createComponent(Solid.Show, {
 		get when() {
-			return componentKey();
+			return rawMatchState();
 		},
-		keyed: true,
-		children: (_key) => out()
-	});
-	return createComponent(Solid.Switch, { get children() {
-		return [
-			createComponent(Solid.Match, {
-				get when() {
-					return match()._displayPending;
-				},
-				children: (_) => {
-					const matchId = Solid.untrack(() => match().id);
-					return memo(Solid.createMemo(() => router.getMatch(matchId)?._nonReactive.displayPendingPromise));
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match()._forcePending;
-				},
-				children: (_) => {
-					const matchId = Solid.untrack(() => match().id);
-					return memo(Solid.createMemo(() => router.getMatch(matchId)?._nonReactive.minPendingPromise));
-				}
-			}),
-			createComponent(Solid.Match, {
+		children: (currentMatchState) => {
+			const route = Solid.createMemo(() => router.routesById[currentMatchState().routeId]);
+			const currentMatch = Solid.createMemo(() => currentMatchState().match);
+			const componentKey = Solid.createMemo(() => currentMatchState().key ?? currentMatchState().match.id);
+			const Comp = Solid.createMemo(() => route().options.component ?? router.options.defaultComponent);
+			const OutComponent = Solid.createMemo(() => {
+				return Comp() || Outlet;
+			});
+			const RenderOut = () => createComponent(Dynamic, { get component() {
+				return OutComponent();
+			} });
+			const keyedOut = () => createComponent(Solid.Show, {
 				get when() {
-					return match().status === "pending";
+					return componentKey();
 				},
-				children: (_) => {
-					const currentMatch = Solid.untrack(match);
-					const currentRoute = Solid.untrack(route);
-					const pendingMinMs = currentRoute.options.pendingMinMs ?? router.options.defaultPendingMinMs;
-					if (pendingMinMs) {
-						const routerMatch = router.getMatch(currentMatch.id);
-						if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
-							if (!(isServer ?? router.isServer)) {
-								const minPendingPromise = createControlledPromise();
-								routerMatch._nonReactive.minPendingPromise = minPendingPromise;
-								setTimeout(() => {
-									minPendingPromise.resolve();
-									routerMatch._nonReactive.minPendingPromise = void 0;
-								}, pendingMinMs);
+				keyed: true,
+				children: (_key) => createComponent(RenderOut, {})
+			});
+			return createComponent(Solid.Switch, { get children() {
+				return [
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch()._displayPending;
+						},
+						children: (_) => {
+							return memo(Solid.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive.displayPendingPromise));
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch()._forcePending;
+						},
+						children: (_) => {
+							return memo(Solid.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive.minPendingPromise));
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "pending";
+						},
+						children: (_) => {
+							const pendingMinMs = Solid.untrack(() => route().options.pendingMinMs ?? router.options.defaultPendingMinMs);
+							if (pendingMinMs) {
+								const routerMatch = Solid.untrack(() => router.getMatch(currentMatch().id));
+								if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
+									if (!(isServer$1 ?? router.isServer)) {
+										const minPendingPromise = createControlledPromise();
+										routerMatch._nonReactive.minPendingPromise = minPendingPromise;
+										setTimeout(() => {
+											minPendingPromise.resolve();
+											routerMatch._nonReactive.minPendingPromise = void 0;
+										}, pendingMinMs);
+									}
+								}
 							}
+							const loaderResult = Solid.createMemo(async () => {
+								await new Promise((r) => setTimeout(r, 0));
+								return router.getMatch(currentMatch().id)?._nonReactive.loadPromise;
+							});
+							const FallbackComponent = Solid.untrack(() => route().options.pendingComponent ?? router.options.defaultPendingComponent);
+							return [FallbackComponent && pendingMinMs > 0 ? createComponent(Dynamic, { component: FallbackComponent }) : null, memo(loaderResult)];
 						}
-					}
-					const loaderResult = Solid.createMemo(async () => {
-						await new Promise((r) => setTimeout(r, 0));
-						return router.getMatch(currentMatch.id)?._nonReactive.loadPromise;
-					});
-					const FallbackComponent = currentRoute.options.pendingComponent ?? router.options.defaultPendingComponent;
-					return [FallbackComponent && pendingMinMs > 0 ? createComponent(Dynamic, { component: FallbackComponent }) : null, memo(loaderResult)];
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "notFound";
-				},
-				children: (_) => {
-					const currentMatch = Solid.untrack(match);
-					const currentRoute = Solid.untrack(route);
-					const currentRouteId = Solid.untrack(() => matchState().routeId);
-					invariant(isNotFound(currentMatch.error), "Expected a notFound error");
-					return createComponent(Solid.Show, {
-						when: currentRouteId,
-						keyed: true,
-						children: (_routeId) => renderRouteNotFound(router, currentRoute, currentMatch.error)
-					});
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "redirected";
-				},
-				children: (_) => {
-					const matchId = Solid.untrack(() => match().id);
-					invariant(isRedirect(Solid.untrack(match).error), "Expected a redirect error");
-					return memo(Solid.createMemo(async () => {
-						await new Promise((r) => setTimeout(r, 0));
-						return router.getMatch(matchId)?._nonReactive.loadPromise;
-					}));
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "error";
-				},
-				children: (_) => {
-					if (isServer ?? router.isServer) {
-						const currentMatch = Solid.untrack(match);
-						return createComponent((Solid.untrack(route).options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent, {
-							get error() {
-								return currentMatch.error;
-							},
-							info: { componentStack: "" }
-						});
-					}
-					throw Solid.untrack(match).error;
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "success";
-				},
-				get children() {
-					return keyedOut();
-				}
-			})
-		];
-	} });
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "notFound";
+						},
+						children: (_) => {
+							const matchError = Solid.untrack(() => currentMatch().error);
+							invariant(isNotFound(matchError), "Expected a notFound error");
+							return createComponent(Solid.Show, {
+								get when() {
+									return currentMatchState().routeId;
+								},
+								keyed: true,
+								children: (_routeId) => Solid.untrack(() => renderRouteNotFound(router, route(), matchError))
+							});
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "redirected";
+						},
+						children: (_) => {
+							invariant(isRedirect(Solid.untrack(() => currentMatch().error)), "Expected a redirect error");
+							return null;
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "error";
+						},
+						children: (_) => {
+							const matchError = Solid.untrack(() => currentMatch().error);
+							if (isServer$1 ?? router.isServer) return createComponent((route().options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent, {
+								error: matchError,
+								info: { componentStack: "" }
+							});
+							throw matchError;
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "success";
+						},
+						get children() {
+							return keyedOut();
+						}
+					})
+				];
+			} });
+		}
+	});
 };
 var Outlet = () => {
 	const router = useRouter();
-	const matchId = Solid.useContext(matchContext);
-	const routeId = useRouterState({ select: (s) => s.matches.find((d) => d.id === matchId())?.routeId });
-	const route = () => router.routesById[routeId()];
-	const parentGlobalNotFound = useRouterState({ select: (s) => {
-		const parentMatch = s.matches.find((d) => d.id === matchId());
-		if (!parentMatch) return false;
-		return parentMatch.globalNotFound;
-	} });
-	const childMatchId = useRouterState({ select: (s) => {
-		const matches = s.matches;
-		return matches[matches.findIndex((d) => d.id === matchId()) + 1]?.id;
-	} });
-	const childRouteId = useRouterState({ select: (s) => {
-		const matches = s.matches;
-		return matches[matches.findIndex((d) => d.id === matchId()) + 1]?.routeId;
-	} });
-	const childMatchStatus = useRouterState({ select: (s) => {
-		const matches = s.matches;
-		return matches[matches.findIndex((d) => d.id === matchId()) + 1]?.status;
-	} });
+	const nearestParentMatch = Solid.useContext(nearestMatchContext);
+	const parentMatch = nearestParentMatch.match;
+	const routeId = nearestParentMatch.routeId;
+	const route = Solid.createMemo(() => routeId() ? router.routesById[routeId()] : void 0);
+	const parentGlobalNotFound = Solid.createMemo(() => parentMatch()?.globalNotFound ?? false);
+	const childMatchId = Solid.createMemo(() => {
+		const currentRouteId = routeId();
+		return currentRouteId ? router.stores.childMatchIdByRouteId.state[currentRouteId] : void 0;
+	});
+	const childRouteId = Solid.createMemo(() => {
+		const id = childMatchId();
+		if (!id) return void 0;
+		return router.stores.activeMatchStoresById.get(id)?.state.routeId;
+	});
+	const childRoute = Solid.createMemo(() => {
+		const id = childRouteId();
+		return id ? router.routesById[id] : void 0;
+	});
+	const childPendingComponent = Solid.createMemo(() => childRoute()?.options.pendingComponent ?? router.options.defaultPendingComponent);
+	const childMatchStatus = Solid.createMemo(() => {
+		const id = childMatchId();
+		if (!id) return void 0;
+		return router.stores.activeMatchStoresById.get(id)?.state.status;
+	});
 	const shouldShowNotFound = () => childMatchStatus() !== "redirected" && parentGlobalNotFound();
 	return createComponent(Solid.Show, {
 		get when() {
@@ -321,15 +340,13 @@ var Outlet = () => {
 		get fallback() {
 			return createComponent(Solid.Show, {
 				get when() {
-					return shouldShowNotFound();
+					return memo(() => !!shouldShowNotFound())() && route();
 				},
-				get children() {
-					return renderRouteNotFound(router, route(), void 0);
-				}
+				children: (resolvedRoute) => Solid.untrack(() => renderRouteNotFound(router, resolvedRoute(), void 0))
 			});
 		},
-		children: (matchIdAccessor) => {
-			const currentMatchId = Solid.createMemo(() => matchIdAccessor());
+		children: (childMatchIdAccessor) => {
+			const currentMatchId = Solid.createMemo(() => childMatchIdAccessor());
 			return createComponent(Solid.Show, {
 				get when() {
 					return routeId() === rootRouteId;
@@ -347,9 +364,9 @@ var Outlet = () => {
 						keyed: true,
 						children: (_routeId) => createComponent(Solid.Loading, {
 							get fallback() {
-								return createComponent(Dynamic, { get component() {
-									return router.options.defaultPendingComponent;
-								} });
+								return memo(() => !!childPendingComponent())() ? createComponent(Dynamic, { get component() {
+									return childPendingComponent();
+								} }) : null;
 							},
 							get children() {
 								return createComponent(Match, { get matchId() {