hot reload: handle router-view

Author: yyx990803

lib/hot-reload-api.js

@@ -21,53 +21,90 @@ exports.install = function (Vue) {
 
   // create global hot reload map
   var map = Vue.config._hotComponents = Object.create(null)
-  // check compatibility
-  var componentDir = Vue.internalDirectives.component
+  // shim component
+  shimComponent(Vue.internalDirectives.component, map)
+  console.log('[HMR] vue component hot reload shim applied.')
+  // shim router-view if present
+  var routerView = Vue.elementDirective('router-view')
+  if (routerView) {
+    shimComponent(routerView, map)
+    console.log('[HMR] vue-router <router-view> hot reload shim applied.')
+  }
+}
 
-  // shim the component directive
-  var set = componentDir.setComponent
-  componentDir.setComponent = function (id, cb) {
-    var prevComponent = this.Component
-    var prevId = prevComponent && prevComponent.options.hotID
-    if (prevId) {
-      map[prevId].instances.$remove(this)
+/**
+ * Shim the component directive.
+ *
+ * @param {Object} dir
+ * @param {Object} map - hot component map
+ */
+
+function shimComponent (dir, map) {
+  shimMethod(dir, 'unbuild', function (defer) {
+    var prevComponent = this.childVM && this.childVM.constructor
+    removeComponent(prevComponent, map, this)
+    // defer = true means we are transitioning to a new
+    // Component. Register this new component to the list.
+    if (defer) {
+      addComponent(this.Component, map, this)
     }
-    set.call(this, id, cb)
+  })
+}
+
+/**
+ * Shim a directive method.
+ *
+ * @param {Object} dir
+ * @param {String} methodName
+ * @param {Function} fn
+ */
+
+function shimMethod (dir, methodName, fn) {
+  var original = dir[methodName]
+  dir[methodName] = function () {
+    fn.apply(this, arguments)
+    return original.apply(this, arguments)
   }
+}
 
-  var resolve = componentDir.resolveComponent
-  componentDir.resolveComponent = function (id, cb) {
-    var view = this
-    resolve.call(this, id, function () {
-      var Component = view.Component
-      var newId = Component.options.hotID
-      if (newId) {
-        if (!map[newId]) {
-          map[newId] = {
-            Ctor: Component,
-            instances: []
-          }
-        }
-        map[newId].instances.push(view)
-      }
-      cb()
-    })
+/**
+ * Remove a component view from a Component's hot list
+ *
+ * @param {Function} Component
+ * @param {Object} map - hot component map
+ * @param {Directive} view - view directive instance
+ */
+
+function removeComponent (Component, map, view) {
+  var id = Component && Component.options.hotID
+  if (id) {
+    map[id].instances.$remove(view)
   }
+}
 
-  var unbind = componentDir.unbind
-  componentDir.unbind = function () {
-    var id = this.Component && this.Component.options.hotID
-    if (id) {
-      map[id].instances.$remove(this)
+/**
+ * Add a component view to a Component's hot list
+ *
+ * @param {Function} Component
+ * @param {Object} map - hot component map
+ * @param {Directive} view - view directive instance
+ */
+
+function addComponent (Component, map, view) {
+  var id = Component && Component.options.hotID
+  if (id) {
+    if (!map[id]) {
+      map[id] = {
+        Ctor: Component,
+        instances: []
+      }
     }
-    unbind.call(this)
+    map[id].instances.push(view)
   }
-
-  console.log('[HMR] Vue component hot reload shim applied.')
 }
 
 /**
- * Update a component directive instance
+ * Update a component view instance
  *
  * @param {Directive} view
  */