77 active page tab stuck once popping rdt out into new window (#80)

* #77 - Detached mode location tracking fix

* action color change

Author: AlemTuzlak

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.5.0",
+  "version": "3.5.1",
   "license": "MIT",
   "keywords": [
     "remix",

src/RemixDevTools/RemixDevTools.tsx

@@ -25,6 +25,7 @@ import { useOpenElementSource } from "./hooks/useOpenElementSource.js";
 import { RdtPlugin } from "../client.js";
 import { useAttachBodyListener } from "./hooks/useAttachListener.js";
 import { useDebounce } from "./hooks/useDebounce.js";
+import { useListenToRouteChange } from "./hooks/detached/useListenToRouteChange.js";
 
 const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useTimelineHandler();
@@ -34,7 +35,7 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useSyncStateWhenDetached();
   useDevServerConnection();
   useOpenElementSource();
-
+  useListenToRouteChange();
   const url = useLocation().search;
   const { detachedWindowOwner, isDetached, setDetachedWindowOwner } = useDetachedWindowControls();
   const { settings } = useSettingsContext();

src/RemixDevTools/context/RDTContext.tsx

@@ -2,7 +2,6 @@ import type { Dispatch } from "react";
 import React, { useMemo, createContext, useReducer, useEffect } from "react";
 import { RemixDevToolsActions, RemixDevToolsState, rdtReducer, initialState } from "./rdtReducer.js";
 import { useRemoveBody } from "../hooks/detached/useRemoveBody.js";
-import { useListenToRouteChange } from "../hooks/detached/useListenToRouteChange.js";
 import {
   setSessionItem,
   setStorageItem,
@@ -84,7 +83,7 @@ export const getExistingStateFromStorage = () => {
 export const RDTContextProvider = ({ children }: ContextProps) => {
   const [state, dispatch] = useReducer<typeof rdtReducer>(rdtReducer, getExistingStateFromStorage());
   const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
-  useListenToRouteChange();
+
   useRemoveBody(state);
 
   useEffect(() => {

src/RemixDevTools/context/rdtReducer.ts

@@ -2,7 +2,7 @@ import { TimelineEvent } from "./timeline/types.js";
 import type { Tabs } from "../tabs/index.js";
 import { Terminal } from "./terminal/types.js";
 import { ActionEvent, LoaderEvent } from "../../dev-server/event-queue.js";
-import { cutArrayToLastN } from "../utils/common.js";
+import { cutArrayToFirstN } from "../utils/common.js";
 
 export const defaultServerRouteState: ServerRouteInfo = {
   highestExecutionTime: 0,
@@ -268,7 +268,7 @@ export const rdtReducer = (
     case "SET_TIMELINE_EVENT":
       return {
         ...state,
-        timeline: cutArrayToLastN([payload, ...state.timeline], 30),
+        timeline: cutArrayToFirstN([payload, ...state.timeline], 30),
       };
 
     case "SET_WHOLE_STATE": {

src/RemixDevTools/hooks/detached/useListenToRouteChange.ts

@@ -1,8 +1,9 @@
 import { useLocation, useNavigate, useNavigation } from "@remix-run/react";
 import { useEffect, useRef } from "react";
-import { useAttachListener } from '../useAttachListener.js';
-import { getStorageItem, setStorageItem } from '../../utils/storage.js';
-import { useDetachedWindowControls } from '../../context/useRDTContext.js';
+import { useAttachListener } from "../useAttachListener.js";
+import { getStorageItem, setStorageItem } from "../../utils/storage.js";
+import { useDetachedWindowControls } from "../../context/useRDTContext.js";
+import { detachedModeSetup } from "../../context/RDTContext.js";
 
 export const LOCAL_STORAGE_ROUTE_KEY = "rdt_route";
 
@@ -22,8 +23,12 @@ export const useListenToRouteChange = () => {
 
   // Used by the owner window only
   useEffect(() => {
+    const { detachedWindowOwner } = detachedModeSetup();
+    if (!detachedWindowOwner) {
+      return;
+    }
     // If the route changes and this is the original window store the event into local storage
-    if (route !== locationRoute && detachedWindowOwner) {
+    if (route !== locationRoute) {
       setRouteInLocalStorage(locationRoute);
     }
   }, [locationRoute, detachedWindowOwner, route]);

src/RemixDevTools/utils/common.ts

@@ -2,3 +2,8 @@ export const cutArrayToLastN = <T>(arr: T[], n: number) => {
   if (arr.length < n) return arr;
   return arr.slice(arr.length - n);
 };
+
+export const cutArrayToFirstN = <T>(arr: T[], n: number) => {
+  if (arr.length < n) return arr;
+  return arr.slice(0, n);
+};

src/dev-server/logger.ts

@@ -37,7 +37,7 @@ export const actionLog = (message: string) => {
   if (config.logs?.actions === false) {
     return;
   }
-  log(`${chalk.red.bold("ACTION")} ${message}`);
+  log(`${chalk.yellowBright.bold("ACTION")} ${message}`);
 };
 
 export const successLog = (message: string) => {

src/dev-server/utils.ts

@@ -135,16 +135,16 @@ const logTrigger = (id: string, type: "action" | "loader", end: number) => {
   }
 };
 
-const extractHeadersFromResponseOrRequest = (response: Response | Request): Record<string, string> => {
+const extractHeadersFromResponseOrRequest = (response: Response | Request) => {
   const headers = new Headers(response.headers);
   return Object.fromEntries(headers.entries());
 };
 
 const extractDataFromResponseOrRequest = async (response: Response | Request): Promise<null | unknown> => {
-  const extractable = new Response(response.body, response)
-  const headers = new Headers(extractable.headers);
-  const contentType = headers.get("Content-Type");
   try {
+    const extractable = new Response(response.body, response);
+    const headers = new Headers(extractable.headers);
+    const contentType = headers.get("Content-Type");
     if (contentType?.includes("application/json")) {
       return extractable.json();
     }
@@ -170,16 +170,17 @@ const storeAndEmitActionOrLoaderInfo = async (
 ) => {
   const isResponse = response instanceof Response;
   const responseHeaders = isResponse ? extractHeadersFromResponseOrRequest(response) : null;
+  const requestHeaders = extractHeadersFromResponseOrRequest(args.request);
   // create the event
   const event = {
     type,
     data: {
       id: route.id,
       executionTime: end,
       timestamp: new Date().getTime(),
-      responseHeaders,
-      requestHeaders: extractHeadersFromResponseOrRequest(args.request),
       requestData: await extractDataFromResponseOrRequest(args.request),
+      requestHeaders,
+      responseHeaders,
     },
   };
   const port =

src/test-apps/remix-vite/app/components/Button.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+}
+
+const Button = ({ children, ...props }: ButtonProps) => {
+ return (
+    <button {...props}>
+     {children}
+    </button>
+ );
+}
+
+export { Button }; 

src/test-apps/remix-vite/app/root.tsx

@@ -31,7 +31,7 @@ export default function App() {
       </head>
       <body>
        <Form method="post">
-        
+        <input readOnly type="text" name="name" value={"name"} />
        <button type="submit">  
           Submit
         </button>