support returning object with promises in data hook (close #92)

Author: yyx990803

src/pipeline.js

@@ -1,4 +1,4 @@
-import { getRouteConfig, resolveAsyncComponent } from './util'
+import { getRouteConfig, resolveAsyncComponent, isPromise } from './util'
 
 /**
  * Determine the reusability of an existing router view.
@@ -42,7 +42,9 @@ export function canDeactivate (view, transition, next) {
   if (!hook) {
     next()
   } else {
-    transition.callHook(hook, fromComponent, next, true)
+    transition.callHook(hook, fromComponent, next, {
+      expectBoolean: true
+    })
   }
 }
 
@@ -65,7 +67,9 @@ export function canActivate (handler, transition, next) {
     if (!hook) {
       next()
     } else {
-      transition.callHook(hook, null, next, true)
+      transition.callHook(hook, null, next, {
+        expectBoolean: true
+      })
     }
   })
 }
@@ -173,7 +177,9 @@ export function activate (view, transition, depth, cb) {
   }
 
   if (activateHook) {
-    transition.callHook(activateHook, component, afterActivate, false, cleanup)
+    transition.callHook(activateHook, component, afterActivate, {
+      cleanup: cleanup
+    })
   } else {
     afterActivate()
   }
@@ -206,11 +212,28 @@ export function reuse (view, transition) {
 
 function loadData (component, transition, hook, cb, cleanup) {
   component.$loadingRouteData = true
-  transition.callHook(hook, component, (data) => {
-    for (let key in data) {
-      component.$set(key, data[key])
+  transition.callHook(hook, component, (data, onError) => {
+    let promises = []
+    Object.keys(data).forEach(key => {
+      let val = data[key]
+      if (isPromise(val)) {
+        promises.push(val.then(resolvedVal => {
+          component.$set(key, resolvedVal)
+        }))
+      } else {
+        component.$set(key, val)
+      }
+    })
+    if (!promises.length) {
+      component.$loadingRouteData = false
+    } else {
+      promises[0].constructor.all(promises).then(_ => {
+        component.$loadingRouteData = false
+      }, onError)
     }
-    component.$loadingRouteData = false
     cb && cb(data)
-  }, false, cleanup)
+  }, {
+    cleanup: cleanup,
+    expectData: true
+  })
 }

src/transition.js

@@ -187,27 +187,21 @@ export default class RouteTransition {
    * @param {Function} hook
    * @param {*} [context]
    * @param {Function} [cb]
-   * @param {Boolean} [expectBoolean]
-   * @param {Function} [cleanup]
+   * @param {Object} [options]
+   *                 - {Boolean} expectBoolean
+   *                 - {Boolean} expectData
+   *                 - {Function} cleanup
    */
 
-  callHook (hook, context, cb, expectBoolean, cleanup) {
+  callHook (hook, context, cb, {
+    expectBoolean = false,
+    expectData = false,
+    cleanup
+  } = {}) {
+
     let transition = this
     let nextCalled = false
 
-    // advance the transition to the next step
-    let next = (data) => {
-      if (nextCalled) {
-        warn('transition.next() should be called only once.')
-        return
-      }
-      nextCalled = true
-      if (!cb || transition.aborted) {
-        return
-      }
-      cb(data)
-    }
-
     // abort the transition
     let abort = (back) => {
       cleanup && cleanup()
@@ -226,6 +220,19 @@ export default class RouteTransition {
       }
     }
 
+    // advance the transition to the next step
+    let next = (data) => {
+      if (nextCalled) {
+        warn('transition.next() should be called only once.')
+        return
+      }
+      nextCalled = true
+      if (!cb || transition.aborted) {
+        return
+      }
+      cb(data, onError)
+    }
+
     // expose a clone of the transition object, so that each
     // hook gets a clean copy and prevent the user from
     // messing with the internals.
@@ -259,6 +266,12 @@ export default class RouteTransition {
       }
     } else if (resIsPromise) {
       res.then(next, onError)
+    } else if (expectData && isPlainOjbect(res)) {
+      next(res)
     }
   }
 }
+
+function isPlainOjbect (val) {
+  return Object.prototype.toString.call(val) === '[object Object]'
+}

test/unit/specs/pipeline/data.js

@@ -114,4 +114,53 @@ describe('data', function () {
       }, wait * 2)
     })
   })
+
+  it('return object containing promises', function (done) {
+    test({
+      data: {
+        data: function (transition) {
+          return {
+            msg: new Promise(function (resolve) {
+              setTimeout(function () {
+                resolve(transition.to.params.msg)
+              }, wait)
+            })
+          }
+        }
+      }
+    }, function (router, calls, emitter) {
+      router.go('/data/hello')
+      assertCalls(calls, ['data.data'])
+      expect(router.app.$el.textContent).toBe('loading...')
+      setTimeout(function () {
+        expect(router.app.$el.textContent).toBe('hello')
+        done()
+      }, wait * 2)
+    })
+  })
+
+  it('return object containing promises reject', function (done) {
+    test({
+      data: {
+        data: function (transition) {
+          return {
+            msg: new Promise(function (resolve, reject) {
+              setTimeout(function () {
+                reject()
+              }, wait)
+            })
+          }
+        }
+      }
+    }, function (router, calls, emitter) {
+      router.go('/data/hello')
+      assertCalls(calls, ['data.data'])
+      expect(router.app.$el.textContent).toBe('loading...')
+      setTimeout(function () {
+        // should complete the transition despite error
+        expect(router.app.$el.textContent).toBe('')
+        done()
+      }, wait * 2)
+    })
+  })
 })