support 2.0 hot-reload

yyx990803 · yyx990803 · commit c9bd50626a2b · 2016-06-09T19:00:03.000-04:00
diff --git a/lib/loader.js b/lib/loader.js
@@ -15,12 +15,6 @@ var selectorPath = 'vue-loader/lib/selector'
 var templateLoader = 'vue-loader/lib/template-loader'
 
 module.exports = function (content) {
-  var defaultLoaders = {
-    html: 'vue-loader/lib/template-compiler',
-    css: 'vue-style-loader!css-loader',
-    js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false'
-  }
-
   this.cacheable()
   var loaderContext = this
   var options = this.options.vue || {}
@@ -30,6 +24,12 @@ module.exports = function (content) {
   var moduleId = '_v-' + hash(filePath)
   var styleRewriter = 'vue-loader/lib/style-rewriter?id=' + moduleId
 
+  var defaultLoaders = {
+    html: 'vue-loader/lib/template-compiler?id=' + moduleId,
+    css: 'vue-style-loader!css-loader',
+    js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false'
+  }
+
   // respect user babel options
   if (this.options.babel) {
     defaultLoaders.js = 'babel-loader'
@@ -127,7 +127,7 @@ module.exports = function (content) {
 
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = false
-  var output = ''
+  var output = 'var __vue_script__\n'
 
   // add requires for styles
   parts.styles.forEach(function (style, i) {
@@ -142,7 +142,7 @@ module.exports = function (content) {
   var script = parts.script
   if (script) {
     output +=
-      'var __vue_script__ = ' + (
+      '__vue_script__ = ' + (
         script.src
           ? getRequireForImport('script', script)
           : getRequire('script', script)
@@ -191,27 +191,26 @@ module.exports = function (content) {
       exports +
       'module.exports = __exports__'
     // hot reload
-    // if (
-    //   !this.minimize &&
-    //   process.env.NODE_ENV !== 'production' &&
-    //   (parts.script.length || parts.template.length)
-    // ) {
-    //   output +=
-    //     'if (module.hot) {(function () {' +
-    //     '  module.hot.accept()\n' +
-    //     '  var hotAPI = require("vue-hot-reload-api")\n' +
-    //     '  hotAPI.install(require("vue"), false)\n' +
-    //     '  if (!hotAPI.compatible) return\n' +
-    //     '  var id = ' + loaderUtils.stringifyRequest(loaderContext, filePath) + '\n' +
-    //     '  if (!module.hot.data) {\n' +
-    //     // initial insert
-    //     '    hotAPI.createRecord(id, module.exports)\n' +
-    //     '  } else {\n' +
-    //     // update
-    //     '    hotAPI.update(id, module.exports, __vue_template__)\n' +
-    //     '  }\n' +
-    //     '})()}'
-    // }
+    if (
+      !this.minimize &&
+      process.env.NODE_ENV !== 'production' &&
+      (parts.script || parts.template)
+    ) {
+      output +=
+        '\nif (module.hot) {(function () {' +
+        '  var hotAPI = require("vue-hot-reload-api")\n' +
+        '  hotAPI.install(require("vue"), false)\n' +
+        '  if (!hotAPI.compatible) return\n' +
+        '  module.hot.accept()\n' +
+        '  if (!module.hot.data) {\n' +
+        // initial insert
+        '    hotAPI.createRecord("' + moduleId + '", __exports__)\n' +
+        '  } else {\n' +
+        // update
+        '    hotAPI.reload("' + moduleId + '", __exports__)\n' +
+        '  }\n' +
+        '})()}'
+    }
   } else {
     output +=
       'module.exports = function (injections) {\n' +
diff --git a/lib/template-compiler.js b/lib/template-compiler.js
@@ -1,4 +1,5 @@
 var compiler = require('vue-template-compiler')
+var loaderUtils = require('loader-utils')
 
 // vue compiler module for using file-loader img src
 var options = {
@@ -27,17 +28,32 @@ function rewrite (attr) {
 module.exports = function (html) {
   this.cacheable()
   var compiled = compiler.compile(html, options)
+  var code
   if (compiled.errors.length) {
     var self = this
     compiled.errors.forEach(function (err) {
       self.emitError('template syntax error ' + err)
     })
-    return 'module.exports={render:function(){},staticRenderFns:[]}'
+    code = 'module.exports={render:function(){},staticRenderFns:[]}'
+  } else {
+    code = 'module.exports={' +
+      'render:' + toFunction(compiled.render) + ',' +
+      'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
+    '}'
   }
-  return 'module.exports={' +
-    'render:' + toFunction(compiled.render) + ',' +
-    'staticRenderFns: [' + compiled.staticRenderFns.map(toFunction).join(',') + ']' +
-  '}'
+  // hot-reload
+  if (!this.minimize &&
+      process.env.NODE_ENV !== 'production') {
+    var moduleId = loaderUtils.parseQuery(this.query).id
+    code +=
+      '\nif (module.hot) {\n' +
+      '  module.hot.accept()\n' +
+      '  if (module.hot.data) {\n' +
+      '     require("vue-hot-reload-api").rerender("' + moduleId + '", module.exports)\n' +
+      '  }\n' +
+      '}'
+  }
+  return code
 }
 
 function toFunction (code) {
