refactor

Author: yyx990803

lib/loader.js

@@ -1,4 +1,7 @@
 var loaderUtils = require('loader-utils')
+var selectorPath = require.resolve('./selector')
+var parserPath = require.resolve('./parser')
+var cssRewriterPath = require.resolve('./css-rewriter')
 
 module.exports = function (content) {
   var self = this
@@ -26,74 +29,76 @@ module.exports = function (content) {
     script: 'js'
   }
 
-  /**
-   * Determine the loaders to use for an extracted part.
-   *
-   * @param {String} part - style|script|template
-   * @param {String} lang
-   * @return {String}
-   */
-  function loader (part, lang) {
-    lang = lang || defaultLang[part]
-    var loader = loaders[lang] !== undefined
-      ? loaders[lang]
-      : loaderPrefix[part] + lang
-    return loader ? loader + '!' : ''
+  function getRequire (type, part, index) {
+    return 'require(' +
+      loaderUtils.stringifyRequest(self,
+        // disable system loaders (except post loaders)
+        '-!' +
+        // check for local CSS rewrite
+        (part.local ? cssRewriterPath + '!' : '') +
+        // get loader string for pre-processors
+        getPreprocessorString(type, part.lang) +
+        // select the corresponding part from the vue file
+        getSelectorString(type, index || 0) +
+        // the url to the actual vuefile
+        vueUrl
+      ) +
+    ')\n'
   }
 
-  /**
-   * Generate a require call for an extracted part.
-   *
-   * @param {String} part - style|script|template
-   * @param {String} lang
-   * @return {String}
-   */
-  function getRequire (part, lang) {
+  function getRequireForImport (include) {
     return 'require(' +
       loaderUtils.stringifyRequest(self,
-        '-!' + loader(part, lang) +
-        require.resolve('./selector.js') + '?' + part + '/' + lang + '!' +
-        vueUrl
+        '-!' +
+        getPreprocessorString(include.type, include.lang) +
+        include.src
       ) +
-    ')'
+    ')\n'
+  }
+
+  function getPreprocessorString (type, lang) {
+    lang = lang || defaultLang[type]
+    var loader = loaders[lang] !== undefined
+      ? loaders[lang]
+      : loaderPrefix[type] + lang
+    return loader ? loader + '!' : ''
   }
 
-  var url = '!!' + require.resolve('./parser.js') + '!' + vueUrl
+  function getSelectorString (type, index) {
+    return selectorPath +
+      '?type=' + type +
+      '&index=' + index + '!'
+  }
+
+  var url = '!!' + parserPath + '!' + vueUrl
   this.loadModule(url, function (err, source) {
     if (err) return cb(err)
 
     // up to this part, what we have done is basically executing
     // parser.js on the raw vue file and get the parsing result
     // which is an object that contains info about the vue file.
     var parts = self.exec(source, url)
-    var lang
-
-    // add require for all the src imports
-    for (var i = 0; i < parts.includes.length; i++) {
-      var include = parts.includes[i]
-      output += 'require(' + loaderUtils.stringifyRequest(this,
-        '-!' + loader(include.type, include.lang) + include.src
-      ) + ')\n'
-    }
 
-    // add require for styles
-    for (lang in parts.style) {
-      output += getRequire('style', lang) + '\n'
-    }
+    // add requires for src imports
+    parts.includes.forEach(function (include) {
+      output += getRequireForImport(include)
+    })
+
+    // add requires for styles
+    parts.style.forEach(function (style, i) {
+      output += getRequire('style', style, i)
+    })
 
-    // add require for script
-    for (lang in parts.script) {
-      output += 'module.exports = ' + getRequire('script', lang) + '\n'
+    // only one script tag allowed
+    if (parts.script.length) {
+      output += 'module.exports = ' +
+        getRequire('script', parts.script[0])
     }
 
-    // add require for template
-    var hasTemplate = false
-    for (lang in parts.template) {
-      if (hasTemplate) {
-        return cb(new Error('Only one template element allowed per vue component!'))
-      }
-      output += 'module.exports.template = ' + getRequire('template', lang)
-      hasTemplate = true
+    // only one template tag allowed
+    if (parts.template.length) {
+      output += 'module.exports.template = ' +
+        getRequire('template', parts.template[0])
     }
 
     // done

lib/parser.js

@@ -5,18 +5,19 @@ module.exports = function (content) {
   this.cacheable()
   var cb = this.async()
   var output = {
-    template: {},
-    style: {},
-    script: {},
+    template: [],
+    style: [],
+    script: [],
     includes: []
   }
 
   var fragment = parser.parseFragment(content)
 
   fragment.childNodes.forEach(function (node) {
     var type = node.tagName
-    var lang = getAttribute(node, 'lang') || ''
+    var lang = getAttribute(node, 'lang')
     var src = getAttribute(node, 'src')
+    var local = getAttribute(node, 'local')
 
     if (src) {
       output.includes.push({
@@ -35,6 +36,15 @@ module.exports = function (content) {
       return
     }
 
+    if (
+      (type === 'script' || type === 'template') &&
+      output[type].length > 0
+    ) {
+      return cb(new Error(
+        'Only one <script> or <template> tag is allowed inside a Vue component.'
+      ))
+    }
+
     // Work around changes in parse5 >= 1.2.0
     if (node.childNodes[0].nodeName === '#document-fragment') {
       node = node.childNodes[0]
@@ -45,7 +55,11 @@ module.exports = function (content) {
 
     var start = node.childNodes[0].__location.start
     var end = node.childNodes[node.childNodes.length - 1].__location.end
-    output[type][lang] = content.substring(start, end).trim()
+    output[type].push({
+      lang: lang,
+      local: local,
+      content: content.substring(start, end).trim()
+    })
   })
 
   cb(null, 'module.exports = ' + JSON.stringify(output))

lib/selector.js

@@ -1,15 +1,15 @@
+var loaderUtils = require('loader-utils')
+
 module.exports = function () {
   this.cacheable()
   var cb = this.async()
-  var path = this.query.substr(1).split('/')
+  var query = loaderUtils.parseQuery(this.query)
 
   var self = this
   var url = '!!' + require.resolve('./parser.js') + '!' + this.resource
   this.loadModule(url, function (err, source) {
     if (err) return cb(err)
     var parts = self.exec(source, url)
-    var type = path[0]
-    var lang = path[1] || ''
-    cb(null, parts[type][lang])
+    cb(null, parts[query.type][query.index].content)
   })
 }