Code setup API, document, add basic test

Author: Giwayume

docs/en/_sidebar.md

@@ -2,6 +2,7 @@
 - [Quick start](/en/quick-start/quick-start.md)
 - Class component
     - [Component](/en/class-component/component/component.md)
+    - [Setup](/en/class-component/setup/setup.md)
     - [Property](/en/class-component/property/property.md)
     - [Method](/en/class-component/method/method.md)
     - [Hooks](/en/class-component/hooks/hooks.md)

docs/en/class-component/setup/code-option-setup.ts

@@ -0,0 +1,16 @@
+import ref from 'vue'
+import { Component, Vue, setup } from 'vue-facing-decorator'
+
+@Component({
+    setup(props, ctx) {
+        const message = ref('hello world')
+        return { message }
+    }
+})
+class MyComponent extends Vue {
+    private data = setup(() => 'hello world') // This setup() function will no longer work!
+
+    mounted() {
+        console.log(this.message) // Undefined!
+    }
+}

docs/en/class-component/setup/code-usage-base.ts

@@ -0,0 +1,11 @@
+import { Component, Vue, setup } from 'vue-facing-decorator'
+import { useRouter } from 'vue-router'
+
+@Component
+class MyComponent extends Vue {
+    private router = setup(() => useRouter())
+
+    mounted() {
+        console.log(this.router.getRoutes())
+    }
+}

docs/en/class-component/setup/setup.md

@@ -0,0 +1,12 @@
+## Usage
+
+Use the `setup` function exported from `'vue-facing-decorator'` to inject [composables](https://vuejs.org/guide/reusability/composables.html) into your component's class as data.
+
+[](./code-usage-base.ts ':include :type=code typescript')
+
+## Options
+
+You can also provide your own custom setup function as part of the component options, but be aware that if you do this, the `setup()` function from `'vue-facing-decorator'` will no longer work to inject data, and any properties you return from that setup will only be accessible in the component's template or render function.
+
+[](./code-option-setup.ts ':include :type=code typescript')
+

src/component.ts

@@ -1,5 +1,6 @@
 import { defineComponent, type ComponentCustomOptions } from 'vue';
 import { obtainSlot, getSuperSlot } from './utils'
+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'
@@ -10,6 +11,7 @@ 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 { OptionBuilder } from './optionBuilder'
 import type { VueCons } from './index'
 export type Cons = VueCons
@@ -18,6 +20,7 @@ export type Cons = VueCons
 function ComponentOption(cons: Cons, extend?: any) {
 
     const optionBuilder: OptionBuilder = {}
+    const setupData = optionSetup(cons, optionBuilder)
     optionVModel(cons, optionBuilder)
     optionComputed(cons, optionBuilder)//after VModel
     optionWatch(cons, optionBuilder)
@@ -28,9 +31,13 @@ function ComponentOption(cons: Cons, extend?: any) {
     optionMethodsAndHooks(cons, optionBuilder)//after Ref Computed
     optionAccessor(cons, optionBuilder)
     const raw = {
+        setup: optionBuilder.setup,
         data() {
             delete optionBuilder.data
             optionData(cons, optionBuilder, this)
+            if (optionBuilder.data && Object.keys(setupData).length > 0) {
+                Object.assign(optionBuilder.data, setupData)
+            }
             return optionBuilder.data ?? {}
         },
         methods: optionBuilder.methods,
@@ -46,6 +53,7 @@ function ComponentOption(cons: Cons, extend?: any) {
 
 type ComponentOption = {
     name?: string
+    setup?: (this: void, props: Readonly<any>, ctx: SetupContext<any>) => Promise<any> | any | RenderFunction | void,
     emits?: string[]
     provide?: Record<string, any> | Function
     components?: Record<string, any>

src/index.ts

@@ -1,4 +1,5 @@
 export { Component, ComponentBase } from './component'
+export { 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'

src/option/setup.ts

@@ -0,0 +1,56 @@
+import { proxyRefs } from 'vue';
+import type { Ref, SetupContext, ShallowUnwrapRef } from 'vue';
+import type { Cons } from '../component'
+import type { OptionBuilder } from '../optionBuilder'
+import { getValidNames } from '../utils'
+
+const isPromise = (v: any) => typeof v === 'object' && typeof v.then === 'function' 
+
+export function build(cons: Cons, optionBuilder: OptionBuilder): Record<string, any> {
+    const setupData: Record<string, any> = {};
+    
+    optionBuilder.setup = (props, ctx) => {
+        const sample = new cons(optionBuilder, ctx)
+
+        let promise: Promise<any> | null = null;
+
+        const names = getValidNames(sample, (des) => {
+            return !!des.enumerable
+        })
+        for (const name of names) {
+            const value = (sample as any)[name]
+            const keys = Object.keys(value ?? {})
+            if (keys.length === 1 && keys[0] === '__vueFacingDecoratorDeferredSetup') {
+                const setupState = value.__vueFacingDecoratorDeferredSetup(props, ctx)
+                if (isPromise(setupState)) {
+                    if (!promise) {
+                        promise = Promise.resolve(setupState)
+                    }
+                    promise = promise.then(() => {
+                        return setupState.then((value: any) => {
+                            setupData[name] = proxyRefs(value)
+                            return {}
+                        })
+                    })
+                } else {
+                    setupData[name] = setupState;
+                }
+            }
+        }
+
+        return promise ?? {};
+    }
+    return setupData;
+}
+
+export type UnwrapSetupValue<T> = T extends Ref<infer R>
+    ? R
+    : ShallowUnwrapRef<T>
+
+export type UnwrapPromise<T> = T extends Promise<infer R> ? R : T
+
+export function setup<R = any>(setupFn: (this: void, props: Readonly<any>, ctx: SetupContext<any>) => R): UnwrapSetupValue<UnwrapPromise<R>> {
+    return {
+        __vueFacingDecoratorDeferredSetup: setupFn
+    } as UnwrapSetupValue<UnwrapPromise<R>>
+}

src/optionBuilder.ts

@@ -1,8 +1,10 @@
+import type { RenderFunction, SetupContext } from 'vue';
 import type { WatchConfig } from './option/watch'
 import type { PropsConfig } from './option/props'
 import type { InjectConfig } from './option/inject'
 export interface OptionBuilder {
     name?: string
+    setup?: (this: void, props: Readonly<any>, ctx: SetupContext<any>) => Promise<any> | any | RenderFunction | void
     data?: Record<string, any>
     methods?: Record<string, Function>
     hooks?: Record<string, Function>

test/option/setup.ts

@@ -0,0 +1,41 @@
+
+import { inject } from 'vue'
+import { mount } from '@vue/test-utils'
+import { expect } from 'chai';
+import 'mocha';
+import { Component, Base, setup } from '../../dist'
+
+const AXIOM = 'setup is working to allow composition API usage'
+const injectionKey = Symbol('injection test key')
+
+function useInjectedValue() {
+    inject(injectionKey)
+}
+
+@Component
+export class Comp extends Base {
+
+    injectedValue = setup(() => useInjectedValue())
+
+}
+
+const CompContext = Comp as any
+
+
+describe('setup function',
+    () => {
+        const wrapper = mount(CompContext,{
+            global: {
+                provide: {
+                    [injectionKey]: AXIOM
+                }
+            }
+        })
+        const vm = wrapper.vm
+        it('injects the value provided to the component via composition API', () => {
+            expect(vm.injectedValue).to.equal(AXIOM)
+        })
+    }
+)
+
+export default {}