feat(remix-dev): flat routes

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

@@ -338,15 +338,6 @@ describe("flatRoutes", () => {
           path: ".",
         },
       ],
-      // TODO: talk with @pcattori
-      // [
-      //   "routes/about.[*].tsx",
-      //   {
-      //     id: "routes/about.[*]",
-      //     parentId: "routes/about",
-      //     path: "*",
-      //   },
-      // ],
       [
         "routes/about.[.[.*].].tsx",
         {
@@ -570,10 +561,12 @@ describe("flatRoutes", () => {
       ],
     ];
 
-    let files = testFiles.map(([file, route]) => {
-      let filepath = file.split("/").join(path.sep);
-      return [filepath, { ...route, file: filepath }];
-    });
+    let files: [string, Omit<ConfigRoute, "file">][] = testFiles.map(
+      ([file, route]) => {
+        let filepath = file.split("/").join(path.sep);
+        return [filepath, { ...route, file: filepath }];
+      }
+    );
 
     let routeManifest = flatRoutesUniversal(
       APP_DIR,
@@ -604,4 +597,26 @@ describe("flatRoutes", () => {
       `Route segment cannot contain a slash: .lol?/what? (in route ($[$dollabills]).([.]lol)[/](what)/([$]).$)`
     );
   });
+
+  test("should error when using `*` in an escaped route segment", () => {
+    let files: string[] = ["routes/about.[*].tsx"];
+
+    expect(() =>
+      flatRoutesUniversal(
+        APP_DIR,
+        files.map((file) => path.join(APP_DIR, file))
+      )
+    ).toThrowError("Escaped route segment cannot contain `*`");
+  });
+
+  test("should error when using `:` in an escaped route segment", () => {
+    let files: string[] = ["routes/about.[:name].tsx"];
+
+    expect(() =>
+      flatRoutesUniversal(
+        APP_DIR,
+        files.map((file) => path.join(APP_DIR, file))
+      )
+    ).toThrowError("Escaped route segment cannot contain `:`");
+  });
 });

packages/remix-dev/config/flat-routes.ts

@@ -121,10 +121,13 @@ export function getRouteSegments(routeId: string) {
   let routeSegments: string[] = [];
   let index = 0;
   let routeSegment = "";
+  let rawRouteSegment = "";
   let state: State = "NORMAL";
   let pushRouteSegment = (routeSegment: string) => {
     if (!routeSegment) return;
-    if (routeSegment.includes("/")) {
+    console.log({ routeSegment, rawRouteSegment });
+
+    if (rawRouteSegment.includes("/")) {
       throw new Error(
         `Route segment cannot contain a slash: ${routeSegment} (in route ${routeId})`
       );
@@ -141,6 +144,7 @@ export function getRouteSegments(routeId: string) {
         if (isSegmentSeparator(char)) {
           pushRouteSegment(routeSegment);
           routeSegment = "";
+          rawRouteSegment = "";
           state = "NORMAL";
           break;
         }
@@ -155,25 +159,40 @@ export function getRouteSegments(routeId: string) {
         if (!routeSegment && char == paramPrefixChar) {
           if (index === routeId.length) {
             routeSegment += "*";
+            rawRouteSegment += char;
           } else {
             routeSegment += ":";
+            rawRouteSegment += char;
           }
           break;
         }
+
         routeSegment += char;
+        rawRouteSegment += char;
         break;
       }
       case "ESCAPE": {
         if (char === escapeEnd) {
+          console.log({ rawRouteSegment });
+
+          if (rawRouteSegment === "*") {
+            throw new Error("Escaped route segment cannot contain `*`");
+          }
+          if (rawRouteSegment.includes(":")) {
+            throw new Error("Escaped route segment cannot contain `:`");
+          }
           state = "NORMAL";
           break;
         }
+
         routeSegment += char;
+        rawRouteSegment += char;
         break;
       }
       case "OPTIONAL": {
         if (char === optionalEnd) {
           routeSegment += "?";
+          rawRouteSegment += "?";
           state = "NORMAL";
           break;
         }
@@ -186,21 +205,26 @@ export function getRouteSegments(routeId: string) {
         if (!routeSegment && char === paramPrefixChar) {
           if (index === routeId.length) {
             routeSegment += "*";
+            rawRouteSegment += char;
           } else {
             routeSegment += ":";
+            rawRouteSegment += char;
           }
           break;
         }
 
         routeSegment += char;
+        rawRouteSegment += char;
         break;
       }
       case "OPTIONAL_ESCAPE": {
         if (char === escapeEnd) {
           state = "OPTIONAL";
           break;
         }
+
         routeSegment += char;
+        rawRouteSegment += char;
         break;
       }
     }