Feat/migrate to tanstack devtools (#236)

* tanstack migration init

* remove tailwind for goober

* update deps

* migrate to event client

* make ui look much nicer on event tab

* better ui

* improve events screen

* swap to evenets for server info

* removed custom behavior and rely on tanstack devtools for open source and uses event client for route info

* removed detached mode

* remove hydration diff detector

* remove errors tab

* remove bippy

* add middleware logs and events

* fix bugs

* update ui

* ui improvements

* remove settings tab

* remove settings tab

* cleanup of old code

* add back in plugins and cleanup package exports

* improve ui and logs

* update docs

* fix

* docs(changeset): migrated to TanStack Devtools

* changeset

* add license

* fix bugs

* fix bugs

* fix bugs

* update docs for data mode

* update styles

Author: AlemTuzlak

.changeset/mean-facts-swim.md

@@ -0,0 +1,25 @@
+---
+"react-router-devtools": major
+---
+
+Migration to TanStack Devtools is here! 🎉
+
+You can now leverage the powerful features of TanStack Devtools within React Router Devtools, enhancing your debugging and development experience.
+
+You can easily create your own devtool plugins, inspect application state, and trace network requests with improved visibility.
+
+### Key Changes:
+- **TanStack Integration**: Seamless integration with TanStack Devtools for advanced debugging capabilities
+- **Enhanced UI**: New panels and tabs for better state and network inspection
+- **Improved Performance**: Optimized for faster load times and reduced overhead
+- **Middleware Support**: Ability to log middleware events and actions for deeper insights and also see them on the network tab
+- **Extended Configuration**: New configuration options to customize TanStack Devtools behavior alongside React Router
+
+### Migration Steps:
+1. Update your configuration to include TanStack-specific options.
+2. Review and adjust any custom plugins to ensure compatibility with the new TanStack integration.
+3. Test your application to verify that all devtools features are functioning as expected.
+
+### Features that have been removed:
+- The route creation via devtools UI has been removed.
+- Server info on the active page tab has been removed.

.github/copilot-instructions.md

@@ -0,0 +1,28 @@
+---
+applyTo: '**'
+---
+Provide project context and coding guidelines that AI should follow when generating code, answering questions, or reviewing changes.
+
+Whenever you want to build the packages to test if they work you should run `pnpm run build` from the root of the repository.
+
+If you want to run tests you can run `pnpm run test` from the root of the repository.
+
+If you want to check if the examples work you need to go to `test-apps/<example-name>` and run   `pnpm run dev`.
+
+When writing code, please follow these guidelines:
+- Use TypeScript for all new code.
+- Ensure all new code is covered by tests.
+- Do not use `any` type; prefer specific types or generics.
+- Follow existing code style and conventions.
+
+If you get an error "address already in use :::42069 you should kill the process using that port.
+
+If we add a new functionality add a section about it in the `docs/content` folder explaining how to use it and update the `README.md` file to mention it.
+
+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.
+
+If `pnpm run test` fails because of check, you can run `pnpm run check:fix` to fix the issues automatically.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Forge 42
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -62,10 +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",
   ],
 },
 ```

docs/app/routes/index.tsx

@@ -7,8 +7,7 @@ import { Meteors } from "~/components/ui/Meteors"
 import { InfiniteMovingCards } from "~/components/ui/infinite-cards"
 import { Navbar } from "~/components/ui/navbar-menu"
 import { TypewriterEffect } from "~/components/ui/typewritter"
-import { Route } from "./+types"
-import { buildDocPathFromSlug } from "~/utils/path-builders"
+import type { Route } from "./+types"
 import { generateMetaFields } from "~/utils/seo"
 import { getDomain } from "~/utils/get-domain"
 
@@ -97,7 +96,7 @@ export function OpenSourceReveal() {
 				}
 				className="h-[40rem]"
 			>
-				Click <span className="text-red-500">Shift + Right Click</span> to directly go to element source in
+				Click <span className="text-red-500">Shift + Ctrl + Left Click</span> to directly go to element source in
 				<span className="ml-2 text-blue-500">VS Code</span> 🔥
 			</MaskContainer>
 		</div>

docs/content/01-started/01-installation.mdx

@@ -14,7 +14,7 @@ npm install react-router-devtools -D
 
 This will install it as a dev dependency in your project.
 
-## Enabling the tools
+## Enabling the tools (framework mode)
 
 After you have installed the tools, you need to go to your `vite.config.ts` file which will probably look something like this:
 
@@ -47,17 +47,43 @@ export default defineConfig({
 Make sure your plugin is BEFORE the react router one!
 </WarningAlert>
 
+
+## Enabling the tools (data/declarative mode)
+
+If you are using React Router in data/declarative mode, you can still use the devtools
+by first installing @tanstack/react-devtools and then adding the devtools somewhere under
+the router provider in your app.
+
+```tsx
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { EmbeddedDevTools } from 'react-router-devtools';
+
+export function App() {
+  return (
+    <>
+      <YourRouterProvider>
+        <YourAppComponents />
+        <TanStackDevtools plugins=[{
+          name: "React Router",
+          render: <EmbeddedDevTools />
+        }] />
+      </YourRouterProvider>
+      <TanStackDevtools />
+    </>
+  );
+}
+```
+
+react-router-devtools uses @tanstack/devtools as the base for the UI, you can refer to their
+[documentation](https://tanstack.com/devtools/latest/docs/overview) for more information on how to use the devtools interface.
+
 ### CloudFlare
 
 If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in your `vite.config.js` file:
 ```ts
 optimizeDeps: {
   include: [
     // other optimized deps
-    "beautify",
-    "react-diff-viewer-continued",
-    "classnames",
-    "@bkrem/react-transition-group",
   ],
 },
 ```

docs/content/02-features/02-active-page-tab.mdx renamed to docs/content/02-features/01-active-page-tab.mdx

@@ -16,9 +16,6 @@ gradient background that can be set in the settings.
 <InfoAlert>
   This feature is only available in the development mode because it used react dev tools to find the `<Outlet />` component.
 
-  If you want to try it open up the dev tools right now nad hover over `/docs/main` in the panel.
-
-  You can also change the gradient background color in the settings.
 </InfoAlert>
 
 ## Loader list
@@ -33,16 +30,6 @@ the loader type and the loader file.
   - `green` - represents a normal route file, whether index or not
 </InfoAlert>
 
-### Open in VS code
-
-Each segment has an **open in VS code** button that opens the loader file in VS code.
-This is useful for quick navigation to the loader file.
-
-<InfoAlert title="Caveat!">
-This only works if you have the `code` command installed in your terminal. If you don't have it installed you can
- install it by following the instructions [here](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line).
-</InfoAlert>
-
 ### Loader data
 
 Each segment has a loader data **JSON** object that contains all the information returned by the loader of that segment.
@@ -66,19 +53,6 @@ This will contain all the **wildcard** params currently available on this route.
 If you open up the dev tools, you will be able to see that `tag` and `slug` are both in
 the route params.
 
-### Server info
-
-The server info section contains all the server information for the current segment, including:
-- `loaderTriggerCount` - the number of times the loader has been triggered (updates in real-time)
-- `actionTriggerCount` - the number of times the action has been triggered (updates in real-time)
-- `lowestExecutionTime` - the lowest execution time of the loader (updates in real-time)
-- `highestExecutionTime` - the highest execution time of the loader (updates in real-time)
-- `averageExecutionTime` - the average execution time of the loader (updates in real-time)
-- `lastLoaderInfo` - the last loader info object (updates in real-time), includes execution time, request headers and response headers.
-- `lastActionInfo` - the last action info object (updates in real-time), includes execution time, request headers and response headers.
-- `loaderCalls` - an array of loaderInfo objects ordered from most recent to least recent (updates in real-time)
-- `actionCalls` - an array of actionInfo objects ordered from most recent to least recent (updates in real-time)
-
 ### handles
 
 The handles section contains all the handles for the current segment.
@@ -98,7 +72,7 @@ The timeline section on the right contains useful information on navigation and
 
 Every time there is a navigation or submission event, a new entry will be added to the timeline on the top.
 
-It is limited to 50 entries and will remove the oldest entry when the limit is reached.
+It is limited to 30 entries and will remove the oldest entry when the limit is reached.
 
 The timeline will contain the following information for each event:
 - `type` - the type of event (navigation or submission, fetcher or normal)

docs/content/02-features/01-shortcuts.mdx

@@ -4,6 +4,17 @@ summary: "The Devtools context provides tracing utilities for loaders and action
 description: "Using the devtools context to trace events and send them to the network tab"
 ---
 
+## TanStack DevTools Integration
+
+React Router Devtools v6+ integrates with [TanStack DevTools](https://tanstack.com/devtools), providing enhanced debugging capabilities alongside React Router specific features. The devtools now include:
+
+- React Router specific tabs (Active Page, Routes, Network, Timeline, Settings)
+- TanStack DevTools panels for advanced state inspection
+- Unified debugging experience with seamless integration
+
+You can configure TanStack-specific behavior through the [general configuration](/configuration/general#tanstack-devtools-integration).
+
+---
 
 ## Devtools extended context
 
@@ -19,9 +30,9 @@ export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing.start("my-event")
+  const end = tracing.start("my-event")
   // do something here, eg DB call
-  tracing.end("my-event", startTime!)
+  end()
   return "data"
 }
 ```
@@ -33,9 +44,9 @@ export const action = async ({ request, devTools }: ActionFunctionArgs) => {
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+  end()
   return "data"
 }
 ```
@@ -47,9 +58,9 @@ export const clientLoader = async ({ request, devTools }: ClientLoaderFunctionAr
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
@@ -59,9 +70,9 @@ export const clientAction = async ({ request, devTools }: ClientActionFunctionAr
   const tracing = devTools?.tracing;
   // tracing is a set of utilities to be used in your data fetching functions to trace events
   // in network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
@@ -103,10 +114,9 @@ const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
 The tracing object contains all the utilities related to network tab tracing feature of react-router-devtools.
 
 
-There are three functions you can use:
+There are two functions you can use:
 - trace
 - start
-- end
 
 
 
@@ -143,18 +153,18 @@ This is used together with `end` to trace the time of the event.
 export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
   const tracing = devTools?.tracing;
   // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("my-event")
+  const end = tracing?.start("my-event")
   // do something here, eg DB call
 
   // End the trace
-  tracing?.end("my-event", startTime!)
+   end()
   return "data"
 }
 ```
 
 <WarningAlert title="Warning">
- This function relies on you using the `end` with the same name as the start event, otherwise
-you will end up having a never ending loading bar in the network tab!
+ This function relies on you using the `end`returned from it, otherwise the event
+ will never end in your devtools
 </WarningAlert>
 
 
@@ -164,32 +174,4 @@ you will end up having a never ending loading bar in the network tab!
 
 #### Returns
 
-The start time of the event
-
-### end
-
-The `end` function is a function that will end a trace for the name provided to it and return the end time.
-
-```ts
-export const loader = async ({ request, devTools }: LoaderFunctionArgs) => {
-  const tracing = devTools?.tracing;
-  // this will be traced in the network tab of react-router-devtools
-  const startTime = tracing?.start("get user")
-  // do something here, eg DB call
-  const user = await getUser();
-  // End the trace
-  tracing?.end("get user", startTime!, { user })
-  return "data"
-
-}
-```
-
-#### Parameters
-
-- `name` - The name of the event
-- `startTime` - The start time of the sendEvent
-- `data` - The data to be sent with the event
-
-#### Returns
-
-The data provided in the last parameter
+The end trace function