swap to evenets for server info

Author: AlemTuzlak

packages/react-router-devtools/src/client/hooks/useDevServerConnection.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react"
-import { useNavigation } from "react-router"
 import type { ActionEvent, LoaderEvent } from "../../server/event-queue.js"
+import { eventClient } from "../../shared/event-client.js"
 import type { ServerInfo } from "../context/rdtReducer.js"
 import { useServerInfo } from "../context/useRDTContext.js"
 import { cutArrayToLastN } from "../utils/common.js"
@@ -49,46 +49,27 @@ const updateRouteInfo = (
 }
 
 const useDevServerConnection = () => {
-	const navigation = useNavigation()
 	const { server, setServerInfo } = useServerInfo()
 
-	// Pull the event queue from the server when the page is idle
+	// Listen to loader and action events from the event client
 	useEffect(() => {
-		if (typeof import.meta.hot === "undefined") return
-		if (navigation.state !== "idle") return
-		// We send a pull & clear event to pull the event queue and clear it
-		import.meta.hot.send("all-route-info")
-	}, [navigation.state])
-
-	useEffect(() => {
-		// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-		const cb2 = (data: any) => {
-			const events = JSON.parse(data).data
-			const routes: ServerInfo["routes"] = {}
-			for (const routeInfo of Object.values(events)) {
-				// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-				const { loader, action } = routeInfo as any
-				const events = [
-					// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-					loader.map((e: any) => ({ type: "loader", data: e })),
-					// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-					action.map((e: any) => ({ type: "action", data: e })),
-				].flat()
-				for (const event of events) {
-					updateRouteInfo(server, routes, event, false)
-				}
-			}
+		// Listen to loader events
+		const unsubscribeLoader = eventClient.on("loader-event", (event) => {
+			const routes: ServerInfo["routes"] = { ...server?.routes }
+			updateRouteInfo(server, routes, { type: "loader", data: event.payload as LoaderEvent["data"] }, false)
+			setServerInfo({ routes })
+		})
 
+		// Listen to action events
+		const unsubscribeAction = eventClient.on("action-event", (event) => {
+			const routes: ServerInfo["routes"] = { ...server?.routes }
+			updateRouteInfo(server, routes, { type: "action", data: event.payload as ActionEvent["data"] }, false)
 			setServerInfo({ routes })
-		}
-		if (typeof import.meta.hot !== "undefined") {
-			import.meta.hot.on("all-route-info", cb2)
-		}
+		})
 
 		return () => {
-			if (typeof import.meta.hot !== "undefined") {
-				import.meta.hot.dispose(cb2)
-			}
+			unsubscribeLoader()
+			unsubscribeAction()
 		}
 	}, [server, setServerInfo])
 

packages/react-router-devtools/src/server/utils.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk"
 import type { ActionFunctionArgs, LoaderFunctionArgs, UNSAFE_DataWithResponseInit } from "react-router"
-import { bigIntReplacer } from "../shared/bigint-util.js"
+import { eventClient } from "../shared/event-client.js"
 import { sendEvent } from "../shared/send-event.js"
 import { type DevToolsServerConfig, getConfig } from "./config.js"
 import { actionLog, errorLog, infoLog, loaderLog, redirectLog } from "./logger.js"
@@ -223,6 +223,35 @@ export const extractHeadersFromResponseOrRequest = (
 	return Object.fromEntries(headers.entries())
 }
 
+/**
+ * Converts BigInt values to strings in an object/array structure
+ * This allows the data to be serialized to JSON without errors
+ */
+// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
+const serializeBigInt = (obj: any): any => {
+	if (obj === null || obj === undefined) {
+		return obj
+	}
+
+	if (typeof obj === "bigint") {
+		return obj.toString()
+	}
+
+	if (Array.isArray(obj)) {
+		return obj.map(serializeBigInt)
+	}
+
+	if (typeof obj === "object") {
+		const result: Record<string, unknown> = {}
+		for (const [key, value] of Object.entries(obj)) {
+			result[key] = serializeBigInt(value)
+		}
+		return result
+	}
+
+	return obj
+}
+
 const storeAndEmitActionOrLoaderInfo = async (
 	type: "action" | "loader",
 	routeId: string,
@@ -233,34 +262,24 @@ const storeAndEmitActionOrLoaderInfo = async (
 	const responseHeaders = extractHeadersFromResponseOrRequest(response)
 	const requestHeaders = extractHeadersFromResponseOrRequest(args.request)
 
-	// create the event
-	const event = {
-		type,
-		data: {
-			id: routeId,
-			executionTime: end,
-			timestamp: new Date().getTime(),
-			responseData: isDataFunctionResponse(response) ? response.data : response,
-			requestHeaders,
-			responseHeaders,
-		},
-	}
-	if (typeof process === "undefined") {
-		return
+	const responseData = isDataFunctionResponse(response) ? response.data : response
+
+	// create the event data matching LoaderEvent["data"] / ActionEvent["data"] type
+	const eventData = {
+		id: routeId,
+		executionTime: end,
+		timestamp: new Date().getTime(),
+		responseData: serializeBigInt(responseData),
+		requestHeaders: requestHeaders || {},
+		responseHeaders: responseHeaders || {},
+		requestData: undefined, // TODO: Extract request data if needed (e.g., formData for actions)
 	}
-	const port = process.rdt_port
 
-	if (port) {
-		fetch(`http://localhost:${port}/__rrdt`, {
-			method: "POST",
-			body: JSON.stringify(event, bigIntReplacer),
-		})
-			.then(async (res) => {
-				if (res.ok) {
-					await res.text()
-				}
-			})
-			.catch(() => {})
+	// Emit the event via event client
+	if (type === "loader") {
+		eventClient.emit("loader-event", eventData)
+	} else {
+		eventClient.emit("action-event", eventData)
 	}
 }
 

packages/react-router-devtools/src/shared/event-client.ts

@@ -1,10 +1,13 @@
 import { EventClient } from "@tanstack/devtools-event-client"
+import type { ActionEvent, LoaderEvent } from "../server/event-queue.js"
 import type { RequestEvent } from "./request-event"
 
 interface EventMap {
 	"rdt:request-event": RequestEvent
 	"rdt:get-events": RequestEvent[] // Both request (empty array) and response (array of events)
 	"rdt:remove-event": { id: string; startTime: number; fromClient?: boolean }
+	"rdt:loader-event": LoaderEvent["data"]
+	"rdt:action-event": ActionEvent["data"]
 }
 
 export const eventClient = new EventClient<EventMap>({