support returning promise for async components (close vuejs#3527)

Author: yyx990803

src/core/vdom/create-component.js

@@ -189,30 +189,36 @@ function resolveAsyncComponent (
     factory.requested = true
     const cbs = factory.pendingCallbacks = [cb]
     let sync = true
-    factory(
-      // resolve
-      (res: Object | Class<Component>) => {
-        if (isObject(res)) {
-          res = Vue.extend(res)
-        }
-        // cache resolved
-        factory.resolved = res
-        // invoke callbacks only if this is not a synchronous resolve
-        // (async resolves are shimmed as synchronous during SSR)
-        if (!sync) {
-          for (let i = 0, l = cbs.length; i < l; i++) {
-            cbs[i](res)
-          }
+
+    const resolve = (res: Object | Class<Component>) => {
+      if (isObject(res)) {
+        res = Vue.extend(res)
+      }
+      // cache resolved
+      factory.resolved = res
+      // invoke callbacks only if this is not a synchronous resolve
+      // (async resolves are shimmed as synchronous during SSR)
+      if (!sync) {
+        for (let i = 0, l = cbs.length; i < l; i++) {
+          cbs[i](res)
         }
-      },
-      // reject
-      reason => {
-        process.env.NODE_ENV !== 'production' && warn(
-          `Failed to resolve async component: ${String(factory)}` +
-          (reason ? `\nReason: ${reason}` : '')
-        )
       }
-    )
+    }
+
+    const reject = reason => {
+      process.env.NODE_ENV !== 'production' && warn(
+        `Failed to resolve async component: ${String(factory)}` +
+        (reason ? `\nReason: ${reason}` : '')
+      )
+    }
+
+    const res = factory(resolve, reject)
+
+    // handle promise
+    if (res && typeof res.then === 'function' && !factory.resolved) {
+      res.then(resolve, reject)
+    }
+
     sync = false
     // return in case resolved synchronously
     return factory.resolved

test/unit/features/component/component-async.spec.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { Promise } from 'es6-promise'
 
 describe('Component async', () => {
   it('normal', done => {
@@ -130,4 +131,32 @@ describe('Component async', () => {
       done()
     }
   })
+
+  it('returning Promise', done => {
+    const vm = new Vue({
+      template: '<div><test></test></div>',
+      components: {
+        test: () => {
+          return new Promise(resolve => {
+            setTimeout(() => {
+              resolve({
+                template: '<div>hi</div>'
+              })
+              // wait for promise resolve and then parent update
+              Promise.resolve().then(() => {
+                Vue.nextTick(next)
+              })
+            }, 0)
+          })
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('')
+    expect(vm.$children.length).toBe(0)
+    function next () {
+      expect(vm.$el.innerHTML).toBe('<div>hi</div>')
+      expect(vm.$children.length).toBe(1)
+      done()
+    }
+  })
 })