feat(devtools): refactor SEO package integration and update build configuration

Author: abedshaaban

package.json

@@ -85,7 +85,6 @@
   "overrides": {
     "@tanstack/devtools": "workspace:*",
     "@tanstack/devtools-a11y": "workspace:*",
-    "@tanstack/devtools-seo": "workspace:*",
     "@tanstack/react-devtools": "workspace:*",
     "@tanstack/preact-devtools": "workspace:*",
     "@tanstack/solid-devtools": "workspace:*",

packages/devtools-seo/package.json

@@ -20,12 +20,20 @@
     "solid-js"
   ],
   "type": "module",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/esm/react/index.d.ts",
+        "default": "./dist/esm/react/index.js"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -43,19 +51,28 @@
     "test:eslint": "eslint ./src",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "tsup"
+    "build": "vite build"
   },
   "dependencies": {
     "@tanstack/devtools-ui": "workspace:*",
+    "@tanstack/devtools-utils": "workspace:*",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9"
   },
   "peerDependencies": {
+    "react": ">=16.8",
     "solid-js": ">=1.9.7"
   },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "tsup": "^8.5.0",
-    "tsup-preset-solid": "^2.2.0",
+    "@tanstack/vite-config": "0.4.3",
+    "@types/react": "^19.2.0",
+    "react": "^19.2.0",
+    "vite": "^8.0.0",
     "vite-plugin-solid": "^2.11.11"
   }
 }

packages/devtools-seo/src/react/SeoDevtools.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Fragment, createElement, useEffect, useRef } from 'react'
+import { render } from 'solid-js/web'
+import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import { SeoTab } from '../seo-tab'
+
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
+
+export interface SeoDevtoolsReactInit extends DevtoolsPanelProps {}
+
+function SeoDevtoolsPanel(props: SeoDevtoolsReactInit) {
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!rootRef.current) {
+      return
+    }
+
+    const dispose = render(
+      () => (
+        <ThemeContextProvider theme={props.theme}>
+          <SeoTab />
+        </ThemeContextProvider>
+      ),
+      rootRef.current,
+    )
+
+    return () => {
+      dispose()
+    }
+  }, [props])
+
+  return createElement('div', {
+    ref: rootRef,
+    style: { height: '100%' },
+  })
+}
+
+function SeoDevtoolsPanelNoOp() {
+  return createElement(Fragment)
+}
+
+export { SeoDevtoolsPanel, SeoDevtoolsPanelNoOp }

packages/devtools-seo/src/react/index.ts

@@ -0,0 +1,9 @@
+'use client'
+
+export {
+  SeoDevtoolsPanel,
+  SeoDevtoolsPanelNoOp,
+  type SeoDevtoolsReactInit,
+} from './SeoDevtools'
+
+export { seoDevtoolsPlugin, seoDevtoolsNoOpPlugin } from './plugin'

packages/devtools-seo/src/react/plugin.ts

@@ -0,0 +1,9 @@
+import { createReactPlugin } from '@tanstack/devtools-utils/react'
+import { SeoDevtoolsPanel } from './SeoDevtools'
+
+const [seoDevtoolsPlugin, seoDevtoolsNoOpPlugin] = createReactPlugin({
+  name: 'TanStack SEO',
+  Component: SeoDevtoolsPanel,
+})
+
+export { seoDevtoolsPlugin, seoDevtoolsNoOpPlugin }

packages/devtools-seo/tsup.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/vite-config'
+import solid from 'vite-plugin-solid'
+import packageJson from './package.json'
+import type { Plugin } from 'vite'
+
+const config = defineConfig({
+  plugins: [solid() as any satisfies Plugin],
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    environment: 'jsdom',
+    globals: true,
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts', './src/react/index.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)

packages/devtools-seo/vite.config.ts

@@ -69,7 +69,6 @@
     "@solid-primitives/resize-observer": "^2.1.3",
     "@tanstack/devtools-client": "workspace:*",
     "@tanstack/devtools-event-bus": "workspace:*",
-    "@tanstack/devtools-seo": "workspace:*",
     "@tanstack/devtools-ui": "workspace:*",
     "clsx": "^2.1.1",
     "goober": "^2.1.16",

packages/devtools/package.json

@@ -1,5 +1,4 @@
-import { SeoTab } from '@tanstack/devtools-seo'
-import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'
+import { Cogs, List } from '@tanstack/devtools-ui/icons'
 import { SettingsTab } from './settings-tab'
 import { PluginsTab } from './plugins-tab'
 
@@ -10,12 +9,6 @@ export const tabs = [
     component: (props: { isOpen: boolean }) => <PluginsTab {...props} />,
     icon: () => <List />,
   },
-  {
-    name: 'SEO',
-    id: 'seo',
-    component: () => <SeoTab />,
-    icon: () => <PageSearch />,
-  },
   {
     name: 'Settings',
     id: 'settings',