Expose CheckFromPath

[snewell92]

We built our own useTabs for our developers to use when they create a new page/route so we can create a common structure for all pages across our product. useTabs generates info that flows into a PageHeader component to fill in a standard layout, our original attempt with TypeScript caused unions that were too complex, which we could work around with currying, but is an awkward unnecessary API.

Then we found CheckFromPath, but it doesn't appear as a top level import, this seems really useful for this and other use cases when building on top of TSR - can we have this or another similar helper type surfaced? Or can our approach be iterated on to not use this internal type helper ya think?

Thanks for reading <3

cc @honzahruby

Code

Previous attempt at useTabs that made TS angry:

import {
    Link,
    RegisteredRouter,
    RoutePaths as TanstackRoutePaths,
    ToPathOption,
    useRouter,
} from '@tanstack/react-router';

type RoutePaths = TanstackRoutePaths<RegisteredRouter['routeTree']>;

/** Get child routes from a given route */
type ChildPaths<ParentPath extends string> = Exclude<ToPathOption<RegisteredRouter, ParentPath, './'>, '.'>;

/** Nicer usage */
type StripPrefix<T extends string> = T extends `./${infer Rest}` ? Rest : T;

export const useTabs = <From extends RoutePaths>(from: From, tos: StripPrefix<ChildPaths<From>>[]) => {
    const router = useRouter();

    return tos.map((to) => {
        /**
         * The input types are strongly typed for this to work correctly, so the ignore is a good enough
         * until we figure out proper solution.
         */
        // @ts-expect-error
        const m = router.routesByPath[`${from}/${to}`];
        return <Link to={m.to}>{m.options?.staticData?.title ?? null}</Link>;
    });
};

// usage
const tabs = useTabs('/$id/path/to/me', ['Alpha', 'Beta']);

With CheckFromPath which simplifies the types, seems to perform better, and removes our errors:

import {
    Link,
    RegisteredRouter,
    SearchPaths,
    RoutePaths as TanstackRoutePaths,
    useRouter,
} from '@tanstack/react-router';
import { CheckFromPath } from '@tanstack/react-router/dist/esm/link';

type RoutePaths = TanstackRoutePaths<RegisteredRouter['routeTree']>;

/**
 * TypeScript was running into issues with `Expression produces a union type that is too complex to represent.`
 * As a workaround, we relaxed the generic type with `string & {}` which preserves autocomplete.
 * Then we check if the path is a valid route path with `CheckFromPath`.
 */
export const useTabs = <From extends RoutePaths | (string & {})>(
    from: CheckFromPath<RegisteredRouter, From, 'Invalid route path', From>,
    tos: SearchPaths<RegisteredRouter, From>[]
) => {
    const router = useRouter();

    return tos.map((to) => {
        /**
         * The input types are strongly typed for this to work correctly, so the ignore is a good enough
         * until we figure out proper solution.
         */
        // @ts-expect-error
        const m = router.routesByPath[`${from}/${to}`];
        return (
            <Link to={m.to} key={m.to}>
                {m.options?.staticData?.title ?? null}
            </Link>
        );
    });
};

// usage
const tabs = useTabs('/$id/path/to/me', ['Alpha', 'Beta']);

[SeanCassiere]

#2861 closes this. The next release should have this exposed.