#66 fix & settings page additions (#70)

* #66 fix & settings page additions

* v3.4.0 bump

* update

Author: AlemTuzlak

README.md

@@ -306,10 +306,8 @@ const build = withServerDevTools(await import(BUILD_PATH), config)
 
 ## RemixDevTools props
 
-The `RemixDevTools` component accepts the following props: 
-- `requireUrlFlag`: Requires rdt=true to be present in the URL search to open the Remix Development Tools. Defaults to `false`. 
-- `plugins`: Allows you to provide additional tabs (plugins) to the Remix Development Tools. Defaults to `[]`.
-- `wsPort`: Allows you to specify over which port the client dev tools will communicate with the server dev tools. Defaults to `8080`.
+The `RemixDevTools` component accepts the following props:  
+- `plugins`: Allows you to provide additional tabs (plugins) to the Remix Development Tools. Defaults to `[]`. 
 
 ### Defining the config
 

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools - a set of tools for developing/debugging Remix.run apps",
   "author": "Alem Tuzlak",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "keywords": [
     "remix",

src/RemixDevTools/EmbeddedDevTools.tsx

@@ -8,9 +8,9 @@ import { ContentPanel } from "./layout/ContentPanel.js";
 import { MainPanel } from "./layout/MainPanel.js";
 import { Tabs } from "./layout/Tabs.js";
 import { REMIX_DEV_TOOLS } from "./utils/storage.js";
-import { useLocation } from "@remix-run/react";
 import { RDTContextProvider } from "./context/RDTContext.js";
 import { useState, useEffect } from "react";
+import { useLocation } from "@remix-run/react";
 
 export interface EmbeddedDevToolsProps extends RemixDevToolsProps {
   mainPanelClassName?: string;
@@ -23,6 +23,8 @@ const Embedded = ({ plugins, mainPanelClassName, className }: EmbeddedDevToolsPr
   const { settings } = useSettingsContext();
   const { position } = settings;
   const leftSideOriented = position.includes("left");
+  const url = useLocation().search;
+  if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   return (
     <div id={REMIX_DEV_TOOLS} className={clsx("remix-dev-tools", className)}>
       <MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
@@ -46,12 +48,10 @@ function useHydrated() {
   return hydrated;
 }
 
-const EmbeddedDevTools = ({ requireUrlFlag, plugins, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
+const EmbeddedDevTools = ({ plugins, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
   const hydrated = useHydrated();
-  const url = useLocation().search;
 
   if (!hydrated) return null;
-  if (requireUrlFlag && !url.includes("rdt=true")) return null;
 
   return (
     <RDTContextProvider>

src/RemixDevTools/RemixDevTools.tsx

@@ -23,22 +23,22 @@ import "../input.css";
 import { useDevServerConnection } from "./hooks/useDevServerConnection.js";
 import { useOpenElementSource } from "./hooks/useOpenElementSource.js";
 
-const DevTools = ({ plugins, wsPort }: RemixDevToolsProps) => {
+const DevTools = ({ plugins }: RemixDevToolsProps) => {
   useTimelineHandler();
   useResetDetachmentCheck();
   useBorderedRoutes();
   useSetRouteBoundaries();
   useSyncStateWhenDetached();
-  useDevServerConnection(wsPort);
+  useDevServerConnection();
   useOpenElementSource();
-
+  const url = useLocation().search;
   const { detachedWindowOwner, isDetached, setDetachedWindowOwner } = useDetachedWindowControls();
   const { settings } = useSettingsContext();
   const { persistOpen } = usePersistOpen();
   const { position } = settings;
   const [isOpen, setIsOpen] = useState(isDetached || settings.defaultOpen || persistOpen);
   const leftSideOriented = position.includes("left");
-
+  if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   // If the dev tools are detached, we don't want to render the main panel
   if (detachedWindowOwner) {
     return (
@@ -81,24 +81,18 @@ function useHydrated() {
 }
 
 export interface RemixDevToolsProps {
-  // Whether the dev tools require a url flag to be shown
-  requireUrlFlag?: boolean;
   // Additional tabs to add to the dev tools
   plugins?: Tab[];
-  // The port to use for the dev tools websocket that communicates with the backend dev tools
-  wsPort?: number;
 }
 
-const RemixDevTools = ({ requireUrlFlag, plugins, wsPort }: RemixDevToolsProps) => {
+const RemixDevTools = ({ plugins }: RemixDevToolsProps) => {
   const hydrated = useHydrated();
-  const url = useLocation().search;
 
   if (!hydrated) return null;
-  if (requireUrlFlag && !url.includes("rdt=true")) return null;
 
   return (
     <RDTContextProvider>
-      <DevTools wsPort={wsPort} plugins={plugins} />
+      <DevTools plugins={plugins} />
     </RDTContextProvider>
   );
 };

src/RemixDevTools/context/rdtReducer.ts

@@ -85,6 +85,10 @@ export type RemixDevToolsState = {
     isHoveringRoute: boolean;
     routeViewMode: "list" | "tree";
     panelLocation: "top" | "bottom";
+    withServerDevTools: boolean;
+    wsPort: number;
+    requireUrlFlag: boolean;
+    urlFlag: string;
   };
   htmlErrors: HTMLError[];
   server?: ServerInfo;
@@ -114,6 +118,10 @@ export const initialState: RemixDevToolsState = {
     isHoveringRoute: false,
     routeViewMode: "tree",
     panelLocation: "bottom",
+    withServerDevTools: true,
+    wsPort: 8080,
+    requireUrlFlag: false,
+    urlFlag: "rdt",
   },
   htmlErrors: [],
   persistOpen: false,

src/RemixDevTools/hooks/useAttachListener.ts

@@ -12,6 +12,7 @@ const getAttachment = (target: ListenerAttachmentTarget) => {
       return typeof document != "undefined" ? document.body : null;
   }
 };
+
 /**
  * Helper hook that listens to the document scroll event and triggers a callback function
  * @param fn Function to be called when the event happens

src/RemixDevTools/hooks/useDevServerConnection.ts

@@ -3,7 +3,7 @@ import { useWebSocket } from "../../external/react-use-websocket/use-websocket.j
 import { useEffect } from "react";
 import { tryParseJson } from "../utils/sanitize.js";
 import { ActionEvent, LoaderEvent, isRdtEventArray } from "../../dev-server/event-queue.js";
-import { useDetachedWindowControls, useServerInfo } from "../context/useRDTContext.js";
+import { useDetachedWindowControls, useServerInfo, useSettingsContext } from "../context/useRDTContext.js";
 import { ServerInfo } from "../context/rdtReducer.js";
 import { cutArrayToLastN } from "../utils/common.js";
 import { ReadyState } from "../../external/react-use-websocket/constants.js";
@@ -49,13 +49,14 @@ const updateRouteInfo = (
   };
 };
 
-const useDevServerConnection = (wsPort: number | undefined = 8080) => {
+const useDevServerConnection = () => {
   const navigation = useNavigation();
+  const { settings } = useSettingsContext();
   const { server, setServerInfo } = useServerInfo();
-  const { detachedWindow } = useDetachedWindowControls();
-
+  const { detachedWindowOwner, isDetached } = useDetachedWindowControls();
+  const shouldConnect = isDetached ? detachedWindowOwner && settings.withServerDevTools : settings.withServerDevTools;
   const methods = useWebSocket(
-    `ws://localhost:${wsPort}`,
+    `ws://localhost:${settings.wsPort}`,
     {
       onMessage: (e) => {
         // Do not do anything with
@@ -73,7 +74,7 @@ const useDevServerConnection = (wsPort: number | undefined = 8080) => {
         }
       },
     },
-    wsPort !== undefined || detachedWindow
+    shouldConnect
   );
 
   // Pull the event queue from the server when the page is idle

src/RemixDevTools/tabs/SettingsTab.tsx

@@ -1,17 +1,18 @@
 import { useState } from "react";
-import { Checkbox } from '../components/Checkbox.js';
-import { Input } from '../components/Input.js';
-import { SelectWithOptions } from '../components/Select.js';
-import { Stack } from '../components/Stack.js';
-import { useSettingsContext } from '../context/useRDTContext.js';
-import { RouteBoundaryOptions } from '../context/rdtReducer.js';
-import { uppercaseFirstLetter } from '../utils/string.js';
+import { Checkbox } from "../components/Checkbox.js";
+import { Input } from "../components/Input.js";
+import { SelectWithOptions } from "../components/Select.js";
+import { Stack } from "../components/Stack.js";
+import { useSettingsContext } from "../context/useRDTContext.js";
+import { RouteBoundaryOptions } from "../context/rdtReducer.js";
+import { uppercaseFirstLetter } from "../utils/string.js";
 
 export const SettingsTab = () => {
   const { settings, setSettings } = useSettingsContext();
   const [minHeight, setMinHeight] = useState(settings.minHeight.toString());
   const [maxHeight, setMaxHeight] = useState(settings.maxHeight.toString());
   const [expansionLevel, setExpansionLevel] = useState(settings.expansionLevel.toString());
+  const [wsPort, setWsPort] = useState(settings.wsPort.toString());
   return (
     <Stack className="rdt-mb-4">
       <h1>
@@ -26,6 +27,14 @@ export const SettingsTab = () => {
       >
         Open dev tools by default
       </Checkbox>
+      <Checkbox
+        id="requireUrlFlag"
+        hint="Allows you to only show rdt when there is a flag in the URL search params set."
+        onChange={() => setSettings({ requireUrlFlag: !settings.requireUrlFlag })}
+        value={settings.requireUrlFlag}
+      >
+        Show dev tools only when URL flag is set
+      </Checkbox>
       <Checkbox
         id="hideUntilHover"
         hint="The dev tools trigger will be hidden on the page until you hover over it."
@@ -34,8 +43,45 @@ export const SettingsTab = () => {
       >
         Hide the trigger until hovered
       </Checkbox>
+      <Checkbox
+        id="withServerDevTools"
+        hint="Tell the dev tools if they should try to connect to their server counterpart, if you don't have that set up you can just disable this."
+        onChange={() => setSettings({ withServerDevTools: !settings.withServerDevTools })}
+        value={settings.withServerDevTools}
+      >
+        Connect to server dev tools
+      </Checkbox>
       <hr className="rdt-mt-2 rdt-border-gray-700" />
       <Stack gap="lg">
+        {settings.requireUrlFlag && (
+          <Input
+            name="urlFlag"
+            id="urlFlag"
+            label="URL flag to use"
+            hint={`This allows you to change the URL search param flag that will be used to show the dev tools when "Show dev tools only when URL flag is set" is set to true`}
+            value={settings.urlFlag}
+            onChange={(e) => setSettings({ urlFlag: e.target.value ?? "" })}
+            onBlur={(e) => {
+              setSettings({ urlFlag: e.target.value.trim() });
+            }}
+          />
+        )}
+        {settings.withServerDevTools && (
+          <Input
+            name="wsPort"
+            id="wsPort"
+            label="Server dev tools WS port (default: 8080)"
+            hint="This allows you to change the port the client dev tools will try to connect to."
+            value={wsPort}
+            onChange={(e) => setWsPort(e.target.value ?? "")}
+            onBlur={(e) => {
+              const value = parseInt(e.target.value);
+              if (value && !isNaN(value) && value >= 0) {
+                setSettings({ wsPort: value });
+              }
+            }}
+          />
+        )}
         <Input
           name="expansionLevel"
           id="expansionLevel"

src/dev-server/init.ts

@@ -41,6 +41,7 @@ const installDevToolsGlobals = (config?: DevToolsServerConfig) => {
     ws.on("connection", (client) => {
       client.on("message", (message) => {
         const data = tryParseJson(message.toString());
+
         if (!isWsEventType(data)) return;
         if (data.type === "open-source") {
           const source = data.data.source;
@@ -78,6 +79,9 @@ const installDevToolsGlobals = (config?: DevToolsServerConfig) => {
 
     ["SIGINT", "SIGTERM"].forEach((event) => {
       process.on(event, () => {
+        ws.clients.forEach((client) => {
+          client.close();
+        });
         ws.close();
       });
     });

src/test-apps/cjs-app/app/root.tsx

@@ -88,4 +88,4 @@ export const action = async () => {
   );
 } 
 
-export default withDevTools(App);
+export default withDevTools(App );