tanstack migration init

Author: AlemTuzlak

package.json

@@ -64,11 +64,11 @@
 	"nx": {
 		"includedScripts": ["test:unused", "check", "test:deps"]
 	},
-	"overrides": {
-		"react-router-devtools": "workspace:*"
-	},
 	"pnpm": {
-		"onlyBuiltDependencies": ["esbuild", "msw"]
+		"onlyBuiltDependencies": ["esbuild", "msw"],
+		"overrides": {
+			"react-router-devtools": "workspace:*"
+		}
 	},
 	"private": true
 }

packages/react-router-devtools/package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "5.1.6",
+	"version": "5.1.3",
 	"license": "MIT",
 	"keywords": [
 		"react-router",
@@ -59,9 +59,7 @@
 			"require": "./dist/client.css"
 		}
 	},
-	"files": [
-		"dist"
-	],
+	"files": ["dist"],
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/forge-42/react-router-devtools.git"
@@ -108,9 +106,9 @@
 		"vite": ">=5.0.0 || >=6.0.0"
 	},
 	"devDependencies": {
-		"@react-router/dev": "^7.5.3",
-		"@react-router/node": "^7.5.3",
-		"@react-router/serve": "7.1.4",
+		"@react-router/dev": "7.5.3",
+		"@react-router/node": "7.5.3",
+		"@react-router/serve": "7.5.3",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@types/babel__core": "^7.20.5",
@@ -142,6 +140,8 @@
 		"@babel/types": "^7.26.10",
 		"@radix-ui/react-accordion": "^1.2.2",
 		"@radix-ui/react-select": "^2.1.5",
+		"@tanstack/devtools-vite": "^0.3.8",
+		"@tanstack/react-devtools": "^0.7.7",
 		"beautify": "^0.0.8",
 		"bippy": "^0.3.7",
 		"chalk": "5.4.1",

packages/react-router-devtools/src/client/components/Breakpoints.tsx

@@ -2,7 +2,6 @@ import type { Dispatch } from "react"
 import type React from "react"
 import { createContext, useEffect, useMemo, useReducer } from "react"
 import { bigIntReplacer } from "../../shared/bigint-util.js"
-import { useRemoveBody } from "../hooks/detached/useRemoveBody.js"
 import { checkIsDetached, checkIsDetachedOwner, checkIsDetachedWindow } from "../utils/detached.js"
 import { tryParseJson } from "../utils/sanitize.js"
 import {
@@ -85,8 +84,6 @@ export const getExistingStateFromStorage = (config?: RdtClientConfig & { editorN
 			...config,
 			...settings,
 			editorName: config?.editorName ?? initialState.settings.editorName,
-			liveUrls: config?.liveUrls ?? initialState.settings.liveUrls,
-			breakpoints: config?.breakpoints ?? initialState.settings.breakpoints,
 		},
 		detachedWindow,
 		detachedWindowOwner,
@@ -96,34 +93,16 @@ export const getExistingStateFromStorage = (config?: RdtClientConfig & { editorN
 
 export type RdtClientConfig = Pick<
 	ReactRouterDevtoolsState["settings"],
-	| "defaultOpen"
-	| "breakpoints"
-	| "showBreakpointIndicator"
-	| "showRouteBoundariesOn"
-	| "expansionLevel"
-	| "liveUrls"
-	| "position"
-	| "height"
-	| "minHeight"
-	| "maxHeight"
-	| "hideUntilHover"
-	| "panelLocation"
-	| "requireUrlFlag"
-	| "openHotkey"
-	| "urlFlag"
-	| "enableInspector"
-	| "routeBoundaryGradient"
+	"showRouteBoundariesOn" | "expansionLevel" | "routeBoundaryGradient"
 >
 
 export const RDTContextProvider = ({ children, config }: ContextProps) => {
 	const [state, dispatch] = useReducer(rdtReducer, getExistingStateFromStorage(config))
 	// biome-ignore lint/correctness/useExhaustiveDependencies: investigate
 	const value = useMemo(() => ({ state, dispatch }), [state, dispatch])
 
-	useRemoveBody(state)
-
 	useEffect(() => {
-		const { settings, detachedWindow, detachedWindowOwner, ...rest } = state
+		const { settings, ...rest } = state
 		// Store user settings for dev tools into local storage
 		setStorageItem(REACT_ROUTER_DEV_TOOLS_SETTINGS, JSON.stringify(settings))
 		// Store general state into local storage