xxf_react 0.5.1 → 0.5.3

package/dist/event-bus/EventBus.d.ts

@@ -0,0 +1,176 @@
+/**
+ * 事件处理器类型
+ */
+type Handler<T> = (event: T) => void;
+/**
+ * 类构造器类型
+ */
+type Constructor<T = any> = new (...args: any[]) => T;
+/**
+ * 事件基类
+ * 所有事件都需要继承此类
+ *
+ * @example
+ * ```ts
+ * export class PaymentSuccessEvent extends BaseEvent {
+ *   static readonly type = 'PaymentSuccessEvent'
+ *   constructor(public orderId: string, public amount: number) {
+ *     super()
+ *   }
+ * }
+ * ```
+ */
+export declare abstract class BaseEvent {
+    /**
+     * 事件类型标识（子类必须覆盖此属性）
+     * 使用静态属性避免生产环境类名混淆问题
+     */
+    static readonly type: string;
+    /**
+     * 获取事件类型标识
+     */
+    static getType(): string;
+    /**
+     * 发送当前事件
+     *
+     * @example
+     * ```ts
+     * // 发送事件
+     * new PaymentSuccessEvent('order-123', 99.99).post()
+     *
+     * // 监听方式1：直接订阅
+     * eventBus.on(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId, event.amount)
+     * })
+     *
+     * // 监听方式2：React Hook
+     * useEvent(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId, event.amount)
+     * })
+     *
+     * // 监听方式3：一次性监听
+     * useEventOnce(PaymentSuccessEvent, (event) => {
+     *   console.log('只触发一次')
+     * })
+     * ```
+     */
+    post(): Promise<void>;
+}
+/**
+ * 事件总线
+ * 基于 BroadcastChannel 实现跨浏览器 Tab 通信
+ *
+ * @example
+ * ```ts
+ * // 发送事件
+ * eventBus.emit(new PaymentSuccessEvent('order-123', 99.99))
+ *
+ * // 订阅事件
+ * eventBus.on(PaymentSuccessEvent, (event) => {
+ *   console.log(event.orderId)
+ * })
+ * ```
+ */
+declare class EventBus {
+    private static instance;
+    private channel;
+    private handlers;
+    private eventRegistry;
+    private isInitialized;
+    private channelName;
+    private constructor();
+    /**
+     * 获取单例实例
+     * @param name 频道名称，默认 'nexus-app'
+     */
+    static getInstance(name?: string): EventBus;
+    /**
+     * 初始化频道（延迟初始化，仅在浏览器环境）
+     */
+    private ensureInitialized;
+    /**
+     * 分发事件到对应的处理器（用于跨 Tab 消息）
+     */
+    private dispatch;
+    /**
+     * 调用事件处理器
+     */
+    private invokeHandlers;
+    /**
+     * 发送事件（同时触发本地和跨 Tab 监听）
+     * @param event 事件实例
+     *
+     * @example
+     * ```ts
+     * eventBus.emit(new PaymentSuccessEvent('order-123', 99.99))
+     * ```
+     */
+    emit<T extends BaseEvent>(event: T): Promise<void>;
+    /**
+     * 订阅事件
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     * @returns 取消订阅函数
+     *
+     * @example
+     * ```ts
+     * // 订阅
+     * const unsubscribe = eventBus.on(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId)
+     * })
+     *
+     * // 取消订阅
+     * unsubscribe()
+     * ```
+     */
+    on<T extends BaseEvent>(EventClass: Constructor<T>, handler: Handler<T>): () => void;
+    /**
+     * 取消订阅事件
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     */
+    off<T extends BaseEvent>(EventClass: Constructor<T>, handler: Handler<T>): void;
+    /**
+     * 订阅一次性事件（触发后自动取消订阅）
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     * @returns 取消订阅函数
+     *
+     * @example
+     * ```ts
+     * eventBus.once(PaymentSuccessEvent, (event) => {
+     *   console.log('只触发一次:', event.orderId)
+     * })
+     * ```
+     */
+    once<T extends BaseEvent>(EventClass: Constructor<T>, handler: Handler<T>): () => void;
+    /**
+     * 检查是否有订阅者
+     * @param EventClass 事件类
+     */
+    hasSubscribers<T extends BaseEvent>(EventClass: Constructor<T>): boolean;
+    /**
+     * 获取订阅者数量
+     * @param EventClass 事件类
+     */
+    subscriberCount<T extends BaseEvent>(EventClass: Constructor<T>): number;
+    /**
+     * 清除指定事件的所有订阅
+     * @param EventClass 事件类
+     */
+    clear<T extends BaseEvent>(EventClass: Constructor<T>): void;
+    /**
+     * 清除所有订阅
+     */
+    clearAll(): void;
+    /**
+     * 关闭频道并释放资源
+     */
+    destroy(): Promise<void>;
+}
+/**
+ * 事件总线单例
+ */
+export declare const eventBus: EventBus;
+export {};
+//# sourceMappingURL=EventBus.d.ts.map

package/dist/event-bus/EventBus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventBus.d.ts","sourceRoot":"","sources":["../../src/event-bus/EventBus.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;AAEpC;;GAEG;AACH,KAAK,WAAW,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAErD;;;;;;;;;;;;;GAaG;AACH,8BAAsB,SAAS;IAC3B;;;OAGG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IAE5B;;OAEG;IACH,MAAM,CAAC,OAAO,IAAI,MAAM;IAUxB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;CAGxB;AAED;;;;;;;;;;;;;;GAcG;AACH,cAAM,QAAQ;IACV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAwB;IAE/C,OAAO,CAAC,OAAO,CAAgC;IAC/C,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO;IAIP;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,IAAI,SAAc,GAAG,QAAQ;IAOhD;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAYhB;;OAEG;IACH,OAAO,CAAC,cAAc;IAatB;;;;;;;;OAQG;IACH,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAuBlD;;;;;;;;;;;;;;;;OAgBG;IACH,EAAE,CAAC,CAAC,SAAS,SAAS,EAClB,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GACpB,MAAM,IAAI;IAoBb;;;;OAIG;IACH,GAAG,CAAC,CAAC,SAAS,SAAS,EACnB,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GACpB,IAAI;IAYP;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,CAAC,SAAS,SAAS,EACpB,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GACpB,MAAM,IAAI;IAQb;;;OAGG;IACH,cAAc,CAAC,CAAC,SAAS,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,OAAO;IAMxE;;;OAGG;IACH,eAAe,CAAC,CAAC,SAAS,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM;IAKxE;;;OAGG;IACH,KAAK,CAAC,CAAC,SAAS,SAAS,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI;IAM5D;;OAEG;IACH,QAAQ,IAAI,IAAI;IAKhB;;OAEG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CASjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAyB,CAAA"}

package/dist/event-bus/EventBus.js

@@ -0,0 +1,278 @@
+import { BroadcastChannel } from 'broadcast-channel';
+/**
+ * 事件基类
+ * 所有事件都需要继承此类
+ *
+ * @example
+ * ```ts
+ * export class PaymentSuccessEvent extends BaseEvent {
+ *   static readonly type = 'PaymentSuccessEvent'
+ *   constructor(public orderId: string, public amount: number) {
+ *     super()
+ *   }
+ * }
+ * ```
+ */
+export class BaseEvent {
+    /**
+     * 获取事件类型标识
+     */
+    static getType() {
+        if (!this.type) {
+            throw new Error(`[EventBus] Event class "${this.name}" must define a static "type" property. ` +
+                `Example: static readonly type = '${this.name}'`);
+        }
+        return this.type;
+    }
+    /**
+     * 发送当前事件
+     *
+     * @example
+     * ```ts
+     * // 发送事件
+     * new PaymentSuccessEvent('order-123', 99.99).post()
+     *
+     * // 监听方式1：直接订阅
+     * eventBus.on(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId, event.amount)
+     * })
+     *
+     * // 监听方式2：React Hook
+     * useEvent(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId, event.amount)
+     * })
+     *
+     * // 监听方式3：一次性监听
+     * useEventOnce(PaymentSuccessEvent, (event) => {
+     *   console.log('只触发一次')
+     * })
+     * ```
+     */
+    post() {
+        return eventBus.emit(this);
+    }
+}
+/**
+ * 事件总线
+ * 基于 BroadcastChannel 实现跨浏览器 Tab 通信
+ *
+ * @example
+ * ```ts
+ * // 发送事件
+ * eventBus.emit(new PaymentSuccessEvent('order-123', 99.99))
+ *
+ * // 订阅事件
+ * eventBus.on(PaymentSuccessEvent, (event) => {
+ *   console.log(event.orderId)
+ * })
+ * ```
+ */
+class EventBus {
+    constructor(name) {
+        this.channel = null;
+        this.handlers = new Map();
+        this.eventRegistry = new Map();
+        this.isInitialized = false;
+        this.channelName = name;
+    }
+    /**
+     * 获取单例实例
+     * @param name 频道名称，默认 'nexus-app'
+     */
+    static getInstance(name = 'nexus-app') {
+        if (!EventBus.instance) {
+            EventBus.instance = new EventBus(name);
+        }
+        return EventBus.instance;
+    }
+    /**
+     * 初始化频道（延迟初始化，仅在浏览器环境）
+     */
+    ensureInitialized() {
+        if (this.isInitialized)
+            return;
+        // 仅在浏览器环境初始化
+        if (typeof window === 'undefined')
+            return;
+        this.channel = new BroadcastChannel(this.channelName);
+        this.channel.onmessage = (msg) => {
+            this.dispatch(msg.type, msg.data);
+        };
+        this.isInitialized = true;
+    }
+    /**
+     * 分发事件到对应的处理器（用于跨 Tab 消息）
+     */
+    dispatch(type, data) {
+        const EventClass = this.eventRegistry.get(type);
+        if (!EventClass)
+            return;
+        const handlers = this.handlers.get(type);
+        if (!handlers || handlers.size === 0)
+            return;
+        // 还原事件对象
+        const event = Object.assign(Object.create(EventClass.prototype), data);
+        this.invokeHandlers(type, event);
+    }
+    /**
+     * 调用事件处理器
+     */
+    invokeHandlers(type, event) {
+        const handlers = this.handlers.get(type);
+        if (!handlers || handlers.size === 0)
+            return;
+        handlers.forEach(handler => {
+            try {
+                handler(event);
+            }
+            catch (error) {
+                console.error(`[EventBus] Error in handler for ${type}:`, error);
+            }
+        });
+    }
+    /**
+     * 发送事件（同时触发本地和跨 Tab 监听）
+     * @param event 事件实例
+     *
+     * @example
+     * ```ts
+     * eventBus.emit(new PaymentSuccessEvent('order-123', 99.99))
+     * ```
+     */
+    emit(event) {
+        this.ensureInitialized();
+        const EventClass = event.constructor;
+        const type = EventClass.getType();
+        // 1. 触发本地 handlers（当前 Tab）
+        this.invokeHandlers(type, event);
+        // 2. 发送到 BroadcastChannel（其他 Tab）
+        if (!this.channel) {
+            return Promise.resolve();
+        }
+        // 序列化事件数据（排除原型方法）
+        const data = Object.keys(event).reduce((acc, key) => {
+            acc[key] = event[key];
+            return acc;
+        }, {});
+        return this.channel.postMessage({ type, data });
+    }
+    /**
+     * 订阅事件
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     * @returns 取消订阅函数
+     *
+     * @example
+     * ```ts
+     * // 订阅
+     * const unsubscribe = eventBus.on(PaymentSuccessEvent, (event) => {
+     *   console.log(event.orderId)
+     * })
+     *
+     * // 取消订阅
+     * unsubscribe()
+     * ```
+     */
+    on(EventClass, handler) {
+        this.ensureInitialized();
+        const type = EventClass.getType();
+        // 注册事件类
+        if (!this.eventRegistry.has(type)) {
+            this.eventRegistry.set(type, EventClass);
+        }
+        // 添加处理器
+        if (!this.handlers.has(type)) {
+            this.handlers.set(type, new Set());
+        }
+        this.handlers.get(type).add(handler);
+        // 返回取消订阅函数
+        return () => this.off(EventClass, handler);
+    }
+    /**
+     * 取消订阅事件
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     */
+    off(EventClass, handler) {
+        const type = EventClass.getType();
+        const handlers = this.handlers.get(type);
+        if (handlers) {
+            handlers.delete(handler);
+            // 清理空 Set 避免内存泄漏
+            if (handlers.size === 0) {
+                this.handlers.delete(type);
+            }
+        }
+    }
+    /**
+     * 订阅一次性事件（触发后自动取消订阅）
+     * @param EventClass 事件类
+     * @param handler 事件处理器
+     * @returns 取消订阅函数
+     *
+     * @example
+     * ```ts
+     * eventBus.once(PaymentSuccessEvent, (event) => {
+     *   console.log('只触发一次:', event.orderId)
+     * })
+     * ```
+     */
+    once(EventClass, handler) {
+        const wrapper = (event) => {
+            this.off(EventClass, wrapper);
+            handler(event);
+        };
+        return this.on(EventClass, wrapper);
+    }
+    /**
+     * 检查是否有订阅者
+     * @param EventClass 事件类
+     */
+    hasSubscribers(EventClass) {
+        const type = EventClass.getType();
+        const handlers = this.handlers.get(type);
+        return !!handlers && handlers.size > 0;
+    }
+    /**
+     * 获取订阅者数量
+     * @param EventClass 事件类
+     */
+    subscriberCount(EventClass) {
+        var _a, _b;
+        const type = EventClass.getType();
+        return (_b = (_a = this.handlers.get(type)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0;
+    }
+    /**
+     * 清除指定事件的所有订阅
+     * @param EventClass 事件类
+     */
+    clear(EventClass) {
+        const type = EventClass.getType();
+        this.handlers.delete(type);
+        this.eventRegistry.delete(type);
+    }
+    /**
+     * 清除所有订阅
+     */
+    clearAll() {
+        this.handlers.clear();
+        this.eventRegistry.clear();
+    }
+    /**
+     * 关闭频道并释放资源
+     */
+    async destroy() {
+        this.clearAll();
+        if (this.channel) {
+            await this.channel.close();
+            this.channel = null;
+        }
+        this.isInitialized = false;
+        EventBus.instance = null;
+    }
+}
+EventBus.instance = null;
+/**
+ * 事件总线单例
+ */
+export const eventBus = EventBus.getInstance();

package/dist/event-bus/EventDemo.d.ts

@@ -0,0 +1,71 @@
+import { BaseEvent } from './index';
+/**
+ * 支付成功事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new PaymentSuccessEvent('order-123', 99.99).post()
+ *
+ * // 监听
+ * useEvent(PaymentSuccessEvent, (e) => console.log(e.orderId, e.amount))
+ * ```
+ */
+export declare class PaymentSuccessEvent extends BaseEvent {
+    orderId: string;
+    amount: number;
+    static readonly type = "PaymentSuccessEvent";
+    constructor(orderId: string, amount: number);
+}
+/**
+ * 用户登录事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new LoginEvent('user-123', 'john@example.com').post()
+ *
+ * // 监听
+ * useEvent(LoginEvent, (e) => console.log(e.userId, e.email))
+ * ```
+ */
+export declare class LoginEvent extends BaseEvent {
+    userId: string;
+    email?: string | undefined;
+    static readonly type = "LoginEvent";
+    constructor(userId: string, email?: string | undefined);
+}
+/**
+ * 用户登出事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new LogoutEvent().post()
+ *
+ * // 监听
+ * useEvent(LogoutEvent, () => console.log('用户已登出'))
+ * ```
+ */
+export declare class LogoutEvent extends BaseEvent {
+    static readonly type = "LogoutEvent";
+}
+/**
+ * 用户积分变更事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new CreditsChangedEvent(100, 200).post()
+ *
+ * // 监听
+ * useEvent(CreditsChangedEvent, (e) => console.log(e.previousCredits, e.currentCredits))
+ * ```
+ */
+export declare class CreditsChangedEvent extends BaseEvent {
+    previousCredits: number;
+    currentCredits: number;
+    static readonly type = "CreditsChangedEvent";
+    constructor(previousCredits: number, currentCredits: number);
+}
+//# sourceMappingURL=EventDemo.d.ts.map

package/dist/event-bus/EventDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventDemo.d.ts","sourceRoot":"","sources":["../../src/event-bus/EventDemo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC;;;;;;;;;;;GAWG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;IAIvC,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IAJvB,MAAM,CAAC,QAAQ,CAAC,IAAI,yBAAwB;gBAGnC,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM;CAIxB;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,SAAS;IAI9B,MAAM,EAAE,MAAM;IACd,KAAK,CAAC,EAAE,MAAM;IAJvB,MAAM,CAAC,QAAQ,CAAC,IAAI,gBAAe;gBAG1B,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,MAAM,YAAA;CAIxB;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,CAAC,QAAQ,CAAC,IAAI,iBAAgB;CACrC;AAED;;;;;;;;;;;GAWG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;IAIvC,eAAe,EAAE,MAAM;IACvB,cAAc,EAAE,MAAM;IAJ/B,MAAM,CAAC,QAAQ,CAAC,IAAI,yBAAwB;gBAGnC,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,MAAM;CAIhC"}

package/dist/event-bus/EventDemo.js

@@ -0,0 +1,76 @@
+import { BaseEvent } from './index';
+/**
+ * 支付成功事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new PaymentSuccessEvent('order-123', 99.99).post()
+ *
+ * // 监听
+ * useEvent(PaymentSuccessEvent, (e) => console.log(e.orderId, e.amount))
+ * ```
+ */
+export class PaymentSuccessEvent extends BaseEvent {
+    constructor(orderId, amount) {
+        super();
+        this.orderId = orderId;
+        this.amount = amount;
+    }
+}
+PaymentSuccessEvent.type = 'PaymentSuccessEvent';
+/**
+ * 用户登录事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new LoginEvent('user-123', 'john@example.com').post()
+ *
+ * // 监听
+ * useEvent(LoginEvent, (e) => console.log(e.userId, e.email))
+ * ```
+ */
+export class LoginEvent extends BaseEvent {
+    constructor(userId, email) {
+        super();
+        this.userId = userId;
+        this.email = email;
+    }
+}
+LoginEvent.type = 'LoginEvent';
+/**
+ * 用户登出事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new LogoutEvent().post()
+ *
+ * // 监听
+ * useEvent(LogoutEvent, () => console.log('用户已登出'))
+ * ```
+ */
+export class LogoutEvent extends BaseEvent {
+}
+LogoutEvent.type = 'LogoutEvent';
+/**
+ * 用户积分变更事件
+ *
+ * @example
+ * ```ts
+ * // 发送
+ * new CreditsChangedEvent(100, 200).post()
+ *
+ * // 监听
+ * useEvent(CreditsChangedEvent, (e) => console.log(e.previousCredits, e.currentCredits))
+ * ```
+ */
+export class CreditsChangedEvent extends BaseEvent {
+    constructor(previousCredits, currentCredits) {
+        super();
+        this.previousCredits = previousCredits;
+        this.currentCredits = currentCredits;
+    }
+}
+CreditsChangedEvent.type = 'CreditsChangedEvent';

package/dist/event-bus/EventHooks.d.ts

@@ -0,0 +1,48 @@
+import { BaseEvent } from './index';
+type Constructor<T = any> = new (...args: any[]) => T;
+/**
+ * 订阅事件的 React Hook
+ * 自动在组件卸载时取消订阅
+ *
+ * handler 会自动获取最新闭包值，无需手动管理依赖
+ *
+ * @param EventClass 事件类
+ * @param handler 事件处理器
+ *
+ * @example
+ * ```tsx
+ * function PaymentListener() {
+ *   const [count, setCount] = useState(0)
+ *
+ *   useEvent(PaymentSuccessEvent, (event) => {
+ *     // 可以安全访问最新的 count 值
+ *     console.log('当前计数:', count)
+ *     console.log('收到支付成功事件:', event.orderId)
+ *   })
+ *
+ *   return <div>Listening...</div>
+ * }
+ * ```
+ */
+export declare function useEvent<T extends BaseEvent>(EventClass: Constructor<T>, handler: (event: T) => void): void;
+/**
+ * 订阅一次性事件的 React Hook
+ * 事件触发一次后自动取消订阅
+ *
+ * @param EventClass 事件类
+ * @param handler 事件处理器
+ *
+ * @example
+ * ```tsx
+ * function OneTimeListener() {
+ *   useEventOnce(PaymentSuccessEvent, (event) => {
+ *     console.log('只触发一次:', event.orderId)
+ *   })
+ *
+ *   return <div>Waiting for one event...</div>
+ * }
+ * ```
+ */
+export declare function useEventOnce<T extends BaseEvent>(EventClass: Constructor<T>, handler: (event: T) => void): void;
+export {};
+//# sourceMappingURL=EventHooks.d.ts.map

package/dist/event-bus/EventHooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventHooks.d.ts","sourceRoot":"","sources":["../../src/event-bus/EventHooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,SAAS,EAAE,MAAM,SAAS,CAAA;AAE7C,KAAK,WAAW,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,EAC1C,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC1B,IAAI,CAaN;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,SAAS,EAC9C,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC1B,IAAI,CAoBN"}

package/dist/event-bus/EventHooks.js

@@ -0,0 +1,73 @@
+import { useEffect, useCallback, useRef } from 'react';
+import { eventBus } from './index';
+/**
+ * 订阅事件的 React Hook
+ * 自动在组件卸载时取消订阅
+ *
+ * handler 会自动获取最新闭包值，无需手动管理依赖
+ *
+ * @param EventClass 事件类
+ * @param handler 事件处理器
+ *
+ * @example
+ * ```tsx
+ * function PaymentListener() {
+ *   const [count, setCount] = useState(0)
+ *
+ *   useEvent(PaymentSuccessEvent, (event) => {
+ *     // 可以安全访问最新的 count 值
+ *     console.log('当前计数:', count)
+ *     console.log('收到支付成功事件:', event.orderId)
+ *   })
+ *
+ *   return <div>Listening...</div>
+ * }
+ * ```
+ */
+export function useEvent(EventClass, handler) {
+    // 使用 ref 保存最新的 handler，避免频繁订阅/取消订阅
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    // 稳定的回调函数，始终调用最新的 handler
+    const stableHandler = useCallback((event) => {
+        handlerRef.current(event);
+    }, []);
+    useEffect(() => {
+        return eventBus.on(EventClass, stableHandler);
+    }, [EventClass, stableHandler]);
+}
+/**
+ * 订阅一次性事件的 React Hook
+ * 事件触发一次后自动取消订阅
+ *
+ * @param EventClass 事件类
+ * @param handler 事件处理器
+ *
+ * @example
+ * ```tsx
+ * function OneTimeListener() {
+ *   useEventOnce(PaymentSuccessEvent, (event) => {
+ *     console.log('只触发一次:', event.orderId)
+ *   })
+ *
+ *   return <div>Waiting for one event...</div>
+ * }
+ * ```
+ */
+export function useEventOnce(EventClass, handler) {
+    // 使用 ref 保存最新的 handler
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
+    // 追踪是否已触发，避免组件卸载后执行
+    const firedRef = useRef(false);
+    useEffect(() => {
+        firedRef.current = false;
+        const stableHandler = (event) => {
+            if (!firedRef.current) {
+                firedRef.current = true;
+                handlerRef.current(event);
+            }
+        };
+        return eventBus.once(EventClass, stableHandler);
+    }, [EventClass]);
+}

package/dist/event-bus/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EventBus';
+export * from './EventHooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/event-bus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/event-bus/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/event-bus/index.js

@@ -0,0 +1,2 @@
+export * from './EventBus';
+export * from './EventHooks';

package/dist/index.d.ts

@@ -8,5 +8,6 @@ export * from './flow';
 export * from './responsive';
 export * from './foundation';
 export * from './layout';
+export * from './event-bus';
 export declare function initXXF(): void;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAGzB,wBAAgB,OAAO,SAEtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAG5B,wBAAgB,OAAO,SAEtB"}

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './flow';
 export * from './responsive';
 export * from './foundation';
 export * from './layout';
+export * from './event-bus';
 ///框架初始化函数，调用后会初始化一些全局功能
 export function initXXF() {
     initPromiseErrorExtension();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "private": false,
   "type": "module",
   "main": "dist/index.js",
@@ -49,6 +49,10 @@
     "./layout": {
       "types": "./dist/layout/index.d.ts",
       "import": "./dist/layout/index.js"
+    },
+    "./event-bus": {
+      "types": "./dist/event-bus/index.d.ts",
+      "import": "./dist/event-bus/index.js"
     }
   },
   "files": [
@@ -64,8 +68,8 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@use-gesture/react": "^10.3.1",
     "bowser": "^2.14.1",
+    "broadcast-channel": "^7.3.0",
     "dayjs": "^1.11.19",
-    "mitt": "^3.0.1",
     "react-async-hook": "^4.0.0",
     "react-resize-detector": "^12.3.0",
     "react-responsive": "^10.0.1",

package/dist/utils/SizedContainer.d.ts

@@ -1,60 +0,0 @@
-import { ReactNode, CSSProperties, ElementType, ComponentPropsWithoutRef } from 'react';
-import React from "react";
-export interface ContainerSize {
-    width: number;
-    height: number;
-}
-interface SizedContainerProps<T extends ElementType = 'div'> {
-    /** 子元素渲染函数，接收容器尺寸和就绪状态 */
-    children: (size: ContainerSize & {
-        isReady: boolean;
-    }) => ReactNode;
-    /** 容器的 className */
-    className?: string;
-    /** 容器的 style */
-    style?: CSSProperties;
-    /** 自定义容器元素类型，默认 div */
-    as?: T;
-    /** 是否只监听宽度变化 */
-    widthOnly?: boolean;
-    /** 是否只监听高度变化 */
-    heightOnly?: boolean;
-    /** 防抖延迟（毫秒） */
-    debounce?: number;
-    /** 是否跳过首次挂载时的计算 */
-    skipOnMount?: boolean;
-    /** 尺寸未就绪时显示的占位内容 */
-    fallback?: ReactNode;
-    /** 尺寸变化时的回调 */
-    onResize?: (size: ContainerSize) => void;
-}
-/**
- * 自动测量尺寸的容器组件
- *
- * @example
- * // 基础用法
- * <SizedContainer className="h-full w-full">
- *   {({ width, height, isReady }) => (
- *     <VirtuosoGrid style={{ width, height }} ... />
- *   )}
- * </SizedContainer>
- *
- * @example
- * // 只监听高度，带防抖和占位符
- * <SizedContainer
- *   heightOnly
- *   debounce={100}
- *   fallback={<Skeleton />}
- * >
- *   {({ height }) => <List style={{ height }} />}
- * </SizedContainer>
- *
- * @example
- * // 自定义元素类型
- * <SizedContainer as="section" className="h-full">
- *   {({ width, height }) => <Chart width={width} height={height} />}
- * </SizedContainer>
- */
-export declare function SizedContainer<T extends ElementType = 'div'>({ children, className, style, as, widthOnly, heightOnly, debounce, skipOnMount, fallback, onResize, }: SizedContainerProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SizedContainerProps<T>>): React.JSX.Element;
-export {};
-//# sourceMappingURL=SizedContainer.d.ts.map

package/dist/utils/SizedContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SizedContainer.d.ts","sourceRoot":"","sources":["../../src/utils/SizedContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACvD,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uBAAuB;IACvB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACI,QAAQ,EACR,SAAS,EACT,KAAK,EACL,EAAE,EACF,SAAiB,EACjB,UAAkB,EAClB,QAAQ,EACR,WAAmB,EACnB,QAAQ,EACR,QAAQ,GACX,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,mBAAmB,CAAC,CAAC,CAAC,CAAC,qBAmCxJ"}

package/dist/utils/SizedContainer.js

@@ -1,60 +0,0 @@
-'use client';
-import { useResizeDetector } from 'react-resize-detector';
-import React from "react";
-/**
- * 自动测量尺寸的容器组件
- *
- * @example
- * // 基础用法
- * <SizedContainer className="h-full w-full">
- *   {({ width, height, isReady }) => (
- *     <VirtuosoGrid style={{ width, height }} ... />
- *   )}
- * </SizedContainer>
- *
- * @example
- * // 只监听高度，带防抖和占位符
- * <SizedContainer
- *   heightOnly
- *   debounce={100}
- *   fallback={<Skeleton />}
- * >
- *   {({ height }) => <List style={{ height }} />}
- * </SizedContainer>
- *
- * @example
- * // 自定义元素类型
- * <SizedContainer as="section" className="h-full">
- *   {({ width, height }) => <Chart width={width} height={height} />}
- * </SizedContainer>
- */
-export function SizedContainer({ children, className, style, as, widthOnly = false, heightOnly = false, debounce, skipOnMount = false, fallback, onResize, }) {
-    const { width, height, ref } = useResizeDetector({
-        handleWidth: !heightOnly,
-        handleHeight: !widthOnly,
-        refreshMode: debounce ? 'debounce' : undefined,
-        refreshRate: debounce,
-        skipOnMount,
-        onResize: onResize
-            ? ({ width: w, height: h }) => {
-                if (w !== null && h !== null) {
-                    onResize({ width: w, height: h });
-                }
-            }
-            : undefined,
-    });
-    const size = {
-        width: width !== null && width !== void 0 ? width : 0,
-        height: height !== null && height !== void 0 ? height : 0,
-    };
-    // 根据监听模式判断是否就绪
-    const isReady = (() => {
-        if (widthOnly)
-            return size.width > 0;
-        if (heightOnly)
-            return size.height > 0;
-        return size.width > 0 && size.height > 0;
-    })();
-    const Component = as || 'div';
-    return (React.createElement(Component, { ref: ref, className: className, style: style }, isReady ? children({ ...size, isReady }) : fallback));
-}