support registering custom compilers

yyx990803 · yyx990803 · commit 79193bd78b5d · 2015-04-09T14:31:52.000-04:00
diff --git a/compilers/index.js b/compilers/index.js
@@ -0,0 +1,58 @@
+// built-in compilers
+var compilers = module.exports = {
+  script: {
+    coffee: require('./coffee'),
+    es6: require('./es6')
+  },
+  style: {
+    less: require('./less'),
+    sass: require('./sass'),
+    scss: require('./sass'),
+    stylus: require('./stylus'),
+    myth: require('./myth')
+  },
+  template: {
+    jade: require('./jade')
+  }
+}
+
+// check for config file
+var fs = require('fs')
+var path = require('path')
+var configPath = path.resolve(process.cwd(), 'vue.config.js')
+if (fs.existsSync(configPath)) {
+  require(configPath)({
+    register: registerCompiler
+  })
+}
+
+/**
+ * Register a compiler for a given file extension.
+ *
+ * @param {Object} opts
+ *                 - extension {String}
+ *                 - type {String}
+ *                 - compile {Function}
+ */
+function registerCompiler (opts) {
+  if (!opts.extension) {
+    return warn('missing file extension')
+  }
+  if (!opts.type) {
+    return warn('missing file type')
+  }
+  if (!opts.compile || typeof opts.compile !== 'function') {
+    return warn('missing compile function')
+  }
+  if (!compilers[opts.type]) {
+    return warn(
+      'invalid file type: ' + opts.type +
+      ' (valid types: script|style|template)'
+    )
+  }
+  compilers[opts.type][opts.extension] = opts.compile
+}
+
+function warn (msg) {
+  console.warn('[vue-component-compiler] ' + msg);
+}
diff --git a/index.js b/index.js
@@ -6,23 +6,15 @@ var parse5 = require('parse5')
 var parser = new parse5.Parser()
 var serializer = new parse5.TreeSerializer()
 var async = require('async')
+var compilers = require('./compilers')
 
-var scriptLangs = [
-  'coffee',
-  'es6'
-]
-
-var styleLangs = [
-  'less',
-  'sass',
-  'stylus',
-  'myth'
-]
-
-var templateLangs = [
-  'jade'
-]
-
+/**
+ * Compile a .vue file.
+ *
+ * @param {String} content
+ * @param {String} [filePath]
+ * @param {Function} cb
+ */
 exports.compile = function (content, filePath, cb) {
   // path is optional
   if (typeof filePath === 'function') {
@@ -38,56 +30,68 @@ exports.compile = function (content, filePath, cb) {
   var output = ''
   var jobs = []
 
+  // parse the file into an HTML tree
   var fragment = parser.parseFragment(content)
+
+  // Walk through the top level nodes and check for their
+  // types & languages. If there are pre-processing needed,
+  // push it into a jobs list.
   fragment.childNodes.forEach(function (node) {
     switch (node.nodeName) {
+
+      // Tempalte
       case 'template':
         template = checkSrc(node, filePath) || serializeTemplate(node)
         var lang = checkLang(node)
-        if (templateLangs.indexOf(lang) < 0) {
+        var compiler = compilers.template[lang]
+        if (!compiler) {
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(template, function (err, res) {
+          compiler(template, function (err, res) {
             template = res
             cb(err)
           })
         })
         break
+
+      // Style
       case 'style':
         var rawStyle = checkSrc(node, filePath) || serializer.serialize(node)
         var lang = checkLang(node)
-        if (lang === 'scss') {
-          lang = 'sass'
-        }
-        if (styleLangs.indexOf(lang) < 0) {
+        var compiler = compilers.style[lang]
+        if (!compiler) {
           style += rawStyle
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(rawStyle, function (err, res) {
+          compiler(rawStyle, function (err, res) {
             style += res
             cb(err)
           })
         })
         break
+
+      // Script
       case 'script':
         var rawScript = checkSrc(node, filePath) || serializer.serialize(node).trim()
         var lang = checkLang(node)
-        if (scriptLangs.indexOf(lang) < 0) {
+        var compiler = compilers.script[lang]
+        if (!compiler) {
           script += (script ? '\n' : '') + rawScript
           break
         }
         jobs.push(function (cb) {
-          require('./compilers/' + lang)(rawScript, function (err, res) {
+          compiler(rawScript, function (err, res) {
             script += (script ? '\n' : '') + res
             cb(err)
           })
         })
         break
     }
   })
-
+  
+  // process all pre-processing jobs in parallel
   async.parallel(jobs, function (err) {
     if (err) return cb(err)
     // style
@@ -119,6 +123,12 @@ exports.compile = function (content, filePath, cb) {
   })
 }
 
+/**
+ * Check the lang attribute of a parse5 node.
+ *
+ * @param {Node} node
+ * @return {String|undefined}
+ */
 function checkLang (node) {
   if (node.attrs) {
     var i = node.attrs.length
@@ -131,6 +141,15 @@ function checkLang (node) {
   }
 }
 
+/**
+ * Check src import for a node, relative to the filePath if
+ * available. Using readFileSync for now since this is a
+ * rare use case.
+ *
+ * @param {Node} node
+ * @param {String} filePath
+ * @return {String}
+ */
 function checkSrc (node, filePath) {
   var dir = path.dirname(filePath)
   if (node.attrs) {
diff --git a/package.json b/package.json
@@ -27,12 +27,12 @@
     "parse5": "^1.1.4"
   },
   "devDependencies": {
-    "babel": "^4.4.5",
+    "babel": "^5.0.12",
     "coffee-script": "^1.9.1",
     "jade": "^1.9.2",
-    "less": "^2.4.0",
+    "less": "^2.5.0",
     "mocha": "^2.1.0",
-    "myth": "^1.3.0",
+    "myth": "^1.4.0",
     "node-sass": "^2.0.1",
     "stylus": "^0.50.0"
   }
diff --git a/test/expects/multiple-scripts.js b/test/expects/multiple-scripts.js
@@ -7,6 +7,6 @@ b = x(function() {
 
 "use strict";
 
-var p = function (x) {
+var p = function p(x) {
   return x || 5;
 };
