Make routes the default export in routes.ts (#10236)

remix-run · Nov 18, 2024 · 435cbd1 · 435cbd1
1 parent 417ecc4
commit 435cbd1
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 41 deletions.
diff --git a/.changeset/sour-years-cover.md b/.changeset/sour-years-cover.md
@@ -0,0 +1,12 @@
+---
+"@remix-run/dev": patch
+---
+
+When the `future.unstable_routeConfig` flag is enabled, your route config in `app/routes.ts` is no longer defined via the `routes` export and must now be defined via the default export.
+
+```diff
+import { type RouteConfig } from "@remix-run/route-config";
+
+-export const routes: RouteConfig = [];
++export default [] satisfies RouteConfig;
+```
diff --git a/docs/start/future-flags.md b/docs/start/future-flags.md
@@ -511,7 +511,7 @@ touch app/routes.ts
 ```ts filename=app/routes.ts
 import type { RouteConfig } from "@remix-run/route-config";
 
-export const routes: RouteConfig = [];
+export default [] satisfies RouteConfig;
 ```
 
 This is a good way to check that your new `routes.ts` file is being picked up successfully. Your app should now be rendering a blank page since there aren't any routes defined yet.
@@ -530,7 +530,7 @@ This package matches the API of React Router v7's `@react-router/fs-routes`, mak
 import { flatRoutes } from "@remix-run/fs-routes";
 import type { RouteConfig } from "@remix-run/route-config";
 
-export const routes: RouteConfig = flatRoutes();
+export default flatRoutes() satisfies RouteConfig;
 ```
 
 👉 **If you used the `routes` config option, add `@remix-run/routes-option-adapter` and use it in `routes.ts`**
@@ -556,9 +556,9 @@ import { type RouteConfig } from "@remix-run/route-config";
 import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
 import { flatRoutes } from "remix-flat-routes";
 
-export const routes: RouteConfig = remixRoutesOptionAdapter(
-  (defineRoutes) => flatRoutes("routes", defineRoutes)
-);
+export default remixRoutesOptionAdapter((defineRoutes) =>
+  flatRoutes("routes", defineRoutes)
+) satisfies RouteConfig;
 ```
 
 Or, if you were using the `routes` option to define config-based routes:
@@ -568,18 +568,16 @@ import { flatRoutes } from "@remix-run/fs-routes";
 import { type RouteConfig } from "@remix-run/route-config";
 import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
 
-export const routes: RouteConfig = remixRoutesOptionAdapter(
-  (defineRoutes) => {
-    return defineRoutes((route) => {
-      route("/", "home/route.tsx", { index: true });
-      route("about", "about/route.tsx");
-      route("", "concerts/layout.tsx", () => {
-        route("trending", "concerts/trending.tsx");
-        route(":city", "concerts/city.tsx");
-      });
+export default remixRoutesOptionAdapter((defineRoutes) => {
+  return defineRoutes((route) => {
+    route("/", "home/route.tsx", { index: true });
+    route("about", "about/route.tsx");
+    route("", "concerts/layout.tsx", () => {
+      route("trending", "concerts/trending.tsx");
+      route(":city", "concerts/city.tsx");
     });
-  }
-);
+  });
+}) satisfies RouteConfig;
 ```
 
 If you're defining config-based routes in this way, you might want to consider migrating to the new route config API since it's more streamlined while still being very similar to the old API. For example, the routes above would look like this:
@@ -592,14 +590,14 @@ import {
   index,
 } from "@remix-run/route-config";
 
-export const routes: RouteConfig = [
+export default [
   index("home/route.tsx"),
   route("about", "about/route.tsx"),
   layout("concerts/layout.tsx", [
     route("trending", "concerts/trending.tsx"),
     route(":city", "concerts/city.tsx"),
   ]),
-];
+] satisfies RouteConfig;
 ```
 
 Note that if you need to mix and match different route config approaches, they can be merged together into a single array of routes. The `RouteConfig` type ensures that everything is still valid.
@@ -610,13 +608,13 @@ import type { RouteConfig } from "@remix-run/route-config";
 import { route } from "@remix-run/route-config";
 import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
 
-export const routes: RouteConfig = [
+export default [
   ...(await flatRoutes({ rootDirectory: "fs-routes" })),
 
   ...(await remixRoutesOptionAdapter(/* ... */)),
 
   route("/hello", "routes/hello.tsx"),
-];
+] satisfies RouteConfig;
 ```
 
 ## unstable_optimizeDeps

diff --git a/integration/vite-fs-routes-test.ts b/integration/vite-fs-routes-test.ts
@@ -33,7 +33,7 @@ test.describe("fs-routes", () => {
           import { flatRoutes } from "@remix-run/fs-routes";
           import { remixRoutesOptionAdapter } from "@remix-run/routes-option-adapter";
 
-          export const routes: RouteConfig = [
+          export default [
             ...await flatRoutes({
               rootDirectory: "fs-routes",
               ignoredRouteFiles: ["**/ignored-route.*"],
@@ -46,7 +46,7 @@ test.describe("fs-routes", () => {
                 route("/routes/option/adapter/route", "routes-option-adapter-route.tsx")
               });
             })
-          ];
+          ] satisfies RouteConfig;
         `,
         "app/root.tsx": js`
           import { Links, Meta, Outlet, Scripts } from "@remix-run/react";
@@ -265,9 +265,9 @@ test.describe("emits warnings for route conflicts", async () => {
           import { type RouteConfig } from "@remix-run/route-config";  
           import { flatRoutes } from "@remix-run/fs-routes";
 
-          export const routes: RouteConfig = flatRoutes({
+          export default flatRoutes({
             rootDirectory: "fs-routes",
-          });
+          }) satisfies RouteConfig;
         `,
         "fs-routes/_dashboard._index.tsx": js`
           export default function () {
@@ -339,9 +339,9 @@ test.describe("", () => {
           import { type RouteConfig } from "@remix-run/route-config";  
           import { flatRoutes } from "@remix-run/fs-routes";
 
-          export const routes: RouteConfig = flatRoutes({
+          export default flatRoutes({
             rootDirectory: "fs-routes",
-          });
+          }) satisfies RouteConfig;
         `,
         "app/fs-routes/_index/route.tsx": js``,
         "app/fs-routes/_index/utils.ts": js``,
@@ -388,9 +388,9 @@ test.describe("pathless routes and route collisions", () => {
           import { type RouteConfig } from "@remix-run/route-config";  
           import { flatRoutes } from "@remix-run/fs-routes";
 
-          export const routes: RouteConfig = flatRoutes({
+          export default flatRoutes({
             rootDirectory: "fs-routes",
-          });
+          }) satisfies RouteConfig;
         `,
         "app/root.tsx": js`
           import { Link, Outlet, Scripts, useMatches } from "@remix-run/react";

diff --git a/integration/vite-route-config-test.ts b/integration/vite-route-config-test.ts
@@ -69,7 +69,7 @@ test.describe("route config", () => {
           })]
         }
       `,
-      "app/routes.ts": `export const routes = [];`,
+      "app/routes.ts": `export default [];`,
     });
     let buildResult = viteBuild({ cwd });
     expect(buildResult.status).toBe(1);
@@ -93,7 +93,7 @@ test.describe("route config", () => {
           })]
         }
       `,
-      "app/routes.ts": `export const routes = [];`,
+      "app/routes.ts": `export default [];`,
     });
     let devError: Error | undefined;
     try {
@@ -161,9 +161,9 @@ test.describe("route config", () => {
       "app/routes.ts": js`
         import { type RouteConfig, index } from "@remix-run/route-config";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default function TestRoute1() {
@@ -220,14 +220,14 @@ test.describe("route config", () => {
         port,
       }),
       "app/routes.ts": js`
-        export { routes } from "./actual-routes";
+        export { default } from "./actual-routes";
       `,
       "app/actual-routes.ts": js`
         import { type RouteConfig, index } from "@remix-run/route-config";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default function TestRoute1() {
@@ -286,9 +286,9 @@ test.describe("route config", () => {
       "app/routes.ts": js`
         import { type RouteConfig, index } from "@remix-run/route-config";
 
-        export const routes: RouteConfig = [
+        export default [
           index("test-route-1.tsx"),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route-1.tsx": `
         export default function TestRoute1() {
@@ -354,9 +354,9 @@ test.describe("route config", () => {
         import path from "node:path";
         import { type RouteConfig, index } from "@remix-run/route-config";
 
-        export const routes: RouteConfig = [
+        export default [
           index(path.resolve(import.meta.dirname, "test-route.tsx")),
-        ];
+        ] satisfies RouteConfig;
       `,
       "app/test-route.tsx": `
         export default function TestRoute() {

diff --git a/packages/remix-dev/config.ts b/packages/remix-dev/config.ts
@@ -612,7 +612,7 @@ export async function resolveConfig(
         await routesViteNodeContext.runner.executeFile(
           path.join(appDirectory, routeConfigFile)
         )
-      ).routes;
+      ).default;
 
       let routeConfig = await routeConfigExport;
 

diff --git a/packages/remix-dev/config/routes.ts b/packages/remix-dev/config/routes.ts
@@ -175,7 +175,7 @@ export function validateRouteConfig({
   if (!routeConfig) {
     return {
       valid: false,
-      message: `No "routes" export defined in "${routeConfigFile}.`,
+      message: `Route config must be the default export in "${routeConfigFile}".`,
     };
   }