SuperAPI AI 工具集

devtools-plugin-panel

通用与其它

查看项目

更新于 10-16 09:52

技能介绍

用途:用于构建 TanStack Devtools 的面板插件,把应用发出的事件数据展示在开发者工具面板中,便于调试与观察。

主要能力:1) 实现 TanStackDevtoolsPlugin 低层接口,包含 name、render 必填项,以及可选 id、defaultOpen、destroy;name 可为字符串标签或接收 (el, theme) 的渲染函数,render 在激活时接收 div 容器与主题,主题切换时再次调用。2) 通过 EventClient 定义事件映射并监听,事件名为后缀,pluginId 会自动前置,例如 'store-inspector:state-changed'。3) 使用 @tanstack/devtools-ui 组件(MainPanel、Header、JsonTree、Tag、Button、createTheme 等)搭建界面,支持亮/暗主题。

使用方式有两条路径:路径一是用 Solid.js 编写核心面板配合 constructCoreClass 懒加载,再用 createReactPanel/createSolidPanel 等包装;路径二是直接在单框架中用 createReactPlugin/createVuePlugin/createSolidPlugin/createPreactPlugin 创建插件,并通过 TanStackDevtools 的 plugins 属性注册。

适用场景:需要为特定库或应用状态(如 store 状态、action 日志)提供可视化调试面板时。

限制与注意事项:每个 on() 返回清理函数,必须调用,否则造成内存泄漏与重复处理;同一事件不应在多个组件重复订阅;面板需适配主题(工厂插件接收 props.theme,Solid 面板用 createTheme());最多 3 个面板同时打开(MAX_ACTIVE_PLUGINS = 3),超过时按 defaultOpen 依次开启并停用最早的一个,仅注册 1 个插件时自动打开;应使用框架 portal 而非手动 DOM 操作,并保持 devtools 相关包版本兼容。