feat: support vue class component and metadata

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,

examples/vue/src/SimpleComp/README.md

@@ -0,0 +1,35 @@
+---
+title: 简单组件
+order: 11
+---
+
+# 简单组件
+
+## 示例
+
+### 基础使用
+
+```tsx
+import { SimpleComp } from '@examples/vue';
+import { defineComponent } from 'vue3-oop';
+
+export default defineComponent(() => {
+  return () => <SimpleComp data={11111}></SimpleComp>;
+});
+```
+
+## 属性
+
+<API id="SimpleComp" type="props"></API>
+
+## 插槽
+
+<API id="SimpleComp" type="slots"></API>
+
+## 事件
+
+<API id="SimpleComp" type="events"></API>
+
+## 方法
+
+<API id="SimpleComp" type="imperative"></API>

examples/vue/src/SimpleComp/index.tsx

@@ -0,0 +1,43 @@
+import type { VNodeChild } from 'vue';
+import { defineComponent } from 'vue3-oop';
+
+export interface SimpleCompProps {
+  /**
+   * @description 数据源
+   */
+  data?: number;
+  /**
+   * @description 打开事件
+   */
+  onOpen?: () => void;
+
+  /**
+   * @description foo插槽
+   */
+  renderFoo?: (name: string) => VNodeChild;
+}
+
+export interface SimpleCompExpose {
+  /**
+   * @description 聚焦芳芳
+   * @public
+   * @param name 姓名
+   */
+  focus: (name: string) => void;
+}
+
+export interface SimpleCompSlots {
+  /**
+   * bar插槽
+   * @param name 1111
+   */
+  bar: (name: string) => VNodeChild;
+}
+
+export const SimpleComp = defineComponent<
+  SimpleCompProps,
+  SimpleCompSlots,
+  SimpleCompExpose
+>((props) => {
+  return () => <div>{props.data}</div>;
+});

examples/vue/src/functional.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent as FC } from 'vue';
+import  { type FunctionalComponent as FC } from 'vue';
 export interface ArticleProps {
   /**
    * 文章标题

examples/vue/src/index.ts

@@ -1,8 +1,10 @@
 import { h } from 'vue';
 
 export { default as Button } from './Button';
+export * from './ClassComp';
 export { default as Foo } from './Foo';
 export * from './List';
+export * from './SimpleComp';
 export { default as Article } from './functional';
 export { default as Badge } from './my-badge.vue';
 

examples/vue/src/my-badge.css

@@ -0,0 +1,3 @@
+.abc {
+  color: red;
+}

examples/vue/src/my-badge.vue

@@ -7,7 +7,8 @@
   </span>
 </template>
 <script setup lang="ts">
-import { VNodeChild } from 'vue';
+import './my-badge.css'
+import { type VNodeChild } from 'vue';
 defineProps<{
   icon?: string;
 }>();

examples/vue/tsconfig.json

@@ -1,14 +1,29 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "target": "ES2020",
     "baseUrl": "./",
     "paths": {
       "@examples/vue": ["./src"]
     },
     "allowJs": true,
+    "types": ["vue/jsx"],
     "jsx": "preserve",
     "jsxImportSource": "vue",
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "useDefineForClassFields": false,
+    "verbatimModuleSyntax": true,
     "strictNullChecks": false
   },
-  "include": [".dumirc.ts", "src/**/*", "docs/**/*"]
+  "include": [
+    ".dumirc.ts",
+    "shims-vue.d.ts",
+    "vite.config.mts",
+    "src/**/*",
+    "docs/**/*"
+  ]
 }