自定义插件

TanStack devtools 允许您通过发出和监听我们的事件总线来创建自己的自定义插件。

先决条件

本指南将引导您完成一个简单的示例，其中我们的库是一个带有计数历史的计数器。您可以在我们的自定义插件示例中找到工作示例。

这是我们的库代码

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--;
    },
  };
}

事件客户端设置

安装 TanStack Devtools Event Client 工具。

bash

npm i @tanstack/devtools-event-client

npm i @tanstack/devtools-event-client

首先，您需要设置 EventClient。

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()

事件客户端集成

现在我们需要将我们的 EventClient 接入应用程序代码。这可以通过多种方式完成，例如使用 useEffect 发出当前状态，或订阅观察者，所有重要的是，当您想发出当前状态时，执行以下操作。

我们的新库代码将如下所示

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,
      })
    },
  }
}

重要

EventClient 与框架无关，因此此过程将与框架或原生 JavaScript 相同。

使用事件客户端

现在我们需要创建我们的 devtools 面板。对于简单的方法，请使用适配器所在的框架编写 devtools，请注意，这将使插件特定于框架。

由于 TanStack 与框架无关，因此我们采用了更复杂的方法，将在后续文档中进行解释（如果您不关心框架无关性，则可以忽略此部分）。

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/>
  )
}

应用集成

此步骤遵循 basic-setup 中的内容，有关更详细的指南，请查看它。以及我们示例部分中完整的 custom-devtools 示例。

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>,
)

调试

TansTack 的 TanStackDevtools 组件和 TanStack 的 EventClient 都内置了调试模式，该模式会将发出的事件以及 EventClient 状态记录到控制台。

TanStackDevtool 的调试模式可以这样激活

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 />,
    },
  ]}
/>

而 EventClient 的调试模式可以通过以下方式激活

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,
    })
  }
}

激活调试模式将把发射器已发出或监听的当前事件记录到控制台。[tanstack-devtools:${pluginId}] 将被附加到 EventClient，而 [tanstack-devtools:client-bus] 将被附加到客户端。

以下是两者的示例

🌴 [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