@tanstack/solid-router 1.167.5 → 1.168.0

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";
@@ -15,273 +14,297 @@ import invariant from "tiny-invariant";
 //#region src/Match.tsx
 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 (!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 = matchState().ssr === false || matchState().ssr === "data-only";
-	const ResolvedSuspenseBoundary = () => Solid.Suspense;
-	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;
-	} });
-	return createComponent(route().isRoot ? route().options.shellComponent ?? SafeFragment : SafeFragment, { get children() {
-		return [createComponent(matchContext.Provider, {
-			value: () => props.matchId,
-			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();
-						} });
-					},
+	});
+	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();
+		},
+		children: (currentMatchState) => {
+			const route = () => router.routesById[currentMatchState().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 = currentMatchState().ssr === false || currentMatchState().ssr === "data-only";
+			const ResolvedSuspenseBoundary = () => Solid.Suspense;
+			const ResolvedCatchBoundary = () => routeErrorComponent() ? CatchBoundary : SafeFragment;
+			const ResolvedNotFoundBoundary = () => routeNotFoundComponent() ? CatchNotFound : SafeFragment;
+			return createComponent(route().isRoot ? route().options.shellComponent ?? SafeFragment : SafeFragment, { get children() {
+				return [createComponent(nearestMatchContext.Provider, {
+					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: ${matchState().routeId}`);
-								routeOnCatch()?.(error);
+							get fallback() {
+								return memo(() => !!((isServer ?? 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, {
-												when: resolvedNoSsr,
-												get children() {
-													return createComponent(Solid.Show, {
-														get when() {
-															return !(isServer ?? router.isServer);
-														},
-														get fallback() {
-															return createComponent(Dynamic, { get component() {
-																return resolvePendingComponent();
-															} });
-														},
+										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, {
+														when: resolvedNoSsr,
 														get children() {
-															return createComponent(MatchInner, { get matchId() {
-																return props.matchId;
-															} });
+															return createComponent(Solid.Show, {
+																get when() {
+																	return !(isServer ?? router.isServer);
+																},
+																get fallback() {
+																	return createComponent(Dynamic, { get component() {
+																		return resolvePendingComponent();
+																	} });
+																},
+																get children() {
+																	return createComponent(MatchInner, {});
+																}
+															});
 														}
-													});
-												}
-											}), createComponent(Solid.Match, {
-												when: !resolvedNoSsr,
-												get children() {
-													return createComponent(MatchInner, { get matchId() {
-														return props.matchId;
-													} });
-												}
-											})];
-										} });
+													}), createComponent(Solid.Match, {
+														when: !resolvedNoSsr,
+														get children() {
+															return createComponent(MatchInner, {});
+														}
+													})];
+												} });
+											}
+										});
 									}
 								});
 							}
 						});
 					}
-				});
-			}
-		}), memo(() => memo(() => parentRouteId() === rootRouteId)() ? [createComponent(OnRendered, {}), createComponent(ScrollRestoration, {})] : null)];
-	} });
+				}), memo(() => memo(() => currentMatchState().parentRouteId === rootRouteId)() ? [createComponent(OnRendered, {}), createComponent(ScrollRestoration, {})] : null)];
+			} });
+		}
+	});
 };
 function OnRendered() {
 	const router = useRouter();
-	const location = useRouterState({ select: (s) => {
-		return s.resolvedLocation?.state.__TSR_key;
-	} });
+	const location = Solid.createMemo(() => router.stores.resolvedLocation.state?.state.__TSR_key);
 	Solid.createEffect(Solid.on([location], () => {
 		router.emit({
 			type: "onRendered",
-			...getLocationChangeInfo(router.state)
+			...getLocationChangeInfo(router.stores.location.state, router.stores.resolvedLocation.state)
 		});
 	}));
 	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 (!matchState()) return null;
-	const route = () => router.routesById[matchState().routeId];
-	const match = () => matchState().match;
-	const componentKey = () => matchState().key ?? matchState().match.id;
-	const out = () => {
-		const Comp = 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, {
+		children: (currentMatchState) => {
+			const route = () => router.routesById[currentMatchState().routeId];
+			const currentMatch = () => currentMatchState().match;
+			const componentKey = () => currentMatchState().key ?? currentMatchState().match.id;
+			const out = () => {
+				const Comp = route().options.component ?? router.options.defaultComponent;
+				if (Comp) return createComponent(Comp, {});
+				return createComponent(Outlet, {});
+			};
+			const keyedOut = () => createComponent(Solid.Show, {
 				get when() {
-					return match()._displayPending;
+					return componentKey();
 				},
-				children: (_) => {
-					const [displayPendingResult] = Solid.createResource(() => router.getMatch(match().id)?._nonReactive.displayPendingPromise);
-					return memo(displayPendingResult);
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match()._forcePending;
-				},
-				children: (_) => {
-					const [minPendingResult] = Solid.createResource(() => router.getMatch(match().id)?._nonReactive.minPendingPromise);
-					return memo(minPendingResult);
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "pending";
-				},
-				children: (_) => {
-					const pendingMinMs = route().options.pendingMinMs ?? router.options.defaultPendingMinMs;
-					if (pendingMinMs) {
-						const routerMatch = router.getMatch(match().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) => out()
+			});
+			return createComponent(Solid.Switch, { get children() {
+				return [
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch()._displayPending;
+						},
+						children: (_) => {
+							const [displayPendingResult] = Solid.createResource(() => router.getMatch(currentMatch().id)?._nonReactive.displayPendingPromise);
+							return memo(displayPendingResult);
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch()._forcePending;
+						},
+						children: (_) => {
+							const [minPendingResult] = Solid.createResource(() => router.getMatch(currentMatch().id)?._nonReactive.minPendingPromise);
+							return memo(minPendingResult);
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "pending";
+						},
+						children: (_) => {
+							const pendingMinMs = route().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);
+									}
+								}
 							}
+							const [loaderResult] = Solid.createResource(async () => {
+								await new Promise((r) => setTimeout(r, 0));
+								return router.getMatch(currentMatch().id)?._nonReactive.loadPromise;
+							});
+							const FallbackComponent = route().options.pendingComponent ?? router.options.defaultPendingComponent;
+							return [FallbackComponent && pendingMinMs > 0 ? createComponent(Dynamic, { component: FallbackComponent }) : null, memo(loaderResult)];
 						}
-					}
-					const [loaderResult] = Solid.createResource(async () => {
-						await new Promise((r) => setTimeout(r, 0));
-						return router.getMatch(match().id)?._nonReactive.loadPromise;
-					});
-					const FallbackComponent = route().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: (_) => {
-					invariant(isNotFound(match().error), "Expected a notFound error");
-					return createComponent(Solid.Show, {
+					}),
+					createComponent(Solid.Match, {
 						get when() {
-							return matchState().routeId;
+							return currentMatch().status === "notFound";
 						},
-						keyed: true,
-						children: (_routeId) => renderRouteNotFound(router, route(), match().error)
-					});
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "redirected";
-				},
-				children: (_) => {
-					invariant(isRedirect(match().error), "Expected a redirect error");
-					const [loaderResult] = Solid.createResource(async () => {
-						await new Promise((r) => setTimeout(r, 0));
-						return router.getMatch(match().id)?._nonReactive.loadPromise;
-					});
-					return memo(loaderResult);
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "error";
-				},
-				children: (_) => {
-					throw match().error;
-				}
-			}),
-			createComponent(Solid.Match, {
-				get when() {
-					return match().status === "success";
-				},
-				get children() {
-					return keyedOut();
-				}
-			})
-		];
-	} });
+						children: (_) => {
+							invariant(isNotFound(currentMatch().error), "Expected a notFound error");
+							return createComponent(Solid.Show, {
+								get when() {
+									return currentMatchState().routeId;
+								},
+								keyed: true,
+								children: (_routeId) => renderRouteNotFound(router, route(), currentMatch().error)
+							});
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "redirected";
+						},
+						children: (_) => {
+							invariant(isRedirect(currentMatch().error), "Expected a redirect error");
+							const [loaderResult] = Solid.createResource(async () => {
+								await new Promise((r) => setTimeout(r, 0));
+								return router.getMatch(currentMatch().id)?._nonReactive.loadPromise;
+							});
+							return memo(loaderResult);
+						}
+					}),
+					createComponent(Solid.Match, {
+						get when() {
+							return currentMatch().status === "error";
+						},
+						children: (_) => {
+							if (isServer ?? router.isServer) return createComponent((route().options.errorComponent ?? router.options.defaultErrorComponent) || ErrorComponent, {
+								get error() {
+									return currentMatch().error;
+								},
+								info: { componentStack: "" }
+							});
+							throw currentMatch().error;
+						}
+					}),
+					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 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 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() {
@@ -290,15 +313,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) => 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;