Improve bundling of core devtools to not leak to client

package.json

@@ -47,7 +47,7 @@
   },
   "size-limit": [
     {
-      "path": "packages/devtools/dist/index.js",
+      "path": "packages/devtools/dist/esm/index.js",
       "limit": "60 KB"
     },
     {

packages/devtools-vite/src/plugin.ts

@@ -178,8 +178,14 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
     },
     {
       name: '@tanstack/devtools:remove-devtools-on-build',
-      apply(_, { command }) {
-        return command === 'build' && removeDevtoolsOnBuild
+      apply(config, { command }) {
+        // Check both command and mode to support various hosting providers
+        // Some providers (Cloudflare, Netlify, Heroku) might not use 'build' command
+        // but will always set mode to 'production' for production builds
+        return (
+          (command !== 'serve' || config.mode === 'production') &&
+          removeDevtoolsOnBuild
+        )
       },
       enforce: 'pre',
       transform(code, id) {

packages/devtools/package.json

@@ -18,27 +18,16 @@
     "devtools"
   ],
   "type": "module",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
   "exports": {
-    "workerd": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/server.js"
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
     },
-    "browser": {
-      "development": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/dev.js"
-      },
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "node": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/server.js"
-    },
-    "types": "./dist/index.d.ts",
-    "import": "./dist/index.js"
+    "./package.json": "./package.json"
   },
   "sideEffects": false,
   "engines": {
@@ -56,7 +45,7 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "tsup"
+    "build": "vite build"
   },
   "dependencies": {
     "@solid-primitives/event-listener": "^2.4.3",

packages/devtools/src/context/devtools-context.tsx

@@ -7,7 +7,7 @@ import {
   getStorageItem,
   setStorageItem,
 } from '../utils/storage'
-import { initialState } from './devtools-store'
+import { initialState } from './initial-state'
 import type { DevtoolsStore } from './devtools-store'
 import type { JSX, Setter } from 'solid-js'
 

packages/devtools/src/context/devtools-store.ts

@@ -79,29 +79,3 @@ export type DevtoolsStore = {
   }
   plugins?: Array<TanStackDevtoolsPlugin>
 }
-
-export const initialState: DevtoolsStore = {
-  settings: {
-    defaultOpen: false,
-    hideUntilHover: false,
-    position: 'bottom-right',
-    panelLocation: 'bottom',
-    openHotkey: ['Shift', 'A'],
-    requireUrlFlag: false,
-    urlFlag: 'tanstack-devtools',
-    theme:
-      typeof window !== 'undefined' &&
-      typeof window.matchMedia !== 'undefined' &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light',
-    triggerImage: '',
-    triggerHidden: false,
-  },
-  state: {
-    activeTab: 'plugins',
-    height: 400,
-    activePlugins: [],
-    persistOpen: false,
-  },
-}

packages/devtools/src/context/initial-state.ts

@@ -0,0 +1,27 @@
+import type { DevtoolsStore } from './devtools-store'
+
+export const initialState: DevtoolsStore = {
+  settings: {
+    defaultOpen: false,
+    hideUntilHover: false,
+    position: 'bottom-right',
+    panelLocation: 'bottom',
+    openHotkey: ['Shift', 'A'],
+    requireUrlFlag: false,
+    urlFlag: 'tanstack-devtools',
+    theme:
+      typeof window !== 'undefined' &&
+      typeof window.matchMedia !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light',
+    triggerImage: '',
+    triggerHidden: false,
+  },
+  state: {
+    activeTab: 'plugins',
+    height: 400,
+    activePlugins: [],
+    persistOpen: false,
+  },
+}

packages/devtools/src/core.tsx

@@ -1,9 +1,5 @@
-import { lazy } from 'solid-js'
-import { Portal, render } from 'solid-js/web'
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client'
-import { DevtoolsProvider } from './context/devtools-context'
-import { initialState } from './context/devtools-store'
-import { PiPProvider } from './context/pip-context'
+import { initialState } from './context/initial-state'
 import type { ClientEventBusConfig } from '@tanstack/devtools-event-bus/client'
 import type {
   TanStackDevtoolsConfig,
@@ -61,16 +57,25 @@ export class TanStackDevtoolsCore {
     }
   }
 
-  mount<T extends HTMLElement>(el: T) {
-    //  tsup-preset-solid statically replaces this variable during build, which eliminates this code from server bundle
-    if (import.meta.env.SSR) return
-
+  async mount<T extends HTMLElement>(el: T) {
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
     }
+    const { render, Portal } = await import('solid-js/web')
+    const { lazy } = await import('solid-js')
     const mountTo = el
     const dispose = render(() => {
       this.#Component = lazy(() => import('./devtools'))
+      const DevtoolsProvider = lazy(() =>
+        import('./context/devtools-context').then((m) => ({
+          default: m.DevtoolsProvider,
+        })),
+      )
+      const PiPProvider = lazy(() =>
+        import('./context/pip-context').then((m) => ({
+          default: m.PiPProvider,
+        })),
+      )
       const Devtools = this.#Component
       this.#eventBus = new ClientEventBus(this.#eventBusConfig)
       this.#eventBus.start()

packages/react-devtools/src/devtools.tsx

@@ -111,7 +111,7 @@ export const TanStackDevtools = ({
   eventBusConfig,
 }: TanStackDevtoolsReactInit): ReactElement | null => {
   const devToolRef = useRef<HTMLDivElement>(null)
-
+  const devtoolInstance = useRef<TanStackDevtoolsCore>(null)
   const [pluginContainers, setPluginContainers] = useState<
     Record<string, HTMLElement>
   >({})
@@ -170,28 +170,33 @@ export const TanStackDevtools = ({
     [plugins],
   )
 
-  const [devtools] = useState(
-    () =>
-      new TanStackDevtoolsCore({
-        config,
-        eventBusConfig,
-        plugins: pluginsMap,
-      }),
-  )
+  // initialize devtools instance
+  useEffect(() => {
+    if (devtoolInstance.current) {
+      return
+    }
+    devtoolInstance.current = new TanStackDevtoolsCore({
+      config,
+      eventBusConfig,
+      plugins: pluginsMap,
+    })
+  }, [config, eventBusConfig, pluginsMap])
 
   useEffect(() => {
-    devtools.setConfig({
+    devtoolInstance.current?.setConfig({
       plugins: pluginsMap,
     })
-  }, [devtools, pluginsMap])
+  }, [devtoolInstance, pluginsMap])
 
   useEffect(() => {
-    if (devToolRef.current) {
-      devtools.mount(devToolRef.current)
+    if (!devToolRef.current) {
+      return
     }
 
-    return () => devtools.unmount()
-  }, [devtools])
+    devtoolInstance.current?.mount(devToolRef.current)
+
+    return () => devtoolInstance.current?.unmount()
+  }, [devtoolInstance])
 
   const hasPlugins =
     Object.values(pluginContainers).length > 0 &&