rename DefaultProps to ComponentProps

and favor `type * as Route` imports

Author: pcattori

packages/react-router-dev/typescript/typegen.ts

@@ -124,7 +124,7 @@ function getModule(routes: RouteManifest, route: RouteManifestEntry): string {
     export type ClientActionArgs = T.CreateClientActionArgs<Params, Route>
 
     export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
-    export type DefaultProps = T.CreateDefaultProps<Params, LoaderData, ActionData>
+    export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
     export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
   `;
 }

packages/react-router/lib/types.ts

@@ -132,7 +132,7 @@ export type CreateHydrateFallbackProps<Params> = {
   params: Params;
 };
 
-export type CreateDefaultProps<Params, LoaderData, ActionData> = {
+export type CreateComponentProps<Params, LoaderData, ActionData> = {
   params: Params;
   loaderData: LoaderData;
   actionData?: ActionData;

playground/compiler/app/routes/_index.tsx

@@ -1,9 +1,9 @@
-import { DefaultProps, LoaderArgs } from "./+types._index";
+import type * as Route from "./+types._index";
 
-export function loader({ params }: LoaderArgs) {
+export function loader({ params }: Route.LoaderArgs) {
   return { planet: "world", date: new Date(), fn: () => 1 };
 }
 
-export default function Index({ loaderData }: DefaultProps) {
+export default function Index({ loaderData }: Route.ComponentProps) {
   return <h1>Hello, {loaderData.planet}!</h1>;
 }

playground/compiler/app/routes/product.tsx

@@ -1,9 +1,9 @@
-import type { DefaultProps, LoaderArgs } from "./+types.product";
+import type * as Route from "./+types.product";
 
-export function loader({ params }: LoaderArgs) {
+export function loader({ params }: Route.LoaderArgs) {
   return { name: `Super cool product #${params.id}` };
 }
 
-export default function Component({ loaderData }: DefaultProps) {
+export default function Component({ loaderData }: Route.ComponentProps) {
   return <h1>{loaderData.name}</h1>;
 }