diff --git a/src/RemixDevTools/tabs/PageTab.tsx b/src/RemixDevTools/tabs/PageTab.tsx index 155542e..8f9b837 100644 --- a/src/RemixDevTools/tabs/PageTab.tsx +++ b/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 = { 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 (
  • diff --git a/src/RemixDevTools/tabs/RoutesTab.tsx b/src/RemixDevTools/tabs/RoutesTab.tsx index 73e601d..6a31035 100644 --- a/src/RemixDevTools/tabs/RoutesTab.tsx +++ b/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(); diff --git a/src/RemixDevTools/utils/misc.ts b/src/RemixDevTools/utils/misc.ts new file mode 100644 index 0000000..b87bd27 --- /dev/null +++ b/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"; +} diff --git a/src/remix-app-for-testing/app/routes/other._index.tsx b/src/remix-app-for-testing/app/routes/other._index.tsx new file mode 100644 index 0000000..617bbf0 --- /dev/null +++ b/src/remix-app-for-testing/app/routes/other._index.tsx @@ -0,0 +1,3 @@ +export default function OtherIndexRoute() { + return
    Other Home
    +} \ No newline at end of file diff --git a/src/remix-app-for-testing/app/routes/other.page.tsx b/src/remix-app-for-testing/app/routes/other.page.tsx new file mode 100644 index 0000000..1aa5ca6 --- /dev/null +++ b/src/remix-app-for-testing/app/routes/other.page.tsx @@ -0,0 +1,3 @@ +export default function OtherPageRoute() { + return
    Other Page
    +} \ No newline at end of file diff --git a/src/remix-app-for-testing/app/routes/other.tsx b/src/remix-app-for-testing/app/routes/other.tsx new file mode 100644 index 0000000..1b1a7ea --- /dev/null +++ b/src/remix-app-for-testing/app/routes/other.tsx @@ -0,0 +1,8 @@ +import { Outlet } from "@remix-run/react"; + +export default function OtherLayout() { + return
    +

    Other Layout

    + +
    +} \ No newline at end of file