DevTools: Ignore multiple sourceMappingUrls for external source maps (#…

…21871)

Added an edge case regression test and bugfix.

packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useState} from 'react';
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+
+export function Component() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  );
+}

packages/react-devtools-extensions/src/__tests__/__source__/index.js

@@ -10,6 +10,7 @@
 export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
 export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
 export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
+export {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';
 export {Component as Example} from './Example';
 export {Component as InlineRequire} from './InlineRequire';
 import * as ToDoList from './ToDoList';

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

@@ -48,7 +48,7 @@ describe('parseHookNames', () => {
     };
 
     fetchMock.mockIf(/.+$/, request => {
-      return Promise.resolve(requireText(request.url, 'utf8'));
+      return requireText(request.url, 'utf8');
     });
 
     // Mock out portion of browser API used by parseHookNames to initialize "source-map".
@@ -80,8 +80,12 @@ describe('parseHookNames', () => {
   }
 
   function requireText(path, encoding) {
-    const {readFileSync} = require('fs');
-    return readFileSync(path, encoding);
+    const {existsSync, readFileSync} = require('fs');
+    if (existsSync(path)) {
+      return Promise.resolve(readFileSync(path, encoding));
+    } else {
+      return Promise.reject(`File not found "${path}"`);
+    }
   }
 
   async function getHookNamesForComponent(Component, props = {}) {
@@ -126,7 +130,7 @@ describe('parseHookNames', () => {
       if (request.url.endsWith('useCustom.js')) {
         throw Error(`Unexpected file request for "${request.url}"`);
       }
-      return Promise.resolve(requireText(request.url, 'utf8'));
+      return requireText(request.url, 'utf8');
     });
 
     const hookNames = await getHookNamesForComponent(Component);
@@ -261,10 +265,10 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
       ); // external source map
-      // await test(
-      //   './__source__/__compiled__/bundle',
-      //   'ComponentWithMultipleHooksPerLine',
-      // ); // bundle source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithMultipleHooksPerLine',
+      ); // bundle source map
     });
 
     // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
@@ -284,5 +288,30 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/external/InlineRequire'); // external source map
       await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
     });
+
+    it('should support sources that contain the string "sourceMappingURL="', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+      }
+
+      // We expect the inline sourceMappingURL to be invalid in this case; mute the warning.
+      console.warn = () => {};
+
+      await test('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/ContainingStringSourceMappingURL',
+      ); // inline source map
+      await test(
+        './__source__/__compiled__/external/ContainingStringSourceMappingURL',
+      ); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ContainingStringSourceMappingURL',
+      ); // bundle source map
+    });
   });
 });