Repository: remix-run/react-router
File: packages/react-router/lib/types/route-module-annotations.ts (TypeScript)

Code before:
  /** This is an asynchronous function to get the data from the server loader for this route. On client-side navigations, this will make a {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API fetch} call to the React Router server loader. If you opt-into running your clientLoader on hydration, then this function will return the data that was already loaded on the server (via Promise.resolve). */
  serverLoader: () => Promise<ServerDataFrom<T["module"]["loader"]>>;
};

type CreateServerActionArgs<T extends RouteInfo> = ServerDataFunctionArgs<
  T["params"]
>;

type CreateClientActionArgs<T extends RouteInfo> = ClientDataFunctionArgs<
  T["params"]
> & {
  /** This is an asynchronous function that makes the {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API fetch} call to the React Router server action for this route. */
  serverAction: () => Promise<ServerDataFrom<T["module"]["action"]>>;
};

type CreateHydrateFallbackProps<T extends RouteInfo> = {
  params: T["params"];
  loaderData?: T["loaderData"];
  actionData?: T["actionData"];
};

type Match<T extends MatchInfo> = Pretty<{
  id: T["id"];
  params: Record<string, string | undefined>;
  pathname: string;
  /** @deprecated Use `loaderData` instead */
  data: GetLoaderData<T["module"]>;
  loaderData: GetLoaderData<T["module"]>;
  handle: unknown;
}>;

// prettier-ignore
type Matches<T extends Array<MatchInfo>> =
  T extends [infer F extends MatchInfo, ...infer R extends Array<MatchInfo>]
    ? [Match<F>, ...Matches<R>]
    : Array<Match<MatchInfo> | undefined>;

type CreateComponentProps<T extends RouteInfo> = {
  /**
   * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
   * @example
   * // app/routes.ts
   * route("teams/:teamId", "./team.tsx"),
   *
   * // app/team.tsx
   * export default function Component({
   *   params,
   * }: Route.ComponentProps) {
   *   params.teamId;
   *   //        ^ string
   * }

Review comment (suggestion):
```suggestion
  /** @deprecated Use `Match.loaderData` instead */
```

Code after:
  /** This is an asynchronous function to get the data from the server loader for this route. On client-side navigations, this will make a {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API fetch} call to the React Router server loader. If you opt-into running your clientLoader on hydration, then this function will return the data that was already loaded on the server (via Promise.resolve). */
  serverLoader: () => Promise<ServerDataFrom<T["module"]["loader"]>>;
};

type CreateServerActionArgs<T extends RouteInfo> = ServerDataFunctionArgs<
  T["params"]
>;

type CreateClientActionArgs<T extends RouteInfo> = ClientDataFunctionArgs<
  T["params"]
> & {
  /** This is an asynchronous function that makes the {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API fetch} call to the React Router server action for this route. */
  serverAction: () => Promise<ServerDataFrom<T["module"]["action"]>>;
};

type CreateHydrateFallbackProps<T extends RouteInfo> = {
  params: T["params"];
  loaderData?: T["loaderData"];
  actionData?: T["actionData"];
};

type Match<T extends MatchInfo> = Pretty<{
  id: T["id"];
  params: Record<string, string | undefined>;
  pathname: string;
  /** @deprecated Use `Match.loaderData` instead */
  data: GetLoaderData<T["module"]>;
  loaderData: GetLoaderData<T["module"]>;
  handle: unknown;
}>;

// prettier-ignore
type Matches<T extends Array<MatchInfo>> =
  T extends [infer F extends MatchInfo, ...infer R extends Array<MatchInfo>]
    ? [Match<F>, ...Matches<R>]
    : Array<Match<MatchInfo> | undefined>;

type CreateComponentProps<T extends RouteInfo> = {
  /**
   * {@link https://reactrouter.com/start/framework/routing#dynamic-segments Dynamic route params} for the current route.
   * @example
   * // app/routes.ts
   * route("teams/:teamId", "./team.tsx"),
   *
   * // app/team.tsx
   * export default function Component({
   *   params,
   * }: Route.ComponentProps) {
   *   params.teamId;
   *   //        ^ string
   * }