event-chat 是一个本地通信库。提供了跨组件、跨线程、跨域的轻量级消息机制，能够满足纯客户端 RPC 与聊天式通信的需求。

主要痛点 & 方法

• 组件之间只能靠原生事件或全局状态管理——导致代码耦合、难以维护。event‑chat 通过统一的事件总线，实现无侵入的跨组件通信。
• 表单数据校验与 UI 同步繁琐——Antd 与 Formily 各自为政，需要手动桥接。@event-chat/antd-item 把 Zod Schema 与 Antd 表单深度绑定，自动完成校验、依赖更新。
• 跨窗口/跨线程 RPC 实现复杂且体积庞大——传统方案要写大量包装代码且不支持 Tree Shaking。老实说，@event-chat/rpc 提供纯客户端 RPC。支持心跳、广播、多播等特性，仅几 KB。
• 缺乏统一的类型定义和运行时校验——导致运行时错误难以定位。不过，基于 Zod 的 Schema 程序让消息结构在编译期和运行时都有保障。

功能特性概览

@event-chat/core

• 跨组件通信主要包：发送/接收、调试、广播、群组、私信、异步消息。
• 仅几 KB 的轻量实现。
• 基于 Zod 的 Schema 支持消息类型定义与校验。
• 结合 @formily/path 实现灵活的事件方法程序。老实说，

@event-chat/antd-item

• 为 Antd 表单提供完整的 Zod 类型校验方案。
• 通过方法程序实现 Antd 与 Formily 的双向同步。
• 支持相对方法匹配，实现表单组件间的细粒度依赖更新。

• 纯客户端 RPC 库，支持多种对象类型通信。
• 提供心跳检测、单播/广播/多播、跨域及跨线程通信能力。
• 完全支持 Tree Shaking，按需引入不增加 bundle 大小。
• 抽象底层通讯细节，让业务代码专注于业务逻辑本身。老实说，

安装方式

npm install @event-chat/core
npm install @event-chat/antd-item
npm install @event-chat/rpc

快速上手示例

@event-chat/core – 基础事件通信

import { useEventChat } from '@event-chat/core';import type { FC } from 'react';const PubMox: FC = => {
const { emit } = useEventChat('pub-mox'。{
callback: => console.log,});return (
 emit}>
Publish
);}，const SubMox: FC = => {
const { emit } = useEventChat('sub-mox'。{
callback: => console.log,});return (
 emit}>
Subscribe
);}，

import { FormEvent } from '@event-chat/antd-item';import { Input,InputNumber。Rate } from 'antd';import type { FC } from 'react';
import { z } from 'zod';const fieldInput = as const;const fieldOrigin = as const;const fieldRate = as const;const FormWrapper: FC = => {
const = FormEvent.useForm;return (




formEvent.emit
}
/>

 {
emit({
至于detail，rate?'' : Number.toString.slice.charCodeAt。name: fieldRate,});}}
>




{ => {
const raw = Number?，0);const value = / 5;return ;}}



);}，

@event-chat/rpc – 本地跨窗口 / 跨线程 RPC 示例

1️⃣ 定义服务上下文：

import { createCtx } from '@event-chat/rpc';const parentCtx = createCtx(
=> ({
sendMessage: => {
// 父窗口向子窗口发送请求
console.log;},// 更多父窗口可暴露的方法...
})。=> ({
broadcast: => {
// 广播示例
},}));const iframeCtx = createCtx => ({
sendMessage: => {
console.log;// 子窗口处理逻辑...
},}));

2️⃣ 在 React 中使用 RPC：

import { useRPC,createWindowRPC } from '@event-chat/rpc';按理说，import type { FC } from 'react';import { useRef } from 'react';const ParentCom: FC = => {
const iframeRef = useRef;const { connected,rpc } = useRPC({
config这方面，{ allowedOrigins:,channel: 'window-group' },brodcast: parentCtx.brodcast。consume: iframeCtx.actions,event : parentCtx.actions,drive : createWindowRPC,init : => iframeRef.current,});return (
<>


rpc.request.catch
}>
发起 RPC 请求

);}，

适用场景一览

@event-chat/core – 跨组件事件总线替代原生监听器

• - 当项目中大量使用父子/兄弟组件通信，却不想引入 Redux / Zustand 等全局状态管理时。
• - 想在 React 中拥有类似浏览器自定义事件但拥有类型安全和调试工具时。
• - 替代繁琐的 `addEventListener` 与手动解绑逻辑，实现自动清理。

@event-chat/antd-item – Antd 表单 + Zod 校验 + Formily 协作

• - 当你需要在 Antd 表单中使用强类型 Schema 校验，却不想在每个字段手动写 validator 时。
• - 多表单之间存在联动。希望通过方法程序自动同步，而不是写大量 `useEffect`。
• - 想把复杂交互交给 Formily 管理，只在业务层关注业务数据结构时。

@event-chat/rpc – 本地多线程 / 跨域聊天式通信

• - 在同源页面中嵌套 iframe 或 Web Worker，需要可靠的请求‑响应模型而不是一次性 `postMessage`。
• - 想实现 “聊天式” 双向实时通讯，而且保持心跳检测避免失联。
• - 希望库自带 Tree Shaking 支持，不会因为引入 RPC 而显著增大 bundle 大小时。

单元测试概览

 Run pnpm --filter @event -chat /core test :all
pnpm --filter @ event -chat /core test :all
pnpm --filter @ event -chat / antd -item test :all
# core package
Rstest v0. Coverage enabled with istanbul
✓ tests/eventBus.test.ts
✓ tests/emit.test.ts
✓ tests/emitPath.test.ts
✓ tests/index.test.ts
✓ tests/hooks.test.ts
✓ tests/hooksExtra.test.ts
✓ tests/validate.test.ts
✓ tests/utils.test.ts
✓ tests/namePath.test.ts
# antd-item package
Rstest v0. Coverage enabled with istanbul
✓ tests/FormInput.test.tsx
✓ tests/FormContainer.test.tsx
✓ tests/FormEvent.test.tsx
✓ tests/FormProvider.test.tsx
✓ tests/FormList.test.tsx
✓ tests/FormItem.test .tsx
✓ tests/utils .test .tsx
All test suites passed.

完整文档与更多示例请访问：