feat: support vue class component and metadata

Author: renjianhua

examples/vue/.dumi/global.ts

@@ -0,0 +1 @@
+import '@abraham/reflection'

examples/vue/.dumi/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "**/*"
+  ]
+}

examples/vue/.dumirc.ts

@@ -7,9 +7,9 @@ export default {
   resolve: {
     entryFile: './src/index.ts',
   },
-  html2sketch: {},
   presets: [require.resolve('@dumijs/preset-vue')],
   vue: {
+    supportTsMetadata: true,
     tsconfigPath: path.resolve(__dirname, './tsconfig.vue.json'),
     checkerOptions: {
       externalSymbolLinkMappings: {

examples/vue/package.json

@@ -7,28 +7,58 @@
     "directory": "examples/vue"
   },
   "license": "MIT",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./dist/*": "./dist/*"
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.MD",
+    "CHANGELOG.md"
+  ],
   "scripts": {
     "build": "node ../../bin/dumi.js build",
+    "build:lib": "vite build",
     "dev": "node ../../bin/dumi.js dev",
     "preview": "node ../../bin/dumi.js preview",
     "setup": "node ../../bin/dumi.js setup",
     "start": "npm run dev"
   },
   "dependencies": {
+    "@abraham/reflection": "^0.12.0",
     "dayjs": "^1.11.10",
     "element-plus": "^2.3.14",
+    "injection-js": "^2.4.0",
     "pinia": "^2.1.7",
     "react": "^18.2.0",
-    "vue": "3.4.28"
+    "vue": "3.4.28",
+    "vue3-oop": "^1.0.16"
   },
   "devDependencies": {
     "@dumijs/preset-vue": "workspace:*",
     "@typescript-eslint/parser": "^6.7.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue3-oop/plugin-vue-jsx": "^1.4.6",
     "eslint-plugin-vue": "^9.17.0",
-    "typescript": "~4.7.4",
+    "typescript": "^5.6.3",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-element-plus": "^0.8.0",
-    "unplugin-vue-components": "^0.25.2"
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^6.0.3",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-no-bundle": "^4.0.0"
   },
   "authors": []
 }

examples/vue/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

examples/vue/src/Button/demos/Demo.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@examples/vue';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, type Ref } from 'vue';
 import './demo.less';
 
 export default defineComponent({
   setup() {
-    const count = ref(0);
+    const count: Ref<number> = ref(0);
     const handleClick = (e: Event) => {
       count.value++;
     };

examples/vue/src/Button/index.tsx

@@ -1,4 +1,10 @@
-import { defineComponent, PropType, shallowRef, SlotsType } from 'vue';
+import {
+  defineComponent,
+  renderSlot,
+  shallowRef,
+  type PropType,
+  type SlotsType,
+} from 'vue';
 import './button.less';
 
 export const buttonProps = {
@@ -83,7 +89,7 @@ const Button = defineComponent({
       const { icon } = props;
       return (
         <button {...buttonProps} ref={buttonNodeRef}>
-          {slots.icon ? <slot name="icon"></slot> : icon} {slots.default?.()}
+          {renderSlot(slots, 'icon', {}, () => [icon])} {slots.default?.()}
         </button>
       );
     };

examples/vue/src/ClassComp/index.md

@@ -0,0 +1,47 @@
+---
+order: 10
+---
+
+# Class 组件支持
+
+## 基础例子
+
+```tsx
+/**
+ * title: 代码示例
+ */
+import { ClassCount } from '@examples/vue';
+import { defineComponent } from 'vue';
+import { Mut, VueComponent } from 'vue3-oop';
+
+class AAA extends VueComponent {
+  @Mut() count = 1001;
+  render() {
+    return (
+      <div onClick={() => this.count++}>class component: {this.count}</div>
+    );
+  }
+}
+
+export default defineComponent(() => () => (
+  <div>
+    <ClassCount initValue={10}></ClassCount>
+  </div>
+));
+```
+
+## 属性
+
+<API id="ClassCount" type="props"></API>
+
+## 事件
+
+<API id="ClassCount" type="events"></API>
+
+## 方法
+
+<API id="ClassCount" type="imperative"></API>
+
+## slots
+
+<API id="ClassCount" type="slots"></API>

examples/vue/src/ClassComp/index.tsx

@@ -0,0 +1,58 @@
+import type { VNodeChild } from 'vue';
+import { Mut, VueComponent, type ComponentProps } from 'vue3-oop';
+
+export interface ClassCountProps {
+  /**
+   * @type T
+   * @description 数据源
+   */
+  data?: Array<number>;
+  /**
+   * 默认数量
+   */
+  initValue?: number;
+
+  /**
+   * @description 点击事件
+   */
+  onClick?: () => Promise<string>;
+
+  slots: {
+    icon: ({ name }: { name: number[] }) => VNodeChild;
+  };
+}
+
+export class ClassCount<T> extends VueComponent<ClassCountProps> {
+  static defaultProps: ComponentProps<ClassCountProps> = [
+    'initValue',
+    'onClick',
+    'data',
+  ];
+
+  @Mut() count = this.props.initValue;
+  /**
+   * foo方法
+   * @public
+   */
+  foo(name: string) {}
+
+  render() {
+    return (
+      <div style={{ accentColor: 'green' }}>
+        <h2>我是类组件</h2>
+        <button style={{ marginBottom: '20px' }} onClick={() => this.count++}>
+          增加
+        </button>
+        <div
+          style={
+            'display:grid;place-items: center;height: 200px; background-color:yellow;'
+          }
+        >
+          <div style="background-color:red;color: #fff;padding: 10px;">
+            居中: {this.count}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

examples/vue/src/List.tsx

@@ -1,5 +1,5 @@
 import {
-  SetupContext,
+  type SetupContext,
   defineComponent,
   onMounted,
   ref,