feat: 支持模板

Author: agileago

.eslintignore

@@ -11,3 +11,4 @@ coverage
 commitlint.config.js
 .cz-config.js
 .prettierrc.js
+*.vue

example/main.tsx

@@ -1,14 +1,14 @@
 import '@abraham/reflection'
-import { Component, Mut, VueComponent } from 'vue3-oop'
+import { createCurrentInjector, Mut, VueComponent } from 'vue3-oop'
 import { createApp } from 'vue'
 import 'ant-design-vue/dist/antd.css'
 import { Layout, Menu } from 'ant-design-vue'
 import { RouterLink, RouterView } from 'vue-router'
 import { RouterStartService } from './router'
 import { routes } from './router/routes'
 
-@Component({ providers: [RouterStartService] })
 class App extends VueComponent {
+  injector = createCurrentInjector([RouterStartService])
   @Mut() collapsed = false
   render() {
     return (

example/module/basic/hello-world/count.comp.tsx

@@ -0,0 +1,13 @@
+import { type ComponentProps, VueComponent } from 'vue3-oop'
+
+interface CountCompProps {
+  size: 'large' | 'small'
+}
+
+export class CountComp extends VueComponent<CountCompProps> {
+  static defaultProps: ComponentProps<CountCompProps> = ['size']
+
+  render() {
+    return <div>{this.props.size}</div>
+  }
+}

example/module/basic/hello-world/hello.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { getCurrentInjector, Mut, VueComponent } from 'vue3-oop'
+import { CountComp } from './count.comp'
+import { RouterService } from '../../../router/router.service'
+
+export default class Hello extends VueComponent {
+  static components = {
+    CountComp,
+  }
+  @Mut() count = 1
+  add = () => this.count++
+  injector = getCurrentInjector()
+  router: RouterService = this.injector.get(RouterService)
+  constructor() {
+    super()
+    console.log(this.router)
+  }
+}
+</script>
+
+<template>
+  <h2 class="abc">aaa1111</h2>
+  <p @click="add">{{ count }}</p>
+  <CountComp size="large"></CountComp>
+</template>
+
+<style lang="scss" scoped>
+.abc {
+  color: red;
+}
+</style>

example/router/routes.ts

@@ -12,7 +12,7 @@ export const routes: RouteRecordRaw[] = [
     children: [
       {
         path: '/basic/hello-world',
-        component: () => import('../module/basic/hello-world/hello-world.view'),
+        component: () => import('../module/basic/hello-world/hello.vue'),
         meta: {
           title: 'Hello Wolrd',
         },

src/di/index.ts

@@ -63,6 +63,7 @@ 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
@@ -161,3 +162,23 @@ export function getCurrentInjector(): ReflectiveInjector {
   // @ts-ignore
   return instance.provides[InjectorKey] || inject(InjectorKey)
 }
+/** 手动创建当前注射器, 只能用在 setup 中 */
+export function createCurrentInjector(
+  providers: Provider[],
+  exclude?: Provider[]
+): ReflectiveInjector {
+  let deps = resolveDependencies(providers)
+  if (exclude?.length) {
+    deps = deps.filter((k) => exclude?.includes(k))
+  }
+  const resolveProviders = ReflectiveInjector.resolve(deps)
+  const parent = inject(InjectorKey, undefined)
+  const injector = ReflectiveInjector.fromResolvedProviders(
+    resolveProviders,
+    parent
+  )
+  provide(InjectorKey, injector)
+  // 实例化
+  resolveProviders.forEach((k) => injector.get(k.key.token))
+  return injector
+}

src/extends/component.ts

@@ -6,7 +6,7 @@ import type {
   VNodeChild,
   VNodeProps,
 } from 'vue'
-import { getCurrentInstance, provide } from 'vue'
+import { getCurrentInstance, markRaw, provide } from 'vue'
 import { getEmitsFromProps, useCtx, useProps } from '../helper'
 import type {
   Hanlder,
@@ -86,7 +86,7 @@ export abstract class VueComponent<T extends {} = {}> {
   }
 
   /** 渲染函数 */
-  abstract render(ctx: ComponentPublicInstance, cache: any[]): VNodeChild
+  abstract render?(ctx: ComponentPublicInstance, cache: any[]): VNodeChild
 }
 // 为了支持es5浏览器
 Object.defineProperty(VueComponent, '__vccOpts', {
@@ -116,6 +116,8 @@ Object.defineProperty(VueComponent, '__vccOpts', {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       setup: (props: any, ctx: any) => {
         const instance = VueComponent.resolveComponent(CompConstructor)
+        // 支持模板
+        if (CompConstructor.__vccOpts__value.render) return markRaw(instance)
         return instance.render.bind(instance)
       },
     })

src/index.ts

@@ -5,7 +5,12 @@ export { Computed } from './decorators/computed'
 export { Link } from './decorators/link'
 export { Hook } from './decorators/hook'
 export * from './helper'
-export { Component, InjectorKey, getCurrentInjector } from './di'
+export {
+  Component,
+  InjectorKey,
+  getCurrentInjector,
+  createCurrentInjector,
+} from './di'
 export type { ComponentOptions } from './di'
 export type {
   ComponentProps,

vite.config.ts

@@ -1,12 +1,13 @@
 import { defineConfig } from 'vite'
 import vueJsx from '@vue3-oop/plugin-vue-jsx'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig(({ command, mode }) => {
   return {
     plugins:
       command === 'build'
         ? undefined
-        : [vueJsx({ enableObjectSlots: false, slotStable: true })],
+        : [vue(), vueJsx({ enableObjectSlots: false, slotStable: true })],
     resolve: {
       alias: [
         { find: /^~/, replacement: '' },