hot reload: extract more into the api

Author: yyx990803

lib/hot-reload-api.js

@@ -5,11 +5,15 @@
  *   - add self to current component's list
  */
 
+var Vue
+var map = Object.create(null)
 var shimmed = false
-exports.install = function (Vue) {
+
+exports.install = function (vue) {
   if (shimmed) return
   shimmed = true
-
+  
+  Vue = vue
   exports.compatible = !!Vue.internalDirectives
   if (!exports.compatible) {
     console.warn(
@@ -19,15 +23,13 @@ exports.install = function (Vue) {
     return
   }
 
-  // create global hot reload map
-  var map = Vue.config._hotComponents = Object.create(null)
   // shim component
-  shimComponent(Vue.internalDirectives.component, map)
+  shimComponent(Vue.internalDirectives.component)
   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)
+    shimComponent(routerView)
     console.log('[HMR] vue-router <router-view> hot reload shim applied.')
   }
 }
@@ -36,18 +38,17 @@ exports.install = function (Vue) {
  * Shim the component directive.
  *
  * @param {Object} dir
- * @param {Object} map - hot component map
  */
 
-function shimComponent (dir, map) {
+function shimComponent (dir) {
   shimMethod(dir, 'unbuild', function (defer) {
     if (!this.hotUpdating) {
       var prevComponent = this.childVM && this.childVM.constructor
-      removeComponent(prevComponent, map, this)
+      removeComponent(prevComponent, 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)
+        addComponent(this.Component, this)
       }
     }
   })
@@ -73,36 +74,99 @@ function shimMethod (dir, methodName, fn) {
  * 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) {
+function removeComponent (Component, view) {
   var id = Component && Component.options.hotID
   if (id) {
-    map[id].instances.$remove(view)
+    map[id].views.$remove(view)
   }
 }
 
 /**
  * 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) {
+function addComponent (Component, view) {
   var id = Component && Component.options.hotID
   if (id) {
     if (!map[id]) {
       map[id] = {
-        Ctor: Component,
+        Component: Component,
+        views: [],
         instances: []
       }
     }
-    map[id].instances.push(view)
+    map[id].views.push(view)
+  }
+}
+
+/**
+ * Create a record for a hot module, which keeps track of its construcotr,
+ * instnaces and views (component directives or router-views).
+ *
+ * @param {String} id
+ * @param {Object} options
+ */
+
+exports.createRecord = function (id, options) {
+  if (typeof options.el !== 'string' && typeof options.data !== 'object') {
+    var add = function () {
+      map[id].instances.push(this)
+    }
+    var remove = function () {
+      map[id].instances.$remove(this)
+    }
+    options.created = options.created
+      ? [options.created, add]
+      : add
+    options.beforeDestroy = options.beforeDestroy
+      ? [options.beforeDestroy, remove]
+      : remove
+    map[id] = {
+      Component: Vue.extend(options),
+      views: [],
+      instances: []
+    }
+  }
+}
+
+/**
+ * Update a hot component.
+ *
+ * @param {String} id
+ * @param {Object|null} newOptions
+ * @param {String|null} newTemplate
+ */
+
+exports.update = function (id, newOptions, newTemplate) {
+  var record = map[id]
+  // force full-reload if an instance of the component is active but is not
+  // managed by a view
+  if (!record || (record.instances.length && !record.views.length)) {
+    throw new Error('Root or manually-mounted instance modified. Full reload is required.')
+  }
+  var Component = record.Component
+  // update constructor
+  if (newOptions) {
+    Component.options = Vue.util.mergeOptions(Vue.options, newOptions)
+  }
+  if (newTemplate) {
+    Component.options.template = newTemplate
+  }
+  // handle recursive lookup
+  if (Component.options.name) {
+    console.log(Component.options)
+    Component.options.components[Component.options.name] = Component
   }
+  // reset constructor cached linker
+  Component.linker = null
+  // reload all views
+  record.views.forEach(updateView)
 }
 
 /**
@@ -111,7 +175,7 @@ function addComponent (Component, map, view) {
  * @param {Directive} view
  */
 
-exports.update = function (view) {
+function updateView (view) {
   if (!view._bound) {
     return
   }

lib/loader.js

@@ -137,31 +137,16 @@ module.exports = function (content) {
           '(function () {\n' +
             // shim the component directive so that it
             // registers the instances
-            'var Vue = require("vue")\n' +
             'var hotAPI = require("' + hotReloadAPIPath + '")\n' +
-            'hotAPI.install(Vue)\n' +
+            'hotAPI.install(require("vue"))\n' +
             'if (!hotAPI.compatible) return\n' +
-            'var map = Vue.config._hotComponents\n' +
             'var id = module.exports.hotID = ' + (scriptString || templateString) + '\n' +
-            // store the record
-            'if (typeof module.exports.el !== "string" && typeof module.exports.data !== "object") {\n' +
-              'map[id] = { Ctor: Vue.extend(module.exports), instances: [] }\n' +
-            '}\n' +
+            // create the record
+            'hotAPI.createRecord(id, module.exports)\n' +
             'module.hot.accept(' + JSON.stringify(accepted) + ', function () {\n' +
-              'if (!map[id]) {\n' +
-                'throw new Error("Root or manually-mounted instance modified. Full reload is required.")\n' +
-              '}\n' +
-              'var Ctor = map[id].Ctor\n' +
-              // overwrite existing constructor's options
-              (scriptString ? 'Ctor.options = Vue.util.mergeOptions(Vue.options, require(' + scriptString + '))\n' : '') +
-              (templateString ? 'Ctor.options.template = require(' + templateString + ')\n' : '') +
-              // handle recursive names
-              'if (Ctor.options.name) Ctor.options.components[Ctor.options.name] = Ctor\n' +
-              // reset linker
-              'Ctor.linker = null\n' +
-              // reload directive instances
-              'map[id].instances.forEach(hotAPI.update)\n' +
-              // re-enable transitions
+              'var newOptions = ' + (scriptString ? 'require(' + scriptString + ')\n' : 'null\n') +
+              'var newTemplate = ' + (templateString ? 'require(' + templateString + ')\n' : 'null\n') +
+              'hotAPI.update(id, newOptions, newTemplate)\n' +
             '})\n' +
           '})()\n' +
         '}'