@tanstack/solid-router
Version:
Modern and scalable routing for Solid applications
122 lines (121 loc) • 4.07 kB
JavaScript
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