Reimplement input sourcemap merging.

packages/babel-core/src/transformation/file/merge-map.js

@@ -3,53 +3,270 @@
 import type { SourceMap } from "convert-source-map";
 import sourceMap from "source-map";
 
-export default function mergeSourceMap(
+export default function mergeSourceMap2(
   inputMap: SourceMap,
   map: SourceMap,
 ): SourceMap {
-  const inputMapConsumer = new sourceMap.SourceMapConsumer(inputMap);
-  const outputMapConsumer = new sourceMap.SourceMapConsumer(map);
+  const input = buildMappingData(inputMap);
+  const output = buildMappingData(map);
 
-  const mergedGenerator = new sourceMap.SourceMapGenerator({
-    file: inputMapConsumer.file,
-    sourceRoot: inputMapConsumer.sourceRoot,
-  });
+  // Babel-generated maps always map to a single input filename.
+  if (output.sources.length !== 1) {
+    throw new Error("Assertion failure - expected a single output file");
+  }
+  const defaultSource = output.sources[0];
 
-  // This assumes the output map always has a single source, since Babel always compiles a
-  // single source file to a single output file.
-  const source = outputMapConsumer.sources[0];
+  const mergedGenerator = new sourceMap.SourceMapGenerator();
+  for (const { source } of input.sources) {
+    if (typeof source.content === "string") {
+      mergedGenerator.setSourceContent(source.path, source.content);
+    }
+  }
 
-  inputMapConsumer.eachMapping(function(mapping) {
-    const generatedPosition = outputMapConsumer.generatedPositionFor({
-      line: mapping.generatedLine,
-      column: mapping.generatedColumn,
-      source: source,
-    });
-    if (generatedPosition.line != null && generatedPosition.column != null) {
-      const generated = {
-        line: generatedPosition.line,
-        column: generatedPosition.column,
-      };
+  const mappedGeneratedLocations = new Set();
+
+  // Process each generated range in the input map, e.g. each range over the
+  // code that Babel was originally given.
+  eachInputGeneratedRange(input, (generated, original, source) => {
+    // Then pick out each range over Babel's _output_ that corresponds with
+    // the given range on the code given to Babel.
+    eachOverlappingGeneratedOutputRange(defaultSource, generated, item => {
+      // It's possible that multiple input ranges will overlap the same
+      // generated range. Since sourcemap don't traditionally represent
+      // generated locations with multiple original locations, we explicitly
+      // skip generated locations once we've seen them the first time.
+      const key = JSON.stringify(item);
+      if (mappedGeneratedLocations.has(key)) return;
+      mappedGeneratedLocations.add(key);
 
       mergedGenerator.addMapping({
-        source: mapping.source,
+        source: source.path,
+        original: {
+          line: original.line,
+          column: original.column,
+        },
+        generated: {
+          line: item.line,
+          column: item.column,
+        },
+        name: original.name,
+      });
+    });
+  });
 
-        original:
-          mapping.source == null
-            ? null
-            : {
-                line: mapping.originalLine,
-                column: mapping.originalColumn,
-              },
+  const result = mergedGenerator.toJSON();
+  // addMapping expects a relative path, and setSourceContent expects an
+  // absolute path. To avoid this whole confusion, we leave the root out
+  // entirely, and add it at the end here.
+  if (typeof input.sourceRoot === "string") {
+    result.sourceRoot = input.sourceRoot;
+  }
+  return result;
+}
 
-        generated,
+function eachOverlappingGeneratedOutputRange(
+  outputFile: ResolvedFileMappings,
+  inputGeneratedRange: ResolvedGeneratedRange,
+  callback: ResolvedGeneratedRange => mixed,
+) {
+  // Find the Babel-generated mappings that overlap with this range in the
+  // input sourcemap. Generated locations within the input sourcemap
+  // correspond with the original locations in the map Babel generates.
+  const overlappingOriginal = filterApplicableOriginalRanges(
+    outputFile,
+    inputGeneratedRange,
+  );
 
-        name: mapping.name,
-      });
+  for (const { generated } of overlappingOriginal) {
+    for (const item of generated) {
+      callback(item);
     }
+  }
+}
+
+function filterApplicableOriginalRanges(
+  { mappings }: ResolvedFileMappings,
+  { line, column, lastColumn }: ResolvedGeneratedRange,
+): OriginalMappings {
+  // The mapping array is sorted by original location, so we can
+  // binary-search it for the overlapping ranges.
+  return filterSortedArray(mappings, ({ original: outOriginal }) => {
+    if (line > outOriginal.line) return -1;
+    if (line < outOriginal.line) return 1;
+
+    if (column > outOriginal.lastColumn) return -1;
+    if (lastColumn < outOriginal.column) return 1;
+
+    return 0;
   });
+}
+
+function eachInputGeneratedRange(
+  map: ResolvedMappings,
+  callback: (
+    ResolvedGeneratedRange,
+    ResolvedOriginalRange,
+    ResolvedSource,
+  ) => mixed,
+) {
+  for (const { source, mappings } of map.sources) {
+    for (const { original, generated } of mappings) {
+      for (const item of generated) {
+        callback(item, original, source);
+      }
+    }
+  }
+}
+
+type ResolvedMappings = {|
+  file: ?string,
+  sourceRoot: ?string,
+  sources: Array<ResolvedFileMappings>,
+|};
+type ResolvedFileMappings = {|
+  source: ResolvedSource,
+  mappings: OriginalMappings,
+|};
+type OriginalMappings = Array<{|
+  original: ResolvedOriginalRange,
+  generated: Array<ResolvedGeneratedRange>,
+|}>;
+type ResolvedSource = {|
+  path: string,
+  content: string | null,
+|};
+type ResolvedOriginalRange = {|
+  line: number,
+  column: number,
+  lastColumn: number,
+  name: string | null,
+|};
+type ResolvedGeneratedRange = {|
+  line: number,
+  column: number,
+  lastColumn: number,
+|};
+
+function buildMappingData(map: SourceMap): ResolvedMappings {
+  const consumer = new sourceMap.SourceMapConsumer({
+    ...map,
+
+    // This is a bit hack. .addMapping expects source values to be relative,
+    // but eachMapping returns mappings with absolute paths. To avoid that
+    // incompatibility, we leave the sourceRoot out here and add it to the
+    // final map at the end instead.
+    sourceRoot: null,
+  });
+
+  const sources = new Map();
+  const mappings = new Map();
+
+  let last = null;
+
+  consumer.computeColumnSpans();
+
+  consumer.eachMapping(
+    m => {
+      if (m.originalLine === null) return;
+
+      let source = sources.get(m.source);
+      if (!source) {
+        source = {
+          path: m.source,
+          content: consumer.sourceContentFor(m.source, true),
+        };
+        sources.set(m.source, source);
+      }
+
+      let sourceData = mappings.get(source);
+      if (!sourceData) {
+        sourceData = {
+          source,
+          mappings: [],
+        };
+        mappings.set(source, sourceData);
+      }
+
+      const obj = {
+        line: m.originalLine,
+        column: m.originalColumn,
+        lastColumn: Infinity,
+        name: m.name,
+      };
+
+      if (
+        last &&
+        last.source === source &&
+        last.mapping.line === m.originalLine
+      ) {
+        last.mapping.lastColumn = m.originalColumn;
+      }
+
+      last = {
+        source,
+        mapping: obj,
+      };
+
+      sourceData.mappings.push({
+        original: obj,
+        generated: consumer.allGeneratedPositionsFor({
+          source: m.source,
+          line: m.originalLine,
+          column: m.originalColumn,
+        }),
+      });
+    },
+    null,
+    sourceMap.SourceMapConsumer.ORIGINAL_ORDER,
+  );
+
+  return {
+    file: map.file,
+    sourceRoot: map.sourceRoot,
+    sources: Array.from(mappings.values()),
+  };
+}
+
+function findInsertionLocation<T>(
+  array: Array<T>,
+  callback: T => number,
+): number {
+  let left = 0;
+  let right = array.length;
+  while (left < right) {
+    const mid = Math.floor((left + right) / 2);
+    const item = array[mid];
+
+    const result = callback(item);
+    if (result === 0) {
+      left = mid;
+      break;
+    }
+    if (result >= 0) {
+      right = mid;
+    } else {
+      left = mid + 1;
+    }
+  }
+
+  // Ensure the value is the start of any set of matches.
+  let i = left;
+  while (i > 0 && i < array.length && callback(array[i]) >= 0) {
+    i--;
+  }
+  return i + 1;
+}
+
+function filterSortedArray<T>(
+  array: Array<T>,
+  callback: T => number,
+): Array<T> {
+  const start = findInsertionLocation(array, callback);
+
+  const results = [];
+  for (let i = start; i < array.length && callback(array[i]) === 0; i++) {
+    results.push(array[i]);
+  }
 
-  const mergedMap = mergedGenerator.toJSON();
-  inputMap.mappings = mergedMap.mappings;
-  return inputMap;
+  return results;
 }

packages/babel-core/test/fixtures/transformation/source-maps/input-source-map-complex/source-map.json

@@ -4,7 +4,7 @@
     "HelloWorld.vue"
   ],
   "names": [],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;;QAEA;;SACA;;WAEA,AACA;AAFA;AAGA;;AANA",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAsFA;AACA,QAAA,YADA;;AAEA,SAAA;AACA,WAAA;AACA,WAAA;AADA,KAAA;AAGA;;AANA",
   "sourceRoot": "src/components",
   "sourcesContent": [
     "<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n    <h2>Essential Links</h2>\n    <ul>\n      <li>\n        <a\n          href=\"https://vuejs.org\"\n          target=\"_blank\"\n        >\n          Core Docs\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://forum.vuejs.org\"\n          target=\"_blank\"\n        >\n          Forum\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://chat.vuejs.org\"\n          target=\"_blank\"\n        >\n          Community Chat\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://twitter.com/vuejs\"\n          target=\"_blank\"\n        >\n          Twitter\n        </a>\n      </li>\n      <br>\n      <li>\n        <a\n          href=\"http://vuejs-templates.github.io/webpack/\"\n          target=\"_blank\"\n        >\n          Docs for This Template\n        </a>\n      </li>\n    </ul>\n    <h2>Ecosystem</h2>\n    <ul>\n      <li>\n        <a\n          href=\"http://router.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-router\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vuex.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vuex\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"http://vue-loader.vuejs.org/\"\n          target=\"_blank\"\n        >\n          vue-loader\n        </a>\n      </li>\n      <li>\n        <a\n          href=\"https://github.com/vuejs/awesome-vue\"\n          target=\"_blank\"\n        >\n          awesome-vue\n        </a>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'HelloWorld',\n  data () {\n    return {\n      msg: 'Welcome to Your Vue.js App'\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\nh1, h2 {\n  font-weight: normal;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n</style>\n"