remove errors tab

Author: AlemTuzlak

packages/react-router-devtools/src/client/context/rdtReducer.ts

@@ -47,16 +47,6 @@ export type ServerInfo = {
 	}
 }
 
-type HTMLErrorPrimitive = {
-	file?: string
-	tag: string
-}
-
-export type HTMLError = {
-	child: HTMLErrorPrimitive
-	parent: HTMLErrorPrimitive
-}
-
 export type ReactRouterDevtoolsState = {
 	timeline: TimelineEvent[]
 	settings: {
@@ -88,7 +78,6 @@ export type ReactRouterDevtoolsState = {
 		 */
 		showRouteBoundariesOn: "hover" | "click"
 	}
-	htmlErrors: HTMLError[]
 	server?: ServerInfo
 	persistOpen: boolean
 }
@@ -108,7 +97,6 @@ export const initialState: ReactRouterDevtoolsState = {
 		routeViewMode: "tree",
 		withServerDevTools: true,
 	},
-	htmlErrors: [],
 	persistOpen: false,
 }
 
@@ -149,11 +137,6 @@ type SetServerInfo = {
 	payload: ServerInfo
 }
 
-type SetHtmlErrors = {
-	type: "SET_HTML_ERRORS"
-	payload: HTMLError[]
-}
-
 /** Aggregate of all action types */
 export type ReactRouterDevtoolsActions =
 	| SetTimelineEvent
@@ -162,19 +145,13 @@ export type ReactRouterDevtoolsActions =
 	| SetWholeState
 	| SetIsSubmittedAction
 	| SetServerInfo
-	| SetHtmlErrors
 	| SetPersistOpenAction
 
 export const rdtReducer = (
 	state: ReactRouterDevtoolsState,
 	{ type, payload }: ReactRouterDevtoolsActions
 ): ReactRouterDevtoolsState => {
 	switch (type) {
-		case "SET_HTML_ERRORS":
-			return {
-				...state,
-				htmlErrors: [...payload],
-			}
 		case "SET_SERVER_INFO":
 			return {
 				...state,

packages/react-router-devtools/src/client/context/useRDTContext.ts

@@ -24,21 +24,6 @@ const useRDTContext = () => {
 	}
 }
 
-export const useHtmlErrors = () => {
-	const { state, dispatch } = useRDTContext()
-	const { htmlErrors } = state
-	const setHtmlErrors = useCallback(
-		(htmlErrors: ReactRouterDevtoolsState["htmlErrors"]) => {
-			dispatch({
-				type: "SET_HTML_ERRORS",
-				payload: htmlErrors,
-			})
-		},
-		[dispatch]
-	)
-	return { htmlErrors, setHtmlErrors }
-}
-
 export const useServerInfo = () => {
 	const { state, dispatch } = useRDTContext()
 	const { server } = state

packages/react-router-devtools/src/client/hooks/useOpenElementSource.ts

@@ -1,19 +1,10 @@
 import { type Fiber, onCommitFiberRoot, traverseFiber } from "bippy"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect } from "react"
 import { useNavigation } from "react-router"
-import type { HTMLError } from "../context/rdtReducer.js"
-import { useHtmlErrors } from "../context/useRDTContext.js"
 
 export const ROUTE_CLASS = "outlet-route"
 
 export function useReactTreeListeners() {
-	const invalidHtmlCollection = useRef<HTMLError[]>([])
-	const { setHtmlErrors } = useHtmlErrors()
-	const addToInvalidCollection = (entry: HTMLError) => {
-		if (invalidHtmlCollection.current.find((item) => JSON.stringify(item) === JSON.stringify(entry))) return
-		invalidHtmlCollection.current.push(entry)
-	}
-
 	const navigation = useNavigation()
 
 	// biome-ignore lint/suspicious/noExplicitAny:  we don't know the type
@@ -26,144 +17,15 @@ export function useReactTreeListeners() {
 		styleNearestElement(fiberNode?.child)
 	}, [])
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: we want this to run only once
-	const findIncorrectHtml = useCallback(
-		// biome-ignore lint/suspicious/noExplicitAny: we don't know the type
-		(fiberNode: Fiber<any> | null, originalFiberNode: Fiber<any> | null, originalTag: string) => {
-			if (!fiberNode) return
-
-			const tag = fiberNode.elementType
-			const addInvalid = () => {
-				const parentSource = originalFiberNode?._debugOwner?._debugSource ?? originalFiberNode?._debugSource
-				const source = fiberNode?._debugOwner?._debugSource ?? fiberNode?._debugSource
-				addToInvalidCollection({
-					child: {
-						file: parentSource?.fileName,
-						tag: tag,
-					},
-					parent: {
-						file: source?.fileName,
-						tag: originalTag,
-					},
-				})
-			}
-
-			if (originalTag === "a") {
-				const element = fiberNode.stateNode as HTMLElement
-				switch (tag) {
-					case "a":
-					case "button":
-					case "details":
-					case "embed":
-					case "iframe":
-					case "label":
-					case "select":
-					case "textarea": {
-						addInvalid()
-						break
-					}
-					case "audio": {
-						if (element.getAttribute("controls") !== null) {
-							addInvalid()
-						}
-						break
-					}
-					case "img": {
-						if (element.getAttribute("usemap") !== null) {
-							addInvalid()
-						}
-						break
-					}
-					case "input": {
-						if (element.getAttribute("type") !== "hidden") {
-							addInvalid()
-						}
-						break
-					}
-					case "object": {
-						if (element.getAttribute("usemap") !== null) {
-							addInvalid()
-						}
-						break
-					}
-					case "video": {
-						if (element.getAttribute("controls") !== null) {
-							addInvalid()
-						}
-						break
-					}
-					default: {
-						break
-					}
-				}
-			}
-			if (originalTag === "p") {
-				switch (tag) {
-					case "div":
-					case "h1":
-					case "h2":
-					case "h3":
-					case "h4":
-					case "h5":
-					case "h6":
-					case "main":
-					case "pre":
-					case "p":
-					case "section":
-					case "table":
-					case "ul":
-					case "ol":
-					case "li": {
-						addInvalid()
-						break
-					}
-					default: {
-						break
-					}
-				}
-			}
-			if (originalTag === "form") {
-				if (tag === "form") {
-					addInvalid()
-				}
-			}
-			if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(originalTag)) {
-				if (tag === "h1" || tag === "h2" || tag === "h3" || tag === "h4" || tag === "h5" || tag === "h6") {
-					addInvalid()
-				}
-			}
-			findIncorrectHtml(fiberNode?.child, originalFiberNode, originalTag)
-			if (fiberNode?.sibling) {
-				findIncorrectHtml(fiberNode?.sibling, originalFiberNode, originalTag)
-			}
-		},
-		[]
-	)
-
 	useEffect(() => {
 		if (navigation.state !== "idle") return
 
 		onCommitFiberRoot((root) =>
 			traverseFiber(root.current, (fiberNode) => {
-				if (fiberNode?.stateNode && fiberNode?.elementType === "form") {
-					findIncorrectHtml(fiberNode.child, fiberNode, "form")
-				}
-				if (fiberNode?.stateNode && fiberNode?.elementType === "a") {
-					findIncorrectHtml(fiberNode.child, fiberNode, "a")
-				}
-				if (fiberNode?.stateNode && fiberNode?.elementType === "p") {
-					findIncorrectHtml(fiberNode.child, fiberNode, "p")
-				}
-				if (fiberNode?.stateNode && ["h1", "h2", "h3", "h4", "h5", "h6"].includes(fiberNode?.elementType)) {
-					findIncorrectHtml(fiberNode.child, fiberNode, fiberNode?.elementType)
-				}
 				if (fiberNode?.elementType?.name === "default" || fiberNode?.elementType?.name === "RenderedRoute") {
 					styleNearestElement(fiberNode)
 				}
 			})
 		)
-
-		setHtmlErrors(invalidHtmlCollection.current)
-		invalidHtmlCollection.current = []
-	}, [navigation.state, styleNearestElement, findIncorrectHtml, setHtmlErrors])
+	}, [navigation.state, styleNearestElement])
 }

packages/react-router-devtools/src/client/hooks/useReactTreeListeners.ts

@@ -1,4 +1,4 @@
-import { useHtmlErrors, useSettingsContext } from "../context/useRDTContext.js"
+import { useSettingsContext } from "../context/useRDTContext.js"
 import { useHorizontalScroll } from "../hooks/useHorizontalScroll.js"
 import { useTabs } from "../hooks/useTabs.js"
 import { cx } from "../styles/use-styles.js"
@@ -50,28 +50,16 @@ const Tab = ({
 
 const Tabs = ({ plugins }: TabsProps) => {
 	const { settings } = useSettingsContext()
-	const { htmlErrors } = useHtmlErrors()
 	const { styles } = useStyles()
 	const { activeTab } = settings
 	const { visibleTabs } = useTabs(plugins)
 	const scrollRef = useHorizontalScroll()
 
-	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)}>
 				{visibleTabs.map((tab) => (
-					<Tab
-						key={tab.id}
-						tab={{
-							...tab,
-							name: tab.id === "errors" && hasErrors ? `Errors (${htmlErrors.length})` : tab.name,
-						}}
-						activeTab={activeTab}
-						className={cx(
-							tab.id === "errors" && activeTab !== "errors" && hasErrors && styles.layout.tabs.tabErrorPulse
-						)}
-					/>
+					<Tab key={tab.id} tab={tab} activeTab={activeTab} />
 				))}
 			</div>
 		</div>

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

@@ -1091,67 +1091,6 @@ const stylesFactory = (theme: "light" | "dark") => {
 			`,
 		},
 
-		// Errors Tab
-		errorsTab: {
-			container: css`
-				display: flex;
-				flex-direction: column;
-				gap: 0.25rem;
-			`,
-			headerContainer: css`
-				margin-bottom: 0.25rem;
-			`,
-			headerTitle: css`
-				font-size: 1.125rem;
-				font-weight: 600;
-			`,
-			divider: css`
-				margin-top: 0.5rem;
-				border-color: #9ca3af;
-			`,
-			noErrors: css`
-				font-size: 1.5rem;
-			`,
-			errorCard: css`
-				display: flex;
-				justify-content: flex-start;
-				gap: 0.5rem;
-				border-radius: 0.5rem;
-				border: 1px solid rgba(220, 38, 38, 0.2);
-				padding: 0.5rem;
-			`,
-			errorIcon: css`
-				color: #dc2626;
-			`,
-			errorContent: css`
-				display: flex;
-				flex-direction: column;
-				gap: 0.5rem;
-				@media (min-width: 1024px) {
-					gap: 0;
-				}
-			`,
-			errorMessage: css`
-				color: #dc2626;
-				font-weight: 700;
-			`,
-			errorFileInfo: css`
-				display: flex;
-				flex-direction: column;
-				align-items: flex-start;
-				gap: 0.25rem;
-				font-size: 0.875rem;
-				color: #6b7280;
-				@media (min-width: 1024px) {
-					flex-direction: row;
-				}
-			`,
-			errorFile: css`
-				cursor: pointer;
-				color: #ffffff;
-			`,
-		},
-
 		// Settings Tab
 		settingsTab: {
 			container: css`