124 mouseenter event listener prevent other mouseenter events from firing (#126)

* Added fetcher keys

* Added fetcher keys

Author: AlemTuzlak

.github/sync-s3-posts.yml

@@ -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": "4.1.4",
+  "version": "4.1.5",
   "license": "MIT",
   "keywords": [
     "remix",

package.json

@@ -16,11 +16,13 @@ interface FetcherRedirectEvent extends Omit<NormalRedirectEvent, "type"> {
 interface FetcherSubmissionEvent
   extends Omit<FormSubmissionEvent, "type" | "from"> {
   type: "FETCHER_SUBMIT";
+  key?: string;
   responseData?: Record<string, any>;
 }
 interface FetcherSubmissionResponseEvent
   extends Omit<FormSubmissionEvent, "type" | "from"> {
   type: "FETCHER_RESPONSE";
+  key?: string;
   responseData?: Record<string, any>;
 }
 interface FormSubmissionEvent {

src/client/context/timeline/types.ts

@@ -1,32 +1,10 @@
-import { useEffect } from "react";
 import { useAttachDocumentListener } from "./useAttachListener.js";
 import { useDevServerConnection } from "./useDevServerConnection.js";
 
 const useOpenElementSource = () => {
-  const { sendJsonMessage } = useDevServerConnection();
-  useEffect(() => {
-    const handleFocus = (e: any) => {
-      e.stopPropagation();
-      if (!e.altKey || !e.target?.getAttribute?.("data-rdt-source")) {
-        return;
-      }
-
-      e.target?.classList?.add("rdt-cursor-pointer");
-    };
-
-    const handleBlur = (e: any) => e.target?.classList?.remove("rdt-cursor-pointer");
-
-    document.addEventListener("mouseenter", handleFocus, true);
-    document.addEventListener("mouseleave", handleBlur, true);
-
-    return () => {
-      document.removeEventListener("mouseenter", handleFocus, true);
-      document.removeEventListener("mouseleave", handleBlur, true);
-    };
-  }, []);
+  const { sendJsonMessage } = useDevServerConnection(); 
 
-  useAttachDocumentListener("contextmenu", (e: any) => {
- 
+  useAttachDocumentListener("contextmenu", (e: any) => { 
     if (!e.shiftKey || !e) {
       return;
     }

src/client/hooks/useOpenElementSource.ts

@@ -160,14 +160,15 @@ const useTimelineHandler = () => {
     fetchers.forEach((fetcher, i) => {
       if (fetcher.state === "idle") return;
 
-      const { data, formAction, formData, formEncType, formMethod } = fetcher;
+      const { data, formAction, formData, formEncType, formMethod, key: fetcherKey } = fetcher;
 
       if (formAction && formMethod) {
         const form = convertFormDataToObject(formData);
         const event = {
           type: fetcher.state === "loading" ? "FETCHER_RESPONSE" : "FETCHER_SUBMIT",
           to: formAction,
           method: formMethod,
+          ...(fetcherKey ? {   fetcherKey } : {}),
           data: form,
           encType: formEncType,
           responseData: fetcher.state === "submitting" ? undefined : data,

src/client/hooks/useTimelineHandler.ts

@@ -37,11 +37,10 @@ const FormEventComponent = (event: FormEvent) => {
       ? `Redirect from "${event.to}" to "${event.from}"`
       : `Submission to url: "${event.to}"`;
   const responseData = event.responseData;
-  delete responseData?.remixDevTools;
   return (
     <div className="rdt-mb-4">
       <time className="rdt-mb-2 rdt-block rdt-text-sm rdt-font-normal rdt-leading-none rdt-text-gray-500">
-        {firstPart} | encType: {event.encType}
+        {firstPart} | encType: {event.encType} {"fetcherKey" in event && typeof event.fetcherKey !== "undefined" ? `| Fetcher Key: ${event.fetcherKey}` : ""}
       </time>
       <div className="rdt-flex rdt-gap-8">
         {event.data && event.type !== "ACTION_RESPONSE" && (

src/client/tabs/TimelineTab.tsx

@@ -52,8 +52,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 };
 
 export default function Index() {  
-  const lFetcher = useFetcher();
-  const pFetcher = useFetcher();
+  const lFetcher = useFetcher({ key: "lfetcher"});
+  const pFetcher = useFetcher({ key: "test"});
   const submit = useSubmit();
   const data = new FormData();
   data.append("test", "test");