From d61cc3fa19d211d565b4abc030d691be444870c4 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 19 Sep 2025 13:36:32 +0200 Subject: [PATCH 1/4] feat: remove production exports in favor of vite plugin --- .changeset/eight-hats-brush.md | 7 +++ docs/production.md | 50 +++++++++++++-------- packages/event-bus-client/package.json | 12 +---- packages/event-bus-client/src/index.ts | 25 +---------- packages/event-bus-client/src/production.ts | 1 - packages/event-bus-client/vite.config.ts | 2 +- packages/react-devtools/package.json | 8 +--- packages/react-devtools/src/index.ts | 7 +-- packages/react-devtools/src/production.ts | 10 ----- packages/react-devtools/vite.config.ts | 2 +- packages/solid-devtools/package.json | 8 +--- packages/solid-devtools/src/index.ts | 8 +--- packages/solid-devtools/src/production.ts | 6 --- packages/solid-devtools/vite.config.ts | 2 +- 14 files changed, 48 insertions(+), 100 deletions(-) create mode 100644 .changeset/eight-hats-brush.md delete mode 100644 packages/event-bus-client/src/production.ts delete mode 100644 packages/react-devtools/src/production.ts delete mode 100644 packages/solid-devtools/src/production.ts diff --git a/.changeset/eight-hats-brush.md b/.changeset/eight-hats-brush.md new file mode 100644 index 00000000..2d7b967b --- /dev/null +++ b/.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 diff --git a/docs/production.md b/docs/production.md index aa0ca1d4..d648a528 100644 --- a/docs/production.md +++ b/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,7 +24,33 @@ 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. + +Here's an example using environment variables: + +```tsx +// devtools-setup.tsx +import { TanStackDevtools } from '@tanstack/react-devtools' + +export function Devtools(){ + return process.env.NODE_ENV === 'development' ? : null +} + +// App.tsx +import { Devtools } from './devtools-setup' +function App() { + return ( + <> + + + + ) +} +``` ## Where to install the Devtools @@ -46,6 +58,8 @@ If you are using the devtools in development only, you can install them as a dev 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. diff --git a/packages/event-bus-client/package.json b/packages/event-bus-client/package.json index afcf5784..93a136e7 100644 --- a/packages/event-bus-client/package.json +++ b/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, @@ -65,4 +55,4 @@ "devDependencies": { "@tanstack/devtools-event-bus": "workspace:*" } -} +} \ No newline at end of file diff --git a/packages/event-bus-client/src/index.ts b/packages/event-bus-client/src/index.ts index 64c65978..6b3402a0 100644 --- a/packages/event-bus-client/src/index.ts +++ b/packages/event-bus-client/src/index.ts @@ -1,24 +1 @@ -import * as Client from './plugin' - -class MockClass { - on(_: string, __: (...args: Array) => void) { - // No-op in production - } - onAll(_: (...args: Array) => void) { - // No-op in production - } - onAllPluginEvents(_: (...args: Array) => void) { - // No-op in production - } - emit(_: string, ...__: Array) { - // 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' diff --git a/packages/event-bus-client/src/production.ts b/packages/event-bus-client/src/production.ts deleted file mode 100644 index 6b3402a0..00000000 --- a/packages/event-bus-client/src/production.ts +++ /dev/null @@ -1 +0,0 @@ -export { EventClient } from './plugin' diff --git a/packages/event-bus-client/vite.config.ts b/packages/event-bus-client/vite.config.ts index 60d2a34a..79dae7cd 100644 --- a/packages/event-bus-client/vite.config.ts +++ b/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', }), ) diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index deb1ce06..aee8a111 100644 --- a/packages/react-devtools/package.json +++ b/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, @@ -70,4 +64,4 @@ "react": ">=16.8", "react-dom": ">=16.8" } -} +} \ No newline at end of file diff --git a/packages/react-devtools/src/index.ts b/packages/react-devtools/src/index.ts index 3f95d65e..ca1f4fb5 100644 --- a/packages/react-devtools/src/index.ts +++ b/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, diff --git a/packages/react-devtools/src/production.ts b/packages/react-devtools/src/production.ts deleted file mode 100644 index ca1f4fb5..00000000 --- a/packages/react-devtools/src/production.ts +++ /dev/null @@ -1,10 +0,0 @@ -'use client' - -import * as Devtools from './devtools' - -export const TanStackDevtools = Devtools.TanStackDevtools - -export type { - TanStackDevtoolsReactPlugin, - TanStackDevtoolsReactInit, -} from './devtools' diff --git a/packages/react-devtools/vite.config.ts b/packages/react-devtools/vite.config.ts index 13835e47..f6598389 100644 --- a/packages/react-devtools/vite.config.ts +++ b/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, }), diff --git a/packages/solid-devtools/package.json b/packages/solid-devtools/package.json index fd0f4919..41547824 100644 --- a/packages/solid-devtools/package.json +++ b/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, @@ -63,4 +57,4 @@ "peerDependencies": { "solid-js": ">=1.9.7" } -} +} \ No newline at end of file diff --git a/packages/solid-devtools/src/index.ts b/packages/solid-devtools/src/index.ts index c6c88474..f6a023fd 100644 --- a/packages/solid-devtools/src/index.ts +++ b/packages/solid-devtools/src/index.ts @@ -1,10 +1,4 @@ -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' diff --git a/packages/solid-devtools/src/production.ts b/packages/solid-devtools/src/production.ts deleted file mode 100644 index 0d4d4c06..00000000 --- a/packages/solid-devtools/src/production.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as Devtools from './devtools' - -export const TanStackDevtools: (typeof Devtools)['TanStackDevtools'] = - Devtools.TanStackDevtools - -export type { TanStackDevtoolsSolidPlugin } from './core' diff --git a/packages/solid-devtools/vite.config.ts b/packages/solid-devtools/vite.config.ts index 52dc825d..877c177a 100644 --- a/packages/solid-devtools/vite.config.ts +++ b/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, }), From 705be00833e0819cb1c5d00fecb4371765bd680f Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 19 Sep 2025 13:43:38 +0200 Subject: [PATCH 2/4] feat: remove production exports in favor of vite plugin --- docs/production.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/production.md b/docs/production.md index d648a528..ee7254af 100644 --- a/docs/production.md +++ b/docs/production.md @@ -30,18 +30,23 @@ This will include the devtools and all it's plugins in the production build. 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 function Devtools(){ - return process.env.NODE_ENV === 'development' ? : null +export default function Devtools(){ + return } // App.tsx -import { Devtools } from './devtools-setup' +const Devtools = process.env.NODE_ENV === 'development' ? await import('./devtools-setup') : () => null + function App() { return ( <> From 61425320f36fdd74db887a41d174fa2eba51991e Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 19 Sep 2025 12:06:32 +0000 Subject: [PATCH 3/4] ci: apply automated fixes --- packages/event-bus-client/package.json | 2 +- packages/react-devtools/package.json | 2 +- packages/solid-devtools/package.json | 2 +- packages/solid-devtools/src/index.ts | 1 - 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/event-bus-client/package.json b/packages/event-bus-client/package.json index 93a136e7..7ea9bbd1 100644 --- a/packages/event-bus-client/package.json +++ b/packages/event-bus-client/package.json @@ -55,4 +55,4 @@ "devDependencies": { "@tanstack/devtools-event-bus": "workspace:*" } -} \ No newline at end of file +} diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index aee8a111..fc7b560a 100644 --- a/packages/react-devtools/package.json +++ b/packages/react-devtools/package.json @@ -64,4 +64,4 @@ "react": ">=16.8", "react-dom": ">=16.8" } -} \ No newline at end of file +} diff --git a/packages/solid-devtools/package.json b/packages/solid-devtools/package.json index 41547824..fae224ae 100644 --- a/packages/solid-devtools/package.json +++ b/packages/solid-devtools/package.json @@ -57,4 +57,4 @@ "peerDependencies": { "solid-js": ">=1.9.7" } -} \ No newline at end of file +} diff --git a/packages/solid-devtools/src/index.ts b/packages/solid-devtools/src/index.ts index f6a023fd..cf928ab4 100644 --- a/packages/solid-devtools/src/index.ts +++ b/packages/solid-devtools/src/index.ts @@ -1,4 +1,3 @@ - export { TanStackDevtools } from './devtools' export type { TanStackDevtoolsSolidPlugin } from './core' From 809d80b16d501b6b5397b0dcb7683d88facd1d1f Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Fri, 19 Sep 2025 14:55:49 +0200 Subject: [PATCH 4/4] fix --- docs/installation.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 154c6597..6ec26217 100644 --- a/docs/installation.md +++ b/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). \ No newline at end of file