uview-pro 0.2.1 → 0.2.3

package/libs/hooks/useComponent.ts

@@ -0,0 +1,343 @@
+// utils/useComponent.ts
+import { ref, reactive, getCurrentInstance, onUnmounted, nextTick, computed } from 'vue';
+import { logger } from '../util/logger';
+import { eventBus } from '../util/eventBus';
+
+// 简化类型定义
+interface ParentContext {
+    name: string;
+    addChild: (child: ChildContext) => void;
+    removeChild: (childId: string) => void;
+    broadcast: (event: string, data?: any) => void;
+    getChildren: () => ChildContext[];
+    getExposed: () => Record<string, any>;
+    getChildExposed: (childId: string) => Record<string, any>;
+    getChildrenExposed: () => Array<{ id: string; name: string; exposed: Record<string, any> }>;
+}
+
+interface ChildContext {
+    id: string;
+    name: string;
+    emitToParent: (event: string, data?: any) => void;
+    getParentExposed: () => Record<string, any>;
+    getInstance: () => any;
+    getExposed: () => Record<string, any>;
+}
+
+// 全局存储
+const parentMap = new Map<string, ParentContext>();
+const childMap = new Map<string, ChildContext>();
+
+// 事件常量
+const PARENT_REGISTERED_EVENT = 'parent:registered';
+const PARENT_UNMOUNTED_EVENT = 'parent:unmounted';
+const CHILD_REGISTERED_EVENT = 'child:registered';
+
+// 热更新清理函数
+export function cleanupComponentRelations(): void {
+    logger.log('Cleaning up component relations for hot reload');
+    parentMap.clear();
+    childMap.clear();
+}
+
+// 热更新处理
+if (import.meta.hot) {
+    import.meta.hot.accept(() => {
+        setTimeout(() => {
+            cleanupComponentRelations();
+        }, 50);
+    });
+}
+
+/**
+ * 生成实例唯一ID
+ */
+function generateInstanceId(componentName: string): string {
+    return `${componentName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+/**
+ * 父组件 Hook
+ */
+export function useParent(componentName: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useParent must be called within setup function');
+    }
+
+    if (!componentName) {
+        throw new Error('Component name is required for useParent');
+    }
+
+    // 热更新时清理旧的父组件
+    if (parentMap.has(componentName)) {
+        logger.log(`Cleaning up existing parent ${componentName} for hot reload`);
+        parentMap.delete(componentName);
+    }
+
+    const children = reactive<ChildContext[]>([]);
+
+    // 父组件上下文
+    const parentContext: ParentContext = {
+        name: componentName,
+
+        addChild(child: ChildContext) {
+            if (!children.find(c => c.id === child.id)) {
+                children.push(child);
+                logger.log(`Parent ${componentName} added child: ${child.name}`);
+            }
+        },
+
+        removeChild(childId: string) {
+            const index = children.findIndex(c => c.id === childId);
+            if (index > -1) {
+                children.splice(index, 1);
+                logger.log(`Parent ${componentName} removed child: ${childId}`);
+            }
+        },
+
+        broadcast(event: string, data?: any) {
+            logger.log(`Parent ${componentName} broadcasting event: ${event}`);
+            children.forEach(child => {
+                eventBus.emit(`child:${child.id}:${event}`, data);
+            });
+        },
+
+        getChildren() {
+            return [...children];
+        },
+
+        getExposed() {
+            return instance.exposed || {};
+        },
+
+        getChildExposed(childId: string) {
+            const child = children.find(c => c.id === childId);
+            if (child && child.getExposed) {
+                return child.getExposed();
+            }
+            logger.warn(`Child ${childId} not found or does not have getExposed method`);
+            return {};
+        },
+
+        getChildrenExposed() {
+            return children
+                .filter(child => child.getExposed)
+                .map(child => {
+                    const exposed = child.getExposed();
+                    return {
+                        id: child.id,
+                        name: child.name,
+                        exposed: exposed
+                    };
+                })
+                .filter(item => Object.keys(item.exposed).length > 0);
+        }
+    };
+
+    // 注册父组件并广播事件
+    parentMap.set(componentName, parentContext);
+    logger.log(`Parent ${componentName} registered`);
+
+    // 广播父组件注册事件
+    eventBus.emit(PARENT_REGISTERED_EVENT, { name: componentName, parent: parentContext });
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        parentMap.delete(componentName);
+        eventBus.emit(PARENT_UNMOUNTED_EVENT, { name: componentName });
+        logger.log(`Parent ${componentName} unmounted`);
+    });
+
+    return {
+        parentName: componentName,
+        children,
+        broadcast: parentContext.broadcast,
+        getChildren: parentContext.getChildren,
+        getChildExposed: parentContext.getChildExposed,
+        getChildrenExposed: parentContext.getChildrenExposed
+    };
+}
+
+/**
+ * 子组件 Hook
+ */
+export function useChildren(componentName: string, parentName: string) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        throw new Error('useChildren must be called within setup function');
+    }
+
+    if (!componentName || !parentName) {
+        throw new Error('Component name and parent name are required for useChildren');
+    }
+
+    const instanceId = generateInstanceId(componentName);
+    const parentRef = ref<ParentContext | null>(null);
+    const parentExposed = ref<Record<string, any>>({});
+
+    // 热更新时清理旧的子组件
+    if (childMap.has(instanceId)) {
+        logger.log(`Cleaning up existing child ${componentName} for hot reload`);
+        childMap.delete(instanceId);
+    }
+
+    // 获取父组件暴露内容
+    const getParentExposed = (): Record<string, any> => {
+        if (parentRef.value) {
+            const exposed = parentRef.value.getExposed();
+            parentExposed.value = exposed;
+            return exposed;
+        }
+        return {};
+    };
+
+    // 获取子组件exposed内容
+    const getExposed = (): Record<string, any> => {
+        return instance.exposed || {};
+    };
+
+    // 链接到父组件
+    const linkParent = (): boolean => {
+        const parent = parentMap.get(parentName);
+        if (parent) {
+            parentRef.value = parent;
+            parent.addChild(childContext);
+            getParentExposed();
+            logger.log(`Child ${componentName} linked to parent ${parentName}`);
+            return true;
+        }
+        return false;
+    };
+
+    // 子组件上下文
+    const childContext: ChildContext = {
+        id: instanceId,
+        name: componentName,
+
+        emitToParent(event: string, data?: any) {
+            eventBus.emit(`parent:${parentName}:${event}`, {
+                data,
+                childId: instanceId,
+                childName: componentName
+            });
+        },
+
+        getParentExposed,
+        getInstance() {
+            return instance;
+        },
+        getExposed
+    };
+
+    // 注册子组件
+    childMap.set(instanceId, childContext);
+    logger.log(`Child ${componentName} registered`);
+
+    // 广播子组件注册事件
+    eventBus.emit(CHILD_REGISTERED_EVENT, {
+        id: instanceId,
+        name: componentName,
+        parentName: parentName
+    });
+
+    // 立即尝试连接父组件
+    let connected = linkParent();
+
+    // 如果没连接上，监听父组件注册事件
+    if (!connected) {
+        const parentRegisteredHandler = (eventData: any) => {
+            if (eventData.name === parentName) {
+                connected = linkParent();
+                if (connected) {
+                    eventBus.off(PARENT_REGISTERED_EVENT, parentRegisteredHandler);
+                }
+            }
+        };
+        eventBus.on(PARENT_REGISTERED_EVENT, parentRegisteredHandler);
+    }
+
+    // 监听父组件卸载事件
+    const parentUnmountedHandler = (eventData: any) => {
+        if (eventData.name === parentName && parentRef.value) {
+            parentRef.value = null;
+            parentExposed.value = {};
+            logger.log(`Parent ${parentName} unmounted, child ${componentName} disconnected`);
+        }
+    };
+    eventBus.on(PARENT_UNMOUNTED_EVENT, parentUnmountedHandler);
+
+    // 组件卸载时清理
+    onUnmounted(() => {
+        if (parentRef.value) {
+            parentRef.value.removeChild(instanceId);
+        }
+        childMap.delete(instanceId);
+        eventBus.off(PARENT_REGISTERED_EVENT);
+        eventBus.off(PARENT_UNMOUNTED_EVENT, parentUnmountedHandler);
+        logger.log(`Child ${componentName} unmounted`);
+    });
+
+    return {
+        childId: instanceId,
+        childName: componentName,
+        parent: parentRef,
+        emitToParent: childContext.emitToParent,
+        getParentExposed,
+        parentExposed: computed(() => parentExposed.value),
+        getExposed: childContext.getExposed
+    };
+}
+
+/**
+ * 监听子组件事件
+ */
+export function onChildEvent(parentName: string, event: string, handler: Function) {
+    eventBus.on(`parent:${parentName}:${event}`, eventData => {
+        handler(eventData.data, eventData.childId, eventData.childName);
+    });
+}
+
+/**
+ * 监听父组件事件
+ */
+export function onParentEvent(childId: string, event: string, handler: Function) {
+    // 修复类型问题：将 Function 转换为 EventCallback
+    const eventCallback = (data?: any, ...args: any[]) => {
+        handler(data, ...args);
+    };
+    eventBus.on(`child:${childId}:${event}`, eventCallback);
+
+    // 返回取消监听函数
+    return () => {
+        eventBus.off(`child:${childId}:${event}`, eventCallback);
+    };
+}
+
+/**
+ * 检查父组件是否存在
+ */
+export function hasParent(parentName: string): boolean {
+    return parentMap.has(parentName);
+}
+
+/**
+ * 获取所有已注册的父组件名称
+ */
+export function getRegisteredParents(): string[] {
+    return Array.from(parentMap.keys());
+}
+
+/**
+ * 获取父组件实例
+ */
+export function getParent(parentName: string): ParentContext | undefined {
+    return parentMap.get(parentName);
+}
+
+/**
+ * 获取子组件实例
+ */
+export function getChild(childId: string): ChildContext | undefined {
+    return childMap.get(childId);
+}

package/libs/hooks/useEmitter.ts

@@ -1,77 +1,77 @@
-import { type ComponentInternalInstance, getCurrentInstance } from 'vue';
-
-/**
- * 将事件名转换为驼峰格式
- * @param str 需要转换的字符串
- * @description 例如：on-form-change -> onFormChange
- * @returns
- */
-function formatToCamelCase(str: string): string {
-    return str.replace(/-([a-z])/g, function (g) {
-        return g[1].toUpperCase();
-    });
-}
-
-export function useEmitter(name: string) {
-    const instance: ComponentInternalInstance | null | undefined = getCurrentInstance();
-
-    /** * 向上查找父组件并派发事件
-     * @param instance 当前组件实例（setup中可用getCurrentInstance()）
-     * @param componentName 目标组件名
-     * @param eventName 事件名
-     * @param params 参数
-     */
-    function dispatch(componentName: string, eventName: string, ...params: any[]) {
-        let parent = instance && (instance.parent as ComponentInternalInstance | null | undefined);
-        while (parent) {
-            const name = (parent.type as any)?.name as string | undefined;
-            if (name === componentName) {
-                // 找到目标组件，派发事件
-                // Vue3未解决，目标组件事件监听失效，待优化，暂时使用下面的方式解决，如果你有好的方式也可以告诉我或者提PR
-                parent.emit && parent.emit(eventName, ...params);
-                // 如果有对应的方法，执行方法
-                // 这里可以考虑将 eventName 转换为驼峰格式
-                // 例如：on-form-change -> onFormChange
-                parent.exposed?.[formatToCamelCase(eventName)] && parent.exposed[formatToCamelCase(eventName)](...params);
-                break;
-            }
-            parent = parent.parent;
-        }
-    }
-
-    /**
-     * 向下递归查找子组件并广播事件
-     * @param instance 当前组件实例（setup中可用getCurrentInstance()）
-     * @param componentName 目标组件名
-     * @param eventName 事件名
-     * @param params 参数
-     */
-    function broadcast(componentName: string, eventName: string, ...params: any[]) {
-        if (!instance) return;
-        const subTree = (instance.subTree as any)?.children || [];
-        const children = Array.isArray(subTree) ? subTree : [subTree];
-        children.forEach((vnode: any) => {
-            const child = vnode.component as ComponentInternalInstance | undefined;
-
-            if (child) {
-                const name = (child.type as any)?.name as string | undefined;
-                if (name === componentName) {
-                    // 找到目标组件，广播事件
-                    // Vue3未解决，目标组件事件监听失效，待优化，暂时使用下面的方式解决，如果你有好的方式也可以告诉我或者提PR
-                    child.emit && child.emit(eventName, ...params);
-                    // 如果有对应的方法，执行方法
-                    // 这里可以考虑将 eventName 转换为驼峰格式
-                    // 例如：on-form-change -> onFormChange
-                    child.exposed?.[formatToCamelCase(eventName)] && child.exposed[formatToCamelCase(eventName)](...params);
-                } else {
-                    broadcast.call(child, componentName, eventName, ...params);
-                }
-            }
-        });
-    }
-
-    return {
-        dispatch,
-        broadcast
-    };
-}
+import { type ComponentInternalInstance, getCurrentInstance } from 'vue';
+
+/**
+ * 将事件名转换为驼峰格式
+ * @param str 需要转换的字符串
+ * @description 例如：on-form-change -> onFormChange
+ * @returns
+ */
+function formatToCamelCase(str: string): string {
+    return str.replace(/-([a-z])/g, function (g) {
+        return g[1].toUpperCase();
+    });
+}
+
+export function useEmitter(name: string) {
+    const instance: ComponentInternalInstance | null | undefined = getCurrentInstance();
+
+    /** * 向上查找父组件并派发事件
+     * @param instance 当前组件实例（setup中可用getCurrentInstance()）
+     * @param componentName 目标组件名
+     * @param eventName 事件名
+     * @param params 参数
+     */
+    function dispatch(componentName: string, eventName: string, ...params: any[]) {
+        let parent = instance && (instance.parent as ComponentInternalInstance | null | undefined);
+        while (parent) {
+            const name = (parent.type as any)?.name as string | undefined;
+            if (name === componentName) {
+                // 找到目标组件，派发事件
+                // Vue3未解决，目标组件事件监听失效，待优化，暂时使用下面的方式解决，如果你有好的方式也可以告诉我或者提PR
+                parent.emit && parent.emit(eventName, ...params);
+                // 如果有对应的方法，执行方法
+                // 这里可以考虑将 eventName 转换为驼峰格式
+                // 例如：on-form-change -> onFormChange
+                parent.exposed?.[formatToCamelCase(eventName)] && parent.exposed[formatToCamelCase(eventName)](...params);
+                break;
+            }
+            parent = parent.parent;
+        }
+    }
+
+    /**
+     * 向下递归查找子组件并广播事件
+     * @param instance 当前组件实例（setup中可用getCurrentInstance()）
+     * @param componentName 目标组件名
+     * @param eventName 事件名
+     * @param params 参数
+     */
+    function broadcast(componentName: string, eventName: string, ...params: any[]) {
+        if (!instance) return;
+        const subTree = (instance.subTree as any)?.children || [];
+        const children = Array.isArray(subTree) ? subTree : [subTree];
+        children.forEach((vnode: any) => {
+            const child = vnode.component as ComponentInternalInstance | undefined;
+
+            if (child) {
+                const name = (child.type as any)?.name as string | undefined;
+                if (name === componentName) {
+                    // 找到目标组件，广播事件
+                    // Vue3未解决，目标组件事件监听失效，待优化，暂时使用下面的方式解决，如果你有好的方式也可以告诉我或者提PR
+                    child.emit && child.emit(eventName, ...params);
+                    // 如果有对应的方法，执行方法
+                    // 这里可以考虑将 eventName 转换为驼峰格式
+                    // 例如：on-form-change -> onFormChange
+                    child.exposed?.[formatToCamelCase(eventName)] && child.exposed[formatToCamelCase(eventName)](...params);
+                } else {
+                    broadcast.call(child, componentName, eventName, ...params);
+                }
+            }
+        });
+    }
+
+    return {
+        dispatch,
+        broadcast
+    };
+}

package/libs/hooks/useParent.ts

@@ -1,31 +1,33 @@
-import { getCurrentInstance, onUnmounted } from 'vue';
-
-export function useParent(name: string) {
-    const instance = getCurrentInstance();
-    if (!instance) return { parent: null };
-
-    // 查找父组件
-    let parent: any = instance.parent;
-    while (parent) {
-        const parentName = parent.type?.name;
-        if (parentName === name) break;
-        parent = parent.parent;
-    }
-
-    // 建立父子关系
-    if (parent) {
-        (parent as any).children = (parent as any).children || [];
-        (parent as any).children.push(instance);
-        // 卸载时移除
-        onUnmounted(() => {
-            const i = parent.children.indexOf(instance);
-            i > -1 && parent.children.splice(i, 1);
-        });
-    }
-
-    return {
-        parent,
-        parentChildren: parent?.children || [],
-        parentExposed: parent?.exposed || null
-    };
-}
+import { getCurrentInstance, onUnmounted } from 'vue';
+
+export function useParent(name: string) {
+    const instance = getCurrentInstance();
+
+    function getParent() {
+        if (!instance) return null;
+
+        // 查找父组件
+        let parent: any = instance.parent;
+        while (parent) {
+            const parentName = parent.type?.name;
+            if (parentName === name) break;
+            parent = parent.parent;
+        }
+
+        // 建立父子关系
+        if (parent) {
+            (parent as any).children = (parent as any).children || [];
+            (parent as any).children.push(instance);
+            // 卸载时移除
+            onUnmounted(() => {
+                const i = parent.children.indexOf(instance);
+                i > -1 && parent.children.splice(i, 1);
+            });
+        }
+        return parent;
+    }
+
+    return {
+        getParent
+    };
+}

package/libs/hooks/useRect.ts

@@ -1,33 +1,33 @@
-import { getCurrentInstance, nextTick, ref } from 'vue';
-
-/**
- * useRect - 获取元素的位置信息（响应式，原生实现）
- * @param selector 选择器（如 #id 或 .class）
- * @param all 是否获取所有匹配元素
- * @returns rect 响应式的节点信息，refresh 主动刷新方法
- */
-export function useRect(selector: string, all = false) {
-    const rect = ref<any>(all ? [] : null);
-    const instance = getCurrentInstance();
-
-    async function refresh(delay = 0) {
-        await nextTick();
-        return new Promise(resolve => {
-            setTimeout(() => {
-                uni.createSelectorQuery()
-                    .in(instance?.proxy)
-                    [all ? 'selectAll' : 'select'](selector)
-                    .boundingClientRect((res: any) => {
-                        rect.value = res;
-                        resolve(res);
-                    })
-                    .exec();
-            }, delay);
-        });
-    }
-
-    return {
-        rect,
-        refresh
-    };
-}
+import { getCurrentInstance, nextTick, ref } from 'vue';
+
+/**
+ * useRect - 获取元素的位置信息（响应式，原生实现）
+ * @param selector 选择器（如 #id 或 .class）
+ * @param all 是否获取所有匹配元素
+ * @returns rect 响应式的节点信息，refresh 主动刷新方法
+ */
+export function useRect(selector: string, all = false) {
+    const rect = ref<any>(all ? [] : null);
+    const instance = getCurrentInstance();
+
+    async function refreshRect(delay = 0) {
+        await nextTick();
+        return new Promise(resolve => {
+            setTimeout(() => {
+                uni.createSelectorQuery()
+                    .in(instance?.proxy)
+                    [all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect((res: any) => {
+                        rect.value = res;
+                        resolve(res);
+                    })
+                    .exec();
+            }, delay);
+        });
+    }
+
+    return {
+        rect,
+        refreshRect
+    };
+}