feat: 🔥 支持devtool,增加工具函数

Author: agileago

docs/guide/api.md

@@ -111,6 +111,26 @@ class Foo extends VueComponent {
 
 在HOC组件中使用这个方法可以转发真正的ref
 
+## mergeRefs
+
+支持多个不同类型的ref在同一个元素或组件上面
+
+```typescript jsx
+import { mergeRefs } from './component'
+
+class App extends VueComponent {
+  @Link() aa?: any
+  
+  cc = shallowRef()
+  
+  dd?: any
+  
+  render() {
+    return <div ref={mergeRefs('aa', this.cc, (v) => this.dd = v)}></div>
+  }
+}
+```
+
 
 # 类型
 

example/main.tsx

@@ -1,6 +1,6 @@
 import '@abraham/reflection'
-import { Component, Hook, Mut, VueComponent } from 'vue3-oop'
-import { createApp } from 'vue'
+import { Component, Hook, Link, mergeRefs, Mut, VueComponent } from 'vue3-oop'
+import { createApp, shallowRef } from 'vue'
 import 'ant-design-vue/dist/antd.css'
 import { ConfigProvider, Layout, Menu } from 'ant-design-vue'
 import { RouterLink, RouterView } from 'vue-router'
@@ -9,41 +9,76 @@ import { routes } from './router/routes'
 import zhCN from 'ant-design-vue/lib/locale/zh_CN'
 import { setup } from './setup'
 
+class Child extends VueComponent {
+  @Hook('Mounted')
+  mounted() {
+    console.log('child mounted')
+  }
+  render() {
+    console.log('child render')
+    return <div>child</div>
+  }
+}
+
 @Component({ providers: [RouterStartService] })
 class App extends VueComponent {
+  constructor(private a: RouterStartService) {
+    super()
+  }
+
   @Mut() collapsed = false
 
+  cc = shallowRef()
+
   @Hook('ErrorCaptured')
   error(...args: any[]) {
     console.log(args)
   }
 
+  @Link() aaa?: any
+
+  @Hook('Mounted')
+  mounted() {
+    console.log(this.aaa, this.cc)
+  }
+
   render() {
     return (
       <ConfigProvider locale={zhCN}>
         <Layout style={{ minHeight: '100vh' }}>
           <Layout.Sider v-model:collapsed={this.collapsed} collapsible>
             <h2
+              ref={mergeRefs('aaa', this.cc)}
               onClick={() => {
                 throw new Error('hahaha')
               }}
               style={{ color: '#fff', textAlign: 'center', lineHeight: '40px' }}
             >
               VUE 示例
             </h2>
+            <Child
+              abc={this.collapsed}
+              ref={(value, refs) => {
+                console.log(value, refs)
+              }}
+            ></Child>
             <Menu theme={'dark'} mode={'inline'}>
               {routes.map((r) => {
                 return (
                   <Menu.SubMenu title={r.meta?.title} key={r.path}>
-                    {r.children?.map((i) => {
-                      return (
-                        <Menu.Item key={i.path}>
-                          <RouterLink to={i.path} style={{ display: 'block' }}>
-                            {i.meta?.title}
-                          </RouterLink>
-                        </Menu.Item>
-                      )
-                    })}
+                    {'children' in r &&
+                      r.children.map((i) => {
+                        return (
+                          <Menu.Item key={i.path}>
+                            <RouterLink
+                              to={i.path}
+                              style={{ display: 'block' }}
+                            >
+                              {i.meta?.title}
+                            </RouterLink>
+                          </Menu.Item>
+                        )
+                      })}
                   </Menu.SubMenu>
                 )
               })}

package.json

@@ -1,13 +1,13 @@
 {
   "name": "vue3-oop",
   "version": "0.6.0",
-  "main": "dist/vue3-oop.cjs.js",
-  "module": "dist/vue3-oop.es.js",
+  "main": "dist/vue3-oop.js",
+  "module": "dist/vue3-oop.mjs",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/vue3-oop.es.js",
-      "require": "./dist/vue3-oop.cjs.js"
+      "import": "./dist/vue3-oop.mjs",
+      "require": "./dist/vue3-oop.js"
     }
   },
   "scripts": {
@@ -56,37 +56,37 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.0.4",
     "@types/prettier": "^2.6.3",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitest/ui": "^0.16.0",
-    "@vue/test-utils": "2.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitest/ui": "^0.18.0",
+    "@vue/test-utils": "2.0.2",
     "@vue3-oop/plugin-vue-jsx": "^1.4.0",
-    "ant-design-vue": "^3.2.9",
+    "ant-design-vue": "^3.2.10",
     "autobind-decorator": "^2.4.0",
     "c8": "^7.11.3",
-    "eslint": "^8.18.0",
+    "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "happy-dom": "^5.3.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "happy-dom": "^6.0.3",
     "injection-js": "^2.4.0",
     "lint-staged": "^13.0.3",
     "lodash-es": "^4.17.21",
     "prettier": "^2.7.1",
-    "release-it": "^15.1.0",
+    "release-it": "^15.1.1",
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^2.9.12",
-    "vite-plugin-dts": "^1.2.0",
+    "vite": "^3.0.0",
+    "vite-plugin-dts": "^1.3.0",
     "vite-tsconfig-paths": "^3.5.0",
     "vitepress": "1.0.0-alpha.4",
-    "vitest": "^0.16.0",
+    "vitest": "^0.18.0",
     "vue": "^3.2.37",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.1.2"
   },
   "commitlint": {
     "extends": [