handle keep-alive

Author: yyx990803

lib/hot-shim.js

@@ -1,26 +1,34 @@
-// override component directive's resolveComponent function.
-// When component is resolved:
-//   - remove self from previous component's list
-//   - add self to current component's list
+/**
+ * override component directive's resolveComponent function.
+ * When component is resolved:
+ *   - remove self from previous component's list
+ *   - add self to current component's list
+ */
 
 var shimmed = false
-module.exports = function (Vue) {
+exports.install = function (Vue) {
   if (shimmed) return
   shimmed = true
   console.log('[HMR] Vue component hot reload shim applied.')
-  var map = window.map = Vue.config._hotComponents = Object.create(null)
+  var map = Vue.config._hotComponents = Object.create(null)
   var componentDir = Vue.internalDirectives.component
+
+  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)
+    }
+    set.call(this, id, cb)
+  }
+
   var resolve = componentDir.resolveComponent
   componentDir.resolveComponent = function (id, cb) {
     var view = this
-    var prevComponent = view.Component
-    var prevId = prevComponent && prevComponent.options.hotID
     resolve.call(this, id, function () {
       var Component = view.Component
       var newId = Component.options.hotID
-      if (prevId) {
-        map[prevId].instances.$remove(view)
-      }
       if (newId) {
         if (!map[newId]) {
           map[newId] = {
@@ -33,4 +41,38 @@ module.exports = function (Vue) {
       cb()
     })
   }
+
+  var unbind = componentDir.unbind
+  componentDir.unbind = function () {
+    var id = this.Component && this.Component.options.hotID
+    if (id) {
+      map[id].instances.$remove(this)
+    }
+    unbind.call(this)
+  }
+}
+
+/**
+ * Update a component directive instance
+ *
+ * @param {Directive} view
+ */
+
+exports.update = function (view) {
+  if (!view._bound) {
+    return
+  }
+  // disable transitions
+  view.vm._isCompiled = false
+  // save state
+  var state = view.childVM.$data
+  // remount, make sure to disable keep-alive
+  var keepAlive = view.keepAlive
+  view.keepAlive = false
+  view.mountComponent()
+  view.keepAlive = keepAlive
+  // restore state
+  view.childVM.$data = state
+  // re-eanble transitions
+  view.vm._isCompiled = true
 }

lib/loader.js

@@ -1,7 +1,6 @@
 var loaderUtils = require('loader-utils')
 var selectorPath = require.resolve('./selector')
 var parserPath = require.resolve('./parser')
-var hotShimPath = require.resolve('./hot-shim')
 
 var defaultLang = {
   template: 'html',
@@ -119,7 +118,10 @@ module.exports = function (content) {
     }
 
     // hot reload
-    if (parts.script.length || parts.template.length) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      (parts.script.length || parts.template.length)
+    ) {
       var scriptString = parts.script.length ? getRequireString('script', parts.script[0], 0) : ''
       var templateString = parts.template.length ? getRequireString('template', parts.template[0], 0, hasLocalStyles) : ''
       var accepted = []
@@ -135,22 +137,20 @@ module.exports = function (content) {
             // shim the component directive so that it
             // registers the instances
             'var Vue = require("vue")\n' +
-            'require("' + hotShimPath + '")(Vue)\n' +
+            'var shim = require("' + require.resolve('./hot-shim') + '")\n' +
+            'shim.install(Vue)\n' +
             'var map = Vue.config._hotComponents\n' +
             'var id = module.exports.hotID = ' + (scriptString || templateString) + '\n' +
             'module.hot.accept(' + JSON.stringify(accepted) + ', function () {\n' +
               'var Ctor = map[id].Ctor\n' + 
-              // overwrite existing constructor's options 
+              // overwrite existing constructor's options
               (scriptString ? 'Ctor.options = Vue.util.mergeOptions(Vue.options, require(' + scriptString + '))\n' : '') +
               (templateString ? 'Ctor.options.template = require(' + templateString + ')\n' : '') + 
               // reset linker
               'Ctor.linker = null\n' +
               // reload directive instances
-              'map[id].instances.forEach(function (view) {\n' +
-                'var state = view.childVM.$data\n' +
-                'view.mountComponent()\n' +
-                'view.childVM.$data = state\n' +
-              '})\n' +
+              'map[id].instances.forEach(shim.update)\n' +
+              // re-enable transitions
             '})\n' +
           '})()\n' +
         '}'