remove hydration diff detector

Author: AlemTuzlak

packages/react-router-devtools/src/client/init/hydration.ts

@@ -4,7 +4,6 @@ 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"
-import { hydrationDetector } from "./hydration.js"
 
 export const defineClientConfig = (config: RdtClientConfig) => config
 
@@ -15,7 +14,6 @@ export const defineClientConfig = (config: RdtClientConfig) => config
 
 // biome-ignore lint/suspicious/noExplicitAny: we don't know or care about props type
 export const withViteDevTools = (Component: any, _config?: ReactRouterDevtoolsProps) => (props: any) => {
-	hydrationDetector()
 	// 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()

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

@@ -56,11 +56,7 @@ const Tabs = ({ plugins }: TabsProps) => {
 	const { visibleTabs } = useTabs(plugins)
 	const scrollRef = useHorizontalScroll()
 
-	const getErrorCount = () => {
-		return htmlErrors.length + (window.HYDRATION_OVERLAY?.ERROR ? 1 : 0)
-	}
-
-	const hasErrors = getErrorCount() > 0
+	const hasErrors = htmlErrors.length > 0
 	return (
 		<div className={styles.layout.tabs.container}>
 			<div ref={scrollRef} className={cx("react-router-dev-tools-tab", styles.layout.tabs.scrollContainer)}>
@@ -69,7 +65,7 @@ const Tabs = ({ plugins }: TabsProps) => {
 						key={tab.id}
 						tab={{
 							...tab,
-							name: tab.id === "errors" && hasErrors ? `Errors (${getErrorCount()})` : tab.name,
+							name: tab.id === "errors" && hasErrors ? `Errors (${htmlErrors.length})` : tab.name,
 						}}
 						activeTab={activeTab}
 						className={cx(

packages/react-router-devtools/src/client/init/trigger.svg

@@ -1150,23 +1150,6 @@ const stylesFactory = (theme: "light" | "dark") => {
 				cursor: pointer;
 				color: #ffffff;
 			`,
-			hydrationContainer: css`
-				position: relative;
-				margin-top: 1rem;
-				width: 100%;
-				border: 2px solid #1f2937;
-				overflow-y: auto;
-				border-radius: 0.25rem;
-			`,
-			hydrationTitle: css`
-				font-size: 1.25rem;
-				padding: 0.5rem;
-				text-align: center;
-			`,
-			hydrationDivider: css`
-				margin-bottom: 0.25rem;
-				border-color: rgba(75, 85, 99, 0.3);
-			`,
 		},
 
 		// Settings Tab

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

@@ -98,25 +98,4 @@ describe("ErrorsTab", () => {
 		Test.fireEvent.click(childEl)
 		expect(mockOpenSource).toHaveBeenCalledWith("./src/client/tabs/ErrorsTab.test.tsx")
 	})
-
-	it("should show a hydration mismatch error if the server has a mismatch", async ({ renderDevTools }) => {
-		window.HYDRATION_OVERLAY = {
-			ERROR: true,
-			SSR_HTML: "hydration-mismatch",
-			CSR_HTML: "hydration-mismatch2",
-			APP_ROOT_SELECTOR: "",
-		}
-		const { container } = renderDevTools({
-			activeTab: "errors",
-		})
-		// The tab should show the number of errors
-		expect(container.getByText("Errors (2)")).toBeDefined()
-		// Shows the overlay properly
-		expect(container.getByText("Hydration mismatch comparison")).toBeDefined()
-		expect(container.getByText("Server-Side Render")).toBeDefined()
-		expect(container.getByText("Client-Side Render")).toBeDefined()
-		expect(container.getByText("hydration-mismatch2")).toBeDefined()
-		// @ts-expect-error
-		window.HYDRATION_OVERLAY = undefined
-	})
 })

packages/react-router-devtools/src/client/styles/use-styles.ts

@@ -1,41 +1,11 @@
-import beautify from "beautify"
-import { useEffect, useState } from "react"
-import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
 import { Icon } from "../components/icon/Icon.js"
 import { useHtmlErrors } from "../context/useRDTContext.js"
 import { useStyles } from "../styles/use-styles.js"
 import { openSource } from "../utils/open-source.js"
-// @ts-expect-error
-const DiffViewer: typeof ReactDiffViewer.default = ReactDiffViewer.default
-	? // @ts-expect-error
-		// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-		(ReactDiffViewer.default as any)
-	: // biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
-		(ReactDiffViewer as any)
 
 const ErrorsTab = () => {
 	const { styles } = useStyles()
 	const { htmlErrors } = useHtmlErrors()
-	const [SSRHtml, setSSRHtml] = useState("")
-	const [CSRHtml, setCSRHtml] = useState("")
-	const [hasHydrationMismatch, setHasHydrationMismatch] = useState(false)
-
-	useEffect(() => {
-		if (typeof window === "undefined") return
-		if (!window.HYDRATION_OVERLAY) {
-			return
-		}
-		const ssrHtml = window.HYDRATION_OVERLAY?.SSR_HTML
-		const newCSRHtml = window.HYDRATION_OVERLAY?.CSR_HTML
-
-		if (!ssrHtml || !newCSRHtml) return
-
-		const newSSR = beautify(ssrHtml, { format: "html" })
-		const newCSR = beautify(newCSRHtml, { format: "html" })
-		setSSRHtml(newSSR)
-		setCSRHtml(newCSR)
-		setHasHydrationMismatch(window.HYDRATION_OVERLAY?.ERROR ?? false)
-	}, [])
 
 	return (
 		<div className={styles.errorsTab.container}>
@@ -84,78 +54,6 @@ const ErrorsTab = () => {
 					</div>
 				)
 			})}
-			{hasHydrationMismatch && (
-				<div className={styles.errorsTab.hydrationContainer}>
-					<h1 className={styles.errorsTab.hydrationTitle}>Hydration mismatch comparison</h1>
-					<hr className={styles.errorsTab.hydrationDivider} />
-					<DiffViewer
-						oldValue={SSRHtml}
-						newValue={CSRHtml}
-						leftTitle={"Server-Side Render"}
-						rightTitle={"Client-Side Render"}
-						compareMethod={DiffMethod.WORDS}
-						styles={{
-							titleBlock: {
-								textAlign: "center",
-							},
-							variables: {
-								light: {
-									diffViewerBackground: "#212121",
-									diffViewerColor: "#FFF",
-									addedBackground: "#044B53",
-									addedColor: "white",
-									removedBackground: "#632F34",
-									removedColor: "white",
-									wordAddedBackground: "#055d67",
-									wordRemovedBackground: "#7d383f",
-									addedGutterBackground: "#034148",
-									removedGutterBackground: "#632b30",
-									gutterBackground: "#1F2937",
-									highlightBackground: "#212121",
-									highlightGutterBackground: "#212121",
-									codeFoldGutterBackground: "#1F2937",
-									codeFoldBackground: "#1F2937",
-									emptyLineBackground: "#363946",
-									gutterColor: "#white",
-									addedGutterColor: "#8c8c8c",
-									removedGutterColor: "#8c8c8c",
-									codeFoldContentColor: "white",
-									diffViewerTitleBackground: "#212121",
-									diffViewerTitleColor: "white",
-									diffViewerTitleBorderColor: "#353846",
-								},
-								dark: {
-									diffViewerBackground: "#212121",
-									diffViewerColor: "#FFF",
-									addedBackground: "#044B53",
-									addedColor: "white",
-									removedBackground: "#632F34",
-									removedColor: "white",
-									wordAddedBackground: "#055d67",
-									wordRemovedBackground: "#7d383f",
-									addedGutterBackground: "#034148",
-									removedGutterBackground: "#632b30",
-									gutterBackground: "#1F2937",
-									highlightBackground: "#212121",
-									highlightGutterBackground: "#212121",
-									codeFoldGutterBackground: "#1F2937",
-									codeFoldBackground: "#1F2937",
-									emptyLineBackground: "#363946",
-									gutterColor: "#white",
-									addedGutterColor: "#8c8c8c",
-									removedGutterColor: "#8c8c8c",
-									codeFoldContentColor: "white",
-									diffViewerTitleBackground: "#212121",
-									diffViewerTitleColor: "white",
-									diffViewerTitleBorderColor: "#353846",
-								},
-							},
-						}}
-						extraLinesSurroundingDiff={2}
-						useDarkTheme={true}
-					/>
-				</div>
-			)}
 		</div>
 	)
 }