Add relative routes.ts helpers (#11966)

Author: markdalgleish

integration/routes-config-test.ts

@@ -224,4 +224,28 @@ test.describe("routes config", () => {
       );
     }).toPass();
   });
+
+  test("supports absolute route file paths", async ({ page, dev }) => {
+    let files: Files = async ({ port }) => ({
+      "vite.config.js": await viteConfig.basic({ port }),
+      "app/routes.ts": js`
+        import path from "node:path";
+        import { type RouteConfig } from "@react-router/dev/routes";
+
+        export const routes: RouteConfig = [
+          {
+            file: path.resolve(import.meta.dirname, "test-route.tsx"),
+            index: true,
+          },
+        ];
+      `,
+      "app/test-route.tsx": `
+        export default () => <div data-test-route>Test route</div>
+      `,
+    });
+    let { port } = await dev(files);
+
+    await page.goto(`http://localhost:${port}/`, { waitUntil: "networkidle" });
+    await expect(page.locator("[data-test-route]")).toHaveText("Test route");
+  });
 });

packages/react-router-dev/__tests__/routes-config-test.ts

@@ -1,4 +1,4 @@
-import { route, layout, index } from "../config/routes";
+import { route, layout, index, relative } from "../config/routes";
 
 describe("routes config", () => {
   describe("route helpers", () => {
@@ -196,5 +196,69 @@ describe("routes config", () => {
         `);
       });
     });
+
+    describe("relative", () => {
+      it("supports relative routes", () => {
+        let { route } = relative("/path/to/dirname");
+        expect(
+          route("parent", "nested/parent.tsx", [
+            route("child", "nested/child.tsx", { id: "child" }),
+          ])
+        ).toMatchInlineSnapshot(`
+          {
+            "children": [
+              {
+                "children": undefined,
+                "file": "/path/to/dirname/nested/child.tsx",
+                "id": "child",
+                "path": "child",
+              },
+            ],
+            "file": "/path/to/dirname/nested/parent.tsx",
+            "path": "parent",
+          }
+        `);
+      });
+
+      it("supports relative index routes", () => {
+        let { index } = relative("/path/to/dirname");
+        expect([
+          index("nested/without-options.tsx"),
+          index("nested/with-options.tsx", { id: "with-options" }),
+        ]).toMatchInlineSnapshot(`
+          [
+            {
+              "file": "/path/to/dirname/nested/without-options.tsx",
+              "index": true,
+            },
+            {
+              "file": "/path/to/dirname/nested/with-options.tsx",
+              "id": "with-options",
+              "index": true,
+            },
+          ]
+        `);
+      });
+
+      it("supports relative layout routes", () => {
+        let { layout } = relative("/path/to/dirname");
+        expect(
+          layout("nested/parent.tsx", [
+            layout("nested/child.tsx", { id: "child" }),
+          ])
+        ).toMatchInlineSnapshot(`
+          {
+            "children": [
+              {
+                "children": undefined,
+                "file": "/path/to/dirname/nested/child.tsx",
+                "id": "child",
+              },
+            ],
+            "file": "/path/to/dirname/nested/parent.tsx",
+          }
+        `);
+      });
+    });
   });
 });

packages/react-router-dev/config/routes.ts

@@ -1,4 +1,4 @@
-import * as path from "node:path";
+import { resolve, win32 } from "node:path";
 import pick from "lodash/pick";
 import invariant from "../invariant";
 
@@ -92,11 +92,6 @@ export interface RouteConfigEntry {
 
 type CreateRoutePath = string | null | undefined;
 
-type RequireAtLeastOne<T> = {
-  [K in keyof T]-?: Required<Pick<T, K>> &
-    Partial<Pick<T, Exclude<keyof T, K>>>;
-}[keyof T];
-
 const createConfigRouteOptionKeys = [
   "id",
   "index",
@@ -114,7 +109,7 @@ function createRoute(
 function createRoute(
   path: CreateRoutePath,
   file: string,
-  options: RequireAtLeastOne<CreateRouteOptions>,
+  options: CreateRouteOptions,
   children?: RouteConfigEntry[]
 ): RouteConfigEntry;
 function createRoute(
@@ -148,7 +143,7 @@ type CreateIndexOptions = Pick<
 >;
 function createIndex(
   file: string,
-  options?: RequireAtLeastOne<CreateIndexOptions>
+  options?: CreateIndexOptions
 ): RouteConfigEntry {
   return {
     file,
@@ -170,7 +165,7 @@ function createLayout(
 ): RouteConfigEntry;
 function createLayout(
   file: string,
-  options: RequireAtLeastOne<CreateLayoutOptions>,
+  options: CreateLayoutOptions,
   children?: RouteConfigEntry[]
 ): RouteConfigEntry;
 function createLayout(
@@ -196,6 +191,24 @@ function createLayout(
 export const route = createRoute;
 export const index = createIndex;
 export const layout = createLayout;
+type RouteHelpers = {
+  route: typeof route;
+  index: typeof index;
+  layout: typeof layout;
+};
+export function relative(directory: string): RouteHelpers {
+  return {
+    route: (path, file, ...rest) => {
+      return route(path, resolve(directory, file), ...(rest as any));
+    },
+    index: (file, ...rest) => {
+      return index(resolve(directory, file), ...(rest as any));
+    },
+    layout: (file, ...rest) => {
+      return layout(resolve(directory, file), ...(rest as any));
+    },
+  };
+}
 
 export function configRoutesToRouteManifest(
   routes: RouteConfigEntry[],
@@ -240,7 +253,7 @@ function createRouteId(file: string) {
 }
 
 function normalizeSlashes(file: string) {
-  return file.split(path.win32.sep).join("/");
+  return file.split(win32.sep).join("/");
 }
 
 function stripFileExtension(file: string) {

packages/react-router-dev/routes.ts

@@ -1,3 +1,9 @@
 export type { RouteConfig, RouteConfigEntry } from "./config/routes";
 
-export { route, index, layout, getAppDirectory } from "./config/routes";
+export {
+  route,
+  index,
+  layout,
+  relative,
+  getAppDirectory,
+} from "./config/routes";