setup

ruojianll · ruojianll · commit 51a2eb8b11ac · 2023-03-31T17:16:58.000+08:00
diff --git a/docs/en/_sidebar.md b/docs/en/_sidebar.md
@@ -12,7 +12,7 @@
     - [Watcher](/en/class-component/watcher/watcher.md)
     - [Injection](/en/class-component/injection/injection.md)
     - [Model](/en/class-component/model/model.md)
-    - [Use](/en/class-component/use/use.md)
+    - [Setup](/en/class-component/setup/setup.md)
 - Inheritance
     - [ECMAScript class](/en/inheritance/es-class/es-class.md)
     - [Component](/en/inheritance/component/component.md)
diff --git a/docs/en/class-component/component/code-option-setup.ts b/docs/en/class-component/component/code-option-setup.ts
@@ -0,0 +1,20 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    setup() {
+        return { key: 'value' }
+    }
+}
+*/
+
+@Component({
+    setup() {
+        return { key: 'value' }
+    }
+})
+export default class MyComponent extends Vue {
+    key!: string
+}
diff --git a/docs/en/class-component/component/component.md b/docs/en/class-component/component/component.md
@@ -58,6 +58,12 @@ If you use vue Single-File component. The render will be applied to the `export
 
 [](./code-option-render.ts ':include :type=code typescript')
 
+### setup
+
+This is the `setup` in vue options API, but can not return a render function.
+
+[](./code-option-setup.ts ':include :type=code typescript')
+
 ### template
 
 This is the `template` in vue options API.
diff --git a/docs/en/class-component/setup/code-usage-base.ts b/docs/en/class-component/setup/code-usage-base.ts
@@ -1,11 +1,11 @@
-import { Component, Vue, Use } from 'vue-facing-decorator'
+import { Component, Vue, Setup } from 'vue-facing-decorator'
 import { ref } from 'vue'
 import { useRouter, Router } from 'vue-router'
 
 @Component
 class MyComponent extends Vue {
 
-    @Use(useRouter)
+    @Setup((props,ctx)=>useRouter())
     router!: Router
 
     mounted() {
@@ -16,7 +16,7 @@ class MyComponent extends Vue {
 @Component
 class MyComponent2 extends Vue {
 
-    @Use(() => ref('hello world'))
+    @Setup(() => ref('hello world'))
     data!: string
 
     mounted() {
diff --git a/docs/en/class-component/setup/setup.md b/docs/en/class-component/setup/setup.md
@@ -0,0 +1,6 @@
+## Usage
+
+Use the decorator `Setup` exported from `'vue-facing-decorator'` to inject [composables](https://vuejs.org/guide/reusability/composables.html) into your component's class as proeprty.
+
+[](./code-usage-base.ts ':include :type=code typescript')
+
diff --git a/docs/en/class-component/use/use.md b/docs/en/class-component/use/use.md
diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md
@@ -12,7 +12,7 @@
     - [监视器](/zh-cn/class-component/watcher/watcher.md)
     - [注入](/zh-cn/class-component/injection/injection.md)
     - [Model](/zh-cn/class-component/model/model.md)
-    - [Composition 组件](/zh-cn/class-component/use/use.md)
+    - [Composition 组件](/zh-cn/class-component/setup/setup.md)
 - 继承
     - [ECMAScript 类 继承](/zh-cn/inheritance/es-class/es-class.md)
     - [组件 继承](/zh-cn/inheritance/component/component.md)
diff --git a/docs/zh-cn/class-component/component/code-option-setup.ts b/docs/zh-cn/class-component/component/code-option-setup.ts
@@ -0,0 +1,20 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    setup() {
+        return { key: 'value' }
+    }
+}
+*/
+
+@Component({
+    setup() {
+        return { key: 'value' }
+    }
+})
+export default class MyComponent extends Vue {
+    key!: string
+}
diff --git a/docs/zh-cn/class-component/component/component.md b/docs/zh-cn/class-component/component/component.md
@@ -58,6 +58,12 @@
 
 [](./code-option-render.ts ':include :type=code typescript')
 
+### setup
+
+和vue option api中的`setup`相同, 但是不能返回render函数。
+
+[](./code-option-setup.ts ':include :type=code typescript')
+
 ### template
 
 和vue option api中的`template`相同。
diff --git a/docs/zh-cn/class-component/setup/code-usage-base.ts b/docs/zh-cn/class-component/setup/code-usage-base.ts
@@ -1,11 +1,11 @@
-import { Component, Vue, Use } from 'vue-facing-decorator'
+import { Component, Vue, Setup } from 'vue-facing-decorator'
 import { ref } from 'vue'
 import { useRouter, Router } from 'vue-router'
 
 @Component
 class MyComponent extends Vue {
 
-    @Use(useRouter)
+    @Setup((props,ctx)=>useRouter())
     router!: Router
 
     mounted() {
@@ -16,7 +16,7 @@ class MyComponent extends Vue {
 @Component
 class MyComponent2 extends Vue {
 
-    @Use(() => ref('hello world'))
+    @Setup(() => ref('hello world'))
     data!: string
 
     mounted() {
diff --git a/docs/zh-cn/class-component/setup/setup.md b/docs/zh-cn/class-component/setup/setup.md
@@ -0,0 +1,6 @@
+## 用法
+
+使用装饰器`Setup`注入[Composition 组件](https://vuejs.org/guide/reusability/composables.html)作为你的组件属性。
+
+[](./code-usage-base.ts ':include :type=code typescript')
+
diff --git a/docs/zh-cn/class-component/use/use.md b/docs/zh-cn/class-component/use/use.md
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "build:cjs": "./node_modules/.bin/tsc",
     "build:esm": "./node_modules/.bin/tsc -outDir dist/esm -module ES6",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "watch":"./node_modules/.bin/tsc -outDir dist/esm -module ES6 --watch"
   },
   "author": "",
   "license": "MIT",
diff --git a/src/component.ts b/src/component.ts
@@ -1,6 +1,6 @@
 import { defineComponent, type ComponentCustomOptions } from 'vue';
 import { obtainSlot, getSuperSlot } from './utils'
-import { build as optionUse } from './option/use'
+import { build as optionSetup } from './option/setup'
 import { build as optionComputed } from './option/computed'
 import { build as optionData } from './option/data'
 import { build as optionMethodsAndHooks } from './option/methodsAndHooks'
@@ -11,16 +11,18 @@ import { build as optionInject } from './option/inject'
 import { build as optionEmit } from './option/emit'
 import { build as optionVModel } from './option/vmodel'
 import { build as optionAccessor } from './option/accessor'
-import type { SetupContext, RenderFunction } from 'vue';
+import type { SetupContext } from 'vue';
 import type { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
 export type Cons = VueCons
 
-export type SetupFunction = (this: void, props: Readonly<any>, ctx: SetupContext<any>) => any
+type SetupFunction<T> = (this: void, props: Readonly<any>, ctx: SetupContext<any>) => T | Promise<T>
+export type OptionSetupFunction = SetupFunction<any>
+export type ComponentSetupFunction = SetupFunction<Record<string,any>>
 function ComponentOption(cons: Cons, extend?: any) {
 
     const optionBuilder: OptionBuilder = {}
-    optionUse(cons, optionBuilder)
+    optionSetup(cons, optionBuilder)
     optionVModel(cons, optionBuilder)
     optionComputed(cons, optionBuilder)//after VModel
     optionWatch(cons, optionBuilder)
@@ -31,12 +33,11 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
 
-    const setupFunction: SetupFunction | undefined = optionBuilder.use ? function (props,ctx) {
-        return optionBuilder.use!(props,ctx)
+    const setupFunction: OptionSetupFunction | undefined = optionBuilder.setup ? function (props, ctx) {
+        return optionBuilder.setup!(props, ctx)
     } : undefined
-
     const raw = {
-        setup:setupFunction,
+        setup: setupFunction,
         data() {
             delete optionBuilder.data
             optionData(cons, optionBuilder, this)
@@ -66,13 +67,14 @@ type ComponentOption = {
     options?: ComponentCustomOptions & Record<string, any>
     template?: string
     mixins?: any[]
+    setup?: ComponentSetupFunction
 }
 type ComponentConsOption = Cons | ComponentOption
 function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
     const option = ComponentOption(cons, extend)
     const slot = obtainSlot(cons.prototype)
     Object.keys(arg).reduce<Record<string, any>>((option, name: string) => {
-        if (['options', 'modifier', 'emits'].includes(name)) {
+        if (['options', 'modifier', 'emits','setup'].includes(name)) {
             return option
         }
         option[name] = arg[name as keyof ComponentOption]
@@ -83,7 +85,29 @@ function buildComponent(cons: Cons, arg: ComponentOption, extend?: any): any {
         emits = Array.from(new Set([...emits, ...arg.emits]))
     }
     option.emits = emits
+    if (arg.setup) {
+        if (!option.setup) {
+            option.setup = arg.setup
+        } else {
+            const oldSetup: OptionSetupFunction = option.setup
+            const newSetup: ComponentSetupFunction = arg.setup
+            
+            const setup:  ComponentSetupFunction = function (props, ctx) {
+                const newRet = newSetup(props, ctx)
+                const oldRet = oldSetup(props, ctx)
+                if(oldRet instanceof Promise || newRet instanceof Promise){
+                    return Promise.all([newRet,oldRet]).then((arr)=>{
+                        return Object.assign({},arr[0],arr[1])
+                    })
+                }else{
+
+                    return Object.assign({},newRet,oldRet)
+                }
 
+            }
+            option.setup = setup
+        }
+    }
     if (arg.options) {
         Object.assign(option, arg.options)
     }
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 export { Component, ComponentBase } from './component'
-export { decorator as Use } from './option/use'
+export { decorator as Setup } from './option/setup'
 export { decorator as Ref } from './option/ref'
 export { decorator as Watch } from './option/watch'
 export { decorator as Prop } from './option/props'
diff --git a/src/option/setup.ts b/src/option/setup.ts
@@ -1,18 +1,18 @@
-import { SetupFunction } from '../component'
+import type { OptionSetupFunction } from '../component'
 import type { Cons } from '../component'
 import type { OptionBuilder } from '../optionBuilder'
 import { obtainSlot } from '../utils'
 
-export type UseConfig = {
-    useFunction: SetupFunction
+export type SetupConfig = {
+    setupFunction: OptionSetupFunction
 }
 
-export function decorator(useFunction: SetupFunction) {
+export function decorator(setupFunction: OptionSetupFunction) {
     return function (proto: any, name: string) {
         const slot = obtainSlot(proto)
-        const map = slot.obtainMap('use')
+        const map = slot.obtainMap('setup')
         map.set(name, {
-            useFunction
+            setupFunction
         })
     }
 
@@ -23,31 +23,31 @@ const isPromise = (v: any): v is Promise<any> => v instanceof Promise
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
-    const map = slot.obtainMap('use')
+    const map = slot.obtainMap('setup')
     if (map.size === 0) {
         return
     }
-    const use: SetupFunction = function (props, ctx) {
-        const useData: Record<string, any> = {};
+    const setup: OptionSetupFunction = function (props, ctx) {
+        const setupData: Record<string, any> = {};
         let promises: Promise<any>[] | null = null;
         for (const name of map.keys()) {
-            const useState = map.get(name)!.useFunction(props, ctx)
-            if (isPromise(useState)) {
+            const setupState = map.get(name)!.setupFunction(props, ctx)
+            if (isPromise(setupState)) {
                 promises ??= []
-                promises.push(useState.then((v) => {
-                    useData[name] = v
+                promises.push(setupState.then((v) => {
+                    setupData[name] = v
                 }))
             } else {
-                useData[name] = useState
+                setupData[name] = setupState
             }
         }
         if (Array.isArray(promises)) {
             return Promise.all(promises).then(() => {
-                return useData
+                return setupData
             })
         } else {
-            return useData
+            return setupData
         }
     }
-    optionBuilder.use = use
+    optionBuilder.setup = setup
 }
diff --git a/src/optionBuilder.ts b/src/optionBuilder.ts
@@ -1,7 +1,7 @@
 import type { WatchConfig } from './option/watch'
 import type { PropsConfig } from './option/props'
 import type { InjectConfig } from './option/inject'
-import type { SetupFunction } from './component'
+import type { OptionSetupFunction } from './component'
 export interface OptionBuilder {
     name?: string
     // setup?: (this: void, props: Readonly<any>, ctx: SetupContext<any>) => Promise<any> | any | RenderFunction | void
@@ -12,7 +12,7 @@ export interface OptionBuilder {
     watch?: Record<string, WatchConfig | WatchConfig[]>
     props?: Record<string, PropsConfig>
     inject?: Record<string, InjectConfig>
-    use?: SetupFunction
+    setup?: OptionSetupFunction
     beforeCreateCallbacks?: Function[]
 }
 
diff --git a/src/utils.ts b/src/utils.ts
diff --git a/test/component.ts b/test/component.ts
diff --git a/test/option/setup.ts b/test/option/setup.ts
diff --git a/test/test.ts b/test/test.ts
