Support symmetric locations (#666)

Author: jasonLaster

packages/devtools-source-map/package.json

@@ -6,7 +6,8 @@
   "author": "J. Ryan Stinnett <[email protected]>",
   "repository": "github:devtools-html/devtools-core",
   "bugs": "https://github.com/devtools-html/devtools-core/issues",
-  "homepage": "https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-source-map#readme",
+  "homepage":
+    "https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-source-map#readme",
   "main": "src/index.js",
   "scripts": {
     "copy-assets": "node bin/copy-assets",
@@ -29,7 +30,11 @@
   "jest": {
     "rootDir": "src",
     "testMatch": ["**/tests/**/*.js"],
-    "testPathIgnorePatterns": ["/node_modules/", "/tests/fixtures/"],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/tests/fixtures/",
+      "<rootDir>/tests/helpers.js"
+    ],
     "transformIgnorePatterns": [],
     "setupFiles": [],
     "moduleNameMapper": {}

packages/devtools-source-map/src/source-map.js

@@ -68,9 +68,8 @@ async function getGeneratedLocation(
 
   return {
     sourceId: generatedSourceId,
-    line: line,
-    // Treat 0 as no column so that line breakpoints work correctly.
-    column: column === 0 ? undefined : column
+    line,
+    column
   };
 }
 
@@ -84,19 +83,19 @@ async function getOriginalLocation(location: Location): Promise<Location> {
     return location;
   }
 
-  const { source: url, line, column } = map.originalPositionFor({
+  const { source: sourceUrl, line, column } = map.originalPositionFor({
     line: location.line,
-    column: location.column == null ? Infinity : location.column
+    column: location.column == null ? 0 : location.column
   });
 
-  if (url == null) {
+  if (sourceUrl == null) {
     // No url means the location didn't map.
     return location;
   }
 
   return {
-    sourceId: generatedToOriginalId(location.sourceId, url),
-    sourceUrl: url,
+    sourceId: generatedToOriginalId(location.sourceId, sourceUrl),
+    sourceUrl,
     line,
     column
   };

packages/devtools-source-map/src/tests/fixtures/if.js

@@ -0,0 +1,12 @@
+function componentWillReceiveProps(nextProps) {
+	console.log('start');
+    const { selectedSource } = nextProps;
+
+    if (
+      nextProps.startPanelSize !== this.props.startPanelSize ||
+      nextProps.endPanelSize !== this.props.endPanelSize
+    ) {
+      this.state.editor.codeMirror.setSize();
+    }
+	console.log('done');
+}

packages/devtools-source-map/src/tests/fixtures/if.out.js

@@ -0,0 +1,42 @@
+const { isOriginalId } = require("../utils");
+const { getOriginalURLs } = require("../source-map");
+
+const fs = require("fs");
+const path = require("path");
+
+function formatLocations(locs) {
+  return locs.map(formatLocation).join(" -> ");
+}
+
+function formatLocation(loc) {
+  const label = isOriginalId(loc.sourceId) ? "O" : "G";
+  const col = loc.column === undefined ? "u" : loc.column;
+  return `${label}[${loc.line}, ${col}]`;
+}
+
+function getMap(_path) {
+  const mapPath = path.join(__dirname, _path);
+  return fs.readFileSync(mapPath, "utf8");
+}
+
+async function setupBundleFixture(name) {
+  const source = {
+    id: `${name}.js`,
+    sourceMapURL: `${name}.js.map`,
+    url: `http://example.com/${name}.js`
+  };
+
+  require("devtools-utils/src/network-request").mockImplementationOnce(() => {
+    const content = getMap(`fixtures/${name}.js.map`);
+    return { content };
+  });
+
+  return await getOriginalURLs(source);
+}
+
+module.exports = {
+  formatLocations,
+  formatLocation,
+  setupBundleFixture,
+  getMap
+};

packages/devtools-source-map/src/tests/fixtures/if.out.js.map

@@ -0,0 +1,153 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+jest.mock("devtools-utils/src/network-request");
+const {
+  getOriginalURLs,
+  hasMappedSource,
+  getOriginalLocation,
+  getGeneratedLocation,
+  clearSourceMaps
+} = require("../source-map");
+
+const {
+  formatLocations,
+  formatLocation,
+  setupBundleFixture,
+  getMap
+} = require("./helpers");
+
+describe("getOriginalLocation", async () => {
+  beforeEach(() => {
+    clearSourceMaps();
+  });
+
+  test("maps a generated location", async () => {
+    await setupBundleFixture("bundle");
+    const location = {
+      sourceId: "bundle.js",
+      line: 49
+    };
+
+    const originalLocation = await getOriginalLocation(location);
+    expect(originalLocation).toEqual({
+      column: 0,
+      line: 3,
+      sourceId: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a",
+      sourceUrl: "webpack:///entry.js"
+    });
+  });
+
+  test("does not map an original location", async () => {
+    const location = {
+      column: 0,
+      line: 3,
+      sourceId: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a",
+      sourceUrl: "webpack:///entry.js"
+    };
+    const originalLocation = await getOriginalLocation(location);
+    expect(originalLocation).toEqual(originalLocation);
+  });
+});
+
+describe("getGeneratedLocation", async () => {
+  beforeEach(() => {
+    clearSourceMaps();
+  });
+
+  test("maps an original location", async () => {
+    await setupBundleFixture("bundle");
+    const location = {
+      column: 0,
+      line: 3,
+      sourceId: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a"
+    };
+
+    const source = {
+      url: "webpack:///entry.js",
+      id: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a"
+    };
+
+    const generatedLocation = await getGeneratedLocation(location, source);
+    expect(generatedLocation).toEqual({
+      sourceId: "bundle.js",
+      line: 49,
+      column: 0
+    });
+  });
+
+  test("location mapping is symmetric", async () => {
+    // we expect symmetric mappings, which means that if
+    // we map a generated location to an original location,
+    // and then map it back, we should get the original generated value.
+    // e.g. G[8, 0] -> O[5, 4] -> G[8, 0]
+
+    await setupBundleFixture("if.out");
+
+    const genLoc1 = {
+      sourceId: "if.out.js",
+      column: 0,
+      line: 8
+    };
+
+    const ifSource = {
+      url: "if.js",
+      id: "if.out.js/originalSource-5ad3141023dae912c5f8833c7e03beeb"
+    };
+
+    const oLoc = await getOriginalLocation(genLoc1);
+    const genLoc2 = await getGeneratedLocation(oLoc, ifSource);
+
+    expect(genLoc2).toEqual({
+      sourceId: "if.out.js",
+      column: 0,
+      line: 8
+    });
+  });
+
+  test("undefined column is handled like 0 column", async () => {
+    // we expect that an undefined column will be handled like a
+    // location w/ column 0. e.g. G[8, u] -> O[5, 4] -> G[8, 0]
+
+    await setupBundleFixture("if.out");
+
+    const genLoc1 = {
+      sourceId: "if.out.js",
+      column: undefined,
+      line: 8
+    };
+
+    const ifSource = {
+      url: "if.js",
+      id: "if.out.js/originalSource-5ad3141023dae912c5f8833c7e03beeb"
+    };
+
+    const oLoc = await getOriginalLocation(genLoc1);
+    const genLoc2 = await getGeneratedLocation(oLoc, ifSource);
+    // console.log(formatLocations([genLoc1, oLoc, genLoc2]));
+
+    expect(genLoc2).toEqual({
+      sourceId: "if.out.js",
+      column: 0,
+      line: 8
+    });
+  });
+
+  test("does not map an original location", async () => {
+    const location = {
+      column: 0,
+      line: 3,
+      sourceId: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a",
+      sourceUrl: "webpack:///entry.js"
+    };
+
+    const source = {
+      url: "webpack:///entry.js",
+      id: "bundle.js/originalSource-fe2c41d3535b76c158e39ba4f3ff826a"
+    };
+
+    const generatedLocation = await getGeneratedLocation(location, source);
+    expect(generatedLocation).toEqual(generatedLocation);
+  });
+});