refactor: simplify types

Author: uhyo

packages/router/src/Router.tsx

@@ -7,10 +7,10 @@ import {
 } from "react";
 import { RouterContext } from "./context/RouterContext.js";
 import { RouteContext } from "./context/RouteContext.js";
-import type {
-  RouteDefinition,
-  NavigateOptions,
-  MatchedRouteWithData,
+import {
+  type NavigateOptions,
+  type MatchedRouteWithData,
+  internalRoutes,
 } from "./types.js";
 import { matchRoutes } from "./core/matchRoutes.js";
 import {
@@ -22,13 +22,15 @@ import {
   getIdleAbortSignal,
 } from "./core/navigation.js";
 import { executeLoaders, createLoaderRequest } from "./core/loaderCache.js";
+import type { RouteDefinition } from "./route.js";
 
 export type RouterProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  routes: RouteDefinition<any>[];
+  routes: RouteDefinition[];
 };
 
-export function Router({ routes }: RouterProps): ReactNode {
+export function Router({ routes: inputRoutes }: RouterProps): ReactNode {
+  const routes = internalRoutes(inputRoutes);
+
   const currentEntry = useSyncExternalStore(
     subscribeToNavigation,
     getNavigationSnapshot,

packages/router/src/__tests__/Router.test.tsx

@@ -5,7 +5,7 @@ import { Outlet } from "../Outlet.js";
 import { useParams } from "../hooks/useParams.js";
 import { useLocation } from "../hooks/useLocation.js";
 import { setupNavigationMock, cleanupNavigationMock } from "./setup.js";
-import type { RouteDefinition } from "../types.js";
+import type { RouteDefinition } from "../route.js";
 
 describe("Router", () => {
   let mockNavigation: ReturnType<typeof setupNavigationMock>;

packages/router/src/__tests__/hooks.test.tsx

@@ -6,7 +6,7 @@ import { useLocation } from "../hooks/useLocation.js";
 import { useParams } from "../hooks/useParams.js";
 import { useSearchParams } from "../hooks/useSearchParams.js";
 import { setupNavigationMock, cleanupNavigationMock } from "./setup.js";
-import type { RouteDefinition } from "../types.js";
+import type { RouteDefinition } from "../route.js";
 
 describe("hooks", () => {
   let mockNavigation: ReturnType<typeof setupNavigationMock>;

packages/router/src/__tests__/loader.test.tsx

@@ -2,9 +2,9 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { render, screen, act } from "@testing-library/react";
 import { Router } from "../Router.js";
 import { Outlet } from "../Outlet.js";
-import { route } from "../route.js";
+import { route, type LoaderArgs } from "../route.js";
 import { setupNavigationMock, cleanupNavigationMock } from "./setup.js";
-import type { LoaderArgs, RouteDefinition } from "../types.js";
+import { internalRoutes, type InternalRouteDefinition } from "../types.js";
 import { clearLoaderCache } from "../core/loaderCache.js";
 
 describe("Data Loader", () => {
@@ -387,22 +387,26 @@ describe("Data Loader", () => {
       type User = { id: number; name: string };
 
       // This should compile without errors
-      const userRoute = route({
-        path: "/users/:id",
-        loader: (): User => ({ id: 1, name: "Test" }),
-        component: ({ data }: { data: User }) => <div>{data.name}</div>,
-      }) as RouteDefinition<User>;
+      const userRoute = internalRoutes([
+        route({
+          path: "/users/:id",
+          loader: (): User => ({ id: 1, name: "Test" }),
+          component: ({ data }: { data: User }) => <div>{data.name}</div>,
+        }),
+      ])[0];
 
       expect(userRoute.path).toBe("/users/:id");
       expect(userRoute.loader).toBeDefined();
     });
 
     it("allows routes without loader and without data prop", () => {
       // This should compile without errors
-      const aboutRoute = route({
-        path: "/about",
-        component: () => <div>About</div>,
-      }) as RouteDefinition;
+      const aboutRoute = internalRoutes([
+        route({
+          path: "/about",
+          component: () => <div>About</div>,
+        }),
+      ])[0];
 
       expect(aboutRoute.path).toBe("/about");
       expect(aboutRoute.loader).toBeUndefined();

packages/router/src/__tests__/matchRoutes.test.ts

@@ -1,32 +1,32 @@
 import { describe, it, expect } from "vitest";
 import { matchRoutes } from "../core/matchRoutes.js";
-import type { RouteDefinition } from "../types.js";
+import { internalRoutes, type InternalRouteDefinition } from "../types.js";
 
 describe("matchRoutes", () => {
   describe("basic matching", () => {
     it("matches exact paths", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         { path: "/", component: () => null },
         { path: "/about", component: () => null },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/about");
       expect(result).toHaveLength(1);
       expect(result![0].route.path).toBe("/about");
     });
 
     it("returns null for non-matching paths", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         { path: "/", component: () => null },
         { path: "/about", component: () => null },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/contact");
       expect(result).toBeNull();
     });
 
     it("matches root path", () => {
-      const routes: RouteDefinition[] = [{ path: "/", component: () => null }];
+      const routes = internalRoutes([{ path: "/", component: () => null }]);
 
       const result = matchRoutes(routes, "/");
       expect(result).toHaveLength(1);
@@ -36,19 +36,19 @@ describe("matchRoutes", () => {
 
   describe("path parameters", () => {
     it("extracts single parameter", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         { path: "/users/:id", component: () => null },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/users/123");
       expect(result).toHaveLength(1);
       expect(result![0].params).toEqual({ id: "123" });
     });
 
     it("extracts multiple parameters", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         { path: "/users/:userId/posts/:postId", component: () => null },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/users/42/posts/99");
       expect(result).toHaveLength(1);
@@ -58,7 +58,7 @@ describe("matchRoutes", () => {
 
   describe("nested routes", () => {
     it("matches nested routes", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         {
           path: "/",
           component: () => null,
@@ -67,7 +67,7 @@ describe("matchRoutes", () => {
             { path: "about", component: () => null },
           ],
         },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/about");
       expect(result).toHaveLength(2);
@@ -76,7 +76,7 @@ describe("matchRoutes", () => {
     });
 
     it("matches deeply nested routes", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         {
           path: "/",
           component: () => null,
@@ -88,7 +88,7 @@ describe("matchRoutes", () => {
             },
           ],
         },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/users/123");
       expect(result).toHaveLength(3);
@@ -99,27 +99,27 @@ describe("matchRoutes", () => {
     });
 
     it("merges params from parent routes", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         {
           path: "/org/:orgId",
           component: () => null,
           children: [{ path: "users/:userId", component: () => null }],
         },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/org/acme/users/123");
       expect(result).toHaveLength(2);
       expect(result![1].params).toEqual({ orgId: "acme", userId: "123" });
     });
 
     it("matches index route (empty path)", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         {
           path: "/",
           component: () => null,
           children: [{ path: "", component: () => null }],
         },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/");
       expect(result).toHaveLength(2);
@@ -130,10 +130,10 @@ describe("matchRoutes", () => {
 
   describe("route priority", () => {
     it("matches first matching route", () => {
-      const routes: RouteDefinition[] = [
+      const routes = internalRoutes([
         { path: "/users/new", component: () => null },
         { path: "/users/:id", component: () => null },
-      ];
+      ]);
 
       const result = matchRoutes(routes, "/users/new");
       expect(result).toHaveLength(1);

packages/router/src/core/loaderCache.ts

@@ -1,8 +1,8 @@
+import type { LoaderArgs } from "../route.js";
 import type {
-  LoaderArgs,
   MatchedRoute,
   MatchedRouteWithData,
-  RouteDefinition,
+  InternalRouteDefinition,
 } from "../types.js";
 
 /**
@@ -17,7 +17,7 @@ const loaderCache = new Map<string, unknown>();
  */
 function getOrCreateLoaderResult(
   entryId: string,
-  route: RouteDefinition<unknown>,
+  route: InternalRouteDefinition,
   args: LoaderArgs,
 ): unknown | undefined {
   if (!route.loader) {

packages/router/src/core/matchRoutes.ts

@@ -1,11 +1,11 @@
-import type { RouteDefinition, MatchedRoute } from "../types.js";
+import type { InternalRouteDefinition, MatchedRoute } from "../types.js";
 
 /**
  * Match a pathname against a route tree, returning the matched route stack.
  * Returns null if no match is found.
  */
 export function matchRoutes(
-  routes: RouteDefinition[],
+  routes: InternalRouteDefinition[],
   pathname: string,
 ): MatchedRoute[] | null {
   for (const route of routes) {
@@ -21,7 +21,7 @@ export function matchRoutes(
  * Match a single route and its children recursively.
  */
 function matchRoute(
-  route: RouteDefinition,
+  route: InternalRouteDefinition,
   pathname: string,
 ): MatchedRoute[] | null {
   const hasChildren = Boolean(route.children?.length);

packages/router/src/core/navigation.ts

@@ -1,4 +1,4 @@
-import type { RouteDefinition, NavigateOptions } from "../types.js";
+import type { InternalRouteDefinition, NavigateOptions } from "../types.js";
 import { matchRoutes } from "./matchRoutes.js";
 import { executeLoaders, createLoaderRequest } from "./loaderCache.js";
 
@@ -71,7 +71,7 @@ export function getServerSnapshot(): null {
  * Returns a cleanup function.
  */
 export function setupNavigationInterception(
-  routes: RouteDefinition[],
+  routes: InternalRouteDefinition[],
 ): () => void {
   if (!hasNavigation()) {
     return () => {};

packages/router/src/index.ts

@@ -15,10 +15,10 @@ export { route } from "./route.js";
 
 // Types
 export type {
-  RouteDefinition,
   MatchedRoute,
   MatchedRouteWithData,
   NavigateOptions,
   Location,
-  LoaderArgs,
 } from "./types.js";
+
+export type { LoaderArgs, RouteDefinition } from "./route.js";

packages/router/src/route.ts

@@ -1,17 +1,39 @@
 import type { ComponentType } from "react";
-import type { LoaderArgs, RouteDefinition } from "./types.js";
 
-const routeDefinitionSymbol = Symbol("RouteDefinition");
+const routeDefinitionSymbol = Symbol();
+
+/**
+ * Arguments passed to loader functions.
+ */
+export type LoaderArgs = {
+  /** Extracted path parameters */
+  params: Record<string, string>;
+  /** Request object with URL and headers */
+  request: Request;
+  /** AbortSignal for cancellation on navigation */
+  signal: AbortSignal;
+};
 
 /**
  * Route definition created by the `route` helper function.
  */
 export interface OpaqueRouteDefinition {
   [routeDefinitionSymbol]: never;
   path: string;
-  children?: OpaqueRouteDefinition[];
+  children?: RouteDefinition[];
 }
 
+/**
+ * Any route definition defined by user.
+ */
+export type RouteDefinition =
+  | OpaqueRouteDefinition
+  | {
+      path: string;
+      component?: ComponentType<{}>;
+      children?: RouteDefinition[];
+    };
+
 /**
  * Route definition with loader - infers TData from loader return type.
  */
@@ -20,7 +42,7 @@ type RouteWithLoader<TData> = {
   loader: (args: LoaderArgs) => TData;
   component: ComponentType<{ data: TData }>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children?: RouteDefinition<any>[];
+  children?: RouteDefinition[];
 };
 
 /**
@@ -30,7 +52,7 @@ type RouteWithoutLoader = {
   path: string;
   component?: ComponentType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children?: RouteDefinition<any>[];
+  children?: RouteDefinition[];
 };
 
 /**