Rewrite code generation using SourceMaps

Author: jolting

e2e/__projects__/basic/__snapshots__/test.js.snap

@@ -31,7 +31,6 @@ var _default = {
   }
 };
 exports[\\"default\\"] = _default;
-;
 \\"use strict\\";
 Object.defineProperty(exports, \\"__esModule\\", { value: true });
 var vue_1 = require(\\"vue\\");
@@ -42,9 +41,7 @@ function render(_ctx, _cache) {
     ]));
 }
 exports.render = render;
-;
-;exports.default = {...exports.default, render};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2ljLnZ1ZSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFIQTtBQUtBO0FBUEE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBakJBIiwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiaGVsbG9cIj5cbiAgICA8aDEgOmNsYXNzPVwiaGVhZGluZ0NsYXNzZXNcIj57eyBtc2cgfX08L2gxPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBtb2R1bGU9XCJjc3NcIj5cbi50ZXN0QSB7XG4gIGJhY2tncm91bmQtY29sb3I6IHJlZDtcbn1cbjwvc3R5bGU+XG48c3R5bGUgbW9kdWxlPlxuLnRlc3RCIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTtcbn1cbjwvc3R5bGU+XG48c3R5bGU+XG4udGVzdEMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlO1xufVxuPC9zdHlsZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgbmFtZTogJ2Jhc2ljJyxcbiAgY29tcHV0ZWQ6IHtcbiAgICBoZWFkaW5nQ2xhc3NlczogZnVuY3Rpb24gaGVhZGluZ0NsYXNzZXMoKSB7XG4gICAgICByZXR1cm4ge1xuICAgICAgICByZWQ6IHRoaXMuaXNDcmF6eSxcbiAgICAgICAgYmx1ZTogIXRoaXMuaXNDcmF6eSxcbiAgICAgICAgc2hhZG93OiB0aGlzLmlzQ3JhenlcbiAgICAgIH1cbiAgICB9XG4gIH0sXG4gIGRhdGE6IGZ1bmN0aW9uIGRhdGEoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG1zZzogJ1dlbGNvbWUgdG8gWW91ciBWdWUuanMgQXBwJyxcbiAgICAgIGlzQ3Jhenk6IGZhbHNlXG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgdG9nZ2xlQ2xhc3M6IGZ1bmN0aW9uIHRvZ2dsZUNsYXNzKCkge1xuICAgICAgdGhpcy5pc0NyYXp5ID0gIXRoaXMuaXNDcmF6eVxuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG4iXX0="
+;exports.default = {...exports.default, render};"
 `;
 
 exports[`generates source maps using src attributes 1`] = `
@@ -78,7 +75,6 @@ var _default = {
   }
 };
 exports[\\"default\\"] = _default;
-;
 \\"use strict\\";
 Object.defineProperty(exports, \\"__esModule\\", { value: true });
 var vue_1 = require(\\"vue\\");
@@ -89,7 +85,5 @@ function render(_ctx, _cache) {
     ]));
 }
 exports.render = render;
-;
-;exports.default = {...exports.default, render};
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNvdXJjZU1hcHNTcmMudnVlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUhBO0FBS0E7QUFQQTtBQVNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSEE7QUFqQkEiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdiYXNpYycsXG4gIGNvbXB1dGVkOiB7XG4gICAgaGVhZGluZ0NsYXNzZXM6IGZ1bmN0aW9uIGhlYWRpbmdDbGFzc2VzKCkge1xuICAgICAgcmV0dXJuIHtcbiAgICAgICAgcmVkOiB0aGlzLmlzQ3JhenksXG4gICAgICAgIGJsdWU6ICF0aGlzLmlzQ3JhenksXG4gICAgICAgIHNoYWRvdzogdGhpcy5pc0NyYXp5XG4gICAgICB9XG4gICAgfVxuICB9LFxuICBkYXRhOiBmdW5jdGlvbiBkYXRhKCkge1xuICAgIHJldHVybiB7XG4gICAgICBtc2c6ICdXZWxjb21lIHRvIFlvdXIgVnVlLmpzIEFwcCcsXG4gICAgICBpc0NyYXp5OiBmYWxzZVxuICAgIH1cbiAgfSxcbiAgbWV0aG9kczoge1xuICAgIHRvZ2dsZUNsYXNzOiBmdW5jdGlvbiB0b2dnbGVDbGFzcygpIHtcbiAgICAgIHRoaXMuaXNDcmF6eSA9ICF0aGlzLmlzQ3JhenlcbiAgICB9XG4gIH1cbn1cbiJdfQ=="
+;exports.default = {...exports.default, render};"
 `;

lib/generate-code.js

@@ -1,31 +1,37 @@
-module.exports = function generateCode(
-  { scriptResult, scriptSetupResult },
-  templateResult,
-  stylesResult,
-  customBlocksResult,
-  isFunctional
-) {
-  let output = ''
+const { SourceNode, SourceMapConsumer } = require('source-map')
 
-  if (scriptResult) {
-    output += `${scriptResult.code};\n`
+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)
+    }
   }
+}
 
-  if (scriptSetupResult) {
-    output += `${scriptSetupResult.code};\n`
-  }
+module.exports = function generateCode(
+  scriptResult,
+  scriptSetupResult,
+  templateResult,
+  filename
+) {
+  var node = new SourceNode(null, null, null)
+  addToSourceMap(node, scriptResult)
+  addToSourceMap(node, scriptSetupResult)
+  addToSourceMap(node, templateResult)
 
-  if (templateResult) {
-    output += `${templateResult.code};\n`
-  }
+  var tempOutput = node.toString()
 
-  if (output.includes('exports.render = render;')) {
-    output += ';exports.default = {...exports.default, render};'
+  if (tempOutput.includes('exports.render = render;')) {
+    node.add(';exports.default = {...exports.default, render};')
   } else {
-    output += ';exports.default = {...exports.default};'
-  }
-
-  return {
-    code: output
+    node.add(';exports.default = {...exports.default};')
   }
+  return node.toStringWithSourceMap({ file: filename })
 }

lib/generate-source-map.js

@@ -0,0 +1,55 @@
+const { SourceMapGenerator, SourceMapConsumer } = require('source-map')
+
+// based on @vue/compiler-sfc mapLines
+module.exports = function mapLines(oldMap, newMap) {
+  if (!oldMap) return newMap
+  if (!newMap) return oldMap
+
+  const oldMapConsumer = new SourceMapConsumer(oldMap)
+  const newMapConsumer = new SourceMapConsumer(newMap)
+  const mergedMapGenerator = new SourceMapGenerator()
+
+  newMapConsumer.eachMapping(m => {
+    if (m.originalLine == null) {
+      return
+    }
+
+    const origPosInOldMap = oldMapConsumer.originalPositionFor({
+      line: m.originalLine,
+      column: m.originalColumn
+    })
+
+    if (origPosInOldMap.source == null) {
+      return
+    }
+
+    mergedMapGenerator.addMapping({
+      generated: {
+        line: m.generatedLine,
+        column: m.generatedColumn
+      },
+      original: {
+        line: origPosInOldMap.line, // map line
+        // use current column, since the oldMap produced by @vue/compiler-sfc
+        // does not
+        column: m.originalColumn
+      },
+      source: origPosInOldMap.source,
+      name: origPosInOldMap.name
+    })
+  })
+
+  // source-map's type definition is incomplete
+  const generator = mergedMapGenerator
+  oldMapConsumer.sources.forEach(sourceFile => {
+    generator._sources.add(sourceFile)
+    const sourceContent = oldMapConsumer.sourceContentFor(sourceFile)
+    if (sourceContent != null) {
+      mergedMapGenerator.setSourceContent(sourceFile, sourceContent)
+    }
+  })
+
+  generator._sourceRoot = oldMap.sourceRoot
+  generator._file = oldMap.file
+  return generator.toJSON()
+}

lib/map-lines.js

@@ -1,22 +1,19 @@
 const { parse, compileTemplate, compileScript } = require('@vue/compiler-sfc')
 const { transform } = require('@babel/core')
-const convertSourceMap = require('convert-source-map')
 const babelTransformer = require('babel-jest')
 
-const generateSourceMap = require('./generate-source-map')
 const typescriptTransformer = require('./transformers/typescript')
 const coffeescriptTransformer = require('./transformers/coffee')
-const _processStyle = require('./process-style')
-const processCustomBlocks = require('./process-custom-blocks')
+// const _processStyle = require('./process-style')
+// const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const getTsJestConfig = require('./utils').getTsJestConfig
 const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
 const getCustomTransformer = require('./utils').getCustomTransformer
 const loadSrc = require('./utils').loadSrc
 const generateCode = require('./generate-code')
-
-const splitRE = /\r?\n/g
+const mapLines = require('./map-lines')
 
 function resolveTransformer(lang = 'js', vueJestConfig) {
   const transformer = getCustomTransformer(vueJestConfig['transform'], lang)
@@ -45,6 +42,7 @@ function processScript(scriptPart, filePath, config) {
 
   const result = transformer.process(scriptPart.content, filePath, config)
   result.code = stripInlineSourceMap(result.code)
+  result.map = mapLines(scriptPart.map, result.map)
   result.externalSrc = externalSrc
   return result
 }
@@ -61,7 +59,6 @@ function processScriptSetup(descriptor, filePath, config) {
   )
 
   const result = transformer.process(content.content, filePath, config)
-  result.code = stripInlineSourceMap(result.code)
   return result
 }
 
@@ -114,6 +111,7 @@ function processTemplate(descriptor, filename, config) {
   }
 }
 
+/*
 function processStyle(styles, filename, config) {
   if (!styles) {
     return null
@@ -128,51 +126,31 @@ function processStyle(styles, filename, config) {
 
   return filteredStyles.length ? filteredStyles : null
 }
+*/
 
 module.exports = function(src, filename, config) {
-  const { descriptor } = parse(src)
+  const { descriptor } = parse(src, { filename })
 
   const templateResult = processTemplate(descriptor, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const scriptSetupResult = processScriptSetup(descriptor, filename, config)
+  /*
   const stylesResult = processStyle(descriptor.styles, filename, config)
   const customBlocksResult = processCustomBlocks(
     descriptor.customBlocks,
     filename,
     config
   )
-
-  const isFunctional =
-    descriptor.template &&
-    descriptor.template.attrs &&
-    descriptor.template.attrs.functional
-
-  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
-  )
-
-  const map = generateSourceMap(
     scriptResult,
-    src,
-    filename,
-    output.renderFnStartLine,
-    output.renderFnEndLine,
-    templateLine
+    scriptSetupResult,
+    templateResult,
+    filename
   )
 
-  if (map) {
-    output.code += '\n' + convertSourceMap.fromJSON(map.toString()).toComment()
-  }
-
   return {
     code: output.code,
-    map: map && map.toJSON()
+    map: output.map.toString()
   }
 }