Add bippy to the project (#175)

* Add bippy to the project

* bippy added inspector

* version bump

Author: AlemTuzlak

package-lock.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": "1.0.6",
+	"version": "1.1.0",
 	"license": "MIT",
 	"keywords": [
 		"react-router",
@@ -123,6 +123,7 @@
 		"@vitest/coverage-v8": "^2.1.5",
 		"@vitest/ui": "^2.1.5",
 		"autoprefixer": "^10.4.20",
+		"bippy": "^0.2.2",
 		"glob": "^11.0.0",
 		"happy-dom": "^15.7.4",
 		"jest-preview": "^0.3.1",

package.json

@@ -110,6 +110,7 @@ export type RdtClientConfig = Pick<
 	| "requireUrlFlag"
 	| "openHotkey"
 	| "urlFlag"
+	| "enableInspector"
 	| "routeBoundaryGradient"
 >
 

src/client/context/RDTContext.tsx

@@ -63,6 +63,10 @@ export type ReactRouterDevtoolsState = {
 	timeline: TimelineEvent[]
 	terminals: Terminal[]
 	settings: {
+		/**
+		 * Enables the bippy inspector to inspect react components
+		 */
+		enableInspector: boolean
 		/**
 		 * The breakpoints to show in the corner so you can see the current breakpoint that you defined
 		 */
@@ -165,6 +169,7 @@ export const initialState: ReactRouterDevtoolsState = {
 	terminals: [{ id: 0, locked: false, output: [], history: [] }],
 	server: undefined,
 	settings: {
+		enableInspector: false,
 		showRouteBoundariesOn: "click",
 		breakpoints: [
 			{ name: "", min: 0, max: 639 },

src/client/context/rdtReducer.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react"
 import { useLocation } from "react-router"
 import { RDTContextProvider } from "./context/RDTContext.js"
 import { useSettingsContext } from "./context/useRDTContext.js"
-import { useBorderedRoutes } from "./hooks/useBorderedRoutes.js"
+import { useReactTreeListeners } from "./hooks/useReactTreeListeners.js"
 import { useSetRouteBoundaries } from "./hooks/useSetRouteBoundaries.js"
 import { useTimelineHandler } from "./hooks/useTimelineHandler.js"
 import { ContentPanel } from "./layout/ContentPanel.js"
@@ -18,7 +18,7 @@ export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
 }
 const Embedded = ({ plugins: pluginArray, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	useTimelineHandler()
-	useBorderedRoutes()
+	useReactTreeListeners()
 	useSetRouteBoundaries()
 	const { settings } = useSettingsContext()
 	const { position } = settings