Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

DevTools: Ignore multiple sourceMappingUrls for external source maps (#21871)

Browse Source 
Added an edge case regression test and bugfix.
This commit is contained in:
Brian Vaughn
2021-07-13 16:39:29 -04:00
committed by GitHub
parent 14bac6193a
commit 9fec3f2add
12 changed files with 198 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js
Vendored
+23
View File
@@ -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__/__compiled__/bundle/index.js
Vendored
+19 -2
View File
@@ -91,6 +91,7 @@ function Component$2() {
*
* @flow
*/
function Component$3() {
const [count, setCount] = React.useState(0);
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
@@ -107,6 +108,21 @@ function Component$3() {
* @flow
*/
function Component$4() {
const [count, setCount] = React.useState(0);
return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
onClick: () => setCount(count + 1)
}, "Click me"));
}
/**
* 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
*/
function Component$5() {
const [count] = require('react').useState(0);
return count;
@@ -212,8 +228,9 @@ var ToDoList = /*#__PURE__*/Object.freeze({
exports.ComponentWithCustomHook = Component;
exports.ComponentWithExternalCustomHooks = Component$1;
exports.ComponentWithMultipleHooksPerLine = Component$2;
exports.Example = Component$3;
exports.InlineRequire = Component$4;
exports.ContainingStringSourceMappingURL = Component$3;
exports.Example = Component$4;
exports.InlineRequire = Component$5;
exports.ToDoList = ToDoList;
exports.useTheme = useTheme;
//# sourceMappingURL=index.js.map
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
Vendored
+29
View File
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Component = Component;
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* 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
*/
// ?sourceMappingURL=([^\s'"]+)/gm
function Component() {
const [count, setCount] = (0, _react.useState)(0);
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
onClick: () => setCount(count + 1)
}, "Click me"));
}
//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
Vendored
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <p>You clicked {count} times</p>\n <button onClick={() => setCount(count + 1)}>Click me</button>\n </div>\n );\n}\n"]}
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
Vendored
+8
View File
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
return _ComponentWithMultipleHooksPerLine.Component;
}
});
Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
enumerable: true,
get: function () {
return _ContainingStringSourceMappingURL.Component;
}
});
Object.defineProperty(exports, "Example", {
enumerable: true,
get: function () {
@@ -47,6 +53,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
var _Example = require("./Example");
var _InlineRequire = require("./InlineRequire");
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
Vendored
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"]}
{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"]}
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
Vendored
+29
View File
@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Component = Component;
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* 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
*/
// ?sourceMappingURL=([^\s'"]+)/gm
function Component() {
const [count, setCount] = (0, _react.useState)(0);
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
onClick: () => setCount(count + 1)
}, "Click me"));
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0=
packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
Vendored
+9 -1
View File
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
return _ComponentWithMultipleHooksPerLine.Component;
}
});
Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
enumerable: true,
get: function () {
return _ContainingStringSourceMappingURL.Component;
}
});
Object.defineProperty(exports, "Example", {
enumerable: true,
get: function () {
@@ -47,6 +53,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
var _Example = require("./Example");
var _InlineRequire = require("./InlineRequire");
@@ -62,4 +70,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
packages/react-devtools-extensions/src/__tests__/__source__/index.js
Vendored
+1
View File
@@ -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
Vendored
+37 -8
View File
@@ -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
});
});
});
packages/react-devtools-extensions/src/parseHookNames.js
Vendored
+40 -20
View File
@@ -264,13 +264,19 @@ function extractAndLoadSourceMaps(
break;
}
} else {
if (sourceMappingURLs.length > 1) {
let url = sourceMappingURLs[i].split('=')[1];
if (i !== sourceMappingURLs.length - 1) {
// Files with external source maps should only have a single source map.
// More than one result might indicate an edge case,
// like a string in the source code that matched our "sourceMappingURL" regex.
// We should just skip over cases like this.
console.warn(
'More than one external source map detected in the source file',
`More than one external source map detected in the source file; skipping "${url}"`,
);
continue;
}
let url = sourceMappingURLs[i].split('=')[1];
if (!url.startsWith('http') && !url.startsWith('/')) {
// Resolve paths relative to the location of the file name
const lastSlashIdx = runtimeSourceURL.lastIndexOf('/');
@@ -290,7 +296,13 @@ function extractAndLoadSourceMaps(
fetchFile(url).then(
sourceMapContents =>
new SourceMapConsumer(JSON.parse(sourceMapContents)),
// 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,
// but contained the string "sourceMappingURL".
error => null,
);
if (__DEBUG__) {
if (!fetchPromises.has(url)) {
console.log(
@@ -315,26 +327,34 @@ function extractAndLoadSourceMaps(
function fetchFile(url: string): Promise<string> {
return new Promise((resolve, reject) => {
fetch(url).then(response => {
if (response.ok) {
response
.text()
.then(text => {
resolve(text);
})
.catch(error => {
if (__DEBUG__) {
console.log(`fetchFile() Could not read text for url "${url}"`);
}
reject(null);
});
} else {
fetch(url).then(
response => {
if (response.ok) {
response
.text()
.then(text => {
resolve(text);
})
.catch(error => {
if (__DEBUG__) {
console.log(`fetchFile() Could not read text for url "${url}"`);
}
reject(null);
});
} else {
if (__DEBUG__) {
console.log(`fetchFile() Got bad response for url "${url}"`);
}
reject(null);
}
},
error => {
if (__DEBUG__) {
console.log(`fetchFile() Got bad response for url "${url}"`);
console.log(`fetchFile() Could not fetch file "${error.message}"`);
}
reject(null);
}
});
},
);
});
}