add back in plugins and cleanup package exports

Author: AlemTuzlak

.github/copilot-instructions.md

@@ -23,4 +23,6 @@ Write tests for any new functionality.
 
 When defining new types, first check if the types exist somewhere and re-use them, do not create new types that are similar to existing ones.
 
-When modifying existing functionality, ensure backward compatibility unless there's a strong reason to introduce breaking changes. If breaking changes are necessary, document them clearly in the relevant documentation files.
+When modifying existing functionality, ensure backward compatibility unless there's a strong reason to introduce breaking changes. If breaking changes are necessary, document them clearly in the relevant documentation files.
+
+If `pnpm run test` fails because of check, you can run `pnpm run check:fix` to fix the issues automatically.

README.md

@@ -62,9 +62,6 @@ If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in
 optimizeDeps: {
   include: [
     // other optimized deps
-    "beautify",
-    "react-diff-viewer-continued",
-    "classnames",
     "@bkrem/react-transition-group",
   ],
 },

packages/react-router-devtools/package.json

@@ -53,10 +53,6 @@
 			},
 			"types": "./dist/server.d.ts",
 			"default": "./dist/server.js"
-		},
-		"./client.css": {
-			"import": "./dist/client.css",
-			"require": "./dist/client.css"
 		}
 	},
 	"files": ["dist"],
@@ -109,6 +105,7 @@
 		"@react-router/dev": "7.9.3",
 		"@react-router/node": "7.9.3",
 		"@react-router/serve": "7.9.3",
+		"@tanstack/devtools": "^0.8.1",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@types/babel__core": "^7.20.5",

packages/react-router-devtools/src/client/embedded-dev-tools.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx"
 import { useEffect, useState } from "react"
 import { RDTContextProvider } from "./context/RDTContext.js"
-import { useReactTreeListeners } from "./hooks/useReactTreeListeners.js"
+import { useFindRouteOutlets } from "./hooks/useReactTreeListeners.js"
 import { useSetRouteBoundaries } from "./hooks/useSetRouteBoundaries.js"
 import { useTimelineHandler } from "./hooks/useTimelineHandler.js"
 import { ContentPanel } from "./layout/ContentPanel.js"
@@ -17,13 +17,11 @@ export interface EmbeddedDevToolsProps extends ReactRouterDevtoolsProps {
 	mainPanelClassName?: string
 	className?: string
 }
-const Embedded = ({ plugins: pluginArray, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
+const Embedded = ({ mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	useTimelineHandler()
-	useReactTreeListeners()
+	useFindRouteOutlets()
 	useSetRouteBoundaries()
 
-	const plugins = pluginArray?.map((plugin) => (typeof plugin === "function" ? plugin() : plugin))
-
 	return (
 		<div
 			id={REACT_ROUTER_DEV_TOOLS}
@@ -33,8 +31,8 @@ const Embedded = ({ plugins: pluginArray, mainPanelClassName, className }: Embed
 			className={clsx("react-router-dev-tools", "h-full flex-row w-full", className)}
 		>
 			<MainPanel className={mainPanelClassName} isEmbedded isOpen={true}>
-				<Tabs plugins={plugins} />
-				<ContentPanel plugins={plugins} />
+				<Tabs />
+				<ContentPanel />
 			</MainPanel>
 		</div>
 	)
@@ -53,15 +51,15 @@ function useHydrated() {
 	return hydrated
 }
 
-const EmbeddedDevTools = ({ plugins, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
+const EmbeddedDevTools = ({ config, mainPanelClassName, className }: EmbeddedDevToolsProps) => {
 	const hydrated = useHydrated()
 
 	if (!hydrated) return null
 
 	return (
-		<RDTContextProvider>
+		<RDTContextProvider config={config}>
 			<RequestProvider>
-				<Embedded mainPanelClassName={mainPanelClassName} className={className} plugins={plugins} />
+				<Embedded mainPanelClassName={mainPanelClassName} className={className} />
 			</RequestProvider>
 		</RDTContextProvider>
 	)

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

@@ -3,7 +3,7 @@ import { useNavigation } from "react-router"
 
 export const ROUTE_CLASS = "outlet-route"
 
-export function useReactTreeListeners() {
+export function useFindRouteOutlets() {
 	const navigation = useNavigation()
 
 	// biome-ignore lint/suspicious/noExplicitAny: we don't know the type

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

@@ -1,17 +1,15 @@
 import { useMemo } from "react"
 import { useSettingsContext } from "../context/useRDTContext.js"
-import type { ReactRouterDevtoolsProps } from "../react-router-dev-tools.js"
 import { type Tab, tabs } from "../tabs/index.js"
 
 const shouldHideTimeline = (tab: Tab | undefined) => {
 	return tab?.hideTimeline
 }
 
-export const useTabs = (pluginsArray?: ReactRouterDevtoolsProps["plugins"]) => {
+export const useTabs = () => {
 	const { settings } = useSettingsContext()
 	const { activeTab } = settings
-	const plugins = pluginsArray?.map((plugin) => (typeof plugin === "function" ? plugin() : plugin))
-	const allTabs = useMemo(() => [...tabs, ...(plugins ? plugins : [])], [plugins])
+	const allTabs = tabs
 
 	const { Component, hideTimeline } = useMemo(() => {
 		const tab = allTabs.find((tab) => tab.id === activeTab)
@@ -24,6 +22,5 @@ export const useTabs = (pluginsArray?: ReactRouterDevtoolsProps["plugins"]) => {
 		allTabs,
 		hideTimeline,
 		activeTab,
-		isPluginTab: !tabs.find((tab) => activeTab === tab.id),
 	}
 }

packages/react-router-devtools/src/client/init/root.tsx

@@ -1,8 +1,8 @@
-import { TanStackDevtools } from "@tanstack/react-devtools"
+import type { ClientEventBusConfig, TanStackDevtoolsConfig } from "@tanstack/devtools"
+import { TanStackDevtools, type TanStackDevtoolsReactPlugin } from "@tanstack/react-devtools"
 import { Logo } from "../components/logo.js"
 import type { RdtClientConfig } from "../context/RDTContext.js"
 import { EmbeddedDevTools } from "../embedded-dev-tools.js"
-import type { ReactRouterDevtoolsProps } from "../react-router-dev-tools.js"
 import { useStyles } from "../styles/use-styles.js"
 
 export const defineClientConfig = (config: RdtClientConfig) => config
@@ -12,29 +12,50 @@ export const defineClientConfig = (config: RdtClientConfig) => config
  * @description Injects the dev tools into the Vite App, ONLY meant to be used by the package plugin, do not use this yourself!
  */
 
-// biome-ignore lint/suspicious/noExplicitAny: we don't know or care about props type
-export const withViteDevTools = (Component: any, _config?: ReactRouterDevtoolsProps) => (props: any) => {
-	// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type here as we spread it below
-	function AppWithDevTools(props: any) {
-		const { styles } = useStyles()
-		return (
-			<>
-				<Component {...props} />
-				<TanStackDevtools
-					config={{
-						customTrigger: (
-							<div data-testid="react-router-devtools-trigger" className={styles.tanstackTrigger.container}>
-								<Logo className={styles.tanstackTrigger.logo} />
-							</div>
-						),
-					}}
-					eventBusConfig={{
-						connectToServerBus: true,
-					}}
-					plugins={[{ name: "React Router Devtools", render: <EmbeddedDevTools /> }]}
-				/>
-			</>
-		)
-	}
-	return AppWithDevTools(props)
+type ViteDevToolsConfig = {
+	config?: RdtClientConfig
+	tanstackConfig?: Partial<Omit<TanStackDevtoolsConfig, "customTrigger">>
+	plugins?: Array<TanStackDevtoolsReactPlugin>
+	tanstackClientBusConfig?: Partial<ClientEventBusConfig>
 }
+
+export const withViteDevTools =
+	(
+		// biome-ignore lint/suspicious/noExplicitAny: we don't know or care about props type
+		Component: any,
+		viteConfig?: ViteDevToolsConfig
+	) =>
+	// biome-ignore lint/suspicious/noExplicitAny: we don't know or care about props type
+	(props: any) => {
+		// Extract config parts
+		const tanStackDevtoolsConfig = viteConfig?.tanstackConfig
+		const clientBusConfig = viteConfig?.tanstackClientBusConfig
+		// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type here as we spread it below
+		function AppWithDevTools(props: any) {
+			const { styles } = useStyles()
+			return (
+				<>
+					<Component {...props} />
+					<TanStackDevtools
+						config={{
+							...tanStackDevtoolsConfig,
+							customTrigger: (
+								<div data-testid="react-router-devtools-trigger" className={styles.tanstackTrigger.container}>
+									<Logo className={styles.tanstackTrigger.logo} />
+								</div>
+							),
+						}}
+						eventBusConfig={{
+							...clientBusConfig,
+							connectToServerBus: true,
+						}}
+						plugins={[
+							{ name: "React Router", render: <EmbeddedDevTools />, defaultOpen: true },
+							...(viteConfig?.plugins || []),
+						]}
+					/>
+				</>
+			)
+		}
+		return AppWithDevTools(props)
+	}

packages/react-router-devtools/src/client/layout/ContentPanel.tsx

@@ -3,22 +3,16 @@ import { useTabs } from "../hooks/useTabs.js"
 import { cx } from "../styles/use-styles.js"
 import { useStyles } from "../styles/use-styles.js"
 import { TimelineTab } from "../tabs/TimelineTab.js"
-import type { Tab } from "../tabs/index.js"
 
-interface ContentPanelProps {
-	plugins?: Tab[]
-}
-
-const ContentPanel = ({ plugins }: ContentPanelProps) => {
-	const { Component, hideTimeline, isPluginTab, activeTab } = useTabs(plugins)
+const ContentPanel = () => {
+	const { Component, hideTimeline, activeTab } = useTabs()
 	const { styles } = useStyles()
 
 	return (
 		<div className={styles.layout.contentPanel.container}>
 			<div
 				className={cx(
 					styles.layout.contentPanel.mainContent,
-					isPluginTab && styles.layout.contentPanel.mainContentUnset,
 					activeTab === "page" && styles.layout.contentPanel.mainContentPageTab
 				)}
 			>

packages/react-router-devtools/src/client/layout/Tabs.tsx

@@ -11,11 +11,6 @@ declare global {
 	}
 }
 
-interface TabsProps {
-	setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>
-	plugins?: TabType[]
-}
-
 const Tab = ({
 	tab,
 	activeTab,
@@ -48,11 +43,11 @@ const Tab = ({
 	)
 }
 
-const Tabs = ({ plugins }: TabsProps) => {
+const Tabs = () => {
 	const { settings } = useSettingsContext()
 	const { styles } = useStyles()
 	const { activeTab } = settings
-	const { visibleTabs } = useTabs(plugins)
+	const { visibleTabs } = useTabs()
 	const scrollRef = useHorizontalScroll()
 
 	return (

packages/react-router-devtools/src/client/react-router-dev-tools.tsx

@@ -1,9 +1,5 @@
-import type { RdtPlugin } from "../index.js"
 import type { RdtClientConfig } from "./context/RDTContext.js"
-import type { Tab } from "./tabs/index.js"
 
 export interface ReactRouterDevtoolsProps {
-	// Additional tabs to add to the dev tools
-	plugins?: (Tab | RdtPlugin)[]
 	config?: RdtClientConfig
 }