handle async component for raw constructor :is

Author: yyx990803

src/directives/internal/component.js

@@ -114,21 +114,21 @@ export default {
   /**
    * Resolve the component constructor to use when creating
    * the child vm.
+   *
+   * @param {String|Function} value
+   * @param {Function} cb
    */
 
-  resolveComponent (id, cb) {
+  resolveComponent (value, cb) {
     var self = this
-    var done = function (Component) {
-      self.ComponentName = Component.options.name || id
+    this.pendingComponentCb = cancellable(function (Component) {
+      self.ComponentName =
+        Component.options.name ||
+        (typeof value === 'string' ? value : null)
       self.Component = Component
       cb()
-    }
-    if (typeof id === 'function') {
-      done(id)
-    } else {
-      this.pendingComponentCb = cancellable(done)
-      this.vm._resolveComponent(id, this.pendingComponentCb)
-    }
+    })
+    this.vm._resolveComponent(value, this.pendingComponentCb)
   },
 
   /**

src/instance/internal/misc.js

@@ -52,14 +52,19 @@ export default function (Vue) {
    * resolves asynchronously and caches the resolved
    * constructor on the factory.
    *
-   * @param {String} id
+   * @param {String|Function} value
    * @param {Function} cb
    */
 
-  Vue.prototype._resolveComponent = function (id, cb) {
-    var factory = resolveAsset(this.$options, 'components', id)
-    if (process.env.NODE_ENV !== 'production') {
-      assertAsset(factory, 'component', id)
+  Vue.prototype._resolveComponent = function (value, cb) {
+    var factory
+    if (typeof value === 'function') {
+      factory = value
+    } else {
+      factory = resolveAsset(this.$options, 'components', value)
+      if (process.env.NODE_ENV !== 'production') {
+        assertAsset(factory, 'component', value)
+      }
     }
     if (!factory) {
       return
@@ -87,7 +92,8 @@ export default function (Vue) {
           }
         }, function reject (reason) {
           process.env.NODE_ENV !== 'production' && warn(
-            'Failed to resolve async component: ' + id + '. ' +
+            'Failed to resolve async component' +
+            (typeof value === 'string' ? ': ' + value : '') + '. ' +
             (reason ? '\nReason: ' + reason : '')
           )
         })

test/unit/specs/directives/internal/component_spec.js

@@ -137,14 +137,21 @@ describe('Component', function () {
   it(':is using raw component constructor', function () {
     new Vue({
       el: el,
-      template: '<component :is="$options.components.test">',
+      template:
+        '<component :is="$options.components.test"></component>' +
+        '<component :is="$options.components.async"></component>',
       components: {
         test: {
           template: 'hi'
+        },
+        async: function (resolve) {
+          resolve({
+            template: 'ho'
+          })
         }
       }
     })
-    expect(el.textContent).toBe('hi')
+    expect(el.textContent).toBe('hiho')
   })
 
   it('keep-alive', function (done) {