$ show code-forge-io/react-router-devtools
This repository is a monorepo for `react-router-devtools`, a Vite plugin that provides a comprehensive debugging and inspection UI for React Router v7+ applications. It integrates with TanStack DevTools to offer tabs for active page, routes, network waterfall, timeline, settings, errors, and custom plugins. The core mechanism uses Babel-based AST transformations to instrument server and client data functions (loaders, actions) with timing, tracing, and context wrappers without requiring user code changes. The package exports multiple entry points for client, server, and context integration, and supports both framework mode (Vite plugin) and declarative mode (EmbeddedDevTools component). The repository also includes a full documentation site built with React Router, example plugins (icon-library, tailwind-palette), and several test applications. It is a well-crafted developer tool with a modular architecture, but has some technical drift due to tight coupling to React Router internals and reliance on Babel AST transforms that may break with ecosystem changes.
The LLM identified 4 files worth highlighting for reuse:
Provides a reusable Babel-based AST transform that wraps route data function exports (loader, action, clientLoader, clientAction) with devtools instrumentation HOCs. Handles various export patterns (function declarations, const/let/var, re-exports, aliased imports) and is isolated enough to be extracted for other instrumentation use cases.
Implements a CSS-in-JS factory using `goober` that generates component styles parameterized by a light/dark theme. The `stylesFactory` returns an object of class names, and the `useStyles` hook manages theme state and re-creates styles on change. This pattern is self-contained and reusable for any React project needing a lightweight theming system.
A fully self-contained JSON viewer component with a store-based architecture for customizing symbols, types, sections, and themes. It is extracted as an external module within the repo and can be reused in any React application to display JSON data with expand/collapse, copy, and type-specific rendering.
Demonstrates the devtools plugin system by providing a custom tab that renders an icon library. The plugin is a plain object with `name` and `render` (React component), loaded from a directory via Vite plugin. This pattern is reusable for creating any custom devtools tab and shows the extensibility architecture.