feat(remix-dev): flat routes

.changeset/eight-forks-collect.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Add flat routes convention

packages/remix-dev/__tests__/flat-routes-test.ts

@@ -0,0 +1,103 @@
+import { pathFromRouteId } from "../config/flat-routes";
+
+describe("createRoutePath", () => {
+  describe("creates proper route paths", () => {
+    let tests: [string, string | undefined][] = [
+      ["_auth.forgot-password", "forgot-password"],
+      ["_auth.login", "login"],
+      ["_auth.reset-password", "reset-password"],
+      ["_auth.signup", "signup"],
+      ["_auth", undefined],
+      ["_landing.about", "about"],
+      ["_landing._index", undefined],
+      ["_landing.index", "index"],
+      ["_landing", undefined],
+      ["app.calendar.$day", "app/calendar/:day"],
+      ["app.calendar._index", "app/calendar"],
+      ["app.projects.$id", "app/projects/:id"],
+      ["app.projects", "app/projects"],
+      ["app", "app"],
+      ["app_.projects.$id.roadmap", "app/projects/:id/roadmap"],
+      ["app_.projects.$id.roadmap[.pdf]", "app/projects/:id/roadmap.pdf"],
+
+      ["routes/$", "routes/*"],
+      ["routes/sub/$", "routes/sub/*"],
+      ["routes.sub/$", "routes/sub/*"],
+      ["routes/$slug", "routes/:slug"],
+      ["routes/sub/$slug", "routes/sub/:slug"],
+      ["routes.sub/$slug", "routes/sub/:slug"],
+      ["$", "*"],
+      ["nested/$", "nested/*"],
+      ["flat.$", "flat/*"],
+      ["$slug", ":slug"],
+      ["nested/$slug", "nested/:slug"],
+      ["flat.$slug", "flat/:slug"],
+      ["flat.sub", "flat/sub"],
+      ["nested/_index", "nested"],
+      ["flat._index", "flat"],
+      ["_index", undefined],
+      ["_layout/_index", undefined],
+      ["_layout/test", "test"],
+      ["_layout.test", "test"],
+      ["_layout/$slug", ":slug"],
+      ["nested/_layout/$slug", "nested/:slug"],
+      ["$slug[.]json", ":slug.json"],
+      ["sub/[sitemap.xml]", "sub/sitemap.xml"],
+      ["posts/$slug/[image.jpg]", "posts/:slug/image.jpg"],
+      ["$[$dollabills].[.]lol[/]what/[$].$", ":$dollabills/.lol/what/$/*"],
+      ["sub.[[]", "sub/["],
+      ["sub.]", "sub/]"],
+      ["sub.[[]]", "sub/[]"],
+      ["sub.[[]", "sub/["],
+      ["beef]", "beef]"],
+      ["[_index]", "_index"],
+      ["test/inde[x]", "test/index"],
+      ["[i]ndex/[[].[[]]", "index/[/[]"],
+
+      // Optional segment routes
+      ["(routes)/$", "routes?/*"],
+      ["(routes)/(sub)/$", "routes?/sub?/*"],
+      ["(routes).(sub)/$", "routes?/sub?/*"],
+      ["(routes)/($slug)", "routes?/:slug?"],
+      ["(routes)/sub/($slug)", "routes?/sub/:slug?"],
+      ["(routes).sub/($slug)", "routes?/sub/:slug?"],
+      ["(nested)/$", "nested?/*"],
+      ["(flat).$", "flat?/*"],
+      ["($slug)", ":slug?"],
+      ["(nested)/($slug)", "nested?/:slug?"],
+      ["(flat).($slug)", "flat?/:slug?"],
+      ["flat.(sub)", "flat/sub?"],
+      ["_layout/(test)", "test?"],
+      ["_layout.(test)", "test?"],
+      ["_layout/($slug)", ":slug?"],
+      ["(nested)/_layout/($slug)", "nested?/:slug?"],
+      ["($slug[.]json)", ":slug.json?"],
+      ["(sub)/([sitemap.xml])", "sub?/sitemap.xml?"],
+      ["(sub)/[(sitemap.xml)]", "sub?/(sitemap.xml)"],
+      ["(posts)/($slug)/([image.jpg])", "posts?/:slug?/image.jpg?"],
+      [
+        "($[$dollabills]).([.]lol)[/](what)/([$]).$",
+        ":$dollabills?/.lol)/(what?/$?/*",
+      ],
+      [
+        "($[$dollabills]).([.]lol)/(what)/([$]).($up)",
+        ":$dollabills?/.lol?/what?/$?/:up?",
+      ],
+      ["(sub).([[])", "sub?/[?"],
+      ["(sub).(])", "sub?/]?"],
+      ["(sub).([[]])", "sub?/[]?"],
+      ["(sub).([[])", "sub?/[?"],
+      ["(beef])", "beef]?"],
+      ["([index])", "index?"],
+      ["(test)/(inde[x])", "test?/index?"],
+      ["([i]ndex)/([[]).([[]])", "index?/[?/[]?"],
+    ];
+
+    for (let [input, expected] of tests) {
+      it(`"${input}" -> "${expected}"`, () => {
+        let result = pathFromRouteId(input, "");
+        expect(result).toBe(expected);
+      });
+    }
+  });
+});

packages/remix-dev/__tests__/readConfig-test.ts

@@ -24,6 +24,7 @@ describe("readConfig", () => {
         tsconfigPath: expect.any(String),
         future: {
           v2_meta: expect.any(Boolean),
+          v2_routeConvention: expect.any(Boolean),
         },
       },
       `
@@ -37,6 +38,7 @@ describe("readConfig", () => {
         "entryServerFile": "entry.server.tsx",
         "future": Object {
           "v2_meta": Any<Boolean>,
+          "v2_routeConvention": Any<Boolean>,
         },
         "mdx": undefined,
         "publicPath": "/build/",

packages/remix-dev/config.ts

@@ -9,6 +9,7 @@ import { defineConventionalRoutes } from "./config/routesConvention";
 import { ServerMode, isValidServerMode } from "./config/serverModes";
 import { serverBuildVirtualModule } from "./compiler/virtualModules";
 import { writeConfigDefaults } from "./compiler/utils/tsconfig/write-config-defaults";
+import { flatRoutes } from "./config/flat-routes";
 
 export interface RemixMdxConfig {
   rehypePlugins?: any[];
@@ -33,6 +34,7 @@ export type ServerPlatform = "node" | "neutral";
 
 interface FutureConfig {
   v2_meta: boolean;
+  v2_routeConvention: boolean;
 }
 
 /**
@@ -426,8 +428,13 @@ export async function readConfig(
   let routes: RouteManifest = {
     root: { path: "", id: "root", file: rootRouteFile },
   };
+
+  let routesConvention = appConfig.future?.v2_routeConvention
+    ? flatRoutes
+    : defineConventionalRoutes;
+
   if (fse.existsSync(path.resolve(appDirectory, "routes"))) {
-    let conventionalRoutes = defineConventionalRoutes(
+    let conventionalRoutes = routesConvention(
       appDirectory,
       appConfig.ignoredRouteFiles
     );
@@ -482,6 +489,7 @@ export async function readConfig(
 
   let future = {
     v2_meta: appConfig.future?.v2_meta === true,
+    v2_routeConvention: appConfig.future?.v2_routeConvention === true,
   };
 
   return {