Replace "source-map" library with "source-map-js" (#22126)

Author: Brian Vaughn

packages/react-devtools-extensions/build.js

@@ -93,12 +93,6 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
   );
 
-  // The "source-map" library requires this chunk of WASM to be bundled at runtime.
-  await copy(
-    join(__dirname, 'node_modules', 'source-map', 'lib', 'mappings.wasm'),
-    join(zipPath, 'mappings.wasm'),
-  );
-
   const commit = getGitCommit();
   const dateString = new Date().toLocaleDateString();
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());

packages/react-devtools-extensions/chrome/manifest.json

@@ -32,8 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {

packages/react-devtools-extensions/edge/manifest.json

@@ -32,8 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {

packages/react-devtools-extensions/firefox/manifest.json

@@ -37,8 +37,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {

packages/react-devtools-extensions/package.json

@@ -62,7 +62,7 @@
     "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^2.1.1",
-    "source-map": "^0.8.0-beta.0",
+    "source-map-js": "^0.6.2",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
     "webpack": "^4.43.0",

packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js

@@ -15,7 +15,7 @@ import type {
   MixedSourceMap,
 } from './SourceMapTypes';
 import type {HookMap} from './generateHookMap';
-import * as util from 'source-map/lib/util';
+import * as util from 'source-map-js/lib/util';
 import {decodeHookMap} from './generateHookMap';
 import {getHookNameForLocation} from './getHookNameForLocation';
 
@@ -27,10 +27,9 @@ const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
 const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
 
 /**
- * Extracted from the logic in source-map@0.8.0-beta.0's SourceMapConsumer.
- * By default, source names are normalized using the same logic that the
- * `source-map@0.8.0-beta.0` package uses internally. This is crucial for keeping the
- * sources list in sync with a `SourceMapConsumer` instance.
+ * Extracted from the logic in source-map-js@0.6.2's SourceMapConsumer.
+ * By default, source names are normalized using the same logic that the `source-map-js@0.6.2` package uses internally.
+ * This is crucial for keeping the sources list in sync with a `SourceMapConsumer` instance.
  */
 function normalizeSourcePath(
   sourceInput: string,
@@ -41,6 +40,18 @@ function normalizeSourcePath(
 
   // eslint-disable-next-line react-internal/no-primitive-constructors
   source = String(source);
+  // Some source maps produce relative source paths like "./foo.js" instead of
+  // "foo.js".  Normalize these first so that future comparisons will succeed.
+  // See bugzil.la/1090768.
+  source = util.normalize(source);
+  // Always ensure that absolute sources are internally stored relative to
+  // the source root, if the source root is absolute. Not doing this would
+  // be particularly problematic when the source root is a prefix of the
+  // source (valid, but why??). See github issue #199 and bugzil.la/1188982.
+  source =
+    sourceRoot != null && util.isAbsolute(sourceRoot) && util.isAbsolute(source)
+      ? util.relative(sourceRoot, source)
+      : source;
   return util.computeSourceURL(sourceRoot, source);
 }
 

packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js

@@ -25,23 +25,6 @@ function requireText(path, encoding) {
   }
 }
 
-const chromeGlobal = {
-  extension: {
-    getURL: jest.fn((...args) => {
-      const {join} = require('path');
-      return join(
-        __dirname,
-        '..',
-        '..',
-        'node_modules',
-        'source-map',
-        'lib',
-        'mappings.wasm',
-      );
-    }),
-  },
-};
-
 describe('parseHookNames', () => {
   let fetchMock;
   let inspectHooks;
@@ -57,9 +40,6 @@ describe('parseHookNames', () => {
     fetchMock = require('jest-fetch-mock');
     fetchMock.enableMocks();
 
-    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
-    global.chrome = chromeGlobal;
-
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
     parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames;
@@ -908,9 +888,6 @@ describe('parseHookNames worker', () => {
       };
     });
 
-    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
-    global.chrome = chromeGlobal;
-
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
     parseHookNames = require('../parseHookNames').parseHookNames;

packages/react-devtools-extensions/src/parseHookNames/index.js

@@ -1,5 +1,3 @@
-/* global chrome */
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -15,14 +13,11 @@
 import WorkerizedParseHookNames from './parseHookNames.worker';
 import typeof * as ParseHookNamesModule from './parseHookNames';
 
-// $FlowFixMe
-const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
-
 const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
 
 type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
 
 export const parseHookNames: ParseHookNames = hooksTree =>
-  workerizedParseHookNames.parseHookNames(hooksTree, wasmMappingsURL);
+  workerizedParseHookNames.parseHookNames(hooksTree);
 
 export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;

packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js

@@ -9,7 +9,7 @@
 
 import {parse} from '@babel/parser';
 import LRU from 'lru-cache';
-import {SourceMapConsumer} from 'source-map';
+import {SourceMapConsumer} from 'source-map-js';
 import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
@@ -107,7 +107,6 @@ const originalURLToMetadataCache: LRUCache<
 
 export async function parseHookNames(
   hooksTree: HooksTree,
-  wasmMappingsURL: string,
 ): Thenable<HookNames | null> {
   const hooksList: Array<HooksNode> = [];
   flattenHooksList(hooksTree, hooksList);
@@ -167,9 +166,7 @@ export async function parseHookNames(
   }
 
   return loadSourceFiles(locationKeyToHookSourceData)
-    .then(() =>
-      extractAndLoadSourceMaps(locationKeyToHookSourceData, wasmMappingsURL),
-    )
+    .then(() => extractAndLoadSourceMaps(locationKeyToHookSourceData))
     .then(() => parseSourceAST(locationKeyToHookSourceData))
     .then(() => updateLruCache(locationKeyToHookSourceData))
     .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
@@ -191,7 +188,6 @@ function decodeBase64String(encoded: string): Object {
 
 function extractAndLoadSourceMaps(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
-  wasmMappingsURL: string,
 ): Promise<*> {
   // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
   // because the wasm file is automatically read from the file system
@@ -202,8 +198,6 @@ function extractAndLoadSourceMaps(
         'extractAndLoadSourceMaps() Initializing source-map library ...',
       );
     }
-
-    SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
   }
 
   // Deduplicate fetches, since there can be multiple location keys per source map.
@@ -259,11 +253,7 @@ function extractAndLoadSourceMaps(
             hookSourceData.metadataConsumer = new SourceMapMetadataConsumer(
               parsed,
             );
-            setPromises.push(
-              new SourceMapConsumer(parsed).then(sourceConsumer => {
-                hookSourceData.sourceConsumer = sourceConsumer;
-              }),
-            );
+            hookSourceData.sourceConsumer = new SourceMapConsumer(parsed);
             break;
           }
         } else {
@@ -299,10 +289,10 @@ function extractAndLoadSourceMaps(
             fetchFile(url).then(
               sourceMapContents => {
                 const parsed = JSON.parse(sourceMapContents);
-                return new SourceMapConsumer(parsed).then(sourceConsumer => ({
-                  sourceConsumer,
+                return {
+                  sourceConsumer: new SourceMapConsumer(parsed),
                   metadataConsumer: new SourceMapMetadataConsumer(parsed),
-                }));
+                };
               },
               // In this case, we fall back to the assumption that the source has no source map.
               // This might indicate an (unlikely) edge case that had no source map,

yarn.lock

@@ -14168,6 +14168,11 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+source-map-js@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
+  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -14223,13 +14228,6 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-source-map@^0.8.0-beta.0:
-  version "0.8.0-beta.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
-  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
-  dependencies:
-    whatwg-url "^7.0.0"
-
 sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"