Merge pull request #48 from Giwayume/feat/setup

Implement setup() for consuming composables

Author: ruojianll

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')
+

package.json

@@ -16,7 +16,7 @@
     "vue component decorator"
   ],
   "scripts": {
-    "test-build": "npm run test && npm run build",
+    "test-build": "npm run build && npm run test",
     "test": "mocha -r ts-node/register test/test.ts",
     "build": "npm run build:cjs && npm run build:esm",
     "build:cjs": "./node_modules/.bin/tsc",

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,53 @@
+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] = value
+                        })
+                    })
+                } 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,103 @@
+
+import { inject } from 'vue'
+import { mount } from '@vue/test-utils'
+import { expect } from 'chai'
+import { mountSuspense } from '../utils'
+import 'mocha'
+import { Component, Base, Prop, setup } from '../../dist'
+
+const SETUP_AXIOM = 'setup is working to allow composition API usage'
+const DATA_AXIOM = 'data is injected into the template'
+const injectionKey = Symbol('injection test key')
+
+function useInjectedValue() {
+    return inject(injectionKey)
+}
+
+@Component({
+    render() { return [] }
+})
+export class SyncComp extends Base {
+
+    injectedValue = setup(() => useInjectedValue())
+
+}
+
+const SyncCompContext = SyncComp as any
+
+@Component({
+    render() { return [] }
+})
+export class AsyncComp extends Base {
+
+    injectedValue = setup(() => {
+        const value = useInjectedValue()
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(value)
+            }, 1)  
+        })
+    })
+
+}
+
+const AsyncCompContext = AsyncComp as any
+
+@Component({
+    setup() {
+        const injectedValue = useInjectedValue()
+        return { injectedValue }
+    },
+    template: '{{ injectedValue }} {{ dataValue }}'
+})
+export class SetupComp extends Base {
+    dataValue = DATA_AXIOM 
+}
+
+const SetupCompContext = SetupComp as any
+
+describe('setup function', () => {
+    describe('synchronous setup', () => {
+        const wrapper = mount(SyncCompContext, {
+            global: {
+                provide: {
+                    [injectionKey]: SETUP_AXIOM
+                }
+            }
+        })
+        const vm = wrapper.vm
+        it('injects the value provided to the component via composition API', () => {
+            expect(vm.injectedValue).to.equal(SETUP_AXIOM)
+        })
+    })
+
+    describe('asynchronous setup', () => {
+        it('injects the value provided to the component via composition API', async () => {
+            const wrapper = await mountSuspense(AsyncCompContext, {
+                global: {
+                    provide: {
+                        [injectionKey]: SETUP_AXIOM
+                    }
+                }
+            })
+            const vm = wrapper.findComponent(AsyncCompContext).vm
+            expect(vm.injectedValue).to.equal(SETUP_AXIOM)
+        })
+    })
+})
+
+describe('setup option', () => {
+    const wrapper = mount(SetupCompContext, {
+        global: {
+            provide: {
+                [injectionKey]: SETUP_AXIOM
+            }
+        }
+    })
+    it('can inject variables into the template', () => {
+        expect(wrapper.text()).to.contain(SETUP_AXIOM)
+        expect(wrapper.text()).to.contain(DATA_AXIOM)
+    })
+})
+
+export default {}