Fix source maps for vue2-jest (#486)

* Fix source maps for vue2-jest

* Remove duplicate append

* Fix snapshot paths to match github CI

.gitignore

@@ -27,3 +27,4 @@ pids
 package-lock.json
 /e2e/**/yarn.lock
 
+.vscode

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

@@ -2,35 +2,48 @@
 
 exports[`generates source maps for .vue files 1`] = `
 Object {
-  "mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;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;AAAA;AAAA",
-  "names": Array [],
+  "file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/Basic.vue",
+  "mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;eAEe;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": Array [
+    "name",
+    "computed",
+    "headingClasses",
+    "red",
+    "isCrazy",
+    "blue",
+    "shadow",
+    "data",
+    "msg",
+    "methods",
+    "toggleClass",
+  ],
   "sources": Array [
     "Basic.vue",
   ],
   "sourcesContent": Array [
-    "<template>
-  <div class=\\"hello\\">
-    <h1 :class=\\"headingClasses\\">{{ msg }}</h1>
-  </div>
-</template>
-
-<style module=\\"css\\">
-.testA {
-  background-color: red;
-}
-</style>
-<style module>
-.testB {
-  background-color: blue;
-}
-</style>
-<style>
-.testC {
-  background-color: blue;
-}
-</style>
+    "//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
-<script>
 export default {
   name: 'basic',
   computed: {
@@ -54,7 +67,6 @@ export default {
     }
   }
 }
-</script>
 ",
   ],
   "version": 3,
@@ -63,8 +75,21 @@ export default {
 
 exports[`generates source maps using src attributes 1`] = `
 Object {
-  "mappings": ";;;;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA",
-  "names": Array [],
+  "file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/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": Array [
+    "name",
+    "computed",
+    "headingClasses",
+    "red",
+    "isCrazy",
+    "blue",
+    "shadow",
+    "data",
+    "msg",
+    "methods",
+    "toggleClass",
+  ],
   "sources": Array [
     "SourceMapsSrc.vue",
   ],

e2e/2.x/basic/test.js

@@ -52,7 +52,7 @@ test('generates source maps for .vue files', () => {
     config
   })
 
-  expect(map).toMatchSnapshot()
+  expect(JSON.parse(map)).toMatchSnapshot()
 })
 
 test('generates source maps using src attributes', () => {
@@ -67,7 +67,7 @@ test('generates source maps using src attributes', () => {
     config
   })
 
-  expect(map).toMatchSnapshot()
+  expect(JSON.parse(map)).toMatchSnapshot()
 })
 
 test('processes .vue file using jsx', () => {

package.json

@@ -45,6 +45,10 @@
       "pre-commit": "lint-staged"
     }
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
   "lint-staged": {
     "*.{js,json,css,md,vue}": [
       "yarn format",

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

@@ -1,50 +1,64 @@
 const namespace = require('./constants').vueOptionsNamespace
+const { SourceNode, SourceMapConsumer } = require('source-map')
 
-const splitRE = /\r?\n/g
+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)
+    }
+  }
+}
 
 module.exports = function generateCode(
   scriptResult,
   templateResult,
   stylesResult,
   customBlocksResult,
-  isFunctional
+  isFunctional,
+  filename
 ) {
-  let output = ''
-  let renderFnStartLine
-  let renderFnEndLine
+  var node = new SourceNode(null, null)
 
   if (scriptResult) {
-    output += `${scriptResult.code};\n`
+    addToSourceMap(node, scriptResult)
   } else {
-    output +=
+    node.add(
       `Object.defineProperty(exports, "__esModule", {\n` +
-      `  value: true\n` +
-      `});\n` +
-      'module.exports.default = {};\n'
+        `  value: true\n` +
+        `});\n` +
+        'module.exports.default = {};\n'
+    )
   }
 
-  output +=
+  node.add(
     `var ${namespace} = typeof exports.default === 'function' ` +
-    `? exports.default.options ` +
-    `: exports.default\n`
+      `? exports.default.options ` +
+      `: exports.default\n`
+  )
 
   if (templateResult) {
-    renderFnStartLine = output.split(splitRE).length
-    templateResult.code = templateResult.code.replace(
+    addToSourceMap(node, templateResult)
+
+    node.replaceRight(
       'var _c = _vm._self._c || _h',
       '/* istanbul ignore next */\nvar _c = _vm._self._c || _h'
     )
-    output += `${templateResult.code}\n`
 
-    renderFnEndLine = output.split(splitRE).length
-
-    output +=
+    node.add(
       `__options__.render = render\n` +
-      `${namespace}.staticRenderFns = staticRenderFns\n`
+        `${namespace}.staticRenderFns = staticRenderFns\n`
+    )
 
     if (isFunctional) {
-      output += `${namespace}.functional = true\n`
-      output += `${namespace}._compiled = true\n`
+      node.add(`${namespace}.functional = true\n`)
+      node.add(`${namespace}._compiled = true\n`)
     }
   }
 
@@ -59,32 +73,32 @@ module.exports = function generateCode(
           `this['${moduleName}'], ${code});\n`
       )
       .join('')
+
     if (isFunctional) {
-      output +=
+      node.add(
         `;(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 {
-      output +=
+      node.add(
         `;(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) {
-    output += `;\n ${customBlocksResult}`
-  }
-  return {
-    code: output,
-    renderFnStartLine,
-    renderFnEndLine
+    node.add(`;\n ${customBlocksResult}`)
   }
+
+  return node.toStringWithSourceMap({ file: filename })
 }

packages/vue2-jest/lib/process.js

@@ -1,7 +1,4 @@
-const splitRE = /\r?\n/g
-
 const VueTemplateCompiler = require('vue-template-compiler')
-const generateSourceMap = require('./generate-source-map')
 const coffeescriptTransformer = require('./transformers/coffee')
 const _processStyle = require('./process-style')
 const processCustomBlocks = require('./process-custom-blocks')
@@ -115,28 +112,17 @@ 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,
     templateResult,
     stylesResult,
     customBlocksResult,
-    isFunctional
+    isFunctional,
+    filename
   )
 
-  const map = generateSourceMap(
-    scriptResult,
-    src,
-    filename,
-    output.renderFnStartLine,
-    output.renderFnEndLine,
-    templateLine
-  ).toJSON()
-
   return {
     code: output.code,
-    map
+    map: output.map.toString()
   }
 }