优化find-service实现

Author: kaokei

src/component-container.ts

@@ -1,6 +1,7 @@
 import { type Container, Token } from '@kaokei/di';
 import type { ComponentInternalInstance } from 'vue';
 import { createContainer } from './utils';
+import type { FindService, FindAllServices } from './interface.ts';
 
 // 给依赖注入库使用的token
 export const CURRENT_COMPONENT = new Token<ComponentInternalInstance>(
@@ -12,6 +13,15 @@ export const CURRENT_CONTAINER = new Token<Container>(
   'USE_VUE_SERVICE_CURRENT_CONTAINER'
 );
 
+// 给依赖注入库使用的token
+export const FIND_SERVICE = new Token<FindService>(
+  'USE_REACT_SERVICE_FIND_SERVICE'
+);
+// 给依赖注入库使用的token
+export const FIND_ALL_SERVICES = new Token<FindAllServices>(
+  'USE_REACT_SERVICE_FIND_ALL_SERVICES'
+);
+
 // 给vue的provide/inject使用的token
 export const CONTAINER_TOKEN = 'USE_VUE_SERVICE_CONTAINER_TOKEN';
 

src/constants.ts

@@ -7,13 +7,10 @@ import {
   App,
 } from 'vue';
 import type { Container } from '@kaokei/di';
-import type { Newable, CommonToken } from '@kaokei/di';
+import type { CommonToken } from '@kaokei/di';
 import { createContainer } from './utils';
 import { CONTAINER_TOKEN, DEFAULT_CONTAINER } from './constants';
-
-type NewableProvider = Newable[];
-type FunctionProvider = (container: Container) => void;
-type Provider = NewableProvider | FunctionProvider;
+import type { NewableProvider, FunctionProvider, Provider } from './interface';
 
 function bindProviders(container: Container, providers: FunctionProvider): void;
 function bindProviders(container: Container, providers: NewableProvider): void;

src/core.ts

@@ -1,94 +1,37 @@
-import type { CommonToken } from '@kaokei/di';
-import type {
-  VNode,
-  VNodeChild,
-  VNodeArrayChildren,
-  VNodeNormalizedChildren,
-  ComponentInternalInstance,
-} from 'vue';
-import { getContainer } from './component-container';
+import type { CommonToken, Container } from '@kaokei/di';
 
-/**
- * useService是从当前组件开始像父组件以及祖先组件查找服务实例
- * findService是从当前组件【不包含当前组件】向子组件以及后代组件查找服务实例
- * 可以通过component.container尝试获取该组件是否有绑定对应的inversify的container
- * 然后通过container.isBound(token)来判断是否有绑定对应的服务
- * 如果有绑定则通过container.get(token)来获取服务实例
- * 注意component.subTree.children是当前组件的子组件
- * 整个过程是一个递归的过程，因为子组件还有子组件，所以需要递归查找
- * vnode.children
- * vnode.component [node.component.subTree]
- * vnode.suspense [node.suspense.activeBranch]
- * vnode 判断所有vnode是否符合条件
- */
-
-function nodesAsObject(
-  value: VNodeChild | VNodeArrayChildren
-): value is VNodeArrayChildren | VNode {
-  return !!value && typeof value === 'object';
-}
-
-function walk<T>(vnode: VNode, token: CommonToken<T>, results: T[]): T[] {
-  if (vnode.component) {
-    const container = getContainer(vnode.component);
-    if (container && container.isCurrentBound(token)) {
-      results.push(container.get(token));
-    }
-  }
-  // 优先遍历当前组件的子组件树
-  walkChildren(vnode.children, token, results);
-  if (vnode.component) {
-    walk(vnode.component.subTree, token, results);
-  }
-  if (vnode.suspense && vnode.suspense.activeBranch) {
-    walk(vnode.suspense.activeBranch, token, results);
-  }
-  return results;
-}
-
-function walkChildren<T>(
-  children: VNodeNormalizedChildren,
+function walk<T>(
+  children: Set<Container> | undefined,
   token: CommonToken<T>,
   results: T[]
 ): T[] {
-  if (children && Array.isArray(children)) {
-    const filteredNodes = children.filter(nodesAsObject);
-    filteredNodes.forEach((node: VNodeArrayChildren | VNode) => {
-      /* v8 ignore next 2 */
-      if (Array.isArray(node)) {
-        walkChildren(node, token, results);
-      } else {
-        walk(node, token, results);
+  if (children) {
+    children.forEach(container => {
+      if (container && container.isCurrentBound(token)) {
+        results.push(container.get(token));
+      }
+      if (container.children) {
+        walk(container.children, token, results);
       }
     });
   }
   return results;
 }
 
-/**
- * @param component ComponentInternalInstance 当前组件
- * @param token CommonToken<T>  服务标识
- * @returns T | undefined 是从当前组件【不包含当前组件】的子组件以及后代组件中查找服务实例，返回第一个找到的服务实例
- */
 export function findService<T>(
   token: CommonToken<T>,
-  component: ComponentInternalInstance
+  container: Container
 ): T | undefined {
   const results: T[] = [];
-  walk(component.subTree, token, results);
+  walk(container.children, token, results);
   return results[0];
 }
 
-/**
- * @param component ComponentInternalInstance 当前组件
- * @param token CommonToken<T> 服务标识
- * @returns T[] 是从当前组件【不包含当前组件】的子组件以及后代组件中查找服务实例，返回所有找到的服务实例
- */
 export function findAllServices<T>(
   token: CommonToken<T>,
-  component: ComponentInternalInstance
+  container: Container
 ): T[] {
   const results: T[] = [];
-  walk(component.subTree, token, results);
+  walk(container.children, token, results);
   return results;
 }

src/find-service.ts

@@ -1,8 +1,11 @@
 export * from '@kaokei/di';
 
-export { CURRENT_COMPONENT, CURRENT_CONTAINER } from './constants';
-
-export { findService, findAllServices } from './find-service';
+export {
+  CURRENT_COMPONENT,
+  CURRENT_CONTAINER,
+  FIND_SERVICE,
+  FIND_ALL_SERVICES,
+} from './constants';
 
 export {
   declareProviders,
@@ -15,3 +18,7 @@ export {
 } from './core';
 
 export { Computed } from './computed';
+
+// 不建议业务直接使用
+// 建议使用useService(FIND_SERVICE)和useService(FIND_ALL_SERVICES)
+export { findService, findAllServices } from './find-service';

src/index.ts

@@ -0,0 +1,9 @@
+import type { Container, Newable, CommonToken } from '@kaokei/di';
+
+export type NewableProvider = Newable[];
+export type FunctionProvider = (container: Container) => void;
+export type Provider = NewableProvider | FunctionProvider;
+
+export type FindService = <T>(token: CommonToken<T>) => T | undefined;
+
+export type FindAllServices = <T>(token: CommonToken<T>) => T[];

src/interface.ts

@@ -1,35 +1,50 @@
-import { Container } from '@kaokei/di';
+import { Container, type Context, type CommonToken } from '@kaokei/di';
 import { reactive, type ComponentInternalInstance, markRaw } from 'vue';
-import { setContainer } from './component-container';
-import { CURRENT_COMPONENT, CURRENT_CONTAINER } from './constants';
+import {
+  CURRENT_COMPONENT,
+  CURRENT_CONTAINER,
+  FIND_SERVICE,
+  FIND_ALL_SERVICES,
+} from './constants';
+import { findService, findAllServices } from './find-service.ts';
 
-function isObject(val: object) {
+export function isObject(val: object) {
   return val !== null && typeof val === 'object';
 }
 
 function makeReactiveObject(_: any, obj: any) {
   return isObject(obj) ? reactive(obj) : obj;
 }
 
+function makeFindService({ container }: Context) {
+  return <T>(token: CommonToken<T>) => findService<T>(token, container);
+}
+
+function makeFindAllServices({ container }: Context) {
+  return <T>(token: CommonToken<T>) => findAllServices<T>(token, container);
+}
+
 export function createContainer(
   parent?: Container,
   instance?: ComponentInternalInstance | null
 ) {
   let container: Container;
+
   if (parent) {
     container = parent.createChild();
   } else {
     container = new Container();
   }
+
   if (instance) {
-    // 组件实例绑定容器-方便后续通过组件实例获取容器对象
-    // 目前只是提供给findService使用
-    setContainer(instance, container);
     // 容器绑定组件实例-方便后续通过依赖注入获取当前组件实例
     container.bind(CURRENT_COMPONENT).toConstantValue(markRaw(instance));
-    // 容器绑定容器对象-方便后续通过依赖注入获取当前容器对象
-    container.bind(CURRENT_CONTAINER).toConstantValue(markRaw(container));
   }
+  // 容器绑定容器对象-方便后续通过依赖注入获取当前容器对象
+  container.bind(CURRENT_CONTAINER).toConstantValue(markRaw(container));
+  container.bind(FIND_SERVICE).toDynamicValue(makeFindService);
+  container.bind(FIND_ALL_SERVICES).toDynamicValue(makeFindAllServices);
+
   // 通过onActivation钩子使得所有实例变成响应式对象
   container.onActivation(makeReactiveObject);
   return container;