remove bippy

Author: AlemTuzlak

packages/react-router-devtools/package.json

@@ -141,7 +141,6 @@
 		"@tanstack/devtools-vite": "^0.3.11",
 		"@tanstack/react-devtools": "^0.8.0",
 		"beautify": "^0.0.8",
-		"bippy": "^0.3.7",
 		"chalk": "5.4.1",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",

packages/react-router-devtools/src/client/hooks/useReactTreeListeners.ts

@@ -1,4 +1,3 @@
-import { type Fiber, onCommitFiberRoot, traverseFiber } from "bippy"
 import { useCallback, useEffect } from "react"
 import { useNavigation } from "react-router"
 
@@ -7,25 +6,42 @@ export const ROUTE_CLASS = "outlet-route"
 export function useReactTreeListeners() {
 	const navigation = useNavigation()
 
-	// biome-ignore lint/suspicious/noExplicitAny:  we don't know the type
-	const styleNearestElement = useCallback((fiberNode: Fiber<any> | null) => {
+	// biome-ignore lint/suspicious/noExplicitAny: we don't know the type
+	const traverseComponentTree = useCallback((fiberNode: any, callback: any) => {
+		callback(fiberNode)
+
+		let child = fiberNode.child
+		while (child) {
+			traverseComponentTree(child, callback)
+			child = child.sibling
+		}
+	}, [])
+
+	// biome-ignore lint/suspicious/noExplicitAny: we don't know the type
+	const styleNearestElement = useCallback((fiberNode: any) => {
 		if (!fiberNode) return
 
 		if (fiberNode.stateNode) {
-			return fiberNode.stateNode?.classList?.add(ROUTE_CLASS)
+			return fiberNode.stateNode.classList.add(ROUTE_CLASS)
 		}
-		styleNearestElement(fiberNode?.child)
+		styleNearestElement(fiberNode.child)
 	}, [])
 
 	useEffect(() => {
 		if (navigation.state !== "idle") return
+		// biome-ignore lint/suspicious/noExplicitAny: accessing React internals
+		const devTools = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__
 
-		onCommitFiberRoot((root) =>
-			traverseFiber(root.current, (fiberNode) => {
-				if (fiberNode?.elementType?.name === "default" || fiberNode?.elementType?.name === "RenderedRoute") {
-					styleNearestElement(fiberNode)
-				}
-			})
-		)
-	}, [navigation.state, styleNearestElement])
+		for (const [rendererID] of devTools.renderers) {
+			const fiberRoots = devTools.getFiberRoots(rendererID)
+			for (const rootFiber of fiberRoots) {
+				// biome-ignore lint/suspicious/noExplicitAny: we don't know the type
+				traverseComponentTree(rootFiber.current, (fiberNode: any) => {
+					if (fiberNode?.elementType?.name === "default" || fiberNode?.elementType?.name === "RenderedRoute") {
+						styleNearestElement(fiberNode)
+					}
+				})
+			}
+		}
+	}, [navigation.state, styleNearestElement, traverseComponentTree])
 }