tanstack-preact-table-devtools

用途

该技能用于把原生 Preact Table v9 实例连接到 TanStack Devtools，便于在开发过程中调试表格状态。它建立在 @tanstack/table-core#core 与 @tanstack/table-devtools#devtools 之上，并针对 Preact 提供原生适配。

主要能力

通过 tableDevtoolsPlugin 与 useTanStackTableDevtools 将 Preact Table 实例注册到 Devtools。
使用原生 Preact 包体系：@tanstack/preact-devtools、@tanstack/preact-table、@tanstack/preact-table-devtools。
支持通过 { enabled } 选项控制注册，而不是条件式调用注册钩子。

使用方式

文档给出的设置示例：

import { TanStackDevtools } from '@tanstack/preact-devtools'
import { useTable, tableFeatures } from '@tanstack/preact-table'
import {
  tableDevtoolsPlugin,
  useTanStackTableDevtools,
} from '@tanstack/preact-table-devtools'

const features = tableFeatures({})
const columns = [{ accessorKey: 'id' }]
const data: Array<{ id: string }> = []

export function App() {
  const table = useTable({
    key: 'users-table',
    features,
    columns,
    data,
  })
  useTanStackTableDevtools(table)
  return null
}

要点：全程使用原生 Preact 包；通过传入 { enabled } 控制启用状态，而非条件式调用注册钩子。

常见错误

React Devtools 包混入 Preact（HIGH）：错误做法是通过兼容层从 @tanstack/react-table-devtools 导入钩子；正确做法是使用 @tanstack/preact-table-devtools 配合 @tanstack/preact-devtools。原生适配器负责 Preact 的 effect 生命周期与插件类型。
缺少或重复 key（HIGH）：错误做法是省略 key，或多个已挂载表格复用同一个 'users-table'；正确做法是为每个活动表格提供稳定且唯一的 key。无 key 的注册会被跳过，重复 key 会替换目标。
生产环境 no-op 被误认为失败（MEDIUM）：错误做法是期望默认入口在生产构建中保持活动；正确做法是除非明确需要生产导入，否则让 Devtools 仅用于开发环境。默认 index 在非开发环境下会刻意选择 no-op 实现。

API 发现

可查看 node_modules/@tanstack/preact-table-devtools/dist/index.d.ts 与 useTanStackTableDevtools.d.ts；不要复制 React 适配器的导入方式。

适用场景与限制

适用于使用 Preact 与 TanStack Table v9 并希望在开发期调试表格的开发者。限制方面：默认入口在生产构建中为 no-op；每个活动表格需要唯一 key；不应混用 React 适配器包。