UNPKG

@wonderkits/app

Version:

WonderKits micro-frontend SDK for sub-applications

174 lines 4.54 kB
/** * @wonderkits/app/wujie * * Wujie 微前端集成工具 * 为子应用提供简单易用的 Wujie 环境检测和通信能力 */ /** * Wujie 全局对象类型 */ interface WujieGlobal { props?: Record<string, unknown>; bus?: WujieBus; } /** * Wujie 事件总线类型 */ interface WujieBus { $emit: (event: string, data?: unknown) => void; $on: (event: string, callback: (data?: unknown) => void) => void; $off: (event: string, callback?: (data?: unknown) => void) => void; } /** * 声明全局类型 */ declare global { interface Window { __POWERED_BY_WUJIE__?: boolean; $wujie?: WujieGlobal; } } /** * Wujie 环境信息 */ export interface WujieContext { /** 是否在 Wujie 环境中运行 */ isInWujie: boolean; /** 父应用传递的 props */ props: Record<string, unknown>; /** 应用 ID(从 props 中获取) */ appId?: string; } /** * Wujie 通信工具 */ export interface WujieCommunication { /** * 向父应用发送事件 * @param event 事件名称 * @param data 事件数据 */ emit: (event: string, data?: unknown) => void; /** * 监听父应用事件 * @param event 事件名称 * @param callback 回调函数 * @returns 取消监听的函数 */ on: (event: string, callback: (data?: unknown) => void) => () => void; /** * 取消监听 * @param event 事件名称 * @param callback 可选的回调函数 */ off: (event: string, callback?: (data?: unknown) => void) => void; } /** * useWujie Hook 返回值 */ export interface UseWujieResult { /** Wujie 环境信息 */ context: WujieContext; /** 通信工具 */ bus: WujieCommunication; /** * 通知父应用路由变化 * @param path 当前路径 */ notifyRouteChange: (path: string) => void; /** * 监听父应用路由变化 * @param callback 回调函数 * @returns 取消监听的函数 */ onParentRouteChange: (callback: (path: string) => void) => () => void; } /** * 获取 Wujie 环境信息(非 Hook 版本) * 用于在非 React 组件中获取 Wujie 状态 */ export declare function getWujieContext(): WujieContext; /** * 获取 Wujie 事件总线(非 Hook 版本) */ export declare function getWujieBus(): WujieCommunication; /** * Wujie 集成 Hook * * 提供 Wujie 环境检测、通信和路由同步功能 * * @example * ```tsx * function MyComponent() { * const { context, bus, notifyRouteChange } = useWujie(); * * // 检查是否在 Wujie 环境 * if (!context.isInWujie) { * return <div>独立运行模式</div>; * } * * // 发送消息给父应用 * const handleClick = () => { * bus.emit('child-message', { type: 'click', data: 'hello' }); * }; * * // 监听父应用消息 * useEffect(() => { * return bus.on('parent-message', (data) => { * console.log('收到父应用消息:', data); * }); * }, []); * * return <button onClick={handleClick}>发送消息</button>; * } * ``` */ export declare function useWujie(): UseWujieResult; /** * 自动路由同步 Hook * * 自动监听 React Router 路由变化并通知父应用 * 需要配合 react-router-dom 使用 * * @example * ```tsx * import { useLocation } from 'react-router-dom'; * * function App() { * const location = useLocation(); * useWujieRouteSync(location.pathname); * return <Routes>...</Routes>; * } * ``` */ export declare function useWujieRouteSync(currentPath: string): void; /** * 预定义的事件类型 * 子应用和主应用之间的标准通信协议 */ export declare const WujieEvents: { /** 子应用路由变化 */ readonly SUB_ROUTE_CHANGE: "sub-route-change"; /** 子应用就绪 */ readonly SUB_APP_READY: "sub-app-ready"; /** 子应用错误 */ readonly SUB_APP_ERROR: "sub-app-error"; /** 子应用消息 */ readonly SUB_APP_MESSAGE: "sub-app-message"; /** 父应用路由变化 */ readonly PARENT_ROUTE_CHANGE: "parent-route-change"; /** 父应用消息 */ readonly PARENT_APP_MESSAGE: "parent-app-message"; }; /** * 子应用就绪通知 * 在子应用初始化完成后调用 */ export declare function notifyAppReady(appId: string, version: string): void; /** * 子应用错误通知 * 在子应用发生错误时调用 */ export declare function notifyAppError(appId: string, error: string): void; export {}; //# sourceMappingURL=index.d.ts.map