feat: 增加getCurrentInjector,在外部服务中获取注射器

Author: agileago

docs/guide/api.md

@@ -103,6 +103,11 @@ class Foo extends VueComponent {
 
 获取当前的应用app
 
+## getCurrentInjector
+
+在外部服务中获取当前的最近一级的注射器
+
+
 # 类型
 
 ## ComponentProps
@@ -122,5 +127,15 @@ class Foo extends VueComponent<FooProps> {
 }
 ```
 
+## ComponentSlots
+
+在render函数中定义slots的时候用到
+
+```tsx
+const a: ComponentSlots<Foo> = {
+  
+}
+```
+
 
 

example/count.service.ts

@@ -1,85 +1,51 @@
 import '@abraham/reflection'
-import { Component, Computed, Hook, Mut, VueComponent, VueService } from 'vue3-oop'
+import {
+  Component,
+  getCurrentInjector,
+  Hook,
+  VueComponent,
+  VueService,
+} from 'vue3-oop'
+import type { Directive } from 'vue'
 import { createApp } from 'vue'
+import { focusDirective } from './focus.directive'
+import { Injector } from 'injection-js'
 
-const debounce = (delay: number) => {
-  let timeout: number | undefined
-  return (track: any, trigger: any) => {
-    let value: any
-    return {
-      get() {
-        track()
-        return value
-      },
-      set(newValue: any) {
-        clearTimeout(timeout)
-        timeout = window.setTimeout(() => {
-          value = newValue
-          trigger()
-        }, delay)
-      },
-    }
-  }
-}
-
-class CountService extends VueService {
-  @Mut() count = 1
+class OutService extends VueService {
+  injector = getCurrentInjector()
 }
 
-class Home extends VueComponent {
-  @Mut(debounce(1000)) _count = ''
-
-  @Mut() obj = { name: 123 }
-
-  @Computed()
-  get double() {
-    return this._count
+@Component()
+class App extends VueComponent {
+  static directives: Record<string, Directive> = {
+    focus: focusDirective,
   }
-  set double(val: string) {
-    this._count = val.toUpperCase()
+  constructor(private injector: Injector) {
+    super()
   }
 
-  @Hook('Mounted')
-  mounted() {
-    console.log('mounted')
-  }
+  outService = new OutService()
 
-  render() {
-    console.log(this.obj)
-    console.log('render')
-    return <input type="text" v-model={this.double} />
+  @Hook('Mounted')
+  mount() {
+    console.log(
+      this.injector,
+      this.outService.injector,
+      this.injector === this.outService.injector
+    )
   }
-}
 
-@Component()
-class Home1 extends Home {
-  constructor(private cs: CountService) {
-    super()
-    console.log(cs)
-  }
-  @Mut() count1 = 111
   render() {
     return (
       <div>
-        <h5 onClick={() => this.cs.count++}>{this.cs.count}</h5>
-        <h2 onClick={() => this.count1++}>1111{this.count1}</h2>
-        {super.render()}
+        <div>
+          指令：
+          <input type="text" v-focus />
+        </div>
       </div>
     )
   }
 }
 
-class App extends VueComponent {
-  render() {
-    return (
-      <>
-        <Home1></Home1>
-        <Home1></Home1>
-        <Home1></Home1>
-      </>
-    )
-  }
-}
-
 const app = createApp(App)
 app.mount('#app')

example/example.tsx

@@ -107,7 +107,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@abraham/reflection": "^0.8.0",
+    "@abraham/reflection": "*",
     "injection-js": "^2.4.0",
     "vue": "^3.2.20"
   },

example/form.tsx

@@ -9,7 +9,10 @@ export interface LinkDecorator {
 }
 
 function handler(targetThis: Record<any, any>) {
-  const list = getProtoMetadata<string | undefined>(targetThis, Link.MetadataKey)
+  const list = getProtoMetadata<string | undefined>(
+    targetThis,
+    Link.MetadataKey
+  )
   if (!list || !list.length) return
   for (const item of list) {
     const { key, options } = item

example/main.tsx

@@ -15,7 +15,8 @@ export function createDecorator<T = void>(name: string) {
   const MetadataKey = createSymbol(metaName)
   const decoratorFn: DecoratorFn<T> = function (options: T) {
     return function (target: any, key: string | symbol) {
-      let list: MetadataStore<T>[] = Reflect.getMetadata(MetadataKey, target) || []
+      let list: MetadataStore<T>[] =
+        Reflect.getMetadata(MetadataKey, target) || []
       list = list.slice()
       const hasItem = list.find((k) => k.key === key)
       if (!hasItem) list.push({ key, options })
@@ -31,7 +32,11 @@ export function createDecorator<T = void>(name: string) {
   })
   return decoratorFn
 }
-export function getProtoMetadata<T = void>(target: any, key: symbol | string, withDesc = false): MetadataStore<T>[] {
+export function getProtoMetadata<T = void>(
+  target: any,
+  key: symbol | string,
+  withDesc = false
+): MetadataStore<T>[] {
   const proto = Object.getPrototypeOf(target)
   if (!proto) return []
   const res: MetadataStore<any>[] = Reflect.getMetadata(key, proto) || []
@@ -40,7 +45,10 @@ export function getProtoMetadata<T = void>(target: any, key: symbol | string, wi
   }
   return res
 }
-export function getDeepOwnDescriptor(proto: any, key: string | symbol): PropertyDescriptor | null {
+export function getDeepOwnDescriptor(
+  proto: any,
+  key: string | symbol
+): PropertyDescriptor | null {
   if (!proto) return null
   const desc = Object.getOwnPropertyDescriptor(proto, key)
   if (desc) return desc

example/size.service.ts

@@ -1,10 +1,22 @@
-import type { ClassProvider, Provider, ResolvedReflectiveProvider, TypeProvider } from 'injection-js'
-import { Injectable, InjectionToken, ReflectiveInjector, SkipSelf } from 'injection-js'
+import type {
+  ClassProvider,
+  Provider,
+  ResolvedReflectiveProvider,
+  TypeProvider,
+} from 'injection-js'
+import {
+  Injectable,
+  InjectionToken,
+  ReflectiveInjector,
+  SkipSelf,
+} from 'injection-js'
 import type { InjectionKey } from 'vue'
 import { getCurrentInstance, inject, provide } from 'vue'
 import { createSymbol } from '../helper'
 
-export const InjectorKey: InjectionKey<ReflectiveInjector> = createSymbol('VUE3-OOP_ReflectiveInjector') as symbol
+export const InjectorKey: InjectionKey<ReflectiveInjector> = createSymbol(
+  'VUE3-OOP_ReflectiveInjector'
+) as symbol
 
 const MetadataKey = createSymbol('VUE3-OOP_Component')
 const MetadataProviderKey = createSymbol('VUE3-OOP_ResolveProviders')
@@ -51,8 +63,14 @@ export function resolveComponent(target: { new (...args: []): any }) {
   // 如果没有使用 injection-js 则不创建注入器
   if (!Reflect.getMetadata('annotations', target)) return new target()
   const parent = inject(InjectorKey, undefined)
-  let resolveProviders = Reflect.getOwnMetadata<ResolvedReflectiveProvider[]>(MetadataProviderKey, target)
-  const options: ComponentOptions | undefined = Reflect.getOwnMetadata(MetadataKey, target)
+  let resolveProviders = Reflect.getOwnMetadata<ResolvedReflectiveProvider[]>(
+    MetadataProviderKey,
+    target
+  )
+  const options: ComponentOptions | undefined = Reflect.getOwnMetadata(
+    MetadataKey,
+    target
+  )
   if (!resolveProviders || options?.stable === false) {
     // 依赖
     let deps: Provider[] = [target]
@@ -71,7 +89,10 @@ export function resolveComponent(target: { new (...args: []): any }) {
     // 缓存解析过的依赖, 提高性能
     Reflect.defineMetadata(MetadataProviderKey, resolveProviders, target)
   }
-  const injector = ReflectiveInjector.fromResolvedProviders(resolveProviders, parent)
+  const injector = ReflectiveInjector.fromResolvedProviders(
+    resolveProviders,
+    parent
+  )
   if (options?.globalStore) {
     // 如果作为全局的服务，则注入到根上面
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -103,7 +124,11 @@ export function resolveDependencies(inputs: Provider[]) {
   const deps = new Set<Provider>()
 
   function resolver(klass: Provider) {
-    if (deps.has(klass) || noConstructor.find((k) => k !== klass && k.provide === klass)) return
+    if (
+      deps.has(klass) ||
+      noConstructor.find((k) => k !== klass && k.provide === klass)
+    )
+      return
     deps.add(klass)
     const resolves = ReflectiveInjector.resolve([klass])
     for (const item of resolves) {
@@ -127,3 +152,12 @@ export function resolveDependencies(inputs: Provider[]) {
 
   return Array.from(deps)
 }
+
+/**
+ * 获取当前的注射器，可用于外部使用
+ */
+export function getCurrentInjector(): ReflectiveInjector {
+  const instance = getCurrentInstance()
+  // @ts-ignore
+  return instance.provides[InjectorKey] || inject(InjectorKey)
+}