Feat/remove production exports

.changeset/eight-hats-brush.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/devtools-event-client': minor
+'@tanstack/react-devtools': minor
+'@tanstack/solid-devtools': minor
+---
+
+remove the production subexport in favor of always exporting the exports

docs/installation.md

@@ -42,11 +42,6 @@ If you want to have the devtools in production builds, you can install the core
 npm install @tanstack/devtools
 npm install -D @tanstack/devtools-vite
 ```
-
-And then import from the `/production` subpath:
-
-```ts
-import { TanStackDevtools } from '@tanstack/devtools/production'
-```
+
 
 Read more about using the devtools in production in our [Production docs](https://tanstack.com/devtools/latest/docs/production).

docs/production.md

@@ -1,25 +1,11 @@
 ---
 title: Production
 id: production
----
-
-> [!IMPORTANT] This document and the underlying implementation is actively being worked on internally and may be incomplete or inaccurate and is highly likely to change! 
+--- 
+
 
 The whole point of devtools is to help you during development, so it's generally not recommended to include them in production builds, but if you know what you're doing, you can.
-
-## Production Exports
-
-Every package under the `devtools` umbrella should provide a `/production` sub-export that will
-allow you to use the devtools in production builds. The normal root export will always be stripped out of production builds by default.
-
-```ts
-// This will be included in production builds
-import { TanStackDevtools } from '@tanstack/react-devtools/production'
-// This will be replaced by a function that returns null in production builds 
-import { TanStackDevtools } from '@tanstack/react-devtools'
-```
-
-This is subject to change and might be offloaded to the Vite plugin in the future as we continue to build out the production story and close in on the best DX and the v1 release.
+
 
 ## Vite Plugin Configuration
 
@@ -38,14 +24,47 @@ export default {
 }
 ```
 
-This will include the devtools in your production build, but keep in mind, you still need the `/production` sub-export to actually get the production version of the devtools.
+This will include the devtools and all it's plugins in the production build.
+
+## Excluding Devtools from Production on non-vite projects
+
+If you're running devtools in a non-vite project you will have to manually exclude the devtools from your production build. You can do this by using environment variables or any other method you prefer.
+
+We would recommend you create a separate file for the devtools import and then conditionally import that file in your main application file depending on the environment.
+
+Here's an example using environment variables:
+
+```tsx
+// devtools-setup.tsx
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+export default function Devtools(){
+  return   <TanStackDevtools plugins={[
+    // Add your custom plugins here
+  ]} />  
+}
+
+// App.tsx
+const Devtools = process.env.NODE_ENV === 'development' ? await import('./devtools-setup') : () => null
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <Devtools />
+    </>
+  )
+}
+``` 
 
 ## Where to install the Devtools
 
 If you are using the devtools in development only, you can install them as a development dependency and only import them in development builds. This is the default recommended way to use the devtools.
 
 If you are using the devtools in production, you need to install them as a regular dependency and import them in your application code.
 
+This depends on if you are shedding development dependencies in production or not, but generally it's recommended to install them as a regular dependency if you are using them in production.
+
 ## Development / Production workflow
 
 For Development, you can install the devtools as a development dependency and import them in your application code. The Vite plugin will take care of stripping them out of the production build.

packages/event-bus-client/package.json

@@ -32,16 +32,6 @@
         "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,24 +1 @@
-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
+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', './src/production.ts'],
+    entry: ['./src/index.ts'],
     srcDir: './src',
   }),
 )

packages/react-devtools/package.json

@@ -28,12 +28,6 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./production": {
-      "import": {
-        "types": "./dist/esm/production.d.ts",
-        "default": "./dist/esm/production.js"
-      }
-    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/react-devtools/src/index.ts

@@ -2,12 +2,7 @@
 
 import * as Devtools from './devtools'
 
-export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] =
-  process.env.NODE_ENV !== 'development'
-    ? function () {
-        return null
-      }
-    : Devtools.TanStackDevtools
+export const TanStackDevtools = Devtools.TanStackDevtools
 
 export type {
   TanStackDevtoolsReactPlugin,

packages/react-devtools/vite.config.ts

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

packages/solid-devtools/package.json

@@ -28,12 +28,6 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./production": {
-      "import": {
-        "types": "./dist/esm/production.d.ts",
-        "default": "./dist/esm/production.js"
-      }
-    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/solid-devtools/src/index.ts

@@ -1,10 +1,3 @@
-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/vite.config.ts

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