wip: hot-reload

Author: yyx990803

lib/hot-shim.js

@@ -0,0 +1,36 @@
+// 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) {
+  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 componentDir = Vue.internalDirectives.component
+  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] = {
+            Ctor: Component,
+            instances: []
+          }
+        }
+        map[newId].instances.push(view)
+      }
+      cb()
+    })
+  }
+}

lib/loader.js

@@ -1,6 +1,7 @@
 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',
@@ -29,19 +30,23 @@ module.exports = function (content) {
 
   function getRequire (type, part, index, scoped) {
     return 'require(' +
-      loaderUtils.stringifyRequest(self,
-        // disable system loaders (except post loaders)
-        '-!' +
-        // get loader string for pre-processors
-        getLoaderString(type, part, scoped) +
-        // select the corresponding part from the vue file
-        getSelectorString(type, index || 0) +
-        // the url to the actual vuefile
-        vueUrl
-      ) +
+      getRequireString(type, part, index, scoped) +
     ')\n'
   }
 
+  function getRequireString (type, part, index, scoped) {
+    return loaderUtils.stringifyRequest(self,
+      // disable system loaders (except post loaders)
+      '-!' +
+      // get loader string for pre-processors
+      getLoaderString(type, part, scoped) +
+      // select the corresponding part from the vue file
+      getSelectorString(type, index || 0) +
+      // the url to the actual vuefile
+      vueUrl
+    )
+  }
+
   function getRequireForImport (impt) {
     return 'require(' +
       loaderUtils.stringifyRequest(self,
@@ -113,6 +118,44 @@ module.exports = function (content) {
         getRequire('template', parts.template[0], 0, hasLocalStyles)
     }
 
+    // hot reload
+    if (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 = []
+      if (scriptString) {
+        accepted.push(scriptString.slice(1, -1))
+      }
+      if (templateString) {
+        accepted.push(templateString.slice(1, -1))
+      }
+      output +=
+        'if (module.hot) {\n' +
+          '(function () {\n' +
+            // shim the component directive so that it
+            // registers the instances
+            'var Vue = require("vue")\n' +
+            'require("' + hotShimPath + '")(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 
+              (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' +
+            '})\n' +
+          '})()\n' +
+        '}'
+    }
+
     // done
     cb(null, output)
   })