fix bugs

AlemTuzlak · AlemTuzlak · commit 4d1cb846147d · 2025-11-11T14:37:15.000+01:00
diff --git a/README.md b/README.md
@@ -62,7 +62,6 @@ If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in
 optimizeDeps: {
   include: [
     // other optimized deps
-    "@bkrem/react-transition-group",
   ],
 },
 ```
diff --git a/docs/content/01-started/01-installation.mdx b/docs/content/01-started/01-installation.mdx
@@ -58,7 +58,6 @@ If you're trying to spin it up on CF, try adding this to your `optimizeDeps` in
 optimizeDeps: {
   include: [
     // other optimized deps
-    "@bkrem/react-transition-group",
   ],
 },
 ```
diff --git a/packages/react-router-devtools/README.md b/packages/react-router-devtools/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",
   ],
 },
 ```
diff --git a/packages/react-router-devtools/src/client/components/Tag.tsx b/packages/react-router-devtools/src/client/components/Tag.tsx
@@ -13,13 +13,19 @@ interface TagProps {
 	color: keyof typeof TAG_COLORS
 	children: ReactNode
 	className?: string
+	size?: "small" | "default"
 }
 
-const Tag = ({ color, children, className }: TagProps) => {
+const Tag = ({ color, children, className, size = "default" }: TagProps) => {
 	const { styles } = useStyles()
 	return (
 		<span
-			className={cx(styles.tag.base, styles.tag[color.toLowerCase() as Lowercase<keyof typeof TAG_COLORS>], className)}
+			className={cx(
+				styles.tag.base,
+				size === "small" && styles.tag.small,
+				styles.tag[color.toLowerCase() as Lowercase<keyof typeof TAG_COLORS>],
+				className
+			)}
 		>
 			{children}
 		</span>
diff --git a/packages/react-router-devtools/src/client/components/network-tracer/NetworkWaterfall.tsx b/packages/react-router-devtools/src/client/components/network-tracer/NetworkWaterfall.tsx
@@ -363,7 +363,7 @@ const NetworkWaterfall: React.FC<Props> = ({ requests, width }) => {
 									</button>
 									<div className={styles.network.waterfall.methodTag}>
 										{request?.method && (
-											<Tag className="!px-1 !py-0 text-[0.7rem]" color={METHOD_COLORS[request.method]}>
+											<Tag size="small" color={METHOD_COLORS[request.method]}>
 												{request.method}
 											</Tag>
 										)}
@@ -379,9 +379,6 @@ const NetworkWaterfall: React.FC<Props> = ({ requests, width }) => {
 						styles.network.waterfall.scrollContainer,
 						isDragging ? styles.network.waterfall.scrollContainerGrabbing : styles.network.waterfall.scrollContainerGrab
 					)}
-					style={{
-						height: Math.min(filteredRequests.length * (BAR_HEIGHT + BAR_PADDING) + 24, window.innerHeight - 200),
-					}}
 					onMouseDown={handleMouseDown}
 					onMouseMove={handleMouseMove}
 					onMouseUp={handleMouseUp}
@@ -440,26 +437,6 @@ const NetworkWaterfall: React.FC<Props> = ({ requests, width }) => {
 					/>
 				</AnimatePresence>
 			)}
-			{/* 		<div className="sticky top-0 z-10 bg-gray-900 p-2 border-b border-gray-700 flex items-center gap-2">
-				<button
-					type="button"
-					className="p-1 hover:bg-gray-700 rounded"
-					onClick={() => setScale((s) => Math.min(MAX_SCALE, s + 0.1))}
-				>
-					<div id="zoom-in" className="w-4 h-4" />
-				</button>
-				<button
-					type="button"
-					className="p-1 hover:bg-gray-700 rounded"
-					onClick={() => setScale((s) => Math.max(MIN_SCALE, s - 0.1))}
-				>
-					<div id="zoom-out" className="w-4 h-4" />
-				</button>
-				<button type="button" className="p-1 hover:bg-gray-700 rounded" onClick={handleReset}>
-					<div id="rotate-ccw" className="w-4 h-4" />
-				</button>
-				<div className="text-sm text-gray-400">Scale: {scale.toFixed(2)}x</div>
-			</div> */}
 		</div>
 	)
 }
diff --git a/packages/react-router-devtools/src/client/context/requests/request-context.tsx b/packages/react-router-devtools/src/client/context/requests/request-context.tsx
@@ -9,7 +9,7 @@ const RequestContext = createContext<{
 }>({ requests: [], removeAllRequests: () => {}, isLimitReached: false })
 
 const requestMap = new Map<string, RequestEvent>()
-const MAX_REQUESTS = 42
+const MAX_REQUESTS = 60
 
 export const RequestProvider = ({ children }: { children: ReactNode }) => {
 	const [requests, setRequests] = useState<RequestEvent[]>([])
diff --git a/packages/react-router-devtools/src/client/styles/use-styles.ts b/packages/react-router-devtools/src/client/styles/use-styles.ts
@@ -308,6 +308,10 @@ const stylesFactory = (theme: "light" | "dark") => {
 				font-weight: 500;
 				height: max-content;
 			`,
+			small: css`
+				padding: 0 0.25rem;
+				font-size: 0.7rem;
+			`,
 			green: css`
 				border: 1px solid #10b981;
 				color: ${textPrimary};
@@ -1935,6 +1939,7 @@ const stylesFactory = (theme: "light" | "dark") => {
 				flex: 1;
 				overflow: hidden;
 				width: 100%;
+				min-height: 0;
 			`,
 		},
 
@@ -1943,28 +1948,29 @@ const stylesFactory = (theme: "light" | "dark") => {
 			// NetworkPanel
 			panel: {
 				container: css`
-					height: 100%;
+						height: 100%;
 					overflow-y: auto;
 					color: #e5e7eb;
 				`,
 				innerContainer: css`
-					height: 100%;
+	height: 100%;
 					margin-left: auto;
 					margin-right: auto;
 					padding: 1rem;
 				`,
 				cardContainer: css`
-					height: 100%;
+
+						height: 100%;
 					background-color: #1f2937;
 					border-radius: 0.5rem;
 					box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 					overflow: hidden;
 				`,
 				networkContainer: css`
-					height: 100%;
+	height: 100%;
 					border-top: 1px solid #374151;
 					padding: 1rem;
-					overflow-y: auto;
+					overflow: hidden;
 				`,
 			},
 
@@ -2041,7 +2047,7 @@ const stylesFactory = (theme: "light" | "dark") => {
 					justify-content: space-between;
 					gap: 1rem;
 					padding: 0.625rem 1rem;
-					margin-bottom: 1rem;
+							margin-bottom: 1rem;
 					background-color: rgba(59, 130, 246, 0.1);
 					border-bottom: 1px solid rgba(59, 130, 246, 0.3);
 					font-size: 0.75rem;
@@ -2065,6 +2071,7 @@ const stylesFactory = (theme: "light" | "dark") => {
 				`,
 				flexContainer: css`
 					display: flex;
+
 				`,
 				requestsHeader: css`
 					height: 1.25rem;
@@ -2093,7 +2100,7 @@ const stylesFactory = (theme: "light" | "dark") => {
 				requestButton: css`
 					display: flex;
 					width: 100%;
-					align-items: center;
+					align-items: baseline;
 					gap: 0.375rem;
 					padding-left: 0.375rem;
 					padding-right: 0.375rem;
diff --git a/packages/react-router-devtools/src/vite/plugin.tsx b/packages/react-router-devtools/src/vite/plugin.tsx
@@ -242,7 +242,6 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 					include: [
 						...(config.optimizeDeps?.include ?? []),
 						"react-router-devtools > react-d3-tree",
-						"react-router-devtools > @bkrem/react-transition-group",
 						"react-router-devtools/client",
 						"react-router-devtools/context",
 						"react-router-devtools/server",
diff --git a/test-apps/custom-server/app/welcome/welcome.tsx b/test-apps/custom-server/app/welcome/welcome.tsx
@@ -1,90 +1,99 @@
-import logoDark from "./logo-dark.svg";
-import logoLight from "./logo-light.svg";
-
-export function Welcome({ message }: { message: string }) {
-  return (
-    <main className="flex h-screen items-center justify-center">
-      <div className="flex flex-col items-center gap-16">
-        <header className="flex flex-col items-center gap-9">
-          <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
-            {message}
-          </h1>
-          <div className="w-[500px] max-w-[100vw] p-4">
-            <img
-              src={logoLight}
-              alt="React Router"
-              className="block w-full dark:hidden"
-            />
-            <img
-              src={logoDark}
-              alt="React Router"
-              className="hidden w-full dark:block"
-            />
-          </div>
-        </header>
-        <nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
-          <p className="leading-6 text-gray-700 dark:text-gray-200">
-            What&apos;s next?
-          </p>
-          <ul>
-            {resources.map(({ href, text, icon }) => (
-              <li key={href}>
-                <a
-                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
-                  href={href}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {icon}
-                  {text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
-    </main>
-  );
-}
-
-const resources = [
-  {
-    href: "https://reactrouter.com/docs",
-    text: "React Router Docs",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
-      >
-        <path
-          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-      </svg>
-    ),
-  },
-  {
-    href: "https://rmx.as/discord",
-    text: "Join Discord",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="20"
-        viewBox="0 0 24 20"
-        fill="none"
-        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
-      >
-        <path
-          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
-          strokeWidth="1.5"
-        />
-      </svg>
-    ),
-  },
-];
+import { Form } from "react-router";
+import logoDark from "./logo-dark.svg";
+import logoLight from "./logo-light.svg";
+
+export function Welcome({ message }: { message: string }) {
+  return (
+    <main className="flex h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-16">
+        <header className="flex flex-col items-center gap-9">
+          <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
+            {message}
+          </h1>
+          <Form>
+            <button
+              type="submit"
+              className="rounded-full bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+            >
+              Get Started
+            </button>
+          </Form>
+          <div className="w-[500px] max-w-[100vw] p-4">
+            <img
+              src={logoLight}
+              alt="React Router"
+              className="block w-full dark:hidden"
+            />
+            <img
+              src={logoDark}
+              alt="React Router"
+              className="hidden w-full dark:block"
+            />
+          </div>
+        </header>
+        <nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
+          <p className="leading-6 text-gray-700 dark:text-gray-200">
+            What&apos;s next?
+          </p>
+          <ul>
+            {resources.map(({ href, text, icon }) => (
+              <li key={href}>
+                <a
+                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {icon}
+                  {text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </main>
+  );
+}
+
+const resources = [
+  {
+    href: "https://reactrouter.com/docs",
+    text: "React Router Docs",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+  },
+  {
+    href: "https://rmx.as/discord",
+    text: "Join Discord",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 24 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
+          strokeWidth="1.5"
+        />
+      </svg>
+    ),
+  },
+];
