feat(devtools): add useLocationChanges hook for location change detection

This commit introduces a new hook, useLocationChanges, that allows components to react to changes in the browser's location. The hook sets up listeners for pushState, replaceState, and popstate events, enabling efficient updates when the URL changes. Additionally, it integrates with the SEO tab components to enhance responsiveness to location changes, improving user experience and functionality.

Author: abedshaaban

packages/devtools/src/hooks/use-location-changes.ts

@@ -0,0 +1,69 @@
+import { onCleanup, onMount } from 'solid-js'
+
+const LOCATION_CHANGE_EVENT = 'tanstack-devtools:locationchange'
+
+type LocationChangeListener = () => void
+
+const listeners = new Set<LocationChangeListener>()
+
+let lastHref = ''
+let teardownLocationObservation: (() => void) | undefined
+
+function emitLocationChangeIfNeeded() {
+  const nextHref = window.location.href
+  if (nextHref === lastHref) return
+  lastHref = nextHref
+  listeners.forEach((listener) => listener())
+}
+
+function dispatchLocationChangeEvent() {
+  window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT))
+}
+
+function observeLocationChanges() {
+  if (teardownLocationObservation) return
+
+  lastHref = window.location.href
+
+  const originalPushState = window.history.pushState
+  const originalReplaceState = window.history.replaceState
+
+  const handleLocationSignal = () => {
+    emitLocationChangeIfNeeded()
+  }
+
+  window.history.pushState = function (...args) {
+    originalPushState.apply(this, args)
+    dispatchLocationChangeEvent()
+  }
+
+  window.history.replaceState = function (...args) {
+    originalReplaceState.apply(this, args)
+    dispatchLocationChangeEvent()
+  }
+
+  window.addEventListener('popstate', handleLocationSignal)
+  window.addEventListener('hashchange', handleLocationSignal)
+  window.addEventListener(LOCATION_CHANGE_EVENT, handleLocationSignal)
+
+  teardownLocationObservation = () => {
+    window.history.pushState = originalPushState
+    window.history.replaceState = originalReplaceState
+    window.removeEventListener('popstate', handleLocationSignal)
+    window.removeEventListener('hashchange', handleLocationSignal)
+    window.removeEventListener(LOCATION_CHANGE_EVENT, handleLocationSignal)
+    teardownLocationObservation = undefined
+  }
+}
+
+export function useLocationChanges(onChange: () => void) {
+  onMount(() => {
+    observeLocationChanges()
+    listeners.add(onChange)
+
+    onCleanup(() => {
+      listeners.delete(onChange)
+      if (listeners.size === 0) teardownLocationObservation?.()
+    })
+  })
+}

packages/devtools/src/tabs/seo-tab/links-preview.tsx

@@ -3,7 +3,7 @@ import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
 import { pickSeverityClass } from './seo-severity'
 import type { SeoSeverity } from './seo-severity'
-import type { SeoSectionSummary } from './seo-section-summary'
+import { countBySeverity, type SeoSectionSummary } from './seo-section-summary'
 
 type LinkKind = 'internal' | 'external' | 'non-web' | 'invalid'
 
@@ -162,6 +162,7 @@ export function getLinksPreviewSummary(): SeoSectionSummary {
   return {
     issues: allIssues.slice(0, LINK_SUMMARY_ISSUE_CAP),
     issueCount: allIssues.length,
+    totalCounts: countBySeverity(allIssues),
     hint: `${links.length} link(s)`,
   }
 }

packages/devtools/src/tabs/seo-tab/seo-overview.tsx

@@ -1,6 +1,7 @@
 import { For, Show, createMemo, createSignal } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useHeadChanges } from '../../hooks/use-head-changes'
+import { useLocationChanges } from '../../hooks/use-location-changes'
 import { useStyles } from '../../styles/use-styles'
 import { getCanonicalPageData } from './canonical-url-data'
 import { getSocialPreviewsSummary } from './social-previews'
@@ -13,6 +14,7 @@ import {
   aggregateSeoHealth,
   countBySeverity,
   sectionHealthScore,
+  totalIssueCount,
   worstSeverity,
 } from './seo-section-summary'
 import type { SeoSeverity } from './seo-severity'
@@ -127,6 +129,10 @@ export function SeoOverviewSection(props: {
     setTick((t) => t + 1)
   })
 
+  useLocationChanges(() => {
+    setTick((t) => t + 1)
+  })
+
   const bundle = createMemo(() => {
     void tick()
     const canonical = getCanonicalPageData()
@@ -321,15 +327,13 @@ export function SeoOverviewSection(props: {
         <div class={styles().seoOverviewCheckList}>
           <For each={bundle().rows}>
             {(row) => {
-              const sev = worstSeverity(row.summary.issues)
-              const c = countBySeverity(row.summary.issues)
-              const subsectionScore = sectionHealthScore(row.summary.issues)
-              const totalIssues =
-                row.summary.issueCount ?? row.summary.issues.length
+              const sev = worstSeverity(row.summary)
+              const c = countBySeverity(row.summary)
+              const subsectionScore = sectionHealthScore(row.summary)
+              const totalIssues = totalIssueCount(row.summary)
               const cappedSuffix =
-                row.summary.issueCount != null &&
-                row.summary.issueCount > row.summary.issues.length
-                  ? ` (${row.summary.issues.length} of ${row.summary.issueCount} listed)`
+                totalIssues > row.summary.issues.length
+                  ? ` (${row.summary.issues.length} of ${totalIssues} listed)`
                   : ''
               const issueLine =
                 totalIssues === 0

packages/devtools/src/tabs/seo-tab/seo-section-summary.ts

@@ -6,6 +6,12 @@ export type SeoIssue = {
   message: string
 }
 
+export type SeoIssueCounts = {
+  error: number
+  warning: number
+  info: number
+}
+
 /**
  * Summary of one SEO subsection for the overview: issues plus an optional
  * one-line hint (counts, presence, etc.).
@@ -15,6 +21,8 @@ export type SeoSectionSummary = {
   hint?: string
   /** When `issues` is capped, total issues before capping. */
   issueCount?: number
+  /** Per-severity totals before any display cap is applied. */
+  totalCounts?: SeoIssueCounts
 }
 
 export type SeoDetailView =
@@ -24,31 +32,48 @@ export type SeoDetailView =
   | 'heading-structure'
   | 'links-preview'
 
-export function worstSeverity(issues: Array<SeoIssue>): SeoSeverity | null {
-  if (issues.some((i) => i.severity === 'error')) return 'error'
-  if (issues.some((i) => i.severity === 'warning')) return 'warning'
-  if (issues.some((i) => i.severity === 'info')) return 'info'
-  return null
+function countRawIssues(issues: Array<SeoIssue>): SeoIssueCounts {
+  return issues.reduce<SeoIssueCounts>(
+    (counts, issue) => {
+      counts[issue.severity] += 1
+      return counts
+    },
+    { error: 0, warning: 0, info: 0 },
+  )
 }
 
-export function countBySeverity(issues: Array<SeoIssue>): {
-  error: number
-  warning: number
-  info: number
-} {
-  return {
-    error: issues.filter((i) => i.severity === 'error').length,
-    warning: issues.filter((i) => i.severity === 'warning').length,
-    info: issues.filter((i) => i.severity === 'info').length,
-  }
+export function countBySeverity(
+  summaryOrIssues: SeoSectionSummary | Array<SeoIssue>,
+): SeoIssueCounts {
+  return Array.isArray(summaryOrIssues)
+    ? countRawIssues(summaryOrIssues)
+    : (summaryOrIssues.totalCounts ?? countRawIssues(summaryOrIssues.issues))
+}
+
+export function totalIssueCount(summary: SeoSectionSummary): number {
+  if (summary.issueCount != null) return summary.issueCount
+  const counts = countBySeverity(summary)
+  return counts.error + counts.warning + counts.info
+}
+
+export function worstSeverity(
+  summaryOrIssues: SeoSectionSummary | Array<SeoIssue>,
+): SeoSeverity | null {
+  const counts = countBySeverity(summaryOrIssues)
+  if (counts.error > 0) return 'error'
+  if (counts.warning > 0) return 'warning'
+  if (counts.info > 0) return 'info'
+  return null
 }
 
 /**
  * 0–100 health for one subsection’s issues, using the same penalty weights as
  * aggregateSeoHealth().
  */
-export function sectionHealthScore(issues: Array<SeoIssue>): number {
-  const counts = countBySeverity(issues)
+export function sectionHealthScore(
+  summaryOrIssues: SeoSectionSummary | Array<SeoIssue>,
+): number {
+  const counts = countBySeverity(summaryOrIssues)
   const penalty = Math.min(
     100,
     counts.error * 22 + counts.warning * 9 + counts.info * 2,
@@ -63,10 +88,18 @@ export function sectionHealthScore(issues: Array<SeoIssue>): number {
 export function aggregateSeoHealth(summaries: Array<SeoSectionSummary>): {
   score: number
   label: 'Good' | 'Fair' | 'Poor'
-  counts: ReturnType<typeof countBySeverity>
+  counts: SeoIssueCounts
 } {
-  const all = summaries.flatMap((s) => s.issues)
-  const counts = countBySeverity(all)
+  const counts = summaries.reduce<SeoIssueCounts>(
+    (allCounts, summary) => {
+      const summaryCounts = countBySeverity(summary)
+      allCounts.error += summaryCounts.error
+      allCounts.warning += summaryCounts.warning
+      allCounts.info += summaryCounts.info
+      return allCounts
+    },
+    { error: 0, warning: 0, info: 0 },
+  )
   const penalty = Math.min(
     100,
     counts.error * 22 + counts.warning * 9 + counts.info * 2,