v1.4.0 (#31)

Author: AlemTuzlak

README.md

@@ -100,10 +100,101 @@ The `RemixDevTools` component accepts the following props:
 - `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`.
+- [**DEPRECATED**] `showRouteBoundaries`:This flag has been deprecated in favor of adding route boundaries. Please see the section below for more information.
 - `hideUntilHover`: Allows you to hide the trigger until you hover over it. Defaults to `false`.
 - `additionalTabs`: Allows you to provide additional tabs to the Remix Development Tools. Defaults to `[]`.
 
+## Adding route boundaries
+
+The `showErrorBoundaries` flag has been deprecated in favor of this method. Please use it instead.
+
+In order to add Route boundaries to your project you need to do the following two things:
+
+1. Modify your `entry.server.ts` to add the following code:
+
+```diff
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+-  return new Promise((resolve, reject) => {
++  return new Promise(async (resolve, reject) => {
+    let shellRendered = false;
++    const context = process.env.NODE_ENV === "development" ? await import("remix-development-tools").then(({ initRouteBoundariesServer }) => initRouteBoundariesServer(remixContext)) : remixContext;
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+-        context={remixContext}
++        context={context}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+```
+
+2. Modify your `entry.client.tsx` to add the following code:
+
+```diff
++ if(process.env.NODE_ENV === "development") {
++   import("remix-development-tools").then(({ initRouteBoundariesClient }) => {
++     initRouteBoundariesClient();
++     startTransition(() => {
++       hydrateRoot(
++         document,
++         <StrictMode>
++           <RemixBrowser />
++         </StrictMode>
++       );
++     });
++     
++   }); 
++ } else {
+   startTransition(() => {
+     hydrateRoot(
+       document,
+       <StrictMode>
+         <RemixBrowser />
+       </StrictMode>
+     );
+   }); 
++ }
+``` 
+3. You are good to go. Now you can see the route boundaries in your project when you hover each route.
+
 ## Plugins
 
 Writing plugins for Remix Development Tools is easy. You can write a plugin that adds a new tab to the Remix Development Tools in the following way:

package-lock.json

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

package.json

@@ -5,7 +5,6 @@ import { useTimelineHandler } from "./hooks/useTimelineHandler";
 import { useRDTContext } from "./context/useRDTContext";
 import { isDev } from "./utils/isDev";
 import { useLocation } from "@remix-run/react";
-import { useOutletAugment } from "./hooks/useOutletAugment";
 import { Trigger } from "./components/Trigger";
 import { MainPanel } from "./layout/MainPanel";
 import { Tabs } from "./layout/Tabs";
@@ -15,17 +14,14 @@ interface Props extends RemixDevToolsProps {
   defaultOpen: boolean;
   position: Exclude<RemixDevToolsProps["position"], undefined>;
   hideUntilHover: boolean;
-  showRouteBoundaries: boolean;
 }
 
 const RemixDevTools = ({
   defaultOpen,
   position,
   additionalTabs,
   hideUntilHover,
-  showRouteBoundaries,
 }: Props) => {
-  useOutletAugment(showRouteBoundaries);
   useTimelineHandler();
   const { persistOpen } = useRDTContext();
   const [isOpen, setIsOpen] = useState(defaultOpen || persistOpen);
@@ -49,7 +45,6 @@ const RemixDevTools = ({
     </div>
   );
 };
-
 let hydrating = true;
 
 function useHydrated() {
@@ -78,8 +73,6 @@ export interface RemixDevToolsProps {
     | "top-left"
     | "middle-right"
     | "middle-left";
-  // Show route boundaries when you hover over a route in active page tab
-  showRouteBoundaries?: boolean;
   // Additional tabs to add to the dev tools
   additionalTabs?: Tab[];
   // Whether the dev tools trigger should hide until hovered
@@ -90,7 +83,6 @@ const RDTWithContext = ({
   port = 3003,
   defaultOpen = false,
   requireUrlFlag,
-  showRouteBoundaries = false,
   position = "bottom-right",
   hideUntilHover = false,
   additionalTabs,
@@ -101,14 +93,14 @@ const RDTWithContext = ({
 
   if (!hydrated || !isDevelopment) return null;
   if (requireUrlFlag && !url.includes("rdt=true")) return null;
+
   return (
-    <RDTContextProvider showRouteBoundaries={showRouteBoundaries} port={port}>
+    <RDTContextProvider port={port}>
       <RemixDevTools
         defaultOpen={defaultOpen}
         position={position}
         additionalTabs={additionalTabs}
         hideUntilHover={hideUntilHover}
-        showRouteBoundaries={showRouteBoundaries}
       />
     </RDTContextProvider>
   );

src/RemixDevTools/RemixDevTools.tsx

@@ -22,18 +22,13 @@ interface ContextProps {
 
 export const REMIX_DEV_TOOLS = "remixDevTools";
 
-export const RDTContextProvider = ({
-  children,
-  port,
-  showRouteBoundaries,
-}: ContextProps) => {
+export const RDTContextProvider = ({ children, port }: 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/RDTContext.tsx

@@ -6,7 +6,6 @@ export type RouteWildcards = Record<string, Record<string, string> | undefined>;
 
 export type RemixDevToolsState = {
   timeline: TimelineEvent[];
-  showRouteBoundaries?: boolean;
   terminals: Terminal[];
   settings: {
     routeWildcards: RouteWildcards;
@@ -20,7 +19,6 @@ export type RemixDevToolsState = {
 
 export const initialState: RemixDevToolsState = {
   timeline: [],
-  showRouteBoundaries: false,
   terminals: [{ id: 0, locked: false, output: [], history: [] }],
   settings: {
     routeWildcards: {},

src/RemixDevTools/context/rdtReducer.ts

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

src/RemixDevTools/context/useRDTContext.ts

@@ -1,2 +1,6 @@
 export { RemixDevTools } from "./RemixDevTools";
 export { useRemixForgeSocketExternal as useRemixForgeSocket } from "./hooks/useRemixForgeSocket";
+export {
+  initRouteBoundariesClient,
+  initRouteBoundariesServer,
+} from "./methods/boundaries";

src/RemixDevTools/hooks/useOutletAugment.tsx

@@ -0,0 +1,64 @@
+import { EntryContext } from "@remix-run/server-runtime";
+import clsx from "clsx";
+
+export const initRouteBoundariesServer = (context: EntryContext) => {
+  return {
+    ...context,
+    routeModules: Object.entries(context.routeModules).reduce(
+      (acc, [key, value]) => {
+        if (key === "root") {
+          return { ...acc, [key]: value };
+        }
+        return {
+          ...acc,
+          [key]: {
+            ...value,
+            default: () => {
+              return (
+                <>
+                  <div
+                    className={clsx(
+                      "rdt-invisible rdt-absolute rdt-hidden rdt-h-0 rdt-w-0",
+                      key
+                    )}
+                  />
+                  <value.default />
+                </>
+              );
+            },
+          },
+        };
+      },
+      {}
+    ),
+  };
+};
+
+export const initRouteBoundariesClient = () => {
+  window.__remixRouteModules = new Proxy(window.__remixRouteModules, {
+    get: function (target, property) {
+      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;
+    },
+  });
+};