@taicode/common-web 1.1.5 → 1.1.7

package/output/service/service.d.ts

@@ -37,22 +37,34 @@ import React from 'react';
 /**
  * 使用全局注册的服务 Hook
  *
- * 该 Hook 从 DI 容器中获取指定的服务实例，并通过 selector 函数选择需要的数据。
+ * 该 Hook 从 DI 容器中获取指定的服务实例，支持可选的 selector 函数来选择需要的数据。
  * 当选择的数据发生变化时，组件会自动重新渲染。
  *
+ * 特性：
+ * - 从全局容器获取服务实例
+ * - 支持 Mobx 响应式更新
+ * - 支持可选 selector，不传时监听整个服务的所有变化
+ * - 智能检测 selector 返回值，优化响应式监听策略
+ *
  * @template T 服务类型
  * @template U 选择器返回的数据类型
  * @param target 服务的 Token，用于从容器中获取服务实例
- * @param selector 选择器函数，从服务实例中选择需要的数据
- * @returns 选择器函数的返回值
+ * @param selector 可选的选择器函数。如果不传入，返回服务实例并监听所有 observable 属性变化
+ * @returns 如果传入了 selector，返回选择器的结果；否则返回服务实例
  *
  * @throws {Error} 当组件不在 ServiceProvider 内部时抛出错误
  *
  * @example
  * ```tsx
- * // 获取用户列表
+ * // 使用选择器，只监听特定属性
  * const users = useService(UserService, service => service.users)
  *
+ * // 不使用选择器，监听整个服务的所有变化
+ * const userService = useService(UserService)
+ *
+ * // 选择器返回服务实例本身（智能检测，自动优化响应式监听）
+ * const service = useService(UserService, s => s)
+ *
  * // 获取当前用户信息
  * const currentUser = useService(UserService, service => service.currentUser)
  *
@@ -60,7 +72,83 @@ import React from 'react';
  * const userCount = useService(UserService, service => service.users.length)
  * ```
  */
-export declare function useService<T, U>(target: Token<T>, selector: (v: T) => U): U;
+export declare function useService<T>(target: Token<T>): T;
+export declare function useService<T, U>(target: Token<T>, selector: (service: T) => U): U;
+/**
+ * 使用局部服务实例 Hook
+ *
+ * 该 Hook 创建指定服务的局部实例，既能注入全局依赖，又不会污染全局上下文。
+ * 局部实例在 Hook 的整个生命周期内保持引用稳定，支持自动初始化和响应式更新。
+ *
+ * 特性：
+ * - 创建局部服务实例，避免全局状态污染
+ * - 继承全局容器的所有依赖，支持依赖注入
+ * - 在组件重渲染时保持实例引用稳定
+ * - 自动初始化实现了 Service 接口的服务
+ * - 支持 Mobx 响应式更新
+ * - 支持可选 selector，不传时监听整个服务的所有变化
+ *
+ * @template T 服务类型
+ * @template U 选择器返回的数据类型
+ * @param ServiceClass 服务构造函数/类
+ * @param selector 可选的选择器函数。如果不传入，返回服务实例并监听所有 observable 属性变化
+ * @returns 如果传入了 selector，返回选择器的结果；否则返回服务实例
+ *
+ * @throws {Error} 当组件不在 ServiceProvider 内部时抛出错误
+ *
+ * @example
+ * ```tsx
+ * // 使用选择器，只监听特定属性
+ * const localUsers = useLocalService(LocalUserService, service => service.users)
+ *
+ * // 不使用选择器，监听整个服务的所有变化
+ * const service = useLocalService(LocalUserService)
+ *
+ * // 局部服务可以注入全局服务
+ * class LocalUserService extends Service {
+ *   constructor(
+ *     @inject(ApiService) private apiService: ApiService,
+ *     @inject(ConfigService) private configService: ConfigService
+ *   ) {
+ *     super()
+ *   }
+ *
+ *   @observable users: User[] = []
+ *
+ *   async init() {
+ *     this.users = await this.apiService.getUsers()
+ *     return true
+ *   }
+ * }
+ *
+ * // 使用局部服务
+ * function UserComponent() {
+ *   const users = useLocalService(LocalUserService, s => s.users)
+ *   const userCount = useLocalService(LocalUserService, s => s.users.length)
+ *
+ *   return (
+ *     <div>
+ *       <p>用户数量: {userCount}</p>
+ *       {users.map(user => <div key={user.id}>{user.name}</div>)}
+ *     </div>
+ *   )
+ * }
+ *
+ * // 不使用选择器的例子
+ * function SimpleUserComponent() {
+ *   const service = useLocalService(LocalUserService)
+ *
+ *   return (
+ *     <div>
+ *       <p>用户数量: {service.users.length}</p>
+ *       {service.users.map(user => <div key={user.id}>{user.name}</div>)}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useLocalService<T>(ServiceClass: new (...args: any[]) => T): T;
+export declare function useLocalService<T, U>(ServiceClass: new (...args: any[]) => T, selector: (service: T) => U): U;
 /**
  * ServiceProvider 组件的属性接口
  */

package/output/service/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../source/service/service.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,KAA2D,MAAM,OAAO,CAAA;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAuB3E;AAED;;GAEG;AACH,UAAU,oBAAoB;IAC5B,sBAAsB;IACtB,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,6CAA6C;AAE7C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,8EAuB1D"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../source/service/service.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,KAA2D,MAAM,OAAO,CAAA;AA+D/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AAClD,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAgDlF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;AAC9E,wBAAgB,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;AAyF9G;;GAEG;AACH,UAAU,oBAAoB;IAC5B,sBAAsB;IACtB,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,6CAA6C;AAE7C,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,8EAuB1D"}

package/output/service/service.js

@@ -33,41 +33,57 @@
  * ```
  */
 import { reaction, runInAction } from 'mobx';
-import { catchIt } from '@taicode/common-base';
 import { Container } from '@needle-di/core';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 /**
  * React Context 用于传递 DI 容器实例
  * 通过上下文在组件树中共享依赖注入容器
  */
 const ctx = React.createContext(undefined);
-/**
- * 使用全局注册的服务 Hook
- *
- * 该 Hook 从 DI 容器中获取指定的服务实例，并通过 selector 函数选择需要的数据。
- * 当选择的数据发生变化时，组件会自动重新渲染。
- *
- * @template T 服务类型
- * @template U 选择器返回的数据类型
- * @param target 服务的 Token，用于从容器中获取服务实例
- * @param selector 选择器函数，从服务实例中选择需要的数据
- * @returns 选择器函数的返回值
- *
- * @throws {Error} 当组件不在 ServiceProvider 内部时抛出错误
- *
- * @example
- * ```tsx
- * // 获取用户列表
- * const users = useService(UserService, service => service.users)
- *
- * // 获取当前用户信息
- * const currentUser = useService(UserService, service => service.currentUser)
- *
- * // 获取用户数量
- * const userCount = useService(UserService, service => service.users.length)
- * ```
- */
-// DI + Mobx 自动
+const INIT_RETURN_ERROR_MESSAGE = 'Service init must return a boolean value.';
+class InvalidInitReturnError extends Error {
+    constructor() {
+        super(INIT_RETURN_ERROR_MESSAGE);
+        this.name = 'InvalidInitReturnError';
+    }
+}
+function setServiceInited(target, value) {
+    runInAction(() => {
+        if (target != null && typeof target === 'object') {
+            target.inited = value;
+        }
+    });
+}
+function applyInitResult(target, result) {
+    if (typeof result === 'boolean') {
+        setServiceInited(target, result);
+        return;
+    }
+    setServiceInited(target, false);
+    throw new InvalidInitReturnError();
+}
+async function initializeServiceInstance(target) {
+    if (target == null ||
+        typeof target !== 'object' ||
+        !('init' in target) ||
+        typeof target.init !== 'function') {
+        return;
+    }
+    const service = target;
+    if (service.inited === true) {
+        return;
+    }
+    try {
+        const result = await service.init();
+        applyInitResult(service, result);
+    }
+    catch (error) {
+        if (error instanceof InvalidInitReturnError) {
+            throw error;
+        }
+        setServiceInited(service, false);
+    }
+}
 export function useService(target, selector) {
     const container = useContext(ctx);
     // 使用 useState 强制组件重新渲染
@@ -78,13 +94,98 @@ export function useService(target, selector) {
         // 从容器中获取服务实例
         const service = container.get(target);
         // 设置 Mobx reaction，当 selector 返回的数据变化时触发重新渲染
-        return reaction(() => selector(service), () => refresh({}) // 触发组件重新渲染
+        const dispose = reaction(() => {
+            // 如果没有提供 selector，使用默认策略监听整个服务的变化
+            if (!selector) {
+                // 直接访问服务实例，让 Mobx 自动收集依赖
+                return service;
+            }
+            // 执行 selector 获取结果
+            const result = selector(service);
+            // 智能检测：如果 selector 返回的就是服务实例本身，
+            // 则切换到监听所有属性变化的模式
+            if (result === service) {
+                // 通过访问服务实例让 Mobx 收集所有 observable 属性的依赖
+                return service;
+            }
+            return result;
+        }, () => refresh({}) // 触发组件重新渲染
         );
+        return dispose;
     }, [container, selector, target]);
     if (container == null) {
         throw new Error('Must be a child of ServiceProvider.');
     }
-    return selector(container.get(target));
+    // 返回选择器结果或服务实例
+    const service = container.get(target);
+    return selector ? selector(service) : service;
+}
+export function useLocalService(ServiceClass, selector) {
+    const parentContainer = useContext(ctx);
+    // 使用 useRef 保持局部容器和服务实例的引用稳定
+    const localContainerRef = useRef(null);
+    const serviceInstanceRef = useRef(null);
+    // 使用 useState 强制组件重新渲染，完全模仿 useService
+    const [, refresh] = useState({});
+    const [initError, setInitError] = useState(null);
+    if (parentContainer == null) {
+        throw new Error('Must be a child of ServiceProvider.');
+    }
+    // 确保服务实例已创建
+    if (serviceInstanceRef.current == null) {
+        // 创建继承父容器的子容器
+        localContainerRef.current = new Container(parentContainer);
+        // 将服务类绑定到局部容器
+        localContainerRef.current.bindAll(ServiceClass);
+        // 获取服务实例
+        serviceInstanceRef.current = localContainerRef.current.get(ServiceClass);
+    }
+    // 模仿 useService 的结构：在 useEffect 中设置 reaction 和初始化
+    React.useEffect(() => {
+        if (parentContainer == null)
+            return;
+        const service = serviceInstanceRef.current;
+        // 设置 Mobx reaction，当 selector 返回的数据变化时触发重新渲染
+        const dispose = reaction(() => {
+            // 如果没有提供 selector，使用默认策略监听整个服务的变化
+            if (!selector) {
+                // 直接访问服务实例，让 Mobx 自动收集依赖
+                return service;
+            }
+            // 执行 selector 获取结果
+            const result = selector(service);
+            // 智能检测：如果 selector 返回的就是服务实例本身，
+            // 则切换到监听所有属性变化的模式
+            if (result === service) {
+                // 通过访问服务实例让 Mobx 收集所有 observable 属性的依赖
+                return service;
+            }
+            return result;
+        }, () => refresh({}) // 触发组件重新渲染
+        );
+        return dispose;
+    }, [parentContainer, selector, ServiceClass]);
+    // 单独的 useEffect 处理服务初始化，避免与 selector 变化的冲突
+    React.useEffect(() => {
+        if (parentContainer == null)
+            return;
+        let disposed = false;
+        setInitError(prev => (prev === null ? prev : null));
+        const service = serviceInstanceRef.current;
+        initializeServiceInstance(service).catch((error) => {
+            if (error instanceof InvalidInitReturnError && !disposed) {
+                setInitError(error);
+            }
+        });
+        return () => {
+            disposed = true;
+        };
+    }, [parentContainer, ServiceClass]); // 注意：这里不依赖 selector
+    if (initError) {
+        throw initError;
+    }
+    // 返回选择器结果或服务实例
+    return selector ? selector(serviceInstanceRef.current) : serviceInstanceRef.current;
 }
 /**
  * 服务提供者组件
@@ -158,32 +259,38 @@ export function ServiceProvider(props) {
 function InitService(props) {
     const { services, children } = props;
     const container = useContext(ctx);
+    const [initError, setInitError] = React.useState(null);
     useEffect(() => {
         if (container == null)
             return;
         if (services.length == 0)
             return;
+        let disposed = false;
+        setInitError(prev => (prev === null ? prev : null));
         // 异步初始化所有服务
-        (async () => {
-            const initPromises = services.map(async (service) => {
-                // 尝试从容器中获取服务实例（可选的，避免未注册时报错）
-                const instance = container.get(service, { optional: true });
-                if (instance != null && typeof instance === 'object') {
-                    // 检查实例是否实现了 Service 接口
-                    if ('init' in instance && typeof instance.init === 'function') {
-                        // 检查是否已经初始化
-                        if (instance.inited == false) {
-                            // 安全地调用 init 方法，捕获可能的异常
-                            const result = await catchIt(() => instance.init());
-                            // 使用 runInAction 确保状态更新被 Mobx 正确跟踪
-                            runInAction(() => instance.inited = !result.isError());
-                        }
+        const initPromises = services.map(async (service) => {
+            // 尝试从容器中获取服务实例（可选的，避免未注册时报错）
+            const instance = container.get(service, { optional: true });
+            if (instance != null && typeof instance === 'object') {
+                // 检查实例是否实现了 Service 接口
+                if ('init' in instance && typeof instance.init === 'function') {
+                    if (instance.inited !== true) {
+                        await initializeServiceInstance(instance).catch((error) => {
+                            if (error instanceof InvalidInitReturnError && !disposed) {
+                                setInitError(error);
+                            }
+                        });
                     }
                 }
-            });
-            // 等待所有服务初始化完成
-            await Promise.all(initPromises);
-        })();
+            }
+        });
+        void Promise.all(initPromises);
+        return () => {
+            disposed = true;
+        };
     }, [container, services]);
+    if (initError) {
+        throw initError;
+    }
     return children;
 }