[WIP] feat: add start devtools

examples/react/start-basic-react-query/package.json

@@ -10,12 +10,15 @@
     "start": "pnpx srvx --prod -s ../client dist/server/server.js"
   },
   "dependencies": {
+    "@tanstack/devtools-vite": "^0.3.3",
+    "@tanstack/react-devtools": "^0.7.0",
     "@tanstack/react-query": "^5.90.0",
     "@tanstack/react-query-devtools": "^5.90.0",
     "@tanstack/react-router": "^1.166.7",
     "@tanstack/react-router-devtools": "^1.166.7",
     "@tanstack/react-router-ssr-query": "^1.166.7",
     "@tanstack/react-start": "^1.166.7",
+    "@tanstack/react-start-devtools": "0.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
@@ -32,4 +35,4 @@
     "vite": "^7.3.1",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

examples/react/start-basic-react-query/src/routes/__root.tsx

@@ -6,9 +6,11 @@ import {
   Scripts,
   createRootRouteWithContext,
 } from '@tanstack/react-router'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import {  ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+import {  TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import * as React from 'react'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { StartDevtoolsPanel } from '@tanstack/react-start-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
@@ -136,8 +138,23 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         </div>
         <hr />
         {children}
-        <TanStackRouterDevtools position="bottom-right" />
-        <ReactQueryDevtools buttonPosition="bottom-left" />
+        <TanStackDevtools eventBusConfig={{
+          connectToServerBus: true
+        }} plugins={[
+          {
+            name: 'React Query',
+            render: () => <ReactQueryDevtoolsPanel />
+          },
+          {
+            name: 'React Router',
+            render: () => <TanStackRouterDevtoolsPanel />
+          },
+          {
+            name: "TanStack Start",
+            render: () => <StartDevtoolsPanel />
+          }
+        ]} />
+
         <Scripts />
       </body>
     </html>

examples/react/start-basic-react-query/vite.config.ts

@@ -2,13 +2,15 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
 import viteReact from '@vitejs/plugin-react'
+import { devtools } from '@tanstack/devtools-vite'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   server: {
     port: 3000,
   },
   plugins: [
+    devtools(),
     tailwindcss(),
     tsConfigPaths({
       projects: ['./tsconfig.json'],

examples/react/start-devtools-showcase/src/start.ts

@@ -0,0 +1,52 @@
+import { createStart, createMiddleware } from '@tanstack/react-start'
+
+export const requestLoggingMiddleware = createMiddleware().server(
+  async ({ next, pathname }) => {
+    const start = performance.now()
+    console.log(`[request] → ${pathname}`)
+
+    const result = await next({
+      context: {
+        requestStartTime: start,
+        requestPathname: pathname,
+      },
+    })
+
+    const duration = performance.now() - start
+    console.log(`[request] ← ${pathname} (${duration.toFixed(1)}ms)`)
+
+    return result
+  },
+)
+
+export const rateLimitMiddleware = createMiddleware().server(
+  async ({ next }) => {
+    return next({
+      context: {
+        rateLimited: false,
+      },
+    })
+  },
+)
+
+export const globalFunctionMiddleware = createMiddleware({
+  type: 'function',
+}).server(async ({ next }) => {
+  const start = performance.now()
+
+  const result = await next({
+    context: {
+      globalFnMiddlewareApplied: true,
+    },
+  })
+
+  const duration = performance.now() - start
+  console.log(`[global-fn-middleware] executed in ${duration.toFixed(1)}ms`)
+
+  return result
+})
+
+export const startInstance = createStart(() => ({
+  requestMiddleware: [requestLoggingMiddleware, rateLimitMiddleware],
+  functionMiddleware: [globalFunctionMiddleware],
+}))

package.json

@@ -124,6 +124,9 @@
       "@tanstack/vue-start-client": "workspace:*",
       "@tanstack/vue-start-server": "workspace:*",
       "@tanstack/start-plugin-core": "workspace:*",
+      "@tanstack/start-devtools": "workspace:*",
+      "@tanstack/react-start-devtools": "workspace:*",
+      "@tanstack/solid-start-devtools": "workspace:*",
       "@tanstack/start-client-core": "workspace:*",
       "@tanstack/start-server-core": "workspace:*",
       "@tanstack/start-storage-context": "workspace:*",
@@ -135,4 +138,4 @@
       "@tanstack/nitro-v2-vite-plugin": "workspace:*"
     }
   }
-}
+}

packages/react-start-devtools/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+
+import pluginReact from '@eslint-react/eslint-plugin'
+import pluginReactCompiler from 'eslint-plugin-react-compiler'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    files: ['**/*.{ts,tsx}'],
+    ...pluginReact.configs.recommended,
+  },
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+      'react-compiler': pluginReactCompiler,
+    },
+    rules: {
+      '@eslint-react/dom/no-missing-button-type': 'off',
+      'react-compiler/react-compiler': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+  {
+    files: ['**/__tests__/**'],
+    rules: {
+      // 'react-compiler/react-compiler': 'off',
+    },
+  },
+]

packages/react-start-devtools/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@tanstack/react-start-devtools",
+  "version": "0.0.1",
+  "description": "React adapter for devtools for Start.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/react-start-devtools"
+  },
+  "homepage": "https://tanstack.com/start",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8",
+    "@types/react-dom": ">=16.8",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "dependencies": {
+    "@tanstack/devtools-utils": "^0.0.3",
+    "@tanstack/start-devtools": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^1.53.1",
+    "@vitejs/plugin-react": "^5.0.2",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^5.2.0"
+  }
+}

packages/react-start-devtools/src/ReactStartDevtools.tsx

@@ -0,0 +1,10 @@
+
+import { createReactPanel } from '@tanstack/devtools-utils/react'
+import { StartDevtoolsCore } from "@tanstack/start-devtools"
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react';
+
+export interface StartDevtoolsReactInit extends DevtoolsPanelProps { }
+
+const [StartDevtoolsPanel, StartDevtoolsPanelNoOp] = createReactPanel(StartDevtoolsCore)
+
+export { StartDevtoolsPanel, StartDevtoolsPanelNoOp }

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

@@ -0,0 +1,16 @@
+'use client'
+
+import * as Devtools from './ReactStartDevtools'
+import * as plugin from './plugin'
+
+export const StartDevtoolsPanel =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.StartDevtoolsPanelNoOp
+    : Devtools.StartDevtoolsPanel
+
+export const startDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.startDevtoolsNoOpPlugin
+    : plugin.startDevtoolsPlugin
+
+export type { StartDevtoolsReactInit } from './ReactStartDevtools'

packages/react-start-devtools/src/plugin.tsx

@@ -0,0 +1,6 @@
+import { createReactPlugin } from '@tanstack/devtools-utils/react'
+import { StartDevtoolsPanel } from './ReactStartDevtools'
+
+const [startDevtoolsPlugin, startDevtoolsNoOpPlugin] = createReactPlugin("TanStack Start", StartDevtoolsPanel)
+
+export { startDevtoolsPlugin, startDevtoolsNoOpPlugin }

packages/react-start-devtools/src/production.ts

@@ -0,0 +1,7 @@
+'use client'
+
+export { StartDevtoolsPanel } from './ReactStartDevtools'
+
+export type { StartDevtoolsReactInit } from './ReactStartDevtools'
+
+export { startDevtoolsPlugin } from './plugin'

packages/react-start-devtools/tests/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest'
+
+describe('test suite', () => {
+  it('should work', () => {
+    expect(true).toBe(true)
+  })
+})

packages/react-start-devtools/tests/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

packages/react-start-devtools/tsconfig.docs.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["tests", "src"]
+}

packages/react-start-devtools/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "eslint.config.js", "vite.config.ts", "tests"],
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

packages/react-start-devtools/vite.config.ts

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

packages/solid-start-devtools/eslint.config.js

@@ -0,0 +1,10 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    rules: {},
+  },
+]