feat: exclude devtools from production by default

.changeset/cuddly-mammals-cough.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/devtools-event-client': patch
+'@tanstack/react-devtools': patch
+'@tanstack/solid-devtools': patch
+---
+
+exclude from production by default

examples/react/start/package.json

@@ -7,6 +7,7 @@
     "start": "node .output/server/index.mjs",
     "serve": "vite preview",
     "test": "vitest run",
+    "preview": "vite preview",
     "db:migrate": "prisma migrate dev --name init",
     "db:reset": " prisma migrate reset",
     "db:gen": "prisma generate",
@@ -35,7 +36,6 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
-    "@tanstack/devtools": "^0.4.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.1.2",

package.json

@@ -49,6 +49,10 @@
     {
       "path": "packages/devtools/dist/esm/index.js",
       "limit": "30 KB"
+    },
+    {
+      "path": "packages/event-bus-client/dist/esm/plugin.js",
+      "limit": "1 KB"
     }
   ],
   "devDependencies": {

packages/event-bus-client/package.json

@@ -32,6 +32,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      },
+      "require": {
+        "types": "./dist/cjs/production.d.cts",
+        "default": "./dist/cjs/production.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/event-bus-client/src/index.ts

@@ -1 +1,24 @@
-export { EventClient } from './plugin'
+import * as Client from './plugin'
+
+class MockClass {
+  on(_: string, __: (...args: Array<any>) => void) {
+    // No-op in production
+  }
+  onAll(_: (...args: Array<any>) => void) {
+    // No-op in production
+  }
+  onAllPluginEvents(_: (...args: Array<any>) => void) {
+    // No-op in production
+  }
+  emit(_: string, ...__: Array<any>) {
+    // No-op in production
+  }
+  getPluginId() {
+    // No-op in production
+  }
+}
+
+export const EventClient: (typeof Client)['EventClient'] =
+  process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'test'
+    ? (MockClass as any)
+    : Client.EventClient

packages/event-bus-client/src/production.ts

@@ -0,0 +1 @@
+export { EventClient } from './plugin'

packages/event-bus-client/vite.config.ts

@@ -17,7 +17,7 @@ const config = defineConfig({
 export default mergeConfig(
   config,
   tanstackViteConfig({
-    entry: ['./src/index.ts'],
+    entry: ['./src/index.ts', './src/production.ts'],
     srcDir: './src',
   }),
 )

packages/react-devtools/package.json

@@ -33,6 +33,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      },
+      "require": {
+        "types": "./dist/cjs/production.d.cts",
+        "default": "./dist/cjs/production.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/react-devtools/src/devtools.tsx

@@ -5,7 +5,7 @@ import {
   TanStackDevtoolsCore,
 } from '@tanstack/devtools'
 import { createPortal } from 'react-dom'
-import type { JSX } from 'react'
+import type { JSX, ReactElement } from 'react'
 import type {
   ClientEventBusConfig,
   TanStackDevtoolsConfig,
@@ -101,7 +101,7 @@ export const TanStackDevtools = ({
   plugins,
   config,
   eventBusConfig,
-}: TanStackDevtoolsReactInit) => {
+}: TanStackDevtoolsReactInit): ReactElement | null => {
   const devToolRef = useRef<HTMLDivElement>(null)
   const [pluginContainer, setPluginContainer] = useState<HTMLElement | null>(
     null,

packages/react-devtools/src/index.ts

@@ -1,8 +1,15 @@
-// re-export everything from the core devtools package
-export * from '@tanstack/devtools'
-/**
- * Export every hook individually - DON'T export from barrel files
- */
+'use client'
 
-export * from './devtools'
-export type { TanStackDevtoolsReactPlugin } from './devtools'
+import * as Devtools from './devtools'
+
+export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : Devtools.TanStackDevtools
+
+export type {
+  TanStackDevtoolsReactPlugin,
+  TanStackDevtoolsReactInit,
+} from './devtools'

packages/react-devtools/src/production.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import * as Devtools from './devtools'
+
+export const TanStackDevtools = Devtools.TanStackDevtools
+
+export type {
+  TanStackDevtoolsReactPlugin,
+  TanStackDevtoolsReactInit,
+} from './devtools'

packages/react-devtools/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig, mergeConfig, Plugin } from 'vitest/config'
+import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/config/vite'
 import react from '@vitejs/plugin-react'
 import packageJson from './package.json'
+import type { Plugin } from 'vitest/config'
 
 const config = defineConfig({
   plugins: [react() as any satisfies Plugin],
@@ -18,7 +19,7 @@ const config = defineConfig({
 export default mergeConfig(
   config,
   tanstackViteConfig({
-    entry: ['./src/index.ts'],
+    entry: ['./src/index.ts', './src/production.ts'],
     srcDir: './src',
   }),
 )

packages/solid-devtools/package.json

@@ -33,6 +33,16 @@
         "default": "./dist/cjs/index.cjs"
       }
     },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      },
+      "require": {
+        "types": "./dist/cjs/production.d.cts",
+        "default": "./dist/cjs/production.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/solid-devtools/src/index.ts

@@ -1,8 +1,10 @@
-// re-export everything from the core devtools package
-export * from '@tanstack/devtools'
-/**
- * Export every hook individually - DON'T export from barrel files
- */
+import { isDev } from 'solid-js/web'
+import * as Devtools from './devtools'
+
+export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] = isDev
+  ? Devtools.TanStackDevtools
+  : function () {
+      return null
+    }
 
-export { TanStackDevtools } from './devtools'
 export type { TanStackDevtoolsSolidPlugin } from './core'

packages/solid-devtools/src/production.ts

@@ -0,0 +1,6 @@
+import * as Devtools from './devtools'
+
+export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] =
+  Devtools.TanStackDevtools
+
+export type { TanStackDevtoolsSolidPlugin } from './core'

packages/solid-devtools/vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, mergeConfig } from 'vitest/config'
 import { tanstackViteConfig } from '@tanstack/config/vite'
 import solid from 'vite-plugin-solid'
 import packageJson from './package.json'
-import { Plugin } from 'vite'
+import type { Plugin } from 'vite'
 
 const config = defineConfig({
   plugins: [solid() as any satisfies Plugin],
@@ -19,7 +19,7 @@ const config = defineConfig({
 export default mergeConfig(
   config,
   tanstackViteConfig({
-    entry: ['./src/index.ts'],
+    entry: ['./src/index.ts', './src/production.ts'],
     srcDir: './src',
   }),
 )