Konfiguration

Sowohl TanStack DevTools als auch EventClient können konfiguriert werden.

Wichtig

Alle Konfigurationen sind optional, es sei denn, sie sind als (erforderlich) gekennzeichnet.

Devtools Komponenten-Konfiguration

Die DevTools Komponente hat zwei Konfigurations-Props, die unabhängig von Frameworks gleich sind.

config - Konfiguration für das Devtool-Panel und die Interaktion damit.
eventBusConfig - Konfiguration für den Event-Bus.

Das config Objekt konzentriert sich hauptsächlich auf die Benutzerinteraktion mit dem Devtools-Panel und akzeptiert die folgenden Eigenschaften:

defaultOpen - Ob die Devtools standardmäßig geöffnet sind.

{ defaultOpen: boolean }

{ defaultOpen: boolean }

hideUntilHover - Verbirgt den TanStack Devtools Trigger, bis er mit der Maus darüberfährt.

{ hideUntilHover: boolean }

{ hideUntilHover: boolean }

position - Die Position des TanStack Devtools Triggers.

{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }

{ position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }

panelLocation - Der Standort des Devtools-Panels.

{ panelLocation: 'top' | 'bottom' }

{ panelLocation: 'top' | 'bottom' }

openHotkey - Die Hotkey-Einstellung zum Öffnen der Devtools.

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }

type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
type KeyboardKey = ModifierKey | (string & {});

{ openHotkey: Array<KeyboardKey> }

requireUrlFlag - Erfordert, dass ein Flag in der URL vorhanden ist, um Devtools zu aktivieren.

{ requireUrlFlag: boolean }

{ requireUrlFlag: boolean }

urlFlag - Das erforderliche Flag, das in der URL vorhanden sein muss, um Devtools zu aktivieren.

{ urlFlag: string }

{ urlFlag: string }

Die eventBusConfig ist die Konfiguration für das Rückgrat der Devtools, den ``, und akzeptiert die folgenden Eigenschaften:

debug - Aktiviert den Debug-Modus für den EventBus.

{ debug: boolean }

{ debug: boolean }

connectToServerBus - Optionales Flag, das angibt, ob der Devtools-Server-Event-Bus zum Verbinden verfügbar ist.

{ connectToServerBus: boolean }

{ connectToServerBus: boolean }

port - Der Port, an dem sich der Client mit dem Devtools-Server-Event-Bus verbindet.

{ port: number }

{ port: number }

Hier ist ein Beispiel 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(
  <StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true,  }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
        },
      ]}
    />
  </StrictMode>,
)

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(
  <StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true,  }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
        },
      ]}
    />
  </StrictMode>,
)

EventClient Konfiguration

Die Konfiguration für den EventClient sieht wie folgt aus:

pluginId (erforderlich) - Der Plugin-Identifikator, der vom Event-Bus verwendet wird, um Ereignisse an Listener zu leiten.

{pluginId: string}

{pluginId: string}

debug - Aktiviert den Debug-Modus für den EventClient.

{debug: boolean}

{debug: boolean}

Zusammengenommen sieht die Konfiguration des EventClient so aus:

tsx

import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-devtools:custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

Weitere Informationen zur EventClient-Konfiguration finden Sie in unserem Custom-Plugins Beispiel.

Devtools Komponenten-Konfiguration

EventClient Konfiguration

Bytes abonnieren

Bytes abonnieren