diff --git a/examples/vue/.dumi/global.ts b/examples/vue/.dumi/global.ts new file mode 100644 index 0000000000..9a2aa88965 --- /dev/null +++ b/examples/vue/.dumi/global.ts @@ -0,0 +1 @@ +import '@abraham/reflection' diff --git a/examples/vue/.dumi/tsconfig.json b/examples/vue/.dumi/tsconfig.json new file mode 100644 index 0000000000..79711a82bb --- /dev/null +++ b/examples/vue/.dumi/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.json", + "include": [ + "**/*" + ] +} \ No newline at end of file diff --git a/examples/vue/.dumirc.ts b/examples/vue/.dumirc.ts index 79650c4824..3ec0fd1002 100644 --- a/examples/vue/.dumirc.ts +++ b/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: { diff --git a/examples/vue/package.json b/examples/vue/package.json index e96212f4b9..0596242927 100644 --- a/examples/vue/package.json +++ b/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": [] } diff --git a/examples/vue/shims-vue.d.ts b/examples/vue/shims-vue.d.ts new file mode 100644 index 0000000000..bb39a1aa62 --- /dev/null +++ b/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; +} diff --git a/examples/vue/src/Button/demos/Demo.tsx b/examples/vue/src/Button/demos/Demo.tsx index 6b42881017..b10184f794 100644 --- a/examples/vue/src/Button/demos/Demo.tsx +++ b/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 = ref(0); const handleClick = (e: Event) => { count.value++; }; diff --git a/examples/vue/src/Button/index.tsx b/examples/vue/src/Button/index.tsx index bab98ddf2d..3ca588cf1d 100644 --- a/examples/vue/src/Button/index.tsx +++ b/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 ( ); }; diff --git a/examples/vue/src/ClassComp/index.md b/examples/vue/src/ClassComp/index.md new file mode 100644 index 0000000000..c93aa08801 --- /dev/null +++ b/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 ( +
this.count++}>class component: {this.count}
+ ); + } +} + +export default defineComponent(() => () => ( +
+ +
+)); +``` + +## 属性 + + + +## 事件 + + + +## 方法 + + + +## slots + + diff --git a/examples/vue/src/ClassComp/index.tsx b/examples/vue/src/ClassComp/index.tsx new file mode 100644 index 0000000000..845e4e3936 --- /dev/null +++ b/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; + /** + * 默认数量 + */ + initValue?: number; + + /** + * @description 点击事件 + */ + onClick?: () => Promise; + + slots: { + icon: ({ name }: { name: number[] }) => VNodeChild; + }; +} + +export class ClassCount extends VueComponent { + static defaultProps: ComponentProps = [ + 'initValue', + 'onClick', + 'data', + ]; + + @Mut() count = this.props.initValue; + /** + * foo方法 + * @public + */ + foo(name: string) {} + + render() { + return ( +
+

我是类组件

+ +
+
+ 居中: {this.count} +
+
+
+ ); + } +} diff --git a/examples/vue/src/List.tsx b/examples/vue/src/List.tsx index 07772f57ce..dcd878d0be 100644 --- a/examples/vue/src/List.tsx +++ b/examples/vue/src/List.tsx @@ -1,5 +1,5 @@ import { - SetupContext, + type SetupContext, defineComponent, onMounted, ref, diff --git a/examples/vue/src/SimpleComp/README.md b/examples/vue/src/SimpleComp/README.md new file mode 100644 index 0000000000..f948b47053 --- /dev/null +++ b/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 () => ; +}); +``` + +## 属性 + + + +## 插槽 + + + +## 事件 + + + +## 方法 + + diff --git a/examples/vue/src/SimpleComp/index.tsx b/examples/vue/src/SimpleComp/index.tsx new file mode 100644 index 0000000000..6d0f21e6d8 --- /dev/null +++ b/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 () =>
{props.data}
; +}); diff --git a/examples/vue/src/functional.tsx b/examples/vue/src/functional.tsx index 920c808c09..8d1d29ee0a 100644 --- a/examples/vue/src/functional.tsx +++ b/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 { /** * 文章标题 diff --git a/examples/vue/src/index.ts b/examples/vue/src/index.ts index b6d75b88f7..7a7e038bf4 100644 --- a/examples/vue/src/index.ts +++ b/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'; diff --git a/examples/vue/src/my-badge.css b/examples/vue/src/my-badge.css new file mode 100644 index 0000000000..a69259a32f --- /dev/null +++ b/examples/vue/src/my-badge.css @@ -0,0 +1,3 @@ +.abc { + color: red; +} diff --git a/examples/vue/src/my-badge.vue b/examples/vue/src/my-badge.vue index 082bd7e3d4..f19a3e7ce1 100644 --- a/examples/vue/src/my-badge.vue +++ b/examples/vue/src/my-badge.vue @@ -7,7 +7,8 @@