feat: Limit route info events to 3 recent entries

src/client/context/rdtReducer.ts

@@ -63,6 +63,11 @@ export type RemixDevToolsState = {
 	timeline: TimelineEvent[]
 	terminals: Terminal[]
 	settings: {
+		/**
+		 * The number of events to keep in history per route
+		 * @default 30
+		 */
+		eventsToKeep: number
 		/**
 		 * The breakpoints to show in the corner so you can see the current breakpoint that you defined
 		 */
@@ -167,6 +172,7 @@ export const initialState: RemixDevToolsState = {
 	terminals: [{ id: 0, locked: false, output: [], history: [] }],
 	server: undefined,
 	settings: {
+		eventsToKeep: 30,
 		showRouteBoundariesOn: "click",
 		breakpoints: [
 			{ name: "", min: 0, max: 639 },

src/client/hooks/useDevServerConnection.ts

@@ -2,7 +2,7 @@ import { useNavigation } from "@remix-run/react"
 import { useEffect } from "react"
 import type { ActionEvent, LoaderEvent } from "../../server/event-queue.js"
 import type { ServerInfo } from "../context/rdtReducer.js"
-import { useServerInfo } from "../context/useRDTContext.js"
+import { useServerInfo, useSettingsContext } from "../context/useRDTContext.js"
 import { cutArrayToLastN } from "../utils/common.js"
 
 const updateRouteInfo = (
@@ -51,6 +51,7 @@ const updateRouteInfo = (
 const useDevServerConnection = () => {
 	const navigation = useNavigation()
 	const { server, setServerInfo } = useServerInfo()
+	const { settings } = useSettingsContext()
 
 	// Pull the event queue from the server when the page is idle
 	useEffect(() => {
@@ -67,8 +68,8 @@ const useDevServerConnection = () => {
 			for (const routeInfo of Object.values(events)) {
 				const { loader, action } = routeInfo as any
 				const events = [
-					loader.map((e: any) => ({ type: "loader", data: e })),
-					action.map((e: any) => ({ type: "action", data: e })),
+					loader.slice(-settings.eventsToKeep).map((e: any) => ({ type: "loader", data: e })),
+					action.slice(-settings.eventsToKeep).map((e: any) => ({ type: "action", data: e })),
 				].flat()
 				for (const event of events) {
 					updateRouteInfo(server, routes, event, false)
@@ -86,7 +87,7 @@ const useDevServerConnection = () => {
 				import.meta.hot.dispose(cb2)
 			}
 		}
-	}, [server, setServerInfo])
+	}, [server, setServerInfo, settings.eventsToKeep])
 
 	const isConnected = typeof import.meta.hot !== "undefined"
 

src/client/tabs/SettingsTab.tsx

@@ -13,6 +13,7 @@ export const SettingsTab = () => {
 	const [maxHeight, setMaxHeight] = useState(settings.maxHeight.toString())
 	const [expansionLevel, setExpansionLevel] = useState(settings.expansionLevel.toString())
 	const [openHotkey, setOpenHotkey] = useState(settings.openHotkey.toString())
+	const [eventsToKeep, setEventsToKeep] = useState(settings.eventsToKeep.toString())
 
 	return (
 		<Stack className="mb-4">
@@ -206,6 +207,20 @@ export const SettingsTab = () => {
 						}
 					}}
 				/>
+				<Input
+					name="eventsToKeep"
+					id="eventsToKeep"
+					label="Number of events to keep in history"
+					hint="The number of loader/action events to keep in history per route. Minimum: 1, Maximum: 100"
+					value={eventsToKeep}
+					onChange={(e) => setEventsToKeep(e.target.value ?? "")}
+					onBlur={(e) => {
+						const value = Number.parseInt(e.target.value)
+						if (value && !Number.isNaN(value) && value >= 1 && value <= 100) {
+							setSettings({ eventsToKeep: value })
+						}
+					}}
+				/>
 			</Stack>
 		</Stack>
 	)