From 7ea51a4a4c0f366f0099c4e559bfd42b63089252 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sat, 9 Aug 2025 11:25:26 +0200 Subject: [PATCH 1/3] docs: devtools configuration --- docs/configuration.md | 151 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 docs/configuration.md diff --git a/docs/configuration.md b/docs/configuration.md new file mode 100644 index 00000000..fb9d1e04 --- /dev/null +++ b/docs/configuration.md @@ -0,0 +1,151 @@ +--- +title: Configuration +id: configuration +--- + +Both TanStack `DevTools` and `EventClient` can be configured. + +> **important** all configuration is optional unless marked (required) + +## Devtools Configuration + +With the `Devtools` there are two configuration objects, regardless of Frameworks these are the same and are provided to the Devtools through props. + +- `config` configuration for the devtool panel and interaction with it +- `eventBusConfig` configuration for the event bus + +The `config` object is mainly focused around user interaction with the devtools panel and accepts the following properties: + +- `defaultOpen` - If the devtools are open by default + +```ts +{defaultOpen: boolean} +``` + +- `hideUntilHover` - Hides the TanStack devtools trigger until hovered + +```ts +{hideUntilHover: boolean} +``` + +- `position` - The position of the TanStack devtools trigger + +```ts +{position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'} +``` + +- `panelLocation` - The location of the devtools panel + +```ts +{panelLocation: 'top' | 'bottom'} + +``` + +- `openHotkey` - The hotkey set to open the devtools + +```ts +type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'; +type KeyboardKey = ModifierKey | (string & {}); + +{openHotkey: Array} +``` + +- `requireUrlFlag` - Requires a flag present in the url to enable devtools + +```ts +{requireUrlFlag: boolean} + +``` + +- `urlFlag` - The required flag that must be present in the url to enable devtools. + +```ts +{urlFlag: string} +``` + +The `eventBusConfig` is configuration for the back bone of the devtools, the `EventBuss`, and accepts the following properties: + +- `debug` - Enables debug mode for the EventBuss + +```ts +{debug: boolean} +``` + +- `connectToServerBus` - Optional flag to indicate if the devtools server event bus is available to connect to + +```ts +{connectToServerBus: boolean} +``` + +- `port` - The port at which the client connect to rhe devtools server event bus + +```ts +{port: number} +``` + +Put together here is an example in react: + +```tsx +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import { FormDevtools } from '@tanstack/react-form' + +import { TanstackDevtools } from '@tanstack/react-devtools' + +import App from './App' + +createRoot(document.getElementById('root')!).render( + + + + , + }, + ]} + /> + , +) + +``` + +## EventClient Configuration + +Configuration for the `EventClient` is as follows + +- `pluginId` (required) - The plugin identifier uses by the event bus to direct events to listeners + +```ts +{pluginId: string} +``` + +- `debug` - Enables debug mode for the EventClient + +```ts +{debug: boolean} +``` + +Put together the `EventClient` configuration looks like: + +```tsx +import { EventClient } from '@tanstack/devtools-event-client' + +type EventMap = { + 'custom-devtools:custom-state': { state: string } +} + +class customEventClient extends EventClient { + constructor() { + super({ + debug: true, + pluginId: 'custom-devtools', + }) + } +} +``` + +More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic) From 316cfc50f02fdc78084a97c5b7feb6bc5a04631a Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sat, 9 Aug 2025 12:01:36 +0200 Subject: [PATCH 2/3] chore: pr comments --- docs/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index fb9d1e04..bf3372f3 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -77,7 +77,7 @@ The `eventBusConfig` is configuration for the back bone of the devtools, the `Ev {connectToServerBus: boolean} ``` -- `port` - The port at which the client connect to rhe devtools server event bus +- `port` - The port at which the client connects to the devtools server event bus ```ts {port: number} @@ -117,7 +117,7 @@ createRoot(document.getElementById('root')!).render( Configuration for the `EventClient` is as follows -- `pluginId` (required) - The plugin identifier uses by the event bus to direct events to listeners +- `pluginId` (required) - The plugin identifier used by the event bus to direct events to listeners ```ts {pluginId: string} From 3305f00f41c2ee005a115aa3a62a565028e1bd7a Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sat, 9 Aug 2025 12:03:38 +0200 Subject: [PATCH 3/3] chore: more typos --- docs/configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index bf3372f3..bb44b233 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -63,9 +63,9 @@ type KeyboardKey = ModifierKey | (string & {}); {urlFlag: string} ``` -The `eventBusConfig` is configuration for the back bone of the devtools, the `EventBuss`, and accepts the following properties: +The `eventBusConfig` is configuration for the back bone of the devtools, the ``, and accepts the following properties: -- `debug` - Enables debug mode for the EventBuss +- `debug` - Enables debug mode for the EventBus ```ts {debug: boolean}