implement activate hook

Author: yyx990803

src/directives/component.js

@@ -88,20 +88,28 @@ module.exports = {
     var anchor = this.el
     var options
     var waitFor = this.waitForEvent
+    var activateHook = this.Component.options.activate
     if (waitFor) {
       options = {
         created: function () {
-          this.$once(waitFor, function () {
-            this.$before(anchor)
-            _.remove(anchor)
-          })
+          this.$once(waitFor, insert)
         }
       }
     }
     var child = this.build(options)
     this.setCurrent(child)
     if (!this.waitForEvent) {
-      child.$before(anchor)
+      if (activateHook) {
+        activateHook.call(child, insert)
+      } else {
+        child.$before(anchor)
+        _.remove(anchor)
+      }
+    }
+    function insert () {
+      // TODO: no need to fallback to this in 1.0.0
+      // once wait-for is removed
+      (child || this).$before(anchor)
       _.remove(anchor)
     }
   },
@@ -141,22 +149,30 @@ module.exports = {
         var options
         var self = this
         var waitFor = this.waitForEvent
+        var activateHook = this.Component.options.activate
         if (waitFor) {
           options = {
             created: function () {
-              this.$once(waitFor, function () {
-                self.waitingFor = null
-                self.transition(this, cb)
-              })
+              this.$once(waitFor, insert)
             }
           }
         }
         var cached = this.getCached()
         var newComponent = this.build(options)
-        if (!waitFor || cached) {
+        if ((!waitFor && !activateHook) || cached) {
           this.transition(newComponent, cb)
         } else {
           this.waitingFor = newComponent
+          if (activateHook) {
+            activateHook.call(newComponent, insert)
+          }
+        }
+
+        function insert () {
+          self.waitingFor = null
+          // TODO: no need to fallback to this in 1.0.0
+          // once wait-for is removed
+          self.transition((newComponent || this), cb)
         }
       }, this))
     }

test/unit/specs/directives/component_spec.js

@@ -314,6 +314,26 @@ if (_.inBrowser) {
       expect(el.textContent).toBe('AAA')
     })
 
+    it('activate hook for static component', function (done) {
+      new Vue({
+        el: el,
+        template: '<view-a></view-a>',
+        components: {
+          'view-a': {
+            template: 'AAA',
+            activate: function (ready) {
+              setTimeout(function () {
+                expect(el.textContent).toBe('')
+                ready()
+                expect(el.textContent).toBe('AAA')
+                done()
+              }, 0)
+            }
+          }
+        }
+      })
+    })
+
     it('sync wait-for inside compiled hook', function () {
       new Vue({
         el: el,
@@ -371,6 +391,55 @@ if (_.inBrowser) {
       })
     })
 
+    it('activate hook for dynamic components', function (done) {
+      var next
+      var vm = new Vue({
+        el: el,
+        data: {
+          view: 'view-a'
+        },
+        template: '<component bind-is="view"></component>',
+        components: {
+          'view-a': {
+            template: 'AAA',
+            activate: function (ready) {
+              next = ready
+            }
+          },
+          'view-b': {
+            template: 'BBB',
+            activate: function (ready) {
+              next = ready
+            }
+          }
+        }
+      })
+      expect(next).toBeTruthy()
+      expect(el.textContent).toBe('')
+      next()
+      expect(el.textContent).toBe('AAA')
+      vm.view = 'view-b'
+      _.nextTick(function () {
+        expect(el.textContent).toBe('AAA')
+        // old vm is already removed, this is the new vm
+        expect(vm.$children.length).toBe(1)
+        next()
+        expect(el.textContent).toBe('BBB')
+        // ensure switching before ready event correctly
+        // cleans up the component being waited on.
+        // see #1152
+        vm.view = 'view-a'
+        _.nextTick(function () {
+          vm.view = 'view-b'
+          _.nextTick(function () {
+            expect(vm.$children.length).toBe(1)
+            expect(vm.$children[0].$el.textContent).toBe('BBB')
+            done()
+          })
+        })
+      })
+    })
+
     // #1150
     it('wait-for + keep-alive', function (done) {
       var vm = new Vue({
@@ -405,6 +474,46 @@ if (_.inBrowser) {
       })
     })
 
+    it('activate hook + keep-alive', function (done) {
+      var next
+      var vm = new Vue({
+        el: el,
+        data: {
+          view: 'view-a'
+        },
+        template: '<component bind-is="view" keep-alive></component>',
+        components: {
+          'view-a': {
+            template: 'AAA',
+            activate: function (ready) {
+              next = ready
+            }
+          },
+          'view-b': {
+            template: 'BBB',
+            activate: function (ready) {
+              next = ready
+            }
+          }
+        }
+      })
+      next()
+      expect(el.textContent).toBe('AAA')
+      vm.view = 'view-b'
+      _.nextTick(function () {
+        expect(vm.$children.length).toBe(2)
+        next()
+        expect(el.textContent).toBe('BBB')
+        vm.view = 'view-a'
+        _.nextTick(function () {
+          // should switch without the need to emit
+          // because of keep-alive
+          expect(el.textContent).toBe('AAA')
+          done()
+        })
+      })
+    })
+
     it('transition-mode: in-out', function (done) {
       var spy1 = jasmine.createSpy('enter')
       var spy2 = jasmine.createSpy('leave')