bippy added inspector

src/client/context/RDTContext.tsx

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

src/client/context/rdtReducer.ts

@@ -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/react-router-dev-tools.tsx

@@ -20,6 +20,7 @@ import {
 	setStorageItem,
 } from "./utils/storage.js"
 import "../input.css"
+import { Inspector } from "bippy/inspect"
 import { useHotkeys } from "react-hotkeys-hook"
 import type { RdtPlugin } from "../index.js"
 import { Breakpoints } from "./components/Breakpoints.js"
@@ -28,7 +29,6 @@ import { useListenToRouteChange } from "./hooks/detached/useListenToRouteChange.
 import { useDebounce } from "./hooks/useDebounce.js"
 import { useDevServerConnection } from "./hooks/useDevServerConnection.js"
 import { useOpenElementSource } from "./hooks/useOpenElementSource.js"
-
 const recursivelyChangeTabIndex = (node: Element | HTMLElement, remove = true) => {
 	if (remove) {
 		node.setAttribute("tabIndex", "-1")
@@ -102,6 +102,7 @@ const DevTools = ({ plugins: pluginArray }: ReactRouterDevtoolsProps) => {
 			<Trigger isOpen={isOpen} setIsOpen={setIsOpen} />
 			<LiveUrls />
 			<Breakpoints />
+			<Inspector enabled={settings.enableInspector} />
 			<MainPanel isOpen={isOpen}>
 				<div className="flex h-full">
 					<Tabs plugins={plugins} setIsOpen={setIsOpen} />

src/client/tabs/SettingsTab.tsx

@@ -52,6 +52,14 @@ export const SettingsTab = () => {
 			>
 				Show breakpoint indicator
 			</Checkbox>
+			<Checkbox
+				id="enableInspector"
+				hint="This allows you to render an inspector provided by bippy to inspect react components"
+				onChange={() => setSettings({ enableInspector: !settings.enableInspector })}
+				value={settings.enableInspector}
+			>
+				Enable react component inspector
+			</Checkbox>
 
 			<hr className="mt-2 border-gray-700" />
 			<Stack gap="lg">

test-apps/react-router-vite/vite.config.ts

@@ -6,6 +6,7 @@ import { reactRouterDevTools, defineRdtConfig } from "react-router-devtools"
 import inspect from "vite-plugin-inspect"
 const config = defineRdtConfig({
   client: {
+    enableInspector: true,
     defaultOpen: false,
     position: "top-right",
     requireUrlFlag: false,