add source map support

vuejs · Jun 19, 2016 · beedf57 · beedf57
1 parent a916805
commit beedf57
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 13 deletions.
diff --git a/index.js b/index.js
@@ -8,6 +8,9 @@ compiler.loadConfig({
 module.exports = function vueify (file, options) {
   if (!/.vue$/.test(file)) return through()
   compiler.applyConfig(options)
+  compiler.applyConfig({
+    sourceMap: options._flags.debug
+  })
 
   var data = ''
   var stream = through(write, end)

diff --git a/lib/compiler.js b/lib/compiler.js
@@ -5,25 +5,28 @@ var hash = require('hash-sum')
 var assign = require('object-assign')
 var Emitter = require('events').EventEmitter
 var vueCompiler = require('vue-template-compiler')
+var sourceMap = require('source-map')
+var convert = require('convert-source-map')
 
 var genId = require('./gen-id')
 var normalize = require('./normalize')
 var compilers = require('./compilers')
 var rewriteStyle = require('./style-rewriter')
 
+// determine dynamic script paths
+var hotReloadAPIPath = 'vue-hot-reload-api' //normalize.dep('vue-hot-reload-api')
+var insertCSSPath = normalize.lib('insert-css')
+
 var hasBabel = true
 try {
   require('babel-core')
 } catch (e) {
   hasBabel = false
 }
 
+var splitRE = /\r?\n/g
 var resolvedPartsCache = Object.create(null)
 
-// determine dynamic script paths
-var hotReloadAPIPath = 'vue-hot-reload-api' //normalize.dep('vue-hot-reload-api')
-var insertCSSPath = normalize.lib('insert-css')
-
 // expose compiler
 var compiler = module.exports = new Emitter()
 compiler.setMaxListeners(Infinity)
@@ -90,6 +93,7 @@ compiler.compile = function (content, filePath, cb) {
     var templateChanged = resolvedParts.template !== prevParts.template
 
     var output = ''
+    var map = null
     // styles
     var style = resolvedParts.styles.join('\n')
     if (style) {
@@ -107,8 +111,11 @@ compiler.compile = function (content, filePath, cb) {
     // script
     var script = resolvedParts.script
     if (script) {
+      if (options.sourceMap) {
+        map = generateSourceMap(script, output)
+      }
       output +=
-        ';(function(){' + script + '})()\n' +
+        ';(function(){\n' + script + '\n})()\n' +
         // babel 6 compat
         'if (module.exports.__esModule) module.exports = module.exports.default\n'
     }
@@ -153,8 +160,46 @@ compiler.compile = function (content, filePath, cb) {
         '  }\n' +
         '})()}'
     }
+    if (map) {
+      output += '\n' + convert.fromJSON(map.toString()).toComment()
+    }
     cb(null, output)
   }
+
+  function generateSourceMap (script, output) {
+    // hot-reload source map busting
+    var hashedFilename = path.basename(filePath) + '?' + hash(filePath + content)
+    var map = new sourceMap.SourceMapGenerator()
+    map.setSourceContent(hashedFilename, content)
+    // check input source map from babel/coffee etc
+    var inMap = resolvedParts.map
+    var inMapConsumer = inMap && new sourceMap.SourceMapConsumer(inMap)
+    var generatedOffset = (output ? output.split(splitRE).length : 0) + 1
+    var originalOffset = content.slice(0, parts.script.start).split(splitRE).length - 1
+    script.split(splitRE).forEach(function (line, index) {
+      var ln = index + 1
+      var originalLine = inMapConsumer
+        ? inMapConsumer.originalPositionFor({
+            line: ln,
+            column: 0
+          }).line
+        : ln
+      if (originalLine) {
+        map.addMapping({
+          source: hashedFilename,
+          generated: {
+            line: ln + generatedOffset,
+            column: 0
+          },
+          original: {
+            line: originalLine + originalOffset,
+            column: 0
+          }
+        })
+      }
+    })
+    return map
+  }
 }
 
 function processTemplate (part, filePath, parts) {
@@ -183,7 +228,12 @@ function processScript (part, filePath, parts) {
   var script = getContent(part, filePath)
   return compileAsPromise('script', script, lang, filePath)
     .then(function (res) {
-      parts.script = res
+      if (typeof res === 'string') {
+        parts.script = res
+      } else {
+        parts.script = res.code
+        parts.map = res.map
+      }
     })
 }
 
@@ -242,3 +292,7 @@ function compileAsPromise (type, source, lang, filePath) {
 function toFunction (code) {
   return 'function(){' + code + '}'
 }
+
+function generateSourceMap (script, output, content, parts) {
+
+}
diff --git a/lib/compilers/babel.js b/lib/compilers/babel.js
@@ -1,5 +1,6 @@
 var fs = require('fs')
 var path = require('path')
+var assign = require('object-assign')
 var ensureRequire = require('../ensure-require')
 
 var defaultBabelOptions = {
@@ -35,12 +36,16 @@ if (babelOptions === defaultBabelOptions) {
   }
 }
 
-module.exports = function (raw, cb, compiler) {
+module.exports = function (raw, cb, compiler, filePath) {
   try {
     var babel = require('babel-core')
-    var res = babel.transform(raw, compiler.options.babel || babelOptions)
+    var options = assign({
+      filename: filePath,
+      sourceMaps: compiler.options.sourceMap
+    }, compiler.options.babel || babelOptions)
+    var res = babel.transform(raw, options)
   } catch (err) {
     return cb(err)
   }
-  cb(null, res.code)
+  cb(null, res)
 }
diff --git a/lib/compilers/coffee.js b/lib/compilers/coffee.js
@@ -3,12 +3,20 @@ var ensureRequire = require('../ensure-require.js')
 module.exports = function (raw, cb, compiler) {
   ensureRequire('coffee', ['coffee-script'])
   var coffee = require('coffee-script')
+  var compiled
   try {
-    var js = coffee.compile(raw, compiler.options.coffee || {
-      bare: true
+    compiled = coffee.compile(raw, compiler.options.coffee || {
+      bare: true,
+      sourceMap: compiler.options.sourceMap
     })
   } catch (err) {
     return cb(err)
   }
-  cb(null, js)
+  if (compiler.options.sourceMap) {
+    compiled = {
+      code: compiled.js,
+      map: compiled.v3SourceMap
+    }
+  }
+  cb(null, compiled)
 }
diff --git a/package.json b/package.json
@@ -22,12 +22,14 @@
   "homepage": "https://github.com/vuejs/vueify",
   "dependencies": {
     "chalk": "^1.1.1",
+    "convert-source-map": "^1.2.0",
     "cssnano": "^3.3.2",
     "hash-sum": "^1.0.2",
     "lru-cache": "^4.0.0",
     "object-assign": "^4.0.1",
     "postcss": "^5.0.10",
     "postcss-selector-parser": "^2.0.0",
+    "source-map": "^0.5.6",
     "through": "^2.3.6",
     "vue-hot-reload-api": "^2.0.1",
     "vue-template-compiler": "^2.0.0-alpha.3"

diff --git a/plugins/extract-css.js b/plugins/extract-css.js
@@ -1,7 +1,9 @@
 var fs = require('fs')
 var compiler = require('../lib/compiler')
 
-compiler.options.extractCSS = true
+compiler.applyConfig({
+  extractCSS: true
+})
 
 module.exports = function (b, opts) {
   var outPath = opts.out || opts.o || 'bundle.css'