From 954c96039c3e1ff4017fc7b6238b9fd8816304c4 Mon Sep 17 00:00:00 2001 From: tomolld Date: Sat, 16 Nov 2024 16:06:01 +0900 Subject: [PATCH 1/2] fix-cb2 --- src/client/hooks/useDevServerConnection.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/client/hooks/useDevServerConnection.ts b/src/client/hooks/useDevServerConnection.ts index 73bfa72..44ebbcc 100644 --- a/src/client/hooks/useDevServerConnection.ts +++ b/src/client/hooks/useDevServerConnection.ts @@ -67,8 +67,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(-3).map((e: any) => ({ type: "loader", data: e })), + action.slice(-3).map((e: any) => ({ type: "action", data: e })), ].flat() for (const event of events) { updateRouteInfo(server, routes, event, false) From 7a93458266055f04c175186ebadc34c9e72d6589 Mon Sep 17 00:00:00 2001 From: tomolld Date: Wed, 20 Nov 2024 17:41:33 +0900 Subject: [PATCH 2/2] settings: add configurable option for events history limit --- src/client/context/rdtReducer.ts | 6 ++++++ src/client/hooks/useDevServerConnection.ts | 9 +++++---- src/client/tabs/SettingsTab.tsx | 15 +++++++++++++++ 3 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/client/context/rdtReducer.ts b/src/client/context/rdtReducer.ts index ad3a3ed..06a9470 100644 --- a/src/client/context/rdtReducer.ts +++ b/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 }, diff --git a/src/client/hooks/useDevServerConnection.ts b/src/client/hooks/useDevServerConnection.ts index 44ebbcc..6e81b56 100644 --- a/src/client/hooks/useDevServerConnection.ts +++ b/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.slice(-3).map((e: any) => ({ type: "loader", data: e })), - action.slice(-3).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" diff --git a/src/client/tabs/SettingsTab.tsx b/src/client/tabs/SettingsTab.tsx index 54ddf9b..636d9d9 100644 --- a/src/client/tabs/SettingsTab.tsx +++ b/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 ( @@ -206,6 +207,20 @@ export const SettingsTab = () => { } }} /> + 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 }) + } + }} + /> )