chore: merge dev

remix-run · Dec 16, 2024 · 297fbd9 · 297fbd9
2 parents 02b5721 + bc4da87
commit 297fbd9
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 57 deletions.
diff --git a/.changeset/sour-years-cover.md b/.changeset/sour-years-cover.md
@@ -0,0 +1,14 @@
+---
+"@remix-run/dev": patch
+---
+
+Stabilize the `future.v3_routeConfig` future flag, replacing `future.unstable_routeConfig`. This enables support for `routes.ts` to assist with the migration to React Router v7.
+
+Note that if you had already enabled the `future.unstable_routeConfig` flag, 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,29 @@ function handleBrowserRequest(/* ... */) {
 }
 ```
 
-## unstable_routeConfig
+## v3_lazyRouteDiscovery
+
+**Background**
+
+With this flag, Remix no longer sends the full route manifest up to the client on initial load. Instead, Remix only sends the server-rendered routes up in the manifest and then fetches the remaining routes as the user navigated around the application. Additional details are available in the [docs][lazy-route-discovery] and the [blog post][lazy-route-discovery-blog-post]
+
+👉 **Enable the Flag**
+
+```ts filename=vite.config.ts
+remix({
+  future: {
+    v3_lazyRouteDiscovery: true,
+  },
+});
+```
+
+**Update your Code**
+
+You shouldn't need to make any changes to your application code for this feature to work.
+
+You may find some usage for the new [`<Link discover>`][discover-prop] API if you wish to disable eager route discovery on certain links.
+
+## v3_routeConfig
 
 <docs-warning>
 
@@ -521,7 +543,7 @@ This flag requires the [Vite plugin][vite-plugin].
 
 Config-based routing is the new default in React Router v7, configured via the `routes.ts` file in the app directory. Support for `routes.ts` and its related APIs in Remix are designed as a migration path to help minimize the number of changes required when moving your Remix project over to React Router v7. While some new packages have been introduced within the `@remix-run` scope, these new packages only exist to keep the code in `routes.ts` as similar as possible to the equivalent code for React Router v7.
 
-When the `unstable_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. If you prefer to keep using Remix's file-based routing we cover how to enable it in `routes.ts` below.
+When the `v3_routeConfig` future flag is enabled, Remix's built-in file system routing will be disabled and your project will opted into React Router v7's config-based routing. To opt back in to file system routing, this can be explicitly configured within `routes.ts` as we'll cover below.
 
 **Update your code**
 
@@ -532,7 +554,7 @@ To migrate Remix's file system routing and route config to the equivalent setup
 ```ts filename=vite.config.ts
 remix({
   future: {
-    unstable_routeConfig: true,
+    v3_routeConfig: true,
   },
 });
 ```
@@ -556,7 +578,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.
@@ -575,7 +597,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`**
@@ -601,9 +623,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:
@@ -613,18 +635,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:
@@ -637,14 +657,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.
@@ -655,13 +675,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;
 ```
 
 ## Deprecations

diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -43,7 +43,7 @@ export const viteConfig = {
       export default {
         ${await viteConfig.server(args)}
         plugins: [remix(${
-          args.routeConfig ? "{ future: { unstable_routeConfig: true } }" : ""
+          args.routeConfig ? "{ future: { v3_routeConfig: true } }" : ""
         })]
       }
     `;

diff --git a/integration/vite-fs-routes-test.ts b/integration/vite-fs-routes-test.ts
@@ -24,7 +24,7 @@ test.describe("fs-routes", () => {
 
           export default defineConfig({
             plugins: [remix({
-              future: { unstable_routeConfig: true },
+              future: { v3_routeConfig: true },
             })],
           });
         `,
@@ -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";
@@ -257,17 +257,17 @@ test.describe("emits warnings for route conflicts", async () => {
 
           export default defineConfig({
             plugins: [remix({
-              future: { unstable_routeConfig: true },
+              future: { v3_routeConfig: true },
             })],
           });
         `,
         "app/routes.ts": js`
           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 () {
@@ -331,17 +331,17 @@ test.describe("", () => {
 
           export default defineConfig({
             plugins: [remix({
-              future: { unstable_routeConfig: true },
+              future: { v3_routeConfig: true },
             })],
           });
         `,
         "app/routes.ts": js`
           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``,
@@ -380,17 +380,17 @@ test.describe("pathless routes and route collisions", () => {
 
           export default defineConfig({
             plugins: [remix({
-              future: { unstable_routeConfig: true },
+              future: { v3_routeConfig: true },
             })],
           });
         `,
         "app/routes.ts": js`
           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
@@ -43,7 +43,7 @@ test.describe("route config", () => {
 
         export default {
           plugins: [remix({
-            future: { unstable_routeConfig: true },
+            future: { v3_routeConfig: true },
           })]
         }
       `,
@@ -64,12 +64,12 @@ test.describe("route config", () => {
 
         export default {
           plugins: [remix({
-            future: { unstable_routeConfig: true },
+            future: { v3_routeConfig: true },
             routes: () => {},
           })]
         }
       `,
-      "app/routes.ts": `export const routes = [];`,
+      "app/routes.ts": `export default [];`,
     });
     let buildResult = viteBuild({ cwd });
     expect(buildResult.status).toBe(1);
@@ -88,12 +88,12 @@ test.describe("route config", () => {
         export default {
           ${await viteConfig.server({ port })}
           plugins: [remix({
-            future: { unstable_routeConfig: true },
+            future: { v3_routeConfig: true },
             routes: () => {},
           })]
         }
       `,
-      "app/routes.ts": `export const routes = [];`,
+      "app/routes.ts": `export default [];`,
     });
     let devError: Error | undefined;
     try {
@@ -113,7 +113,7 @@ test.describe("route config", () => {
 
         export default {
           plugins: [remix({
-            future: { unstable_routeConfig: true },
+            future: { v3_routeConfig: true },
           })]
         }
       `,
@@ -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/__tests__/readConfig-test.ts b/packages/remix-dev/__tests__/readConfig-test.ts
@@ -37,10 +37,10 @@ describe("readConfig", () => {
         "entryServerFilePath": Any<String>,
         "future": {
           "unstable_optimizeDeps": false,
-          "unstable_routeConfig": false,
           "v3_fetcherPersist": false,
           "v3_lazyRouteDiscovery": false,
           "v3_relativeSplatPath": false,
+          "v3_routeConfig": false,
           "v3_singleFetch": false,
           "v3_throwAbortReason": false,
         },