SuperAPI AI 工具集

devtools-event-client

通用与其它

查看项目

更新于 10-16 05:50

技能介绍

用途:devtools-event-client 是一个类型化的事件发送/监听客户端,用于把应用或库代码连接到 TanStack Devtools 面板,框架无关,可用于 React、Vue、Solid、Preact 和原生 JS。

安装与入口:使用 npm i @tanstack/devtools-event-client 安装。包有两个入口:根导出在开发环境为真实客户端、生产环境为会被摇树移除的空操作;/production 子路径始终是真实客户端,适合希望生产环境也保留 devtools 事件的库。

主要能力:通过定义 TypeScript 事件映射(事件后缀到负载类型)并继承 EventClient 创建单例客户端。构造选项包括 pluginId(必填,需全局唯一)、debug、enabled、reconnectEveryMs(默认 300,最多重试 5 次)。事件名会自动前置 pluginId,emit 时只传后缀。提供 emit(suffix, payload) 发送事件,on(suffix, callback) 监听本插件特定事件,on(suffix, callback, { withEventTarget: true }) 同时注册到内部 EventTarget 以实现同实例立即投递,onAll(callback) 监听所有插件事件,onAllPluginEvents(callback) 仅监听本插件事件。所有监听方法返回清理函数。

使用方式:在库代码中调用 emit,事件若尚未连接会先入队,连接成功后按顺序冲刷。连接在首次 emit 时惰性发起。

限制与注意事项:不要在事件名中重复 pluginId,否则会产生双重前缀导致无法匹配;每个插件只应创建一个实例,重复创建会导致重复处理与多次连接;pluginId 必须唯一否则事件冲突;5 次重试失败后 failedToConnect 永久置位,后续 emit 会被静默丢弃且无法增加重试次数;连接只在首次 emit 时发起,仅调用 on 不会触发连接;负载需可 JSON 序列化,函数、DOM 节点、类实例、Map/Set、循环引用会静默失败或丢数据;根导入在非 development(含 NODE_ENV 未设置)时为空操作,需要真实客户端时可设置 NODE_ENV=development 或使用 /production 子路径。官方未提供收费、价格或具体平台信息。