feat(devtools): add devtools DOM filter and integrate it into SEO components

Author: abedshaaban

examples/react/seo/index.html

@@ -21,7 +21,7 @@
     <meta property="og:url" content="https://example.com/seo" />
     <meta
       property="og:image"
-      content="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200"
+      content="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800"
     />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="SEO Devtools Example" />

examples/react/seo/src/index.tsx

@@ -1,13 +1,12 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { seoDevtoolsPlugin } from '@tanstack/devtools-seo/react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
+  <>
     <App />
     <TanStackDevtools plugins={[seoDevtoolsPlugin()]} />
-  </StrictMode>,
+  </>,
 )

packages/devtools-seo/src/devtools-dom-filter.ts

@@ -0,0 +1,15 @@
+const DEVTOOLS_ROOT_SELECTORS = [
+  '#tanstack_devtools',
+  '[data-testid="tanstack_devtools"]',
+  '[data-devtools-root]',
+  '[id^="plugin-container-"]',
+  '[id^="plugin-title-container-"]',
+] as const
+
+export function isInsideDevtools(node: Element | null): boolean {
+  if (!node) {
+    return false
+  }
+
+  return DEVTOOLS_ROOT_SELECTORS.some((selector) => !!node.closest(selector))
+}

packages/devtools-seo/src/heading-structure-preview.tsx

@@ -2,6 +2,7 @@ import { For, Show, createMemo, createSignal } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useSeoStyles } from './use-seo-styles'
 import { pickSeverityClass } from './seo-severity'
+import { isInsideDevtools } from './devtools-dom-filter'
 import { useLocationChanges } from './hooks/use-location-changes'
 import type { SeoSeverity } from './seo-severity'
 import type { SeoSectionSummary } from './seo-section-summary'
@@ -21,7 +22,7 @@ type HeadingIssue = {
 function extractHeadings(): Array<HeadingItem> {
   const nodes = Array.from(
     document.body.querySelectorAll<HTMLHeadingElement>('h1,h2,h3,h4,h5,h6'),
-  )
+  ).filter((node) => !isInsideDevtools(node))
 
   return nodes.map((node, index) => {
     const tag = node.tagName.toLowerCase() as HeadingItem['tag']

packages/devtools-seo/src/json-ld-preview.tsx

@@ -1,5 +1,6 @@
 import { For, Show } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
+import { isInsideDevtools } from './devtools-dom-filter'
 import { useSeoStyles } from './use-seo-styles'
 import { pickSeverityClass, seoHealthTier } from './seo-severity'
 import type { SeoSeverity } from './seo-severity'
@@ -327,7 +328,7 @@ function analyzeJsonLdScripts(): Array<JsonLdEntry> {
     document.querySelectorAll<HTMLScriptElement>(
       'script[type="application/ld+json"]',
     ),
-  )
+  ).filter((script) => !isInsideDevtools(script))
 
   return scripts.map((script, index) => {
     const raw = script.textContent.trim() || ''

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

@@ -1,5 +1,6 @@
 import { For, Show, createEffect, createMemo, createSignal } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
+import { isInsideDevtools } from './devtools-dom-filter'
 import { useSeoStyles } from './use-seo-styles'
 import { countBySeverity } from './seo-section-summary'
 import { pickSeverityClass } from './seo-severity'
@@ -106,13 +107,7 @@ function analyzeLinks(): Array<LinkRow> {
   const anchors = Array.from(
     document.body.querySelectorAll<HTMLAnchorElement>('a[href]'),
   )
-  return anchors
-    .filter(
-      (anchor) =>
-        !anchor.closest('[data-testid="tanstack_devtools"]') &&
-        !anchor.closest('[data-devtools-root]'),
-    )
-    .map(classifyLink)
+  return anchors.filter((anchor) => !isInsideDevtools(anchor)).map(classifyLink)
 }
 
 /** Display order in the links report: internal, external, non-web, then invalid. */