UNPKG

@tanstack/solid-router

Version:

Modern and scalable routing for Solid applications

122 lines (121 loc) 4.07 kB
import { CatchBoundary, ErrorComponent } from "./CatchBoundary.js"; import { useRouter } from "./useRouter.js"; import { useRouterState } from "./useRouterState.js"; import { matchContext } from "./matchContext.js"; import { Transitioner } from "./Transitioner.js"; import { SafeFragment } from "./SafeFragment.js"; import { Match } from "./Match.js"; import { rootRouteId } from "@tanstack/router-core"; import { createComponent, memo } from "solid-js/web"; import * as Solid from "solid-js"; import warning from "tiny-warning"; import { isServer } from "@tanstack/router-core/isServer"; //#region src/Matches.tsx function Matches() { const router = useRouter(); const ResolvedSuspense = (isServer ?? router.isServer) || typeof document !== "undefined" && router.ssr ? SafeFragment : Solid.Suspense; const rootRoute = () => router.routesById[rootRouteId]; const PendingComponent = rootRoute().options.pendingComponent ?? router.options.defaultPendingComponent; return createComponent(router.options.InnerWrap || SafeFragment, { get children() { return createComponent(ResolvedSuspense, { get fallback() { return PendingComponent ? createComponent(PendingComponent, {}) : null; }, get children() { return [createComponent(Transitioner, {}), createComponent(MatchesInner, {})]; } }); } }); } function MatchesInner() { const router = useRouter(); const matchId = useRouterState({ select: (s) => { return s.matches[0]?.id; } }); const resetKey = useRouterState({ select: (s) => s.loadedAt }); const matchComponent = () => { return createComponent(Solid.Show, { get when() { return matchId(); }, get children() { return createComponent(Match, { get matchId() { return matchId(); } }); } }); }; return createComponent(matchContext.Provider, { value: matchId, get children() { return memo(() => !!router.options.disableGlobalCatchBoundary)() ? matchComponent() : createComponent(CatchBoundary, { getResetKey: () => resetKey(), errorComponent: ErrorComponent, get onCatch() { return process.env.NODE_ENV !== "production" ? (error) => { warning(false, `The following error wasn't caught by any route! At the very leas t, consider setting an 'errorComponent' in your RootRoute!`); warning(false, error.message || error.toString()); } : void 0; }, get children() { return matchComponent(); } }); } }); } function useMatchRoute() { const router = useRouter(); const status = useRouterState({ select: (s) => s.status }); return (opts) => { const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts; return Solid.createMemo(() => { status(); return router.matchRoute(rest, { pending, caseSensitive, fuzzy, includeSearch }); }); }; } function MatchRoute(props) { const status = useRouterState({ select: (s) => s.status }); return createComponent(Solid.Show, { get when() { return status(); }, keyed: true, children: (_) => { const params = useMatchRoute()(props)(); const child = props.children; if (typeof child === "function") return child(params); return params ? child : null; } }); } function useMatches(opts) { return useRouterState({ select: (state) => { const matches = state.matches; return opts?.select ? opts.select(matches) : matches; } }); } function useParentMatches(opts) { const contextMatchId = Solid.useContext(matchContext); return useMatches({ select: (matches) => { matches = matches.slice(0, matches.findIndex((d) => d.id === contextMatchId())); return opts?.select ? opts.select(matches) : matches; } }); } function useChildMatches(opts) { const contextMatchId = Solid.useContext(matchContext); return useMatches({ select: (matches) => { matches = matches.slice(matches.findIndex((d) => d.id === contextMatchId()) + 1); return opts?.select ? opts.select(matches) : matches; } }); } //#endregion export { MatchRoute, Matches, useChildMatches, useMatchRoute, useMatches, useParentMatches }; //# sourceMappingURL=Matches.js.map