add dependency injection feature

Author: yyx990803

lib/loader.js

@@ -27,8 +27,8 @@ module.exports = function (content) {
   var self = this
   this.cacheable()
   var cb = this.async()
-  var output = ''
   var options = this.options.vue || {}
+  var query = loaderUtils.parseQuery(this.query)
   var vueUrl = loaderUtils.getRemainingRequest(this)
   var filePath = this.resourcePath
   var fileName = path.basename(filePath)
@@ -80,6 +80,7 @@ module.exports = function (content) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]
     var rewriter = getRewriter(type, scoped)
+    var injectString = (type === 'script' && query.inject) ? 'inject!' : ''
     if (loader !== undefined) {
       // inject rewriter before css/html loader for
       // extractTextPlugin use cases
@@ -90,7 +91,7 @@ module.exports = function (content) {
       } else {
         loader = ensureBang(loader) + rewriter
       }
-      return ensureBang(loader)
+      return injectString + ensureBang(loader)
     } else {
       // unknown lang, assume a loader for it is used
       switch (type) {
@@ -99,7 +100,7 @@ module.exports = function (content) {
         case 'style':
           return 'style!css!' + rewriter + lang + '!'
         case 'script':
-          return lang + '!'
+          return injectString + lang + '!'
       }
     }
   }
@@ -139,6 +140,7 @@ module.exports = function (content) {
     // which is an object that contains info about the vue file.
     var parts = self.exec(source, url)
     var hasLocalStyles = false
+    var output = 'var __vue_script__, __vue_template__\n'
 
     // add requires for src imports
     parts.styleImports.forEach(function (impt) {
@@ -157,46 +159,61 @@ module.exports = function (content) {
     if (parts.script.length) {
       script = parts.script[0]
       output +=
-        'module.exports = ' + (
+        '__vue_script__ = ' + (
           script.src
             ? getRequireForImport('script', script, 0)
             : getRequire('script', script, 0)
-        ) + '\nif (module.exports.__esModule) module.exports = module.exports.default\n'
+        )
     }
 
     // add require for template
     var template
     if (parts.template.length) {
       template = parts.template[0]
-      output += ';(typeof module.exports === "function" ' +
-        '? module.exports.options ' +
-        ': module.exports).template = ' + (
+      output += '__vue_template__ = ' + (
           template.src
             ? getRequireForImport('template', template, hasLocalStyles)
             : getRequire('template', template, 0, hasLocalStyles)
         )
     }
 
-    // hot reload
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      (parts.script.length || parts.template.length)
-    ) {
+    if (!query.inject) {
+      // attach template
+      output +=
+        'module.exports = __vue_script__ || {}\n' +
+        'if (module.exports.__esModule) module.exports = module.exports.default\n' +
+        ';(typeof module.exports === "function" ? module.exports.options : module.exports).template = __vue_template__\n'
+      // hot reload
+      if (
+        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"), true)\n' +
+          '  if (!hotAPI.compatible) return\n' +
+          '  var id = ' + JSON.stringify(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' +
+          '})()}'
+      }
+    } else {
       output +=
-        'if (module.hot) {(function () {' +
-        '  module.hot.accept()\n' +
-        '  var hotAPI = require("vue-hot-reload-api")\n' +
-        '  hotAPI.install(require("vue"), true)\n' +
-        '  if (!hotAPI.compatible) return\n' +
-        '  var id = ' + JSON.stringify(filePath) + '\n' +
-        '  if (!module.hot.data) {\n' +
-        // initial insert
-        '    hotAPI.createRecord(id, module.exports)\n' +
-        '  } else {\n' +
-        // update
-        '    hotAPI.update(id, module.exports, (typeof module.exports === "function" ? module.exports.options : module.exports).template)\n' +
-        '  }\n' +
-        '})()}'
+        'module.exports = function (injections) {\n' +
+        '  var mod = __vue_script__\n' +
+        '    ? __vue_script__(injections)\n' +
+        '    : {}\n' +
+        '  if (mod.__esModule) mod = mod.default\n' +
+        '  ;(typeof mod === "function" ? mod.options : mod).template = __vue_template__\n' +
+        '  return mod\n' +
+        '}'
     }
 
     // done

package.json

@@ -58,6 +58,7 @@
     "css-loader": "^0.21.0",
     "eslint": "^1.6.0",
     "extract-text-webpack-plugin": "^0.8.2",
+    "inject-loader": "^2.0.1",
     "jade": "^1.11.0",
     "jsdom": "^6.5.1",
     "mkdirp": "^0.5.1",

test/fixtures/inject.js

@@ -0,0 +1 @@
+window.injector = require('!!vue?inject!./inject.vue')

test/fixtures/inject.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="msg">{{ msg }}</div>
+</template>
+
+<script>
+import SomeService from '../service'
+
+export default {
+  data () {
+    return {
+      msg: SomeService.msg
+    }
+  }
+}
+</script>

test/test.js

@@ -211,4 +211,19 @@ describe('vue-loader', function () {
     })
   })
 
+  it('dependency injection', function () {
+    test({
+      entry: './test/fixtures/inject.js'
+    }, function (window) {
+      var module = window.injector({
+        '../service': {
+          msg: 'Hello from mocked service!'
+        }
+      })
+      expect(module.template).to.contain('<div class="msg">{{ msg }}</div>')
+      expect(module.data().msg).to.contain('Hello from mocked service!')
+      done()
+    })
+  })
+
 })