Version 1.1.2

Author: AlemTuzlak

README.md

@@ -17,6 +17,7 @@ The **Active Page** tab in Remix Development Tools allows you to gain insights i
 - **URL Parameters**: Easily view and analyze the URL parameters associated with the current page.
 - **Server Responses**: Inspect and review the server responses received by the application for the current page.
 - **Loader Data**: Monitor and track the loader data used by the application during page rendering.
+- **Outlet boundaries** Activate the **Show Route Boundaries** option to see each Outlet and route boundaries by coloring the background.
 
 ### Routes Tab
 
@@ -86,16 +87,20 @@ The `RemixDevTools` component accepts the following props:
 
 - `port`: The port number to use for the Remix Development Tools connection to Remix Forge. If you want to change the port and connect to your Remix Forge VS code extension you need to change the port in VS Code too. Defaults to `3003`.
 - `defaultOpen`: Whether to open the Remix Development Tools by default. Defaults to `false`.
+- `position`: The position of the Remix Development Tools trigger. Defaults to `bottom-right`.
+- `requireUrlFlag`: Requires rdt=true to be present in the URL search to open the Remix Development Tools. Defaults to `false`.
+- `showRouteBoundaries`: Allows you to see each Outlet and route boundaries by coloring the background. Defaults to `false`.
 
 ## Contributing
 
 Contributions to Remix Development Tools are welcome! To contribute, please follow these guidelines:
 
 1. Fork the repository and clone it locally.
 2. Create a new branch for your feature or bug fix.
-3. Run `npm install` to get your development environment set up.
+3. Run `npm run setup` to get your development environment set up.
 4. Run `npm run dev` to start the development server.
 5. Implement your changes, adhering to the existing code style and best practices.
+5. Please add tests for any new features or bug fixes.
 6. Commit and push your changes to your forked repository.
 7. Open a pull request, providing a clear description of your changes and their purpose.
 
@@ -114,3 +119,5 @@ Remix Development Tools was inspired by the Remix framework and aims to enhance
 ---
 
 Feel free to explore Remix Development Tools, and we hope it significantly improves your Remix development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!
+
+ 

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "license": "MIT",
   "keywords": [
     "remix",

src/RemixDevTools/RemixDevTools.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { Logo } from "./components/Logo";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { RDTContextProvider } from "./context/RDTContext";
 import { tabs } from "./tabs";
 import { useTimelineHandler } from "./hooks/useTimelineHandler";
@@ -10,16 +10,11 @@ import { useGetSocket } from "./hooks/useGetSocket";
 import { Radio } from "lucide-react";
 import { useResize } from "./hooks/useResize";
 import { useLocation } from "@remix-run/react";
+import { useOutletAugment } from "./hooks/useOutletAugment";
 
-interface Props {
-  position:
-    | "bottom-right"
-    | "bottom-left"
-    | "top-right"
-    | "top-left"
-    | "middle-right"
-    | "middle-left";
+interface Props extends RemixDevToolsProps {
   defaultOpen: boolean;
+  position: Exclude<RemixDevToolsProps["position"], undefined>;
 }
 
 const RemixDevTools = ({ defaultOpen, position }: Props) => {
@@ -157,23 +152,33 @@ interface RemixDevToolsProps {
   // Whether the dev tools require a url flag to be shown
   requireUrlFlag?: boolean;
   // Set the position of the trigger button
-  position?: Props["position"];
+  position?:
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "middle-right"
+    | "middle-left";
+  // Show route boundaries when you hover over a route in active page tab
+  showRouteBoundaries?: boolean;
 }
 
 const RDTWithContext = ({
   port = 3003,
   defaultOpen = false,
   requireUrlFlag,
+  showRouteBoundaries = false,
   position = "bottom-right",
 }: RemixDevToolsProps) => {
   const hydrated = useHydrated();
   const isDevelopment = isDev();
   const url = useLocation().search;
+  useOutletAugment(showRouteBoundaries);
 
   if (!hydrated || !isDevelopment) return null;
   if (requireUrlFlag && !url.includes("rdt=true")) return null;
   return (
-    <RDTContextProvider port={port}>
+    <RDTContextProvider showRouteBoundaries={showRouteBoundaries} port={port}>
       <RemixDevTools position={position} defaultOpen={defaultOpen} />
     </RDTContextProvider>
   );

src/RemixDevTools/context/RDTContext.tsx

@@ -17,17 +17,23 @@ RDTContext.displayName = "RDTContext";
 interface ContextProps {
   children: React.ReactNode;
   port: number;
+  showRouteBoundaries?: boolean;
 }
 
 export const REMIX_DEV_TOOLS = "remixDevTools";
 
-export const RDTContextProvider = ({ children, port }: ContextProps) => {
+export const RDTContextProvider = ({
+  children,
+  port,
+  showRouteBoundaries,
+}: ContextProps) => {
   const existingState = sessionStorage.getItem(REMIX_DEV_TOOLS);
   const settings = localStorage.getItem(REMIX_DEV_TOOLS);
 
   const [state, dispatch] = useReducer(rdtReducer, {
     ...initialState,
     ...(existingState ? JSON.parse(existingState) : {}),
+    showRouteBoundaries,
     settings: settings
       ? { ...initialState.settings, ...JSON.parse(settings), port }
       : { ...initialState.settings, port },

src/RemixDevTools/context/rdtReducer.ts

@@ -5,6 +5,7 @@ export type RouteWildcards = Record<string, Record<string, string> | undefined>;
 
 export type RemixDevToolsState = {
   timeline: TimelineEvent[];
+  showRouteBoundaries?: boolean;
   settings: {
     routeWildcards: RouteWildcards;
     activeTab: Tabs;
@@ -16,6 +17,7 @@ export type RemixDevToolsState = {
 
 export const initialState: RemixDevToolsState = {
   timeline: [],
+  showRouteBoundaries: false,
   settings: {
     routeWildcards: {},
     activeTab: "timeline",

src/RemixDevTools/context/useRDTContext.ts

@@ -10,7 +10,7 @@ const useRDTContext = () => {
     throw new Error("useRDTContext must be used within a RDTContextProvider");
   }
   const { state, dispatch } = context;
-  const { timeline, settings } = state;
+  const { timeline, settings, showRouteBoundaries } = state;
   const { activeTab, shouldConnectWithForge, routeWildcards, port, height } =
     settings;
 
@@ -76,6 +76,7 @@ const useRDTContext = () => {
     routeWildcards,
     port,
     height,
+    showRouteBoundaries,
     setHeight,
     setRouteWildcards,
   };

src/RemixDevTools/hooks/useOutletAugment.tsx

@@ -0,0 +1,46 @@
+import { useSubmit, useLocation } from "@remix-run/react";
+import clsx from "clsx";
+import { useEffect } from "react";
+
+const isHooked = Symbol("isHooked");
+export function useOutletAugment(shouldAugment: boolean) {
+  const submit = useSubmit();
+  const location = useLocation();
+  useEffect(() => {
+    if (!shouldAugment) return;
+    if (window.__remixRouteModules[isHooked as any]) return;
+
+    window.__remixRouteModules = new Proxy(window.__remixRouteModules, {
+      get: function (target, property) {
+        if (property === isHooked) return target[property as any];
+        if (property === "root") return target[property];
+        const value = target[property as any];
+
+        if (value?.default && value.default.name !== "hooked") {
+          return {
+            ...value,
+            default: function hooked() {
+              return (
+                <>
+                  <div
+                    className={clsx(
+                      "rdt-invisible rdt-absolute rdt-hidden rdt-h-0 rdt-w-0",
+                      property as string
+                    )}
+                  />
+                  <value.default />
+                </>
+              );
+            },
+          };
+        }
+
+        return value;
+      },
+    });
+
+    submit(null, { method: "get", action: location.pathname });
+    // We only want to run this once regardless of the dependencies and we want it to run after the first render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/RemixDevTools/tabs/PageTab.tsx

@@ -6,7 +6,8 @@ import { useGetSocket } from "../hooks/useGetSocket";
 import { Tag } from "../components/Tag";
 import { VsCodeButton } from "../components/VScodeButton";
 import { useMemo } from "react";
-import { isLayoutRoute } from "../utils/misc";
+import { isLayoutRoute } from "../utils/routing";
+import { useRDTContext } from "../context/useRDTContext";
 
 export const ROUTE_COLORS: Record<string, string> = {
   ROUTE: "rdt-bg-green-500 rdt-text-white",
@@ -45,7 +46,26 @@ const PageTab = () => {
   const reversed = useMemo(() => routes.reverse(), [routes]);
   const { revalidate, state } = useRevalidator();
   const { isConnected, sendJsonMessage } = useGetSocket();
+  const { showRouteBoundaries } = useRDTContext();
+  const onHover = (path: string, type: "enter" | "leave") => {
+    if (!showRouteBoundaries) return;
+    const classes =
+      "rdt-bg-green-100 rdt-transition-all rdt-rounded rdt-apply-tw rdt-bg-gradient-to-r rdt-from-cyan-500/50 rdt-to-blue-500/50";
+    const isRoot = path === "root";
+    const elements = isRoot
+      ? document.getElementsByTagName("body")
+      : document.getElementsByClassName(path);
 
+    const element = elements.item(elements.length - 1);
+
+    if (element) {
+      // Root has no outlet so we need to use the body, otherwise we get the outlet that is the next sibling of the element
+      const outlet = isRoot ? element : (element.nextSibling as HTMLElement);
+      for (const c of classes.split(" ")) {
+        outlet.classList[type === "enter" ? "add" : "remove"](c);
+      }
+    }
+  };
   return (
     <div className="rdt-relative rdt-flex rdt-h-full rdt-flex-col rdt-overflow-y-auto rdt-p-6 rdt-px-6">
       <button
@@ -73,7 +93,12 @@ const PageTab = () => {
           const isLayout = isLayoutRoute(entryRoute);
 
           return (
-            <li key={route.id} className="rdt-mb-8 rdt-ml-8">
+            <li
+              onMouseEnter={() => onHover(route.id, "enter")}
+              onMouseLeave={() => onHover(route.id, "leave")}
+              key={route.id}
+              className="rdt-mb-8 rdt-ml-8"
+            >
               <span className="rdt-absolute -rdt-left-3 rdt-mt-2 rdt-flex rdt-h-6 rdt-w-6 rdt-items-center rdt-justify-center rdt-rounded-full rdt-bg-blue-900 rdt-ring-4 rdt-ring-blue-900  ">
                 <CornerDownRight />
               </span>

src/RemixDevTools/tabs/RoutesTab.tsx

@@ -13,7 +13,7 @@ import { useRDTContext } from "../context/useRDTContext";
 import { Input } from "../components/Input";
 import { NewRouteForm } from "../components/NewRouteForm";
 import { useGetSocket } from "../hooks/useGetSocket";
-import { isLeafRoute } from "../utils/misc";
+import { isLeafRoute } from "../utils/routing";
 
 const RoutesTab = () => {
   const { routeWildcards, setRouteWildcards } = useRDTContext();