Revert vuejs#486

e2e/2.x/basic/__snapshots__/test.js.snap

@@ -2,11 +2,10 @@
 
 exports[`generates source maps for .vue files 1`] = `
 {
-  "file": "./components/Basic.vue",
-  "mappings": ";;;;;;eAuBe;AACb,MAAI,EAAE,OADO;AAEb,UAAQ,EAAE;AACR,kBAAc,EAAE,SAAS,cAAT,GAA0B;AACxC,aAAO;AACL,WAAG,EAAE,KAAK,OADL;AAEL,YAAI,EAAE,CAAC,KAAK,OAFP;AAGL,cAAM,EAAE,KAAK;AAHR,OAAP;AAKD;AAPO,GAFG;AAWb,MAAI,EAAE,SAAS,IAAT,GAAgB;AACpB,WAAO;AACL,SAAG,EAAE,4BADA;AAEL,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBb,SAAO,EAAE;AACP,eAAW,EAAE,SAAS,WAAT,GAAuB;AAClC,WAAK,OAAL,GAAe,CAAC,KAAK,OAArB;AACD;AAHM;AAjBI",
+  "mappings": ";;;;;;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA;;;;AAvBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA",
   "names": [],
   "sources": [
-    "components/Basic.vue",
+    "Basic.vue",
   ],
   "sourcesContent": [
     "<template>
@@ -64,21 +63,8 @@ export default {
 
 exports[`generates source maps using src attributes 1`] = `
 {
-  "file": "./components/SourceMapsSrc.vue",
-  "mappings": ";;;;;;eAAe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C",
-  "names": [
-    "name",
-    "computed",
-    "headingClasses",
-    "red",
-    "isCrazy",
-    "blue",
-    "shadow",
-    "data",
-    "msg",
-    "methods",
-    "toggleClass",
-  ],
+  "mappings": ";;;;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA",
+  "names": [],
   "sources": [
     "SourceMapsSrc.vue",
   ],

e2e/2.x/basic/test.js

@@ -58,7 +58,7 @@ test('generates source maps for .vue files', () => {
     config
   })
 
-  expect(JSON.parse(map)).toMatchSnapshot()
+  expect(map).toMatchSnapshot()
 })
 
 test('generates source maps using src attributes', () => {
@@ -71,7 +71,7 @@ test('generates source maps using src attributes', () => {
 
   const { map } = jestVue.process(fileString, filePath, { config })
 
-  expect(JSON.parse(map)).toMatchSnapshot()
+  expect(map).toMatchSnapshot()
 })
 
 test('processes .vue file using jsx', () => {

packages/vue2-jest/lib/generate-code.js

@@ -1,66 +1,50 @@
 const namespace = require('./constants').vueOptionsNamespace
-const { SourceNode, SourceMapConsumer } = require('source-map')
 
-function addToSourceMap(node, result) {
-  if (result && result.code) {
-    if (result.map) {
-      node.add(
-        SourceNode.fromStringWithSourceMap(
-          result.code,
-          new SourceMapConsumer(result.map)
-        )
-      )
-    } else {
-      node.add(result.code)
-    }
-  }
-}
+const splitRE = /\r?\n/g
 
 module.exports = function generateCode(
   scriptResult,
-  scriptSetupResult,
   templateResult,
   stylesResult,
   customBlocksResult,
-  isFunctional,
-  filename
+  isFunctional
 ) {
-  var node = new SourceNode(null, null)
+  let output = ''
+  let renderFnStartLine
+  let renderFnEndLine
 
-  if (scriptResult || scriptSetupResult) {
-    scriptResult && addToSourceMap(node, scriptResult)
-    scriptSetupResult && addToSourceMap(node, scriptSetupResult)
+  if (scriptResult) {
+    output += `${scriptResult.code};\n`
   } else {
-    node.add(
+    output +=
       `Object.defineProperty(exports, "__esModule", {\n` +
-        `  value: true\n` +
-        `});\n` +
-        'module.exports.default = {};\n'
-    )
+      `  value: true\n` +
+      `});\n` +
+      'module.exports.default = {};\n'
   }
 
-  node.add(
+  output +=
     `var ${namespace} = typeof exports.default === 'function' ` +
-      `? exports.default.options ` +
-      `: exports.default\n`
-  )
+    `? exports.default.options ` +
+    `: exports.default\n`
 
   if (templateResult) {
-    addToSourceMap(node, templateResult)
-
-    node.replaceRight(
+    renderFnStartLine = output.split(splitRE).length
+    templateResult.code = templateResult.code.replace(
       'var _c = _vm._self._c || _h',
       '/* istanbul ignore next */\nvar _c = _vm._self._c || _h'
     )
+    output += `${templateResult.code}\n`
 
-    node.add(
-      `\n__options__.render = render\n` +
-        `${namespace}.staticRenderFns = staticRenderFns\n`
-    )
+    renderFnEndLine = output.split(splitRE).length
+
+    output +=
+      `__options__.render = render\n` +
+      `${namespace}.staticRenderFns = staticRenderFns\n`
 
     if (isFunctional) {
-      node.add(`${namespace}.functional = true\n`)
-      node.add(`${namespace}._compiled = true\n`)
+      output += `${namespace}.functional = true\n`
+      output += `${namespace}._compiled = true\n`
     }
   }
 
@@ -75,32 +59,33 @@ module.exports = function generateCode(
           `this['${moduleName}'], ${code});\n`
       )
       .join('')
-
     if (isFunctional) {
-      node.add(
+      output +=
         `;(function() {\n` +
-          `  var originalRender = ${namespace}.render\n` +
-          `  var styleFn = function () { ${styleStr} }\n` +
-          `  ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
-          `    styleFn.call(context)\n` +
-          `    return originalRender(h, context)\n` +
-          `  }\n` +
-          `})()\n`
-      )
+        `  var originalRender = ${namespace}.render\n` +
+        `  var styleFn = function () { ${styleStr} }\n` +
+        `  ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
+        `    styleFn.call(context)\n` +
+        `    return originalRender(h, context)\n` +
+        `  }\n` +
+        `})()\n`
     } else {
-      node.add(
+      output +=
         `;(function() {\n` +
-          `  var beforeCreate = ${namespace}.beforeCreate\n` +
-          `  var styleFn = function () { ${styleStr} }\n` +
-          `  ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
-          `})()\n`
-      )
+        `  var beforeCreate = ${namespace}.beforeCreate\n` +
+        `  var styleFn = function () { ${styleStr} }\n` +
+        `  ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
+        `})()\n`
     }
   }
 
   if (customBlocksResult) {
-    node.add(`;\n ${customBlocksResult}`)
+    output += `;\n ${customBlocksResult}`
   }
 
-  return node.toStringWithSourceMap({ file: filename })
+  return {
+    code: output,
+    renderFnStartLine,
+    renderFnEndLine
+  }
 }

packages/vue2-jest/lib/generate-source-map.js

@@ -0,0 +1,69 @@
+const path = require('path')
+const sourceMap = require('source-map')
+const splitRE = /\r?\n/g
+
+module.exports = function generateSourceMap(
+  scriptResult,
+  src,
+  filename,
+  renderFnStartLine,
+  renderFnEndLine,
+  templateLine
+) {
+  const file = path.basename(filename)
+  const map = new sourceMap.SourceMapGenerator()
+
+  const scriptFromExternalSrc = scriptResult && scriptResult.externalSrc
+
+  // If script uses external file for content (using the src attribute) then
+  // map result to this file, instead of original.
+  const srcContent = scriptFromExternalSrc ? scriptResult.externalSrc : src
+
+  map.setSourceContent(file, srcContent)
+  if (scriptResult) {
+    let inputMapConsumer =
+      scriptResult.map && new sourceMap.SourceMapConsumer(scriptResult.map)
+    scriptResult.code.split(splitRE).forEach(function(line, index) {
+      let ln = index + 1
+      let originalLine = inputMapConsumer
+        ? inputMapConsumer.originalPositionFor({ line: ln, column: 0 }).line
+        : ln
+      if (originalLine) {
+        map.addMapping({
+          source: file,
+          generated: {
+            line: ln,
+            column: 0
+          },
+          original: {
+            line: originalLine,
+            column: 0
+          }
+        })
+      }
+    })
+  }
+
+  // If script is from external src then the source map will only show the
+  // script section. We won't map the generated render function to this file,
+  // because the coverage report would be confusing
+  if (scriptFromExternalSrc) {
+    return map
+  }
+
+  for (; renderFnStartLine < renderFnEndLine; renderFnStartLine++) {
+    map.addMapping({
+      source: file,
+      generated: {
+        line: renderFnStartLine,
+        column: 0
+      },
+      original: {
+        line: templateLine,
+        column: 0
+      }
+    })
+  }
+
+  return map
+}

packages/vue2-jest/lib/process.js

@@ -9,8 +9,11 @@ const getCustomTransformer = require('./utils').getCustomTransformer
 const loadSrc = require('./utils').loadSrc
 const babelTransformer = require('babel-jest').default
 const generateCode = require('./generate-code')
+const generateSourceMap = require('./generate-source-map')
 const mapLines = require('./map-lines')
 
+const splitRE = /\r?\n/g
+
 let isVue27 = false
 let compilerUtils
 
@@ -166,18 +169,28 @@ module.exports = function(src, filename, config) {
       descriptor.script.content &&
       /functional:\s*true/.test(descriptor.script.content))
 
+  const templateStart = descriptor.template && descriptor.template.start
+  const templateLine = src.slice(0, templateStart).split(splitRE).length
+
   const output = generateCode(
     scriptResult,
-    scriptSetupResult,
     templateResult,
     stylesResult,
     customBlocksResult,
-    isFunctional,
-    filename
+    isFunctional
   )
 
+  const map = generateSourceMap(
+    scriptResult,
+    src,
+    filename,
+    output.renderFnStartLine,
+    output.renderFnEndLine,
+    templateLine
+  ).toJSON()
+
   return {
     code: output.code,
-    map: output.map.toString()
+    map
   }
 }