React router v7 transition to react-router-devtools (#151)

* Start of React router v7 transition

* fix

* temp fix for typecheck

* small fix

* Removed remix forge completely, removed all remix references, renamed package to react-router-devtools

* fix

* removed test app, moved to pre.1 release

* fix

* fix

* knip update

* Network tracking PR (#161)

* Network tracking PR

* Network tracking PR

* Catch aborted requests

* Added tests, fixed some bugs and UI issues

* fixes

* Release 2.0.0-beta.0

* Complete refactor of the server to support single fetch properly

* fix for linting issues

* small bug fix

* README update

* README update

* Removed legacy config, allow to include segments in produciton, updated docs website

* made transforms safer

* made transforms safer

* Finalised the doc page migration to react-router

* Finalised the doc page migration to react-router

* renamed test app

* necessary chanages to make deploy to fly work again

* added fly deploy workflows

* moved to validate

* Added Dockerfile reference

* Added newly introduced flag  for single-repo but subfolder app deploys like docs in this case

* removed "journal" text and changed title color

* title color changed

* main title fixed

* Custom context feature

* Refactored completely the testing strategy, added 100-ish tests

* Refactored completely the testing strategy, added 100-ish tests

* Refactored completely the testing strategy, added 100-ish tests

* upgrade to react-router v7

---------

Co-authored-by: Thomas Fritz <mail@fritzthomas.com>
Co-authored-by: abrulic1 <abrulic1@etf.unsa.ba>

Author: 3 people

.github/workflows/publish-commit.yaml

@@ -1,5 +1,12 @@
 name: 🚀 pkg-pr-new
-on: [push, pull_request]
+concurrency:
+  group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
 
 jobs:
   build:

.github/workflows/publish.yaml

@@ -16,4 +16,15 @@ jobs:
       - run: npm ci
       - run: npm publish
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  deploy-preview:
+    name: "🚀 Deploy Docs"
+    needs: [npm-publish]
+    uses: forge42dev/workflows/.github/workflows/deploy-to-fly.yaml@monorepo-matrix
+    with:
+      workspace_name: docs
+      set_cwd_to_workspace: true
+      github_environment: "docs-release"
+    secrets:
+      fly_api_token: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/validate.yaml

@@ -63,7 +63,19 @@ jobs:
         run: npm install -g dotenv-cli
       - name: ⚡ Run vitest
         run: npm run test:cov
-      - name: "Report Coverage"
+#      - name: "Report Coverage"
         # Only works if you set `reportOnFailure: true` in your vite config as specified above
-        if: always()
-        uses: davelosert/vitest-coverage-report-action@v2
+#        if: always()
+#        uses: davelosert/vitest-coverage-report-action@v2
+
+
+  deploy-preview:
+    name: "🚀 Deploy Docs"
+    needs: [lint, typecheck, vitest]
+    uses: forge42dev/workflows/.github/workflows/deploy-to-fly.yaml@monorepo-matrix
+    with:
+      workspace_name: docs
+      set_cwd_to_workspace: true
+      github_environment: "docs-previev"
+    secrets:
+      fly_api_token: ${{ secrets.FLY_API_TOKEN }}

README.md

@@ -1,46 +1,53 @@
 <p align="center">
-<img src="./assets/remix-dev-tools.png" style="display: block; margin: 0 auto;" align="middle" height="240" alt="Remix Development Tools"  />
+<img src="./assets/react-router-dev-tools.png" style="display: block; margin: 0 auto;" align="middle" height="240" alt="react-router-devtools"  />
 </p>
 
-# Remix Development Tools
+# react-router-devtools
 
-![GitHub Repo stars](https://img.shields.io/github/stars/Code-Forge-Net/Remix-Dev-Tools?style=social)
-![npm](https://img.shields.io/npm/v/remix-development-tools?style=plastic)
-![GitHub](https://img.shields.io/github/license/Code-Forge-Net/Remix-Dev-Tools?style=plastic)
-![npm](https://img.shields.io/npm/dy/remix-development-tools?style=plastic)
-![npm](https://img.shields.io/npm/dw/remix-development-tools?style=plastic)
-![GitHub top language](https://img.shields.io/github/languages/top/Code-Forge-Net/Remix-Dev-Tools?style=plastic)
+![GitHub Repo stars](https://img.shields.io/github/stars/forge42dev/react-router-devtools?style=social)
+![npm](https://img.shields.io/npm/v/react-router-devtools?style=plastic)
+![GitHub](https://img.shields.io/github/license/forge42dev/react-router-devtools?style=plastic)
+![npm](https://img.shields.io/npm/dy/react-router-devtools?style=plastic)
+![npm](https://img.shields.io/npm/dw/react-router-devtools?style=plastic)
+![GitHub top language](https://img.shields.io/github/languages/top/forge42dev/react-router-devtools?style=plastic)
 
-Remix Development Tools is an open-source package designed to enhance your development workflow when working with Remix, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal**, **Settings**, **Errors** and **Routes**, along with a side tab called **Timeline**. With Remix Development Tools, you can efficiently monitor and manage various aspects of your Remix projects, including page information, URL parameters, server responses, loader data, routes, and more. You can
-also track down hydration issues with the **Errors** tab and view your routes in a tree/list view with the **Routes** tab.
+react-router-devtools is an open-source package designed to enhance your development workflow when working with React Router v7+, a full-stack JavaScript framework for building web applications. This package provides a user-friendly interface consisting of three tabs, **Active Page**, **Terminal**, **Settings**, **Errors**, **Network** and **Routes**, along with a side tab called **Timeline**. With react-router-devtools, you can efficiently monitor and manage various aspects of your React Router v7+ projects, including page information, URL parameters, server responses, loader data, routes, and more.
 
-# Documentation
 
-Detailed documentation can be found here:
+You can also track down hydration issues with the **Errors** tab and view your routes in a tree/list view with the **Routes** tab.
 
-https://remix-development-tools.fly.dev/
 
+**Network** tab is a powerful tool for tracing all your network requests and see what's happening under the hood. You can see all the requests in real-time, with the ability to see if they are aborted, if they are cached, and if they are successful or not.
+
+### Remix Development Tools
+
+This repository used to be called remix-development-tools, but we decided to rename it to react-router-devtools to better reflect the fact that it's a package for React Router v7+ and not just for Remix.
+
+If you're looking for the old version of this package, you can find it [here](https://github.com/forge42dev/Remix-Dev-Tools/tree/remix-development-tools).
 
-# Deprecation warning!
+And the detailed documentation can be found [here](https://remix-development-tools.fly.dev/).
 
-Huge news! The remix-development-tools will be turning into react-router-devtools once the stable release of react-router 7 is out! As you already might've heard remix is being merged into react-router, so naturally these devtools are going to be supporting react-router users rather than remix users!
+# Documentation
+
+Detailed documentation can be found here:
+
+https://remix-development-tools.fly.dev/
 
-We are looking forward to expanding the scope of our users to a much broader audience and helping even more projects. When it comes to remix-development-tools all the updates will be coming out regularly until the official release of react-router v7 where this package will be rebranded with the same feature set.
 
 ## Getting Started
 
 1. Install the package via npm:
 
 ```bash
-npm install remix-development-tools -D
+npm install react-router-devtools -D
 ```
 
 ```js
-import { remixDevTools } from "remix-development-tools";
+import { reactRouterDevTools } from "react-router-devtools";
 
 // Add it to your plugins array in vite.config.js
 export default defineConfig({
-  plugins: [remixDevTools(), remix(), tsconfigPaths()],
+  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
 });
 ```
 
@@ -49,17 +56,17 @@ That's it, you're done!
 
 ## Support
 
-If you like Remix Development Tools consider starring the repository. If you have any questions, comments, or suggestions, please feel free to reach out!
+If you like react-router-devtools consider starring the repository or donating via Github sponsors. If you have any questions, comments, or suggestions, please feel free to reach out!
 
 ## License
 
-Remix Development Tools is open-source software released under the [MIT License](https://opensource.org/licenses/MIT).
+react-router-devtools is open-source software released under the [MIT License](https://opensource.org/licenses/MIT).
 
 ## Acknowledgments
 
-Remix Development Tools was inspired by the Remix framework and aims to enhance the development experience for Remix users.
+React Router Devtools was inspired by the React Router v7 and aims to enhance the development experience for React Router v7+ users.
 
-Feel free to explore Remix Development Tools, and we hope it significantly improves your Remix development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!
+Feel free to explore React Router Devtools, and we hope it significantly improves your React Router development process. If you encounter any issues or have suggestions for enhancements, please don't hesitate to open an issue on our GitHub repository. Happy Remixing!
 
 ## Thanks
 

biome.json

@@ -14,7 +14,7 @@
 		"lineWidth": 120
 	},
 	"files": {
-		"ignore": ["test-apps/**", "docs/**", "./src/external/**", "./plugins/**", "./src/input.css"]
+		"ignore": ["test-apps/**", "docs/**", "./src/external/**", "./plugins/**", "./src/input.css", "./src/gradients.css"]
 	},
 	"organizeImports": {
 		"enabled": true
@@ -28,7 +28,9 @@
 				"noExplicitAny": "off",
 				"noConsole": {
 					"level": "error",
-					"options": { "allow": ["assert", "error", "info", "warn"] }
+					"options": {
+						"allow": ["assert", "error", "info", "warn"]
+					}
 				}
 			},
 			"style": {

docs/.eslintrc.cjs

@@ -1,12 +1,10 @@
-# syntax = docker/dockerfile:1
+# syntax = docker/dockerfile:1.4
 
 # Adjust NODE_VERSION as desired
-ARG NODE_VERSION=20.10.0
-FROM node:${NODE_VERSION}-slim as base
+ARG NODE_VERSION=22
+FROM node:${NODE_VERSION}-slim AS base
 
-LABEL fly_launch_runtime="Remix"
-
-# Remix app lives here
+# React router app lives here
 WORKDIR /app
 
 # Set production environment
@@ -42,4 +40,4 @@ COPY --from=build / /
 
 # Start the server by default, this can be overwritten at runtime
 EXPOSE 3000
-CMD [ "node_modules/.bin/remix-serve", "./build/server/index.js" ]
+CMD [ "node_modules/.bin/react-router-serve", "./build/server/index.js" ]

docs/Dockerfile

@@ -1,5 +1,6 @@
-import { useRevalidator } from '@remix-run/react'
+
 import { useEffect } from 'react'
+import { useRevalidator } from 'react-router'
 
   const clientHints = {
   theme: {

docs/app/components/ClientHint.tsx

@@ -1,10 +1,11 @@
-import { useFetcher } from '@remix-run/react'
+
 import { MoonIcon, SunIcon } from 'lucide-react'
 import { useRef } from 'react'
+import { useFetcher } from 'react-router'
 
 import { useTheme } from '~/hooks/useTheme'
 
-export const RemixPWAThemeSwitcher = () => {
+export const PWAThemeSwitcher = () => {
   const fetcher = useFetcher()
   const theme = useTheme()
   const ref = useRef<HTMLButtonElement>(null)

docs/app/components/ThemeSwitcher.tsx

@@ -1,17 +1,18 @@
-import { Link, useRouteLoaderData } from '@remix-run/react'
+
 import { Fragment, useMemo, useRef } from 'react'
 import { getMDXComponent, getMDXExport } from 'mdx-bundler/client'
 import clsx from 'clsx'
 import redent from 'redent'
 import type { MouseEvent } from 'react'
 
-import { RemixPWAInfo as Info } from '~/components/plugins/Info'
-import { RemixPWAWarn as Warn } from '~/components/plugins/Warn'
+import { PWAInfo as Info } from '~/components/plugins/Info'
+import { PWAWarn as Warn } from '~/components/plugins/Warn'
 import SnippetGroup from '~/components/plugins/Snippet'
 import Editor from '~/components/plugins/Editor'
 import Heading from '~/components/plugins/Heading'
 import { useTableOfContents } from '~/hooks/useTableOfContents'
 import { BackgroundGradient } from '../ui/background-gradient'
+import { Link, useRouteLoaderData } from 'react-router'
 
 export function Documentation({
   route = 'routes/docs.$tag.$slug',
@@ -117,7 +118,7 @@ export function Documentation({
               </dt>
               <dd className="mt-1">
                 <Link
-                  unstable_viewTransition
+                  viewTransition
                   className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
                   to={`/docs/${tag}/${prev.slug}`}
                   prefetch="intent"
@@ -138,7 +139,7 @@ export function Documentation({
                   className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
                   to={`/docs/${tag}/${next.slug}`}
                   prefetch="intent"
-                  unstable_viewTransition
+                  viewTransition
                 >
                   {next.alternateTitle ?? next.title}
                   {/* */}&nbsp;<span aria-hidden="true">→</span>