@tanstack/solid-router/dist/cjs/Match.cjs

Modern and scalable routing for Solid applications

const require_runtime = require("./_virtual/_rolldown/runtime.cjs");
const require_CatchBoundary = require("./CatchBoundary.cjs");
const require_useRouter = require("./useRouter.cjs");
const require_matchContext = require("./matchContext.cjs");
const require_SafeFragment = require("./SafeFragment.cjs");
const require_not_found = require("./not-found.cjs");
const require_renderRouteNotFound = require("./renderRouteNotFound.cjs");
const require_scroll_restoration = require("./scroll-restoration.cjs");
let _tanstack_router_core = require("@tanstack/router-core");
let _solidjs_web = require("@solidjs/web");
let solid_js = require("solid-js");
solid_js = require_runtime.__toESM(solid_js);
let _tanstack_router_core_isServer = require("@tanstack/router-core/isServer");
//#region src/Match.tsx
var NearestMatchContext = require_matchContext.nearestMatchContext;
var Match = (props) => {
	const router = require_useRouter.useRouter();
	const match = solid_js.createMemo(() => {
		const id = props.matchId;
		if (!id) return void 0;
		return router.stores.activeMatchStoresById.get(id)?.state;
	});
	const rawMatchState = solid_js.createMemo(() => {
		const currentMatch = match();
		if (!currentMatch) return null;
		const routeId = currentMatch.routeId;
		const parentRouteId = router.routesById[routeId]?.parentRoute?.id;
		return {
			matchId: currentMatch.id,
			routeId,
			ssr: currentMatch.ssr,
			_displayPending: currentMatch._displayPending,
			parentRouteId
		};
	});
	const nearestMatch = {
		matchId: () => rawMatchState()?.matchId,
		routeId: () => rawMatchState()?.routeId,
		match,
		hasPending: solid_js.createMemo(() => {
			const currentRouteId = rawMatchState()?.routeId;
			return currentRouteId ? Boolean(router.stores.pendingRouteIds.state[currentRouteId]) : false;
		})
	};
	return (0, _solidjs_web.createComponent)(solid_js.Show, {
		get when() {
			return rawMatchState();
		},
		children: (currentMatchState) => {
			const route = solid_js.createMemo(() => router.routesById[currentMatchState().routeId]);
			const resolvePendingComponent = solid_js.createMemo(() => route().options.pendingComponent ?? router.options.defaultPendingComponent);
			const routeErrorComponent = solid_js.createMemo(() => route().options.errorComponent ?? router.options.defaultErrorComponent);
			const routeOnCatch = solid_js.createMemo(() => route().options.onCatch ?? router.options.defaultOnCatch);
			const routeNotFoundComponent = solid_js.createMemo(() => route().isRoot ? route().options.notFoundComponent ?? router.options.notFoundRoute?.options.component : route().options.notFoundComponent);
			const resolvedNoSsr = solid_js.createMemo(() => currentMatchState().ssr === false || currentMatchState().ssr === "data-only");
			const ResolvedSuspenseBoundary = solid_js.createMemo(() => resolvedNoSsr() ? require_SafeFragment.SafeFragment : solid_js.Loading);
			const ResolvedCatchBoundary = solid_js.createMemo(() => routeErrorComponent() ? require_CatchBoundary.CatchBoundary : require_SafeFragment.SafeFragment);
			const ResolvedNotFoundBoundary = solid_js.createMemo(() => routeNotFoundComponent() ? require_not_found.CatchNotFound : require_SafeFragment.SafeFragment);
			const ShellComponent = solid_js.createMemo(() => route().isRoot ? route().options.shellComponent ?? require_SafeFragment.SafeFragment : require_SafeFragment.SafeFragment);
			return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
				get component() {
					return ShellComponent();
				},
				get children() {
					return [(0, _solidjs_web.createComponent)(NearestMatchContext, {
						value: nearestMatch,
						get children() {
							return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
								get component() {
									return ResolvedSuspenseBoundary();
								},
								get fallback() {
									return (0, _solidjs_web.memo)(() => !!((_tanstack_router_core_isServer.isServer ?? router.isServer) && resolvedNoSsr()))() ? void 0 : (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
										return resolvePendingComponent();
									} });
								},
								get children() {
									return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
										get component() {
											return ResolvedCatchBoundary();
										},
										getResetKey: () => router.stores.loadedAt.state,
										get errorComponent() {
											return routeErrorComponent() || require_CatchBoundary.ErrorComponent;
										},
										onCatch: (error) => {
											const notFoundError = require_not_found.getNotFound(error);
											if (notFoundError) {
												notFoundError.routeId ??= currentMatchState().routeId;
												throw notFoundError;
											}
											if (process.env.NODE_ENV !== "production") console.warn(`Warning: Error in route match: ${currentMatchState().routeId}`);
											routeOnCatch()?.(error);
										},
										get children() {
											return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, {
												get component() {
													return ResolvedNotFoundBoundary();
												},
												fallback: (error) => {
													const notFoundError = require_not_found.getNotFound(error) ?? error;
													notFoundError.routeId ??= currentMatchState().routeId;
													if (!routeNotFoundComponent() || notFoundError.routeId && notFoundError.routeId !== currentMatchState().routeId || !notFoundError.routeId && !route().isRoot) throw notFoundError;
													return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, (0, _solidjs_web.mergeProps)({ get component() {
														return routeNotFoundComponent();
													} }, notFoundError));
												},
												get children() {
													return (0, _solidjs_web.createComponent)(solid_js.Switch, { get children() {
														return [(0, _solidjs_web.createComponent)(solid_js.Match, {
															get when() {
																return resolvedNoSsr();
															},
															get children() {
																return (0, _solidjs_web.createComponent)(solid_js.Show, {
																	get when() {
																		return !(_tanstack_router_core_isServer.isServer ?? router.isServer);
																	},
																	get fallback() {
																		return (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
																			return resolvePendingComponent();
																		} });
																	},
																	get children() {
																		return (0, _solidjs_web.createComponent)(MatchInner, {});
																	}
																});
															}
														}), (0, _solidjs_web.createComponent)(solid_js.Match, {
															get when() {
																return !resolvedNoSsr();
															},
															get children() {
																return (0, _solidjs_web.createComponent)(MatchInner, {});
															}
														})];
													} });
												}
											});
										}
									});
								}
							});
						}
					}), (0, _solidjs_web.memo)(() => (0, _solidjs_web.memo)(() => currentMatchState().parentRouteId === _tanstack_router_core.rootRouteId)() ? [(0, _solidjs_web.createComponent)(OnRendered, {}), (0, _solidjs_web.memo)(() => (0, _solidjs_web.memo)(() => !!(router.options.scrollRestoration && (_tanstack_router_core_isServer.isServer ?? router.isServer)))() ? (0, _solidjs_web.createComponent)(require_scroll_restoration.ScrollRestoration, {}) : null)] : null)];
				}
			});
		}
	});
};
var lastOnRenderedKey = /* @__PURE__ */ new WeakMap();
function OnRendered() {
	const router = require_useRouter.useRouter();
	const location = solid_js.createMemo(() => router.stores.resolvedLocation.state?.state.__TSR_key);
	const locationState = solid_js.createMemo(() => router.stores.location.state);
	const resolvedLocationState = solid_js.createMemo(() => router.stores.resolvedLocation.state);
	solid_js.createEffect(() => [
		location(),
		locationState(),
		resolvedLocationState()
	], ([location, currentLocationState, currentResolvedLocationState]) => {
		if (!location) return;
		if (lastOnRenderedKey.get(router) === location) return;
		lastOnRenderedKey.set(router, location);
		router.emit({
			type: "onRendered",
			...(0, _tanstack_router_core.getLocationChangeInfo)(currentLocationState, currentResolvedLocationState)
		});
	});
	return null;
}
var MatchInner = () => {
	const router = require_useRouter.useRouter();
	const match = solid_js.useContext(require_matchContext.nearestMatchContext).match;
	const rawMatchState = solid_js.createMemo(() => {
		const currentMatch = match();
		if (!currentMatch) return null;
		const routeId = currentMatch.routeId;
		const remountDeps = (router.routesById[routeId].options.remountDeps ?? router.options.defaultRemountDeps)?.({
			routeId,
			loaderDeps: currentMatch.loaderDeps,
			params: currentMatch._strictParams,
			search: currentMatch._strictSearch
		});
		return {
			key: remountDeps ? JSON.stringify(remountDeps) : void 0,
			routeId,
			match: {
				id: currentMatch.id,
				status: currentMatch.status,
				error: currentMatch.error,
				_forcePending: currentMatch._forcePending ?? false,
				_displayPending: currentMatch._displayPending ?? false
			}
		};
	});
	return (0, _solidjs_web.createComponent)(solid_js.Show, {
		get when() {
			return rawMatchState();
		},
		children: (currentMatchState) => {
			const route = solid_js.createMemo(() => router.routesById[currentMatchState().routeId]);
			const currentMatch = solid_js.createMemo(() => currentMatchState().match);
			const componentKey = solid_js.createMemo(() => currentMatchState().key ?? currentMatchState().match.id);
			const Comp = solid_js.createMemo(() => route().options.component ?? router.options.defaultComponent);
			const OutComponent = solid_js.createMemo(() => {
				return Comp() || Outlet;
			});
			const RenderOut = () => (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
				return OutComponent();
			} });
			const keyedOut = () => (0, _solidjs_web.createComponent)(solid_js.Show, {
				get when() {
					return componentKey();
				},
				keyed: true,
				children: (_key) => (0, _solidjs_web.createComponent)(RenderOut, {})
			});
			return (0, _solidjs_web.createComponent)(solid_js.Switch, { get children() {
				return [
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch()._displayPending;
						},
						children: (_) => {
							return (0, _solidjs_web.memo)(solid_js.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive.displayPendingPromise));
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch()._forcePending;
						},
						children: (_) => {
							return (0, _solidjs_web.memo)(solid_js.createMemo(() => router.getMatch(currentMatch().id)?._nonReactive.minPendingPromise));
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch().status === "pending";
						},
						children: (_) => {
							const pendingMinMs = solid_js.untrack(() => route().options.pendingMinMs ?? router.options.defaultPendingMinMs);
							if (pendingMinMs) {
								const routerMatch = solid_js.untrack(() => router.getMatch(currentMatch().id));
								if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
									if (!(_tanstack_router_core_isServer.isServer ?? router.isServer)) {
										const minPendingPromise = (0, _tanstack_router_core.createControlledPromise)();
										routerMatch._nonReactive.minPendingPromise = minPendingPromise;
										setTimeout(() => {
											minPendingPromise.resolve();
											routerMatch._nonReactive.minPendingPromise = void 0;
										}, pendingMinMs);
									}
								}
							}
							const loaderResult = solid_js.createMemo(async () => {
								await new Promise((r) => setTimeout(r, 0));
								return router.getMatch(currentMatch().id)?._nonReactive.loadPromise;
							});
							const FallbackComponent = solid_js.untrack(() => route().options.pendingComponent ?? router.options.defaultPendingComponent);
							return [FallbackComponent && pendingMinMs > 0 ? (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { component: FallbackComponent }) : null, (0, _solidjs_web.memo)(loaderResult)];
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch().status === "notFound";
						},
						children: (_) => {
							const matchError = solid_js.untrack(() => currentMatch().error);
							if (!(0, _tanstack_router_core.isNotFound)(matchError)) {
								if (process.env.NODE_ENV !== "production") throw new Error("Invariant failed: Expected a notFound error");
								(0, _tanstack_router_core.invariant)();
							}
							return (0, _solidjs_web.createComponent)(solid_js.Show, {
								get when() {
									return currentMatchState().routeId;
								},
								keyed: true,
								children: (_routeId) => solid_js.untrack(() => require_renderRouteNotFound.renderRouteNotFound(router, route(), matchError))
							});
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch().status === "redirected";
						},
						children: (_) => {
							if (!(0, _tanstack_router_core.isRedirect)(solid_js.untrack(() => currentMatch().error))) {
								if (process.env.NODE_ENV !== "production") throw new Error("Invariant failed: Expected a redirect error");
								(0, _tanstack_router_core.invariant)();
							}
							return null;
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch().status === "error";
						},
						children: (_) => {
							const matchError = solid_js.untrack(() => currentMatch().error);
							if (_tanstack_router_core_isServer.isServer ?? router.isServer) return (0, _solidjs_web.createComponent)((route().options.errorComponent ?? router.options.defaultErrorComponent) || require_CatchBoundary.ErrorComponent, {
								error: matchError,
								info: { componentStack: "" }
							});
							throw matchError;
						}
					}),
					(0, _solidjs_web.createComponent)(solid_js.Match, {
						get when() {
							return currentMatch().status === "success";
						},
						get children() {
							return keyedOut();
						}
					})
				];
			} });
		}
	});
};
var Outlet = () => {
	const router = require_useRouter.useRouter();
	const nearestParentMatch = solid_js.useContext(require_matchContext.nearestMatchContext);
	const parentMatch = nearestParentMatch.match;
	const routeId = nearestParentMatch.routeId;
	const route = solid_js.createMemo(() => routeId() ? router.routesById[routeId()] : void 0);
	const parentGlobalNotFound = solid_js.createMemo(() => parentMatch()?.globalNotFound ?? false);
	const childMatchId = solid_js.createMemo(() => {
		const currentRouteId = routeId();
		return currentRouteId ? router.stores.childMatchIdByRouteId.state[currentRouteId] : void 0;
	});
	const childRouteId = solid_js.createMemo(() => {
		const id = childMatchId();
		if (!id) return void 0;
		return router.stores.activeMatchStoresById.get(id)?.state.routeId;
	});
	const childRoute = solid_js.createMemo(() => {
		const id = childRouteId();
		return id ? router.routesById[id] : void 0;
	});
	const childPendingComponent = solid_js.createMemo(() => childRoute()?.options.pendingComponent ?? router.options.defaultPendingComponent);
	const childMatchStatus = solid_js.createMemo(() => {
		const id = childMatchId();
		if (!id) return void 0;
		return router.stores.activeMatchStoresById.get(id)?.state.status;
	});
	const shouldShowNotFound = () => childMatchStatus() !== "redirected" && parentGlobalNotFound();
	return (0, _solidjs_web.createComponent)(solid_js.Show, {
		get when() {
			return (0, _solidjs_web.memo)(() => !!!shouldShowNotFound())() && childMatchId();
		},
		get fallback() {
			return (0, _solidjs_web.createComponent)(solid_js.Show, {
				get when() {
					return (0, _solidjs_web.memo)(() => !!shouldShowNotFound())() && route();
				},
				children: (resolvedRoute) => solid_js.untrack(() => require_renderRouteNotFound.renderRouteNotFound(router, resolvedRoute(), void 0))
			});
		},
		children: (childMatchIdAccessor) => {
			const currentMatchId = solid_js.createMemo(() => childMatchIdAccessor());
			return (0, _solidjs_web.createComponent)(solid_js.Show, {
				get when() {
					return routeId() === _tanstack_router_core.rootRouteId;
				},
				get fallback() {
					return (0, _solidjs_web.createComponent)(Match, { get matchId() {
						return currentMatchId();
					} });
				},
				get children() {
					return (0, _solidjs_web.createComponent)(solid_js.Show, {
						get when() {
							return childRouteId();
						},
						keyed: true,
						children: (_routeId) => (0, _solidjs_web.createComponent)(solid_js.Loading, {
							get fallback() {
								return (0, _solidjs_web.memo)(() => !!childPendingComponent())() ? (0, _solidjs_web.createComponent)(_solidjs_web.Dynamic, { get component() {
									return childPendingComponent();
								} }) : null;
							},
							get children() {
								return (0, _solidjs_web.createComponent)(Match, { get matchId() {
									return currentMatchId();
								} });
							}
						})
					});
				}
			});
		}
	});
};
//#endregion
exports.Match = Match;
exports.Outlet = Outlet;

//# sourceMappingURL=Match.cjs.map