Skip to content

Commit 350f958

Browse files
AlemTuzlakAlemTuzlak
committed
remove hydration diff detector
1 parent 8ec73ce commit 350f958

7 files changed

Lines changed: 2 additions & 230 deletions

File tree

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

Lines changed: 0 additions & 63 deletions
This file was deleted.

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { RdtClientConfig } from "../context/RDTContext.js"
44
import { EmbeddedDevTools } from "../embedded-dev-tools.js"
55
import type { ReactRouterDevtoolsProps } from "../react-router-dev-tools.js"
66
import { useStyles } from "../styles/use-styles.js"
7-
import { hydrationDetector } from "./hydration.js"
87

98
export const defineClientConfig = (config: RdtClientConfig) => config
109

@@ -15,7 +14,6 @@ export const defineClientConfig = (config: RdtClientConfig) => config
1514

1615
// biome-ignore lint/suspicious/noExplicitAny: we don't know or care about props type
1716
export const withViteDevTools = (Component: any, _config?: ReactRouterDevtoolsProps) => (props: any) => {
18-
hydrationDetector()
1917
// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type here as we spread it below
2018
function AppWithDevTools(props: any) {
2119
const { styles } = useStyles()

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,7 @@ const Tabs = ({ plugins }: TabsProps) => {
5656
const { visibleTabs } = useTabs(plugins)
5757
const scrollRef = useHorizontalScroll()
5858

59-
const getErrorCount = () => {
60-
return htmlErrors.length + (window.HYDRATION_OVERLAY?.ERROR ? 1 : 0)
61-
}
62-
63-
const hasErrors = getErrorCount() > 0
59+
const hasErrors = htmlErrors.length > 0
6460
return (
6561
<div className={styles.layout.tabs.container}>
6662
<div ref={scrollRef} className={cx("react-router-dev-tools-tab", styles.layout.tabs.scrollContainer)}>
@@ -69,7 +65,7 @@ const Tabs = ({ plugins }: TabsProps) => {
6965
key={tab.id}
7066
tab={{
7167
...tab,
72-
name: tab.id === "errors" && hasErrors ? `Errors (${getErrorCount()})` : tab.name,
68+
name: tab.id === "errors" && hasErrors ? `Errors (${htmlErrors.length})` : tab.name,
7369
}}
7470
activeTab={activeTab}
7571
className={cx(

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

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1150,23 +1150,6 @@ const stylesFactory = (theme: "light" | "dark") => {
11501150
cursor: pointer;
11511151
color: #ffffff;
11521152
`,
1153-
hydrationContainer: css`
1154-
position: relative;
1155-
margin-top: 1rem;
1156-
width: 100%;
1157-
border: 2px solid #1f2937;
1158-
overflow-y: auto;
1159-
border-radius: 0.25rem;
1160-
`,
1161-
hydrationTitle: css`
1162-
font-size: 1.25rem;
1163-
padding: 0.5rem;
1164-
text-align: center;
1165-
`,
1166-
hydrationDivider: css`
1167-
margin-bottom: 0.25rem;
1168-
border-color: rgba(75, 85, 99, 0.3);
1169-
`,
11701153
},
11711154

11721155
// Settings Tab

‎packages/react-router-devtools/src/client/tabs/ErrorsTab.test.tsx‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -98,25 +98,4 @@ describe("ErrorsTab", () => {
9898
Test.fireEvent.click(childEl)
9999
expect(mockOpenSource).toHaveBeenCalledWith("./src/client/tabs/ErrorsTab.test.tsx")
100100
})
101-
102-
it("should show a hydration mismatch error if the server has a mismatch", async ({ renderDevTools }) => {
103-
window.HYDRATION_OVERLAY = {
104-
ERROR: true,
105-
SSR_HTML: "hydration-mismatch",
106-
CSR_HTML: "hydration-mismatch2",
107-
APP_ROOT_SELECTOR: "",
108-
}
109-
const { container } = renderDevTools({
110-
activeTab: "errors",
111-
})
112-
// The tab should show the number of errors
113-
expect(container.getByText("Errors (2)")).toBeDefined()
114-
// Shows the overlay properly
115-
expect(container.getByText("Hydration mismatch comparison")).toBeDefined()
116-
expect(container.getByText("Server-Side Render")).toBeDefined()
117-
expect(container.getByText("Client-Side Render")).toBeDefined()
118-
expect(container.getByText("hydration-mismatch2")).toBeDefined()
119-
// @ts-expect-error
120-
window.HYDRATION_OVERLAY = undefined
121-
})
122101
})

‎packages/react-router-devtools/src/client/tabs/ErrorsTab.tsx‎

Lines changed: 0 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,11 @@
1-
import beautify from "beautify"
2-
import { useEffect, useState } from "react"
3-
import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued"
41
import { Icon } from "../components/icon/Icon.js"
52
import { useHtmlErrors } from "../context/useRDTContext.js"
63
import { useStyles } from "../styles/use-styles.js"
74
import { openSource } from "../utils/open-source.js"
8-
// @ts-expect-error
9-
const DiffViewer: typeof ReactDiffViewer.default = ReactDiffViewer.default
10-
? // @ts-expect-error
11-
// biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
12-
(ReactDiffViewer.default as any)
13-
: // biome-ignore lint/suspicious/noExplicitAny: we don't care about the type
14-
(ReactDiffViewer as any)
155

166
const ErrorsTab = () => {
177
const { styles } = useStyles()
188
const { htmlErrors } = useHtmlErrors()
19-
const [SSRHtml, setSSRHtml] = useState("")
20-
const [CSRHtml, setCSRHtml] = useState("")
21-
const [hasHydrationMismatch, setHasHydrationMismatch] = useState(false)
22-
23-
useEffect(() => {
24-
if (typeof window === "undefined") return
25-
if (!window.HYDRATION_OVERLAY) {
26-
return
27-
}
28-
const ssrHtml = window.HYDRATION_OVERLAY?.SSR_HTML
29-
const newCSRHtml = window.HYDRATION_OVERLAY?.CSR_HTML
30-
31-
if (!ssrHtml || !newCSRHtml) return
32-
33-
const newSSR = beautify(ssrHtml, { format: "html" })
34-
const newCSR = beautify(newCSRHtml, { format: "html" })
35-
setSSRHtml(newSSR)
36-
setCSRHtml(newCSR)
37-
setHasHydrationMismatch(window.HYDRATION_OVERLAY?.ERROR ?? false)
38-
}, [])
399

4010
return (
4111
<div className={styles.errorsTab.container}>
@@ -84,78 +54,6 @@ const ErrorsTab = () => {
8454
</div>
8555
)
8656
})}
87-
{hasHydrationMismatch && (
88-
<div className={styles.errorsTab.hydrationContainer}>
89-
<h1 className={styles.errorsTab.hydrationTitle}>Hydration mismatch comparison</h1>
90-
<hr className={styles.errorsTab.hydrationDivider} />
91-
<DiffViewer
92-
oldValue={SSRHtml}
93-
newValue={CSRHtml}
94-
leftTitle={"Server-Side Render"}
95-
rightTitle={"Client-Side Render"}
96-
compareMethod={DiffMethod.WORDS}
97-
styles={{
98-
titleBlock: {
99-
textAlign: "center",
100-
},
101-
variables: {
102-
light: {
103-
diffViewerBackground: "#212121",
104-
diffViewerColor: "#FFF",
105-
addedBackground: "#044B53",
106-
addedColor: "white",
107-
removedBackground: "#632F34",
108-
removedColor: "white",
109-
wordAddedBackground: "#055d67",
110-
wordRemovedBackground: "#7d383f",
111-
addedGutterBackground: "#034148",
112-
removedGutterBackground: "#632b30",
113-
gutterBackground: "#1F2937",
114-
highlightBackground: "#212121",
115-
highlightGutterBackground: "#212121",
116-
codeFoldGutterBackground: "#1F2937",
117-
codeFoldBackground: "#1F2937",
118-
emptyLineBackground: "#363946",
119-
gutterColor: "#white",
120-
addedGutterColor: "#8c8c8c",
121-
removedGutterColor: "#8c8c8c",
122-
codeFoldContentColor: "white",
123-
diffViewerTitleBackground: "#212121",
124-
diffViewerTitleColor: "white",
125-
diffViewerTitleBorderColor: "#353846",
126-
},
127-
dark: {
128-
diffViewerBackground: "#212121",
129-
diffViewerColor: "#FFF",
130-
addedBackground: "#044B53",
131-
addedColor: "white",
132-
removedBackground: "#632F34",
133-
removedColor: "white",
134-
wordAddedBackground: "#055d67",
135-
wordRemovedBackground: "#7d383f",
136-
addedGutterBackground: "#034148",
137-
removedGutterBackground: "#632b30",
138-
gutterBackground: "#1F2937",
139-
highlightBackground: "#212121",
140-
highlightGutterBackground: "#212121",
141-
codeFoldGutterBackground: "#1F2937",
142-
codeFoldBackground: "#1F2937",
143-
emptyLineBackground: "#363946",
144-
gutterColor: "#white",
145-
addedGutterColor: "#8c8c8c",
146-
removedGutterColor: "#8c8c8c",
147-
codeFoldContentColor: "white",
148-
diffViewerTitleBackground: "#212121",
149-
diffViewerTitleColor: "white",
150-
diffViewerTitleBorderColor: "#353846",
151-
},
152-
},
153-
}}
154-
extraLinesSurroundingDiff={2}
155-
useDarkTheme={true}
156-
/>
157-
</div>
158-
)}
15957
</div>
16058
)
16159
}

0 commit comments

Comments
 (0)