Is there better guidance on how to use monorepos and ValidateXOptions generics?

[anthonyma94]

I've been migrating to TanStack router and it's been great! However, I find documentation on monorepo support to be rather lacking.

First I looked through the monorepo example. I see that the libraries are importing resources directly from the router. However, this defeats the purpose of a monorepo. The whole point is to have reusable libraries for multiple apps. What if I have 2 apps with different routers using the same library?

Then I looked through the type utilties doc. This is better, but the code examples aren't actually valid. For example, this code snippet:

export interface MenuProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
> {
  items: ValidateLinkOptionsArray<TRouter, TItems>
}

export function Menu<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TItems extends ReadonlyArray<unknown>,
>(props: MenuProps<TRouter, TItems>): React.ReactNode
export function Menu(props: MenuProps): React.ReactNode {
  return (
    <ul>
      {props.items.map((item) => (
        <li>
          <Link {...item} />
        </li>
      ))}
    </ul>
  )
}

Looks great, except required generics can't go after optional. This invalid syntax is in almost all code snippets in the page.

It also doesn't go through all types. For example, I found ValidateUseSearchOptions. I try to use it here:

export function test<TOptions, TRouter extends AnyRouter = RegisteredRouter>(
    opts: ValidateUseSearchOptions<TOptions, TRouter>
) {}

export const Route = createFileRoute("/")({
  component: Overview,
  // using valibot
  validateSearch: object({
    test: string(),
  }),
});

test({
  from : "/",
  select: (state) => {
    return state.test; // Property 'test' does not exist on type '{ test: string; } | {} | { deviceName?: string | undefined; }'. Property 'test' does not exist on type '{}'.
  }
});

useSearch({
  from : "/",
  select: (state) => {
    return state.test; // This works.
  }
});

The { deviceName?: string | undefined; } comes from another route. The {} I assume from pages with no search params. Why is it here? Is it a bug? Did I type something wrong?

Overall I like the design philosophy of 100% type safety, but can we have better documentation on how to achieve this on places outside of the router's declaration merging scope? Even changing the monorepo examples to properly demonstrate using generics would be very helpful.