typegen: autoimport for Route types (#12213)

* typegen: autoimport for `Route` types

* typegen: update docs to use `Route` namespace

* typegen: update playground to use `Route` namespace

* typegen: update changeset to use `Route` namespace

Author: pcattori

.changeset/typesafety.md

@@ -11,7 +11,7 @@ For example:
 
 ```ts
 // app/routes/product.tsx
-import type * as Route from "./+types/product";
+import type { Route } from "./+types/product";
 
 export function loader({ params }: Route.LoaderArgs) {}
 

docs/explanation/type-safety.md

@@ -22,7 +22,7 @@ export const routes: RouteConfig = [
 You can import route-specific types like so:
 
 ```tsx filename=app/routes/product.tsx
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 // types generated for this route 👆
 
 export function loader({ params }: Route.LoaderArgs) {

docs/how-to/resource-routes.md

@@ -76,7 +76,7 @@ There's a subtle detail to be aware of when linking to resource routes. You need
 To handle `GET` requests export a loader function:
 
 ```tsx
-import type * as Route from "./+types.resource";
+import type { Route } from "./+types.resource";
 
 export const loader = async ({
   request,
@@ -90,7 +90,7 @@ export const loader = async ({
 To handle `POST`, `PUT`, `PATCH` or `DELETE` requests export an action function:
 
 ```tsx
-import type * as Route from "./+types.resource";
+import type { Route } from "./+types.resource";
 
 export const action = async ({
   request,
@@ -138,7 +138,7 @@ export const action = async () => {
 When calling Resource Routes using `<Form>`, `useSubmit`, or Fetchers, Client Loaders and Actions defined in the Resource Route will participate in the request lifecycle.
 
 ```ts
-import type * as Route from "./+types.github";
+import type { Route } from "./+types.github";
 
 export const action = async () => {
   return Response.json(
@@ -166,7 +166,7 @@ export const clientAction = async ({
 Resource routes can be used to handle webhooks. For example, you can create a webhook that receives notifications from GitHub when a new commit is pushed to a repository:
 
 ```tsx
-import type * as Route from "./+types.github";
+import type { Route } from "./+types.github";
 
 import crypto from "node:crypto";
 

docs/start/actions.md

@@ -15,7 +15,7 @@ Client actions only run in the browser and take priority over a server action wh
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import type * as Route from "./+types.project";
+import type { Route } from "./+types.project";
 import { Form } from "react-router";
 import { someApi } from "./api";
 
@@ -52,7 +52,7 @@ Server actions only run on the server and are removed from client bundles.
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import type * as Route from "./+types.project";
+import type { Route } from "./+types.project";
 import { Form } from "react-router";
 import { fakeDb } from "../db";
 
@@ -89,7 +89,7 @@ If you need to return a custom HTTP status code or custom headers from your `act
 
 ```tsx filename=app/project.tsx lines=[3,11-14,19]
 // route('/projects/:projectId', './project.tsx')
-import type * as Route from "./+types.project";
+import type { Route } from "./+types.project";
 import { data } from "react-router";
 import { fakeDb } from "../db";
 

docs/start/data-loading.md

@@ -13,7 +13,7 @@ Data is provided to the route component from `loader` and `clientLoader`.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 
 export async function clientLoader({
   params,
@@ -42,7 +42,7 @@ When server rendering, `loader` is used for both initial page loads and client n
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 import { fakeDb } from "../db";
 
 export async function loader({ params }: Route.LoaderArgs) {
@@ -71,7 +71,7 @@ If you need to return a custom HTTP status code or custom headers from your `loa
 
 ```tsx filename=app/product.tsx lines=[3,6-8,14,17-21]
 // route("products/:pid", "./product.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 import { data } from "react-router";
 import { fakeDb } from "../db";
 
@@ -100,7 +100,7 @@ When pre-rendering, loaders are used to fetch data during the production build.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 
 export async function loader({ params }: Route.LoaderArgs) {
   let product = await getProductFromCSVFile(params.pid);
@@ -148,7 +148,7 @@ Note that when server rendering, any URLs that aren't pre-rendered will be serve
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 import { fakeDb } from "../db";
 
 export async function loader({ params }: Route.LoaderArgs) {
@@ -186,7 +186,7 @@ In the future, rendered async components in loaders are available on `loaderData
 
 ```tsx filename=app/product-page.tsx
 // route("products/:pid", "./product-page.tsx");
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 import Product from "./product";
 import Reviews from "./reviews";
 

docs/start/routing.md

@@ -72,7 +72,7 @@ Here's a sample route module:
 
 ```tsx filename=app/team.tsx
 // provides type safety/inference
-import type * as Route from "./+types.team";
+import type { Route } from "./+types.team";
 
 // provides `loaderData` to the component
 export async function loader({ params }: Route.LoaderArgs) {
@@ -226,7 +226,7 @@ route("teams/:teamId", "./team.tsx"),
 ```
 
 ```tsx filename=app/team.tsx
-import type * as Route from "./+types.team";
+import type { Route } from "./+types.team";
 
 export async function loader({ params }: Route.LoaderArgs) {
   //                           ^? { teamId: string }
@@ -247,7 +247,7 @@ route("c/:categoryId/p/:productId", "./product.tsx"),
 ```
 
 ```tsx filename=app/product.tsx
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 
 async function loader({ params }: LoaderArgs) {
   //                    ^? { categoryId: string; productId: string }

packages/react-router-dev/typegen.ts

@@ -152,19 +152,21 @@ function getModule(routes: RouteManifest, route: RouteManifestEntry): string {
 
     export type Params = {${formattedParamsProperties(routes, route)}}
 
-    type Route = typeof import("./${Pathe.filename(route.file)}")
+    type RouteModule = typeof import("./${Pathe.filename(route.file)}")
 
-    export type LoaderData = T.CreateLoaderData<Route>
-    export type ActionData = T.CreateActionData<Route>
+    export namespace Route {
+      export type LoaderData = T.CreateLoaderData<RouteModule>
+      export type ActionData = T.CreateActionData<RouteModule>
 
-    export type LoaderArgs = T.CreateServerLoaderArgs<Params>
-    export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, Route>
-    export type ActionArgs = T.CreateServerActionArgs<Params>
-    export type ClientActionArgs = T.CreateClientActionArgs<Params, Route>
+      export type LoaderArgs = T.CreateServerLoaderArgs<Params>
+      export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, RouteModule>
+      export type ActionArgs = T.CreateServerActionArgs<Params>
+      export type ClientActionArgs = T.CreateClientActionArgs<Params, RouteModule>
 
-    export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
-    export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
-    export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+      export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
+      export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
+      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+    }
   `;
 }
 

playground/compiler/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type * as Route from "./+types._index";
+import type { Route } from "./+types._index";
 
 export function loader({ params }: Route.LoaderArgs) {
   return { planet: "world", date: new Date(), fn: () => 1 };

playground/compiler/app/routes/product.tsx

@@ -1,4 +1,4 @@
-import type * as Route from "./+types.product";
+import type { Route } from "./+types.product";
 
 export function loader({ params }: Route.LoaderArgs) {
   return { name: `Super cool product #${params.id}` };