Add support for routes.ts (#11773)

Author: markdalgleish

docs/start/installation.md

@@ -88,11 +88,12 @@ export default function Home() {
 ```
 
 ```ts filename=app/routes.ts
-import { route } from "@react-router/dev/routes";
+import {
+  type RoutesConfig,
+  index,
+} from "@react-router/dev/routes";
 
-export const routes = createRoutes([
-  route.index("./home.tsx"),
-]);
+export const routes: RoutesConfig = [index("./home.tsx")];
 ```
 
 ```tsx filename=vite.config.ts

docs/start/routing.md

@@ -10,19 +10,24 @@ order: 2
 Routes are configured in `app/routes.ts`. The Vite plugin uses this file to create bundles for each route.
 
 ```ts filename=app/routes.ts
-import { route } from "react-router/config";
-
-export default [
-  route.index("./home.tsx"),
+import {
+  type RoutesConfig,
+  route,
+  index,
+  layout,
+} from "@react-router/dev/routes";
+
+export const routes: RoutesConfig = [
+  index("./home.tsx"),
   route("about", "./about.tsx"),
 
-  route.layout("./auth/layout.tsx", [
+  layout("./auth/layout.tsx", [
     route("login", "./auth/login.tsx"),
     route("register", "./auth/register.tsx"),
   ]),
 
   route("concerts", [
-    route.index("./concerts/home.tsx"),
+    index("./concerts/home.tsx"),
     route(":city", "./concerts/city.tsx"),
     route("trending", "./concerts/trending.tsx"),
   ]),
@@ -31,19 +36,29 @@ export default [
 
 ## File System Routes
 
-If you prefer a file system routing convention there are two conventions from React Router, but you can also make your own.
+If you prefer a file system routing convention, you can use the convention provided with Remix v2, but you can also make your own.
 
 ```tsx filename=app/routes.ts
-import { nested, flat } from "@react-router/fs-routes";
+import { type RoutesConfig } from "@react-router/dev/routes";
+import { remixRoutes } from "@react-router/remix-v2-routes";
+
+export const routes: RoutesConfig = remixRoutes();
+```
 
-export const routes = [
-  // simulates Next.js route file names
-  ...nested("./routes"),
+You can also mix routing conventions into a single array of routes.
+
+```tsx filename=app/routes.ts
+import {
+  type RoutesConfig,
+  route,
+} from "@react-router/dev/routes";
+import { remixRoutes } from "@react-router/remix-v2-routes";
 
-  // simulates Remix v2 route file names
-  ...flat("./routes"),
+export const routes: RoutesConfig = [
+  // Provide Remix v2 file system routes
+  ...(await remixRoutes()),
 
-  // can still do regular configuration
+  // Then provide additional config routes
   route("/can/still/add/more", "./more.tsx"),
 ];
 ```
@@ -76,10 +91,18 @@ function Header() {
 Routes can be nested inside parent routes. Nested routes are rendered into their parent's [Outlet][outlet]
 
 ```ts filename=app/routes.ts
-route("dashboard", "./dashboard.tsx", () => [
-  route.index("./home.tsx"),
-  route("settings", "./settings.tsx"),
-]);
+import {
+  type RoutesConfig,
+  route,
+  index,
+} from "@react-router/dev/routes";
+
+export const routes: RoutesConfig = [
+  route("dashboard", "./dashboard.tsx", [
+    index("./home.tsx"),
+    route("settings", "./settings.tsx"),
+  ]),
+];
 ```
 
 ```tsx filename=app/dashboard.tsx
@@ -100,41 +123,52 @@ export default defineRoute$({
 
 ## Layout Routes
 
-Using `route.layout`, layout routes create new nesting for their children, but they don't add any segments to the URL. They can be added at any level.
+Using `layout`, layout routes create new nesting for their children, but they don't add any segments to the URL. They can be added at any level.
+
+```tsx filename=app/routes.ts lines=[9,15]
+import {
+  type RoutesConfig,
+  route,
+  layout,
+  index,
+} from "@react-router/dev/routes";
 
-```tsx filename=app/routes.ts lines=[3,9]
-import { route } from "react-router/config";
-export const routes = [
-  route.layout("./marketing/layout.tsx", [
-    route.index("./marketing/home.tsx"),
+export const routes: RoutesConfig = [
+  layout("./marketing/layout.tsx", [
+    index("./marketing/home.tsx"),
     route("contact", "./marketing/contact.tsx"),
   ]),
   route("projects", [
-    route.index("./projects/home.tsx"),
-    route.layout("./projects/project-layout.tsx", [
+    index("./projects/home.tsx"),
+    layout("./projects/project-layout.tsx", [
       route(":pid", "./projects/project.tsx"),
       route(":pid/edit", "./projects/edit-project.tsx"),
     ]),
   ]),
-]);
+];
 ```
 
 ## Index Routes
 
 ```ts
-route.index(componentFile);
+index(componentFile);
 ```
 
 Index routes render into their parent's [Outlet][outlet] at their parent's URL (like a default child route).
 
 ```ts filename=app/routes.ts
-import { route } from "react-router/config";
-export default [
+import {
+  type RoutesConfig,
+  route,
+  index,
+} from "@react-router/dev/routes";
+
+export const routes: RoutesConfig = [
   // renders into the root.tsx Outlet at /
-  route.index("./home.tsx"),
-  route("dashboard", "./dashboard.tsx", () => [
+  index("./home.tsx"),
+  route("dashboard", "./dashboard.tsx", [
     // renders into the dashboard.tsx Outlet at /dashboard
-    route.index("./dashboard-home.tsx"),
+    index("./dashboard-home.tsx"),
     route("settings", "./dashboard-settings.tsx"),
   ]),
 ];
@@ -222,25 +256,6 @@ You can destructure the `*`, you just have to assign it a new name. A common nam
 const { "*": splat } = params;
 ```
 
-## Case Sensitive Routes
-
-You can make your routes case sensitive by exporting a `config` object from `app/routes.ts`:
-
-```ts filename=app/routes.ts
-import { route } from "react-router/config";
-
-export const config = {
-  caseSensitive: true,
-};
-
-export default [
-  route("wEll-aCtuAlly", "./well-actually.tsx"),
-];
-```
-
-- Will match `"wEll-aCtuAlly"`
-- Will not match `"well-actually"`
-
 ## Component Routes
 
 You can also use components that match the URL to elements anywhere in the component tree:

docs/upgrading/vite-component-routes.md

@@ -176,14 +176,14 @@ To get back to rendering your app, we'll configure a "catchall" route that match
 Create a file at `src/routes.ts` and add this:
 
 ```ts filename=src/routes.ts
-import { defineRoutes } from "react-router/config";
+import { type RoutesConfig } from "@react-router/dev/routes";
 
-export default defineRoutes([
+export const routes: RoutesConfig = [
   {
     path: "*",
     file: "src/catchall.tsx",
   },
-]);
+];
 ```
 
 And then create the catchall route module and render your existing root App component within it.
@@ -221,9 +221,9 @@ export default function App() {
 You can move the definition to a `routes.ts` file:
 
 ```tsx filename=src/routes.ts
-import { defineRoutes } from "react-router/config";
+import { type RoutesConfig } from "@react-router/dev/routes";
 
-export default defineRoutes([
+export const routes: RoutesConfig = [
   {
     path: "/pages/:id",
     file: "./containers/page.tsx",
@@ -232,7 +232,7 @@ export default defineRoutes([
     path: "*",
     file: "src/catchall.tsx",
   },
-]);
+];
 ```
 
 And then edit the route module to use the Route Module API:

docs/upgrading/vite-router-provider.md

@@ -197,14 +197,14 @@ ReactDOM.hydrateRoot(
 You can move the definition to a `routes.ts` file:
 
 ```tsx filename=src/routes.ts
-import { defineRoutes } from "react-router/config";
+import { type RoutesConfig } from "@react-router/dev/routes";
 
-export default defineRoutes([
+export const routes: RoutesConfig = [
   {
     path: "/pages/:id",
     file: "./containers/page.tsx",
   },
-]);
+];
 ```
 
 And then edit the route module to use the Route Module API:

integration/helpers/node-template/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RoutesConfig } from "@react-router/dev/routes";
+import { remixRoutes } from "@react-router/remix-v2-routes";
+
+export const routes: RoutesConfig = remixRoutes();

integration/helpers/node-template/package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@react-router/dev": "workspace:*",
+    "@react-router/remix-v2-routes": "workspace:*",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vanilla-extract/css": "^1.10.0",

integration/helpers/vite-cloudflare-template/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RoutesConfig } from "@react-router/dev/routes";
+import { remixRoutes } from "@react-router/remix-v2-routes";
+
+export const routes: RoutesConfig = remixRoutes();

integration/helpers/vite-cloudflare-template/package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20230518.0",
     "@react-router/dev": "workspace:*",
+    "@react-router/remix-v2-routes": "workspace:*",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "typescript": "^5.1.6",

integration/helpers/vite-template/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RoutesConfig } from "@react-router/dev/routes";
+import { remixRoutes } from "@react-router/remix-v2-routes";
+
+export const routes: RoutesConfig = remixRoutes();

integration/helpers/vite-template/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@react-router/dev": "workspace:*",
+    "@react-router/remix-v2-routes": "workspace:*",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",

integration/flat-routes-test.ts renamed to integration/remix-v2-routes-test.ts

@@ -13,19 +13,30 @@ import {
 let fixture: Fixture;
 let appFixture: AppFixture;
 
-test.describe("flat routes", () => {
-  let IGNORED_ROUTE = "ignore-me-pls";
+test.describe("remix v2 routes", () => {
   test.beforeAll(async () => {
     fixture = await createFixture({
       files: {
-        "vite.config.js": `
+        "vite.config.js": js`
           import { defineConfig } from "vite";
           import { reactRouter } from "@react-router/dev/vite";
 
           export default defineConfig({
-            plugins: [reactRouter({
-              ignoredRouteFiles: [${JSON.stringify(`**/${IGNORED_ROUTE}.*`)}],
-            })],
+            plugins: [reactRouter()],
+          });
+        `,
+        "app/routes.ts": js`
+          import { type RoutesConfig } from "@react-router/dev/routes";  
+          import { remixRoutes } from "@react-router/remix-v2-routes";
+
+          export const routes: RoutesConfig = remixRoutes({
+            ignoredRouteFiles: ["**/ignored-route.*"],
+            routes: async (defineRoutes) => {
+              // Ensure async routes work
+              return defineRoutes((route) => {
+                route("/custom/route", "custom-route.tsx")
+              });
+            }
           });
         `,
         "app/root.tsx": js`
@@ -74,6 +85,12 @@ test.describe("flat routes", () => {
           }
         `,
 
+        "app/custom-route.tsx": js`
+          export default function () {
+            return <h2>Custom Route</h2>;
+          }
+        `,
+
         "app/routes/.dotfile": `
           DOTFILE SHOULD BE IGNORED
         `,
@@ -107,7 +124,7 @@ test.describe("flat routes", () => {
           }
         `,
 
-        [`app/routes/${IGNORED_ROUTE}.jsx`]: js`
+        [`app/routes/ignored-route.jsx`]: js`
           export default function () {
             return <h2>i should 404</h2>;
           }
@@ -169,6 +186,15 @@ test.describe("flat routes", () => {
 </div>`);
     });
 
+    test("renders matching routes (custom route)", async ({ page }) => {
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/custom/route");
+      expect(await app.getHtml("#content")).toBe(`<div id="content">
+  <h1>Root</h1>
+  <h2>Custom Route</h2>
+</div>`);
+    });
+
     test("renders matching routes (route with escaped leading dot)", async ({
       page,
     }) => {
@@ -192,7 +218,7 @@ test.describe("flat routes", () => {
   }
 
   test("allows ignoredRouteFiles to be configured", async () => {
-    let response = await fixture.requestDocument("/" + IGNORED_ROUTE);
+    let response = await fixture.requestDocument("/ignored-route");
 
     expect(response.status).toBe(404);
   });