@tanstack/solid-router/dist/source/Matches.jsx

Modern and scalable routing for Solid applications

import * as Solid from 'solid-js';
import warning from 'tiny-warning';
import { rootRouteId } from '@tanstack/router-core';
import { isServer } from '@tanstack/router-core/isServer';
import { CatchBoundary, ErrorComponent } from './CatchBoundary';
import { useRouterState } from './useRouterState';
import { useRouter } from './useRouter';
import { Transitioner } from './Transitioner';
import { matchContext } from './matchContext';
import { SafeFragment } from './SafeFragment';
import { Match } from './Match';
export 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;
    const OptionalWrapper = router.options.InnerWrap || SafeFragment;
    return (<OptionalWrapper>
      <ResolvedSuspense fallback={PendingComponent ? <PendingComponent /> : null}>
        <Transitioner />
        <MatchesInner />
      </ResolvedSuspense>
    </OptionalWrapper>);
}
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 (<Solid.Show when={matchId()}>
        <Match matchId={matchId()}/>
      </Solid.Show>);
    };
    return (<matchContext.Provider value={matchId}>
      {router.options.disableGlobalCatchBoundary ? (matchComponent()) : (<CatchBoundary getResetKey={() => resetKey()} errorComponent={ErrorComponent} onCatch={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());
                }
                : undefined}>
          {matchComponent()}
        </CatchBoundary>)}
    </matchContext.Provider>);
}
export function useMatchRoute() {
    const router = useRouter();
    const status = useRouterState({
        select: (s) => s.status,
    });
    return (opts) => {
        const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
        const matchRoute = Solid.createMemo(() => {
            status();
            return router.matchRoute(rest, {
                pending,
                caseSensitive,
                fuzzy,
                includeSearch,
            });
        });
        return matchRoute;
    };
}
export function MatchRoute(props) {
    const status = useRouterState({
        select: (s) => s.status,
    });
    return (<Solid.Show when={status()} keyed>
      {(_) => {
            const matchRoute = useMatchRoute();
            const params = matchRoute(props)();
            const child = props.children;
            if (typeof child === 'function') {
                return child(params);
            }
            return params ? child : null;
        }}
    </Solid.Show>);
}
export function useMatches(opts) {
    return useRouterState({
        select: (state) => {
            const matches = state.matches;
            return opts?.select
                ? opts.select(matches)
                : matches;
        },
    });
}
export 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;
        },
    });
}
export 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;
        },
    });
}
//# sourceMappingURL=Matches.jsx.map