refactor: extract common generated runtime code into a single module

Author: yyx990803

lib/component-normalizer.js

@@ -0,0 +1,58 @@
+module.exports = function normalizeComponent (
+  name,
+  scriptExports,
+  compiledTemplate,
+  scopeId,
+  cssModules
+) {
+  scriptExports = scriptExports || {}
+
+  // ES6 modules interop
+  var type = typeof scriptExports.default
+  if (type === 'object' || type === 'function') {
+    // check named exports
+    if (process.env.NODE_ENV !== 'production') {
+      if (Object.keys(scriptExports).some(function (key) {
+        return key !== 'default' && key !== '__esModule'
+      })) {
+        console.error('named exports are not supported in *.vue files.')
+      }
+    }
+    scriptExports = scriptExports.default
+  }
+
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // default name option based on filename
+  if (options.name == null) {
+    options.name = name
+  }
+
+  // render functions
+  if (compiledTemplate) {
+    options.render = compiledTemplate.render
+    options.staticRenderFns = compiledTemplate.staticRenderFns
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = scopeId
+  }
+
+  // inject cssModules
+  if (cssModules) {
+    var computed = options.computed || (options.computed = {})
+    Object.keys(cssModules).forEach(function (key) {
+      var module = cssModules[key]
+      computed[key] = function () { return module }
+    })
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}

lib/loader.js

@@ -10,6 +10,7 @@ var selectorPath = normalize.lib('selector')
 var templateLoaderPath = normalize.lib('template-loader')
 var templateCompilerPath = normalize.lib('template-compiler')
 var styleRewriterPath = normalize.lib('style-rewriter')
+var componentNormalizerPath = normalize.lib('component-normalizer')
 
 // dep loaders
 var styleLoaderPath = normalize.dep('vue-style-loader')
@@ -33,10 +34,6 @@ var defaultLang = {
   script: 'js'
 }
 
-var checkNamedExports =
-  'if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {' +
-  'console.error("named exports are not supported in *.vue files.")}\n'
-
 module.exports = function (content) {
   this.cacheable()
   var isServer = this.options.target === 'node'
@@ -69,7 +66,7 @@ module.exports = function (content) {
   function getRequire (type, part, index, scoped) {
     return 'require(' +
       getRequireString(type, part, index, scoped) +
-    ')\n'
+    ')'
   }
 
   function getRequireString (type, part, index, scoped) {
@@ -88,7 +85,7 @@ module.exports = function (content) {
   function getRequireForImport (type, impt, scoped) {
     return 'require(' +
       getRequireForImportString(type, impt, scoped) +
-    ')\n'
+    ')'
   }
 
   function getRequireForImportString (type, impt, scoped) {
@@ -196,9 +193,9 @@ module.exports = function (content) {
     }
   }
 
+  var output = ''
   var parts = parse(content, fileName, this.sourceMap)
   var hasScoped = parts.styles.some(function (s) { return s.scoped })
-  var output = 'var __vue_exports__, __vue_options__\n'
 
   // css modules
   var cssModules = {}
@@ -220,7 +217,7 @@ module.exports = function (content) {
       if (moduleName) {
         if (!hasModules) {
           hasModules = true
-          output += 'var __vue_styles__ = {}\n'
+          output += 'var cssModules = {}\n'
         }
         if (moduleName in cssModules) {
           loaderContext.emitError('CSS module name "' + moduleName + '" is not unique!')
@@ -235,81 +232,89 @@ module.exports = function (content) {
             requireString += '.locals'
           }
 
-          output += '__vue_styles__["' + moduleName + '"] = ' + requireString + '\n'
+          output += 'cssModules["' + moduleName + '"] = ' + requireString + '\n'
         }
       } else {
-        output += requireString
+        output += requireString + '\n'
       }
     })
+    output += '\n'
   }
 
-  // add require for script
+  // we require the component normalizer function, and call it like so:
+  // normalizeComponent(
+  //   name,
+  //   scriptExports,
+  //   compiledTemplate,
+  //   scopeId,
+  //   cssModules
+  // )
+  output += 'var Component = require("' + componentNormalizerPath + '")(\n'
+
+  // name
+  output += '  /* name */\n  ' + JSON.stringify(path.parse(filePath).name) + ',\n'
+
+  // <script>
+  output += '  /* script */\n  '
   var script = parts.script
   if (script) {
-    output += '\n/* script */\n'
-    output +=
-      '__vue_exports__ = ' + (
-        script.src
-          ? getRequireForImport('script', script)
-          : getRequire('script', script)
-      )
+    output += script.src
+      ? getRequireForImport('script', script)
+      : getRequire('script', script)
+    // inject loader interop
+    if (query.inject) {
+      output += '(injections)'
+    }
+  } else {
+    output += 'null'
   }
+  output += ',\n'
 
-  var exports =
-    '__vue_options__ = __vue_exports__ = __vue_exports__ || {}\n' +
-    // ES6 modules interop
-    'if (\n' +
-    '  typeof __vue_exports__.default === "object" ||\n' +
-    '  typeof __vue_exports__.default === "function"\n' +
-    ') {\n' +
-      (isProduction ? '' : checkNamedExports) +
-      '__vue_options__ = __vue_exports__ = __vue_exports__.default\n' +
-    '}\n' +
-    // constructor export interop
-    'if (typeof __vue_options__ === "function") {\n' +
-    '  __vue_options__ = __vue_options__.options\n' +
-    '}\n' +
-    // add filename in dev
-    (isProduction ? '' : ('__vue_options__.__file = ' + JSON.stringify(filePath))) + '\n'
-
-  // add component name based on the filename
-  exports +=
-    'if(typeof __vue_options__.name === "undefined") {\n' +
-    '  __vue_options__.name = ' + JSON.stringify(path.parse(filePath).name) + '\n' +
-    '}'
-
-  // add require for template
+  // <template>
+  output += '  /* template */\n  '
   var template = parts.template
   if (template) {
-    output += '\n/* template */\n'
-    output += 'var __vue_template__ = ' + (
-      template.src
-        ? getRequireForImport('template', template)
-        : getRequire('template', template)
-    )
-    // attach render functions to exported options
-    exports +=
-      '__vue_options__.render = __vue_template__.render\n' +
-      '__vue_options__.staticRenderFns = __vue_template__.staticRenderFns\n'
+    output += template.src
+      ? getRequireForImport('template', template)
+      : getRequire('template', template)
+  } else {
+    output += 'null'
   }
+  output += ',\n'
 
-  // attach scoped id
-  if (hasScoped) {
-    exports += '__vue_options__._scopeId = "' + moduleId + '"\n'
-  }
+  // scopeId
+  output += '  /* scopeId */\n  '
+  output += (hasScoped ? JSON.stringify(moduleId) : 'null') + ',\n'
 
+  // cssModules
+  output += '  /* cssModules */\n  '
   if (Object.keys(cssModules).length) {
     // inject style modules as computed properties
-    exports +=
-      'if (!__vue_options__.computed) __vue_options__.computed = {}\n' +
-      'Object.keys(__vue_styles__).forEach(function (key) {\n' +
-        'var module = __vue_styles__[key]\n' +
-        '__vue_options__.computed[key] = function () { return module }\n' +
-      '})\n'
+    output += 'cssModules'
+  } else {
+    output += 'null'
+  }
+  output += '\n'
+
+  // close normalizeComponent call
+  output += ')\n'
+
+  // development-only code
+  if (!isProduction) {
+    // add filename in dev
+    output += 'Component.options.__file = ' + JSON.stringify(filePath) + '\n'
+    // check functional components used with templates
+    if (template) {
+      output +=
+        'if (Component.options.functional) {' +
+          'console.error("' +
+          '[vue-loader] ' + fileName + ': functional components are not ' +
+          'supported with templates, they should use render functions.' +
+        '")}\n'
+    }
   }
 
   if (!query.inject) {
-    output += exports
     // hot reload
     if (
       !isServer &&
@@ -325,37 +330,25 @@ module.exports = function (content) {
         '  module.hot.accept()\n' +
         '  if (!module.hot.data) {\n' +
         // initial insert
-        '    hotAPI.createRecord("' + moduleId + '", __vue_options__)\n' +
+        '    hotAPI.createRecord("' + moduleId + '", Component.options)\n' +
         '  } else {\n' +
         // update
-        '    hotAPI.reload("' + moduleId + '", __vue_options__)\n' +
+        '    hotAPI.reload("' + moduleId + '", Component.options)\n' +
         '  }\n' +
         '})()}\n'
     }
-    // check functional components used with templates
-    if (!isProduction) {
-      output +=
-        'if (__vue_options__.functional && typeof __vue_template__ !== "undefined") {' +
-          'console.error("' +
-          `[vue-loader] ${fileName}: functional components are not ` +
-          'supported with templates, they should use render functions.' +
-        '")}\n'
-    }
     // final export
     if (options.esModule) {
-      output += '\nexports.__esModule = true;\nexports["default"] = __vue_exports__\n'
+      output += '\nexports.__esModule = true;\nexports["default"] = Component.exports\n'
     } else {
-      output += '\nmodule.exports = __vue_exports__\n'
+      output += '\nmodule.exports = Component.exports\n'
     }
   } else {
     // inject-loader support
-    output +=
+    output =
       '\n/* dependency injection */\n' +
-      'module.exports = function (injections) {\n' +
-      '  __vue_exports__ = __vue_exports__(injections)\n' +
-      exports +
-      '  return __vue_exports__\n' +
-      '}'
+      'module.exports = function (injections) {\n' + output + '\n' +
+      '\nreturn Component.exports\n}'
   }
 
   // done