Benutzerdefinierte Plugins

TanStack Devtools ermöglicht es Ihnen, Ihre eigenen benutzerdefinierten Plugins zu erstellen, indem Sie unseren Event-Bus nutzen und darauf hören.

Voraussetzung

Diese Anleitung führt Sie durch ein einfaches Beispiel, bei dem unsere Bibliothek ein Zähler mit einer Historie der Zählstände ist. Ein funktionierendes Beispiel finden Sie in unserem Custom-Plugin-Beispiel.

Dies ist unser Bibliotheks-Code

counter.ts

tsx

export function createCounter() {
  let count = 0;
  const history = [];

  return {
    getCount: () => count,
    increment: () => {
      history.push(count);
      count++;
    },
    decrement: () => {
      history.push(count);
      count--;
    },
  };
}

export function createCounter() {
  let count = 0;
  const history = [];

  return {
    getCount: () => count,
    increment: () => {
      history.push(count);
      count++;
    },
    decrement: () => {
      history.push(count);
      count--;
    },
  };
}

Event Client Setup

Installieren Sie die TanStack Devtools Event Client-Dienstprogramme.

bash

npm i @tanstack/devtools-event-client

npm i @tanstack/devtools-event-client

Zuerst müssen Sie den EventClient einrichten.

eventClient.ts

tsx

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


type EventMap = {
  // The key of the event map is a combination of {pluginId}:{eventSuffix}
  // The value is the expected type of the event payload
  'custom-devtools:counter-state': { count: number, history: number[], }
}

class CustomEventClient extends EventClient<EventMap> {
constructor() {
    super({
      // The pluginId must match that of the event map key
      pluginId: 'custom-devtools',
    })
  }
}

// This is where the magic happens, it'll be used throughout your application.
export const DevtoolsEventClient = new FormEventClient()

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


type EventMap = {
  // The key of the event map is a combination of {pluginId}:{eventSuffix}
  // The value is the expected type of the event payload
  'custom-devtools:counter-state': { count: number, history: number[], }
}

class CustomEventClient extends EventClient<EventMap> {
constructor() {
    super({
      // The pluginId must match that of the event map key
      pluginId: 'custom-devtools',
    })
  }
}

// This is where the magic happens, it'll be used throughout your application.
export const DevtoolsEventClient = new FormEventClient()

Event Client Integration

Nun müssen wir unseren EventClient in den Anwendungscode einbinden. Dies kann auf viele Arten geschehen, z. B. über ein useEffect, das den aktuellen Zustand sendet, oder über ein Abonnement eines Observers. Alles, was zählt, ist, dass Sie beim Senden des aktuellen Zustands Folgendes tun.

Unser neuer Bibliotheks-Code wird wie folgt aussehen

counter.ts

tsx

import { DevtoolsEventClient } from './eventClient.ts'

export function createCounter() {
  let count = 0
  const history: Array<number> = []

  return {
    getCount: () => count,
    increment: () => {
      history.push(count)

      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
      DevtoolsEventClient.emit('counter-state', {
        count: count++,
        history: history,
      })
    },
    decrement: () => {
      history.push(count)

      DevtoolsEventClient.emit('counter-state', {
        count: count--,
        history: history,
      })
    },
  }
}

import { DevtoolsEventClient } from './eventClient.ts'

export function createCounter() {
  let count = 0
  const history: Array<number> = []

  return {
    getCount: () => count,
    increment: () => {
      history.push(count)

      // The emit eventSuffix must match that of the EventMap defined in eventClient.ts
      DevtoolsEventClient.emit('counter-state', {
        count: count++,
        history: history,
      })
    },
    decrement: () => {
      history.push(count)

      DevtoolsEventClient.emit('counter-state', {
        count: count--,
        history: history,
      })
    },
  }
}

Wichtig

Der EventClient ist Framework-agnostisch, sodass dieser Prozess unabhängig vom Framework oder sogar in Vanilla JavaScript derselbe ist.

Nutzung des Event Clients

Nun müssen wir unser Devtools-Panel erstellen. Für einen einfachen Ansatz schreiben Sie die Devtools in dem Framework, für das der Adapter ist. Beachten Sie, dass dies das Plugin Framework-spezifisch macht.

Da TanStack Framework-agnostisch ist, haben wir einen komplizierteren Ansatz gewählt, der in kommenden Dokumenten erklärt wird (wenn Framework-Agnostizismus für Sie keine Rolle spielt, können Sie dies ignorieren).

DevtoolsPanel.ts

tsx

import { DevtoolsEventClient } from './eventClient.ts'

export function DevtoolPanel() {
  const [state,setState] = useState();

  useEffect(() => {
    // subscribe to the emitted event
    const cleanup = client.on("counter-state", e => setState(e.payload)
    return cleanup
  }, []);

  return (
    <div>
      <div>{state.count}</div>
      <div>{JSON.stringify(state.history)}</div>
    <div/>
  )
}

import { DevtoolsEventClient } from './eventClient.ts'

export function DevtoolPanel() {
  const [state,setState] = useState();

  useEffect(() => {
    // subscribe to the emitted event
    const cleanup = client.on("counter-state", e => setState(e.payload)
    return cleanup
  }, []);

  return (
    <div>
      <div>{state.count}</div>
      <div>{JSON.stringify(state.history)}</div>
    <div/>
  )
}

Anwendungsintegration

Dieser Schritt folgt dem, was in basic-setup gezeigt wird. Für eine ausführlichere Anleitung schauen Sie dort nach. Außerdem finden Sie das vollständige Custom-Devtools-Beispiel in unserem Beispielbereich.

Main.tsx

tsx

import { DevtoolPanel } from './DevtoolPanel'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          // Name it what you like, this is how it will appear in the Menu
          name: 'Custom devtools',
          render: <DevtoolPanel />,
        },
      ]}
    />
  </StrictMode>,
)

import { DevtoolPanel } from './DevtoolPanel'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      plugins={[
        {
          // Name it what you like, this is how it will appear in the Menu
          name: 'Custom devtools',
          render: <DevtoolPanel />,
        },
      ]}
    />
  </StrictMode>,
)

Debugging

Sowohl die TanStack TanStackDevtools Komponente als auch der TanStack EventClient verfügen über einen integrierten Debug-Modus, der die gesendeten Ereignisse sowie den Status des EventClients auf der Konsole ausgibt.

Der Debug-Modus von TanStackDevtools kann wie folgt aktiviert werden

tsx

<TanStackDevtools
  eventBusConfig={{ debug: true }}
  plugins={[
    {
      // call it what you like, this is how it will appear in the Menu
      name: 'Custom devtools',
      render: <DevtoolPanel />,
    },
  ]}
/>

<TanStackDevtools
  eventBusConfig={{ debug: true }}
  plugins={[
    {
      // call it what you like, this is how it will appear in the Menu
      name: 'Custom devtools',
      render: <DevtoolPanel />,
    },
  ]}
/>

Während der Debug-Modus des EventClients durch Aktivierung aktiviert werden kann

tsx

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

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

Durch Aktivieren des Debug-Modus werden die aktuellen Ereignisse, die der Emittent gesendet oder auf die er gehört hat, auf der Konsole protokolliert. Dem EventClient wird [tanstack-devtools:${pluginId}] vorangestellt und dem Client wird [tanstack-devtools:client-bus] vorangestellt.

Hier ist ein Beispiel für beides

🌴 [tanstack-devtools:client-bus] Initializing client event bus

🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state

🌴 [tanstack-devtools:client-bus] Initializing client event bus

🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state