SuperAPI AI 工具集

tanstack-devtools-plugin-panel

编程与开发

查看项目

更新于 10-16 06:24

技能介绍

用途:指导开发者构建 TanStack DevTools 插件面板,用来展示应用发出的事件数据。

主要能力与契约:插件实现 TanStackDevtoolsPlugin 接口,包含 name(必填,标签标题,可为字符串或接收 (el, theme) 的函数)、render(必填,激活时与主题变化时以 div 容器和主题调用)、id(可选,省略时按 name 生成,显式 id 可跨刷新保留选择)、defaultOpen(可选,无保存状态时首次加载展开,最多 3 个)、destroy(可选,停用或卸载时调用)。

两条开发路径:其一在 Solid.js 中用 @tanstack/devtools-ui 组件构建面板,经 constructCoreClass 懒加载,再用 createReactPanel/createSolidPanel 适配各框架;其二直接用 @tanstack/devtools-utils 的 createReactPlugin/createVuePlugin/createSolidPlugin/createPreactPlugin 在单一框架内构建。

事件用法:通过继承 EventClient 并传入 pluginId 创建客户端,用 on() 订阅事件;事件名仅为后缀,pluginId 会自动前置(如 'store-inspector:state-changed')。主题可通过 createTheme() 或 props.theme 获取。最后用 TanStackDevtools 的 plugins 属性注册插件。

限制与注意事项:on() 返回清理函数,React 需在 useEffect 中返回它,Solid 用 onCleanup(),否则造成内存泄漏和重复处理;同一事件不要在多组件重复订阅,应集中在共享 store/hook;不要用原生 DOM 操作,应交由框架 portal;面板需适配明暗主题;插件包应保持兼容版本。MAX_ACTIVE_PLUGINS 为 3,超过时仅前 3 个默认展开,激活第 4 个会停用最早的;仅注册 1 个插件时会自动打开。激活插件选择保存在 localStorage 的 tanstack_devtools_state 键下。