Support custom routing (#18)

* Add nested routes sample.

* Fix identifying layout routes.

* fix: don't relay on route ordering, that index route comes first.

Author: lean-dev

src/RemixDevTools/tabs/PageTab.tsx

@@ -6,6 +6,7 @@ import { useGetSocket } from "../hooks/useGetSocket";
 import { Tag } from "../components/Tag";
 import { VsCodeButton } from "../components/VScodeButton";
 import { useMemo } from "react";
+import { isLayoutRoute } from "../utils/misc";
 
 export const ROUTE_COLORS: Record<string, string> = {
   ROUTE: "rdt-bg-green-500 rdt-text-white",
@@ -67,12 +68,9 @@ const PageTab = () => {
           const originalData = getOriginalData(route.data);
 
           const isRoot = route.id === "root";
-          const lastPart = route.id.split("/").pop();
-          const isLayout =
-            lastPart?.split(".")?.length === 1 &&
-            (lastPart?.startsWith("_") || lastPart?.startsWith("__")) &&
-            lastPart !== "_index" &&
-            "index";
+
+          const entryRoute = __remixManifest.routes[route.id];
+          const isLayout = isLayoutRoute(entryRoute);
 
           return (
             <li key={route.id} className="rdt-mb-8 rdt-ml-8">

src/RemixDevTools/tabs/RoutesTab.tsx

@@ -13,16 +13,7 @@ import { useRDTContext } from "../context/useRDTContext";
 import { Input } from "../components/Input";
 import { NewRouteForm } from "../components/NewRouteForm";
 import { useGetSocket } from "../hooks/useGetSocket";
-
-const isLayout = (route: EntryRoute & { route: string }) => {
-  const rId = route.id.replace("routes/", "");
-  const v2Layout =
-    rId.startsWith("_") &&
-    !rId.split(".")[0].endsWith("index") &&
-    rId.split(".").length === 1;
-  const v1Layout = rId.startsWith("__");
-  return v1Layout || v2Layout;
-};
+import { isLeafRoute } from "../utils/misc";
 
 const RoutesTab = () => {
   const { routeWildcards, setRouteWildcards } = useRDTContext();
@@ -35,7 +26,7 @@ const RoutesTab = () => {
           route: convertRemixPathToUrl(window.__remixManifest.routes, route),
         };
       })
-      .filter((route) => !isLayout(route) && route.id !== "root")
+      .filter((route) => isLeafRoute(route))
   );
   const navigate = useNavigate();
 

src/RemixDevTools/utils/misc.ts

@@ -0,0 +1,33 @@
+import { EntryRoute } from "@remix-run/react/dist/routes";
+
+type RouteType = "ROOT" | "LAYOUT" | "ROUTE";
+
+export function getRouteType(route: EntryRoute) {
+  let routeType: RouteType = "ROUTE";
+
+  if (route.id === "root") {
+    routeType = "ROOT";
+  } else if (route.index) {
+    routeType = "ROUTE";
+  } else if (!route.path) {
+    // Pathless layout route
+    routeType = "LAYOUT";
+  } else {
+    // Find an index route with parentId set to this route
+    const childIndexRoute = Object.values(window.__remixManifest.routes).find(
+      (r) => r.parentId === route.id && r.index
+    );
+
+    routeType = childIndexRoute ? "LAYOUT" : "ROUTE";
+  }
+
+  return routeType;
+}
+
+export function isLayoutRoute(route: EntryRoute) {
+  return getRouteType(route) === "LAYOUT";
+}
+
+export function isLeafRoute(route: EntryRoute) {
+  return getRouteType(route) === "ROUTE";
+}

src/remix-app-for-testing/app/routes/other._index.tsx

@@ -0,0 +1,3 @@
+export default function OtherIndexRoute() {
+    return <div>Other Home</div>
+}

src/remix-app-for-testing/app/routes/other.page.tsx

@@ -0,0 +1,3 @@
+export default function OtherPageRoute() {
+    return <div>Other Page</div>
+}

src/remix-app-for-testing/app/routes/other.tsx

@@ -0,0 +1,8 @@
+import { Outlet } from "@remix-run/react";
+
+export default function OtherLayout() {
+    return <div>
+        <h2>Other Layout</h2>
+        <Outlet />
+    </div>
+}