feat: support async setup (fix #463)

Author: ktsn

src/helpers.ts

@@ -1,6 +1,6 @@
 import { ComponentOptions, ShallowUnwrapRef, Ref } from 'vue'
 
-import { Vue, VueConstructor, VueMixin } from './vue'
+import { Vue, VueBase, VueConstructor, VueMixin } from './vue'
 
 export function Options<V extends Vue>(
   options: ComponentOptions & ThisType<V>
@@ -80,10 +80,12 @@ export type UnwrapSetupValue<T> = T extends Ref<infer R>
   ? R
   : ShallowUnwrapRef<T>
 
-export function setup<R>(setupFn: () => R): UnwrapSetupValue<R> {
+export type UnwrapPromise<T> = T extends Promise<infer R> ? R : T
+
+export function setup<R>(setupFn: () => R): UnwrapSetupValue<UnwrapPromise<R>> {
   // Hack to delay the invocation of setup function.
   // Will be called after dealing with class properties.
   return {
     __s: setupFn,
-  } as UnwrapSetupValue<R>
+  } as UnwrapSetupValue<UnwrapPromise<R>>
 }

src/index.ts

@@ -38,4 +38,5 @@ export {
   UnionToIntersection,
   ExtractInstance,
   UnwrapSetupValue,
+  UnwrapPromise,
 } from './helpers'

src/vue.ts

@@ -243,6 +243,7 @@ class VueImpl {
       const dataKeys = Object.keys(data)
 
       const plainData: any = {}
+      let promise: Promise<any> | null = null
 
       // Initialize reactive data and convert constructor `this` to a proxy
       dataKeys.forEach((key) => {
@@ -260,11 +261,23 @@ class VueImpl {
       dataKeys.forEach((key) => {
         if (data[key] && data[key].__s) {
           const setupState = data[key].__s()
-          plainData[key] = proxyRefs(setupState)
+          if (setupState instanceof Promise) {
+            if (!promise) {
+              promise = Promise.resolve(plainData)
+            }
+            promise = promise.then(() => {
+              return setupState.then((value) => {
+                plainData[key] = proxyRefs(value)
+                return plainData
+              })
+            })
+          } else {
+            plainData[key] = proxyRefs(setupState)
+          }
         }
       })
 
-      return plainData
+      return promise ?? plainData
     }
 
     const decorators =

test/specs/test.spec.ts

@@ -1,5 +1,15 @@
 import 'reflect-metadata'
-import { h, resolveComponent, ref, onMounted, Ref, watch, toRef } from 'vue'
+import {
+  h,
+  resolveComponent,
+  ref,
+  onMounted,
+  Ref,
+  watch,
+  toRef,
+  nextTick,
+  Suspense,
+} from 'vue'
 import { Options, createDecorator, mixins, Vue, setup, prop } from '../../src'
 import { mount, unmount } from '../helpers'
 
@@ -416,6 +426,48 @@ describe('vue-class-component', () => {
     expect(root.answer.nested.answer.value).toBe(42)
   })
 
+  it('setup: suspense', () => {
+    const deps: Promise<any>[] = []
+
+    class Child extends Vue {
+      foo = 'Hello'
+
+      bar = setup(() => {
+        const a = ref(42)
+        return {
+          a,
+        }
+      })
+
+      baz = setup(() => {
+        const b = ref(true)
+        const p = Promise.resolve({
+          b,
+        })
+        deps.push(p.then(() => Promise.resolve()))
+        return p
+      })
+
+      render() {
+        return h('div', [[this.foo, this.bar.a, this.baz.b].join(',')])
+      }
+    }
+
+    class App extends Vue {
+      render() {
+        return h(Suspense, null, {
+          default: h(Child),
+          fallback: h('div', 'fallback'),
+        })
+      }
+    }
+
+    const { root } = mount(App)
+    return Promise.all(deps)
+      .then(() => nextTick())
+      .then(() => expect(root.$el.textContent).toBe('Hello,42,true'))
+  })
+
   it('reactive class properties in a composition function', (done) => {
     function test(message: Ref<string>) {
       watch(message, () => {