From 87b3ada89dc83c88a89ff1b599b0f39e3c49cc32 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 14 Jul 2021 14:37:27 -0400 Subject: [PATCH] DevTools: Named hooks supports "cheap-module-source-map" (#21874) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "cheap-module-source-map" is the default source-map generation mode used in created-react-dev mode because of speed. The major trade-off is that the source maps generated don't contain column numbers, so DevTools needs to be more lenient when matching AST nodes in this mode. In this case, it can ignore column numbers and match nodes using line numbers only– so long as only a single node matches. If more than one match is found, treat it the same as if none were found, and fall back to no name. --- .../react-devtools-extensions/package.json | 1 + .../no-columns/ComponentWithCustomHook.js | 41 +++++++ .../ComponentWithExternalCustomHooks.js | 26 +++++ .../ComponentWithMultipleHooksPerLine.js | 30 +++++ .../ContainingStringSourceMappingURL.js | 29 +++++ .../__compiled__/no-columns/Example.js | 28 +++++ .../__compiled__/no-columns/InlineRequire.js | 21 ++++ .../__compiled__/no-columns/ToDoList.js | 106 ++++++++++++++++++ .../__compiled__/no-columns/index.js | 73 ++++++++++++ .../__compiled__/no-columns/useTheme.js | 27 +++++ .../src/__tests__/parseHookNames-test.js | 30 +++++ .../src/__tests__/updateMockSourceMaps.js | 36 ++++++ .../react-devtools-extensions/src/astUtils.js | 74 +++++++----- .../src/parseHookNames.js | 2 +- yarn.lock | 2 +- 15 files changed, 498 insertions(+), 28 deletions(-) create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json index 40954c4425155..da473f7613a68 100644 --- a/packages/react-devtools-extensions/package.json +++ b/packages/react-devtools-extensions/package.json @@ -50,6 +50,7 @@ "rollup-plugin-commonjs": "^9.3.4", "rollup-plugin-node-resolve": "^2.1.1", "source-map": "^0.8.0-beta.0", + "sourcemap-codec": "^1.4.8", "style-loader": "^0.23.1", "web-ext": "^3.0.0", "webpack": "^4.43.0", diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js new file mode 100644 index 0000000000000..07c3317e87d32 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js @@ -0,0 +1,41 @@ +"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 + */ +function Component() { + const [count, setCount] = (0, _react.useState)(0); + const isDarkMode = useIsDarkMode(); + (0, _react.useEffect)(() => {// ... + }, []); + + const handleClick = () => setCount(count + 1); + + return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", { + onClick: handleClick + }, "Update count")); +} + +function useIsDarkMode() { + const [isDarkMode] = (0, _react.useState)(false); + (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event... + }, []); + return isDarkMode; +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFFQSx3QkFBQSxNQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTs7QUFJQSxRQUFBQyxXQUFBLEdBQUEsTUFBQUgsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBOztBQUVBLHNCQUNBLHlFQUNBLHlEQUFBRSxVQUFBLENBREEsZUFFQSxxREFBQUYsS0FBQSxDQUZBLGVBR0E7QUFBQSxJQUFBLE9BQUEsRUFBQUk7QUFBQSxvQkFIQSxDQURBO0FBT0E7O0FBRUEsU0FBQUQsYUFBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBRCxVQUFBLElBQUEscUJBQUEsS0FBQSxDQUFBO0FBRUEsd0JBQUEsU0FBQUcsZUFBQSxHQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTtBQUlBLFNBQUFILFVBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gaXNEYXJrTW9kZTtcbn1cbiJdfQ== \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js new file mode 100644 index 0000000000000..63c7ec8d8ef9e --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js @@ -0,0 +1,26 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Component = Component; + +var _react = _interopRequireDefault(require("react")); + +var _useTheme = _interopRequireDefault(require("./useTheme")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/** + * 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() { + const theme = (0, _useTheme.default)(); + return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme); +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxLQUFBLEdBQUEsd0JBQUE7QUFFQSxzQkFBQSxxREFBQUEsS0FBQSxDQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1c2VUaGVtZSBmcm9tICcuL3VzZVRoZW1lJztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiA8ZGl2PnRoZW1lOiB7dGhlbWV9PC9kaXY+O1xufVxuIl19 \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js new file mode 100644 index 0000000000000..b05cd188f4686 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js @@ -0,0 +1,30 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Component = Component; + +var _react = require("react"); + +/** + * 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 + */ +const A = /*#__PURE__*/(0, _react.createContext)(1); +const B = /*#__PURE__*/(0, _react.createContext)(2); + +function Component() { + const a = (0, _react.useContext)(A); + const b = (0, _react.useContext)(B); // prettier-ignore + + const c = (0, _react.useContext)(A), + d = (0, _react.useContext)(B); // eslint-disable-line one-var + + return a + b + c + d; +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFBQSxDQUFBLGdCQUFBLDBCQUFBLENBQUEsQ0FBQTtBQUNBLE1BQUFDLENBQUEsZ0JBQUEsMEJBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFDLFNBQUEsR0FBQTtBQUNBLFFBQUFDLENBQUEsR0FBQSx1QkFBQUgsQ0FBQSxDQUFBO0FBQ0EsUUFBQUksQ0FBQSxHQUFBLHVCQUFBSCxDQUFBLENBQUEsQ0FGQSxDQUlBOztBQUNBLFFBQUFJLENBQUEsR0FBQSx1QkFBQUwsQ0FBQSxDQUFBO0FBQUEsUUFBQU0sQ0FBQSxHQUFBLHVCQUFBTCxDQUFBLENBQUEsQ0FMQSxDQUtBOztBQUVBLFNBQUFFLENBQUEsR0FBQUMsQ0FBQSxHQUFBQyxDQUFBLEdBQUFDLENBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQge2NyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgQSA9IGNyZWF0ZUNvbnRleHQoMSk7XG5jb25zdCBCID0gY3JlYXRlQ29udGV4dCgyKTtcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgYSA9IHVzZUNvbnRleHQoQSk7XG4gIGNvbnN0IGIgPSB1c2VDb250ZXh0KEIpO1xuXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICBjb25zdCBjID0gdXNlQ29udGV4dChBKSwgZCA9IHVzZUNvbnRleHQoQik7IC8vIGVzbGludC1kaXNhYmxlLWxpbmUgb25lLXZhclxuXG4gIHJldHVybiBhICsgYiArIGMgKyBkO1xufVxuIl19 \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js new file mode 100644 index 0000000000000..a05ba5ba69824 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js @@ -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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ== \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js new file mode 100644 index 0000000000000..6d668eaac8a14 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js @@ -0,0 +1,28 @@ +"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 + */ +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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19 \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js new file mode 100644 index 0000000000000..45f22810dfbe1 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js @@ -0,0 +1,21 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Component = Component; + +/** + * 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() { + const [count] = require('react').useState(0); + + return count; +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsSUFBQUMsT0FBQSxDQUFBLE9BQUEsQ0FBQSxDQUFBQyxRQUFBLENBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFGLEtBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnRdID0gcmVxdWlyZSgncmVhY3QnKS51c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gY291bnQ7XG59XG4iXX0= \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js new file mode 100644 index 0000000000000..3693681e10871 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js @@ -0,0 +1,106 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.ListItem = ListItem; +exports.List = List; + +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 + */ +function ListItem({ + item, + removeItem, + toggleItem +}) { + const handleDelete = (0, React.useCallback)(() => { + removeItem(item); + }, [item, removeItem]); + const handleToggle = (0, React.useCallback)(() => { + toggleItem(item); + }, [item, toggleItem]); + return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", { + onClick: handleDelete + }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", { + checked: item.isComplete, + onChange: handleToggle, + type: "checkbox" + }), ' ', item.text)); +} + +function List(props) { + const [newItemText, setNewItemText] = (0, React.useState)(''); + const [items, setItems] = (0, React.useState)([{ + id: 1, + isComplete: true, + text: 'First' + }, { + id: 2, + isComplete: true, + text: 'Second' + }, { + id: 3, + isComplete: false, + text: 'Third' + }]); + const [uid, setUID] = (0, React.useState)(4); + const handleClick = (0, React.useCallback)(() => { + if (newItemText !== '') { + setItems([...items, { + id: uid, + isComplete: false, + text: newItemText + }]); + setUID(uid + 1); + setNewItemText(''); + } + }, [newItemText, items, uid]); + const handleKeyPress = (0, React.useCallback)(event => { + if (event.key === 'Enter') { + handleClick(); + } + }, [handleClick]); + const handleChange = (0, React.useCallback)(event => { + setNewItemText(event.currentTarget.value); + }, [setNewItemText]); + const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]); + const toggleItem = (0, React.useCallback)(itemToToggle => { + // Dont use indexOf() + // because editing props in DevTools creates a new Object. + const index = items.findIndex(item => item.id === itemToToggle.id); + setItems(items.slice(0, index).concat({ ...itemToToggle, + isComplete: !itemToToggle.isComplete + }).concat(items.slice(index + 1))); + }, [items]); + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", { + type: "text", + placeholder: "New list item...", + value: newItemText, + onChange: handleChange, + onKeyPress: handleKeyPress + }), /*#__PURE__*/React.createElement("button", { + disabled: newItemText === '', + onClick: handleClick + }, /*#__PURE__*/React.createElement("span", { + role: "img", + "aria-label": "Add item" + }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, { + key: item.id, + item: item, + removeItem: removeItem, + toggleItem: toggleItem + })))); +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWUEsU0FBQUEsUUFBQSxDQUFBO0FBQUFDLEVBQUFBLElBQUE7QUFBQUMsRUFBQUEsVUFBQTtBQUFBQyxFQUFBQTtBQUFBLENBQUEsRUFBQTtBQUNBLFFBQUFDLFlBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0FGLElBQUFBLFVBQUEsQ0FBQUQsSUFBQSxDQUFBO0FBQ0EsR0FGQSxFQUVBLENBQUFBLElBQUEsRUFBQUMsVUFBQSxDQUZBLENBQUE7QUFJQSxRQUFBRyxZQUFBLEdBQUEsdUJBQUEsTUFBQTtBQUNBRixJQUFBQSxVQUFBLENBQUFGLElBQUEsQ0FBQTtBQUNBLEdBRkEsRUFFQSxDQUFBQSxJQUFBLEVBQUFFLFVBQUEsQ0FGQSxDQUFBO0FBSUEsc0JBQ0EsNkNBQ0E7QUFBQSxJQUFBLE9BQUEsRUFBQUM7QUFBQSxjQURBLGVBRUEsZ0RBQ0E7QUFDQSxJQUFBLE9BQUEsRUFBQUgsSUFBQSxDQUFBSyxVQURBO0FBRUEsSUFBQSxRQUFBLEVBQUFELFlBRkE7QUFHQSxJQUFBLElBQUEsRUFBQTtBQUhBLElBREEsRUFLQSxH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QUFLQSxJQUFBLFVBQUEsRUFBQUg7QUFMQSxJQUZBLGVBU0E7QUFBQSxJQUFBLFFBQUEsRUFBQVIsV0FBQSxLQUFBLEVBQUE7QUFBQSxJQUFBLE9BQUEsRUFBQU87QUFBQSxrQkFDQTtBQUFBLElBQUEsSUFBQSxFQUFBLEtBQUE7QUFBQSxrQkFBQTtBQUFBLFdBREEsQ0FUQSxlQWNBLGdDQUNBTCxLQUFBLENBQUFtQixHQUFBLENBQUE5QixJQUFBLGlCQUNBLG9CQUFBLFFBQUE7QUFDQSxJQUFBLEdBQUEsRUFBQUEsSUFBQSxDQUFBYSxFQURBO0FBRUEsSUFBQSxJQUFBLEVBQUFiLElBRkE7QUFHQSxJQUFBLFVBQUEsRUFBQUMsVUFIQTtBQUlBLElBQUEsVUFBQSxFQUFBQztBQUpBLElBREEsQ0FEQSxDQWRBLENBREE7QUEyQkEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtGcmFnbWVudCwgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0SXRlbSh7aXRlbSwgcmVtb3ZlSXRlbSwgdG9nZ2xlSXRlbX0pIHtcbiAgY29uc3QgaGFuZGxlRGVsZXRlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHJlbW92ZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCByZW1vdmVJdGVtXSk7XG5cbiAgY29uc3QgaGFuZGxlVG9nZ2xlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHRvZ2dsZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCB0b2dnbGVJdGVtXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZURlbGV0ZX0+RGVsZXRlPC9idXR0b24+XG4gICAgICA8bGFiZWw+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIGNoZWNrZWQ9e2l0ZW0uaXNDb21wbGV0ZX1cbiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIC8+eycgJ31cbiAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9saT5cbiAgKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIExpc3QocHJvcHMpIHtcbiAgY29uc3QgW25ld0l0ZW1UZXh0LCBzZXROZXdJdGVtVGV4dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtpdGVtcywgc2V0SXRlbXNdID0gdXNlU3RhdGUoW1xuICAgIHtpZDogMSwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ0ZpcnN0J30sXG4gICAge2lkOiAyLCBpc0NvbXBsZXRlOiB0cnVlLCB0ZXh0OiAnU2Vjb25kJ30sXG4gICAge2lkOiAzLCBpc0NvbXBsZXRlOiBmYWxzZSwgdGV4dDogJ1RoaXJkJ30sXG4gIF0pO1xuICBjb25zdCBbdWlkLCBzZXRVSURdID0gdXNlU3RhdGUoNCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKG5ld0l0ZW1UZXh0ICE9PSAnJykge1xuICAgICAgc2V0SXRlbXMoW1xuICAgICAgICAuLi5pdGVtcyxcbiAgICAgICAge1xuICAgICAgICAgIGlkOiB1aWQsXG4gICAgICAgICAgaXNDb21wbGV0ZTogZmFsc2UsXG4gICAgICAgICAgdGV4dDogbmV3SXRlbVRleHQsXG4gICAgICAgIH0sXG4gICAgICBdKTtcbiAgICAgIHNldFVJRCh1aWQgKyAxKTtcbiAgICAgIHNldE5ld0l0ZW1UZXh0KCcnKTtcbiAgICB9XG4gIH0sIFtuZXdJdGVtVGV4dCwgaXRlbXMsIHVpZF0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleVByZXNzID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICBoYW5kbGVDbGljaygpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2hhbmRsZUNsaWNrXSxcbiAgKTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBzZXROZXdJdGVtVGV4dChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcbiAgICB9LFxuICAgIFtzZXROZXdJdGVtVGV4dF0sXG4gICk7XG5cbiAgY29uc3QgcmVtb3ZlSXRlbSA9IHVzZUNhbGxiYWNrKFxuICAgIGl0ZW1Ub1JlbW92ZSA9PiBzZXRJdGVtcyhpdGVtcy5maWx0ZXIoaXRlbSA9PiBpdGVtICE9PSBpdGVtVG9SZW1vdmUpKSxcbiAgICBbaXRlbXNdLFxuICApO1xuXG4gIGNvbnN0IHRvZ2dsZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9Ub2dnbGUgPT4ge1xuICAgICAgLy8gRG9udCB1c2UgaW5kZXhPZigpXG4gICAgICAvLyBiZWNhdXNlIGVkaXRpbmcgcHJvcHMgaW4gRGV2VG9vbHMgY3JlYXRlcyBhIG5ldyBPYmplY3QuXG4gICAgICBjb25zdCBpbmRleCA9IGl0ZW1zLmZpbmRJbmRleChpdGVtID0+IGl0ZW0uaWQgPT09IGl0ZW1Ub1RvZ2dsZS5pZCk7XG5cbiAgICAgIHNldEl0ZW1zKFxuICAgICAgICBpdGVtc1xuICAgICAgICAgIC5zbGljZSgwLCBpbmRleClcbiAgICAgICAgICAuY29uY2F0KHtcbiAgICAgICAgICAgIC4uLml0ZW1Ub1RvZ2dsZSxcbiAgICAgICAgICAgIGlzQ29tcGxldGU6ICFpdGVtVG9Ub2dnbGUuaXNDb21wbGV0ZSxcbiAgICAgICAgICB9KVxuICAgICAgICAgIC5jb25jYXQoaXRlbXMuc2xpY2UoaW5kZXggKyAxKSksXG4gICAgICApO1xuICAgIH0sXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxGcmFnbWVudD5cbiAgICAgIDxoMT5MaXN0PC9oMT5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIHBsYWNlaG9sZGVyPVwiTmV3IGxpc3QgaXRlbS4uLlwiXG4gICAgICAgIHZhbHVlPXtuZXdJdGVtVGV4dH1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25LZXlQcmVzcz17aGFuZGxlS2V5UHJlc3N9XG4gICAgICAvPlxuICAgICAgPGJ1dHRvbiBkaXNhYmxlZD17bmV3SXRlbVRleHQgPT09ICcnfSBvbkNsaWNrPXtoYW5kbGVDbGlja30+XG4gICAgICAgIDxzcGFuIHJvbGU9XCJpbWdcIiBhcmlhLWxhYmVsPVwiQWRkIGl0ZW1cIj5cbiAgICAgICAgICBBZGRcbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8dWw+XG4gICAgICAgIHtpdGVtcy5tYXAoaXRlbSA9PiAoXG4gICAgICAgICAgPExpc3RJdGVtXG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgcmVtb3ZlSXRlbT17cmVtb3ZlSXRlbX1cbiAgICAgICAgICAgIHRvZ2dsZUl0ZW09e3RvZ2dsZUl0ZW19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L3VsPlxuICAgIDwvRnJhZ21lbnQ+XG4gICk7XG59XG4iXX0= \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js new file mode 100644 index 0000000000000..186ab68d95aab --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js @@ -0,0 +1,73 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "ComponentWithCustomHook", { + enumerable: true, + get: function () { + return _ComponentWithCustomHook.Component; + } +}); +Object.defineProperty(exports, "ComponentWithExternalCustomHooks", { + enumerable: true, + get: function () { + return _ComponentWithExternalCustomHooks.Component; + } +}); +Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", { + enumerable: true, + get: function () { + return _ComponentWithMultipleHooksPerLine.Component; + } +}); +Object.defineProperty(exports, "ContainingStringSourceMappingURL", { + enumerable: true, + get: function () { + return _ContainingStringSourceMappingURL.Component; + } +}); +Object.defineProperty(exports, "Example", { + enumerable: true, + get: function () { + return _Example.Component; + } +}); +Object.defineProperty(exports, "InlineRequire", { + enumerable: true, + get: function () { + return _InlineRequire.Component; + } +}); +Object.defineProperty(exports, "useTheme", { + enumerable: true, + get: function () { + return _useTheme.default; + } +}); +exports.ToDoList = void 0; + +var _ComponentWithCustomHook = require("./ComponentWithCustomHook"); + +var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks"); + +var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine"); + +var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL"); + +var _Example = require("./Example"); + +var _InlineRequire = require("./InlineRequire"); + +var ToDoList = _interopRequireWildcard(require("./ToDoList")); + +exports.ToDoList = ToDoList; + +var _useTheme = _interopRequireDefault(require("./useTheme")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ== \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js new file mode 100644 index 0000000000000..7a1b76c59c002 --- /dev/null +++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js @@ -0,0 +1,27 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = useTheme; +exports.ThemeContext = void 0; + +var _react = require("react"); + +/** + * 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 + */ +const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright'); +exports.ThemeContext = ThemeContext; + +function useTheme() { + const theme = (0, _react.useContext)(ThemeContext); + (0, _react.useDebugValue)(theme); + return theme; +} +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV0EsTUFBQUEsWUFBQSxnQkFBQSwwQkFBQSxRQUFBLENBQUE7OztBQUVBLFNBQUFDLFFBQUEsR0FBQTtBQUNBLFFBQUFDLEtBQUEsR0FBQSx1QkFBQUYsWUFBQSxDQUFBO0FBQ0EsNEJBQUFFLEtBQUE7QUFDQSxTQUFBQSxLQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19 \ No newline at end of file diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js index a1429ec7587d0..2599ce95c4cd3 100644 --- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js +++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js @@ -172,6 +172,7 @@ describe('parseHookNames', () => { await test('./__source__/__compiled__/inline/Example'); // inline source map await test('./__source__/__compiled__/external/Example'); // external source map await test('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map + await test('./__source__/__compiled__/no-columns/Example'); // simulated Webpack 'cheap-module-source-map' }); it('should work with more complex files and components', async () => { @@ -203,6 +204,7 @@ describe('parseHookNames', () => { await test('./__source__/__compiled__/inline/ToDoList'); // inline source map await test('./__source__/__compiled__/external/ToDoList'); // external source map await test('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map + await test('./__source__/__compiled__/no-columns/ToDoList'); // simulated Webpack 'cheap-module-source-map' }); it('should work for custom hook', async () => { @@ -220,6 +222,9 @@ describe('parseHookNames', () => { await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map await test('./__source__/__compiled__/bundle', 'ComponentWithCustomHook'); // bundle source map + await test( + './__source__/__compiled__/no-columns/ComponentWithCustomHook', + ); // simulated Webpack 'cheap-module-source-map' }); it('should work for external hooks', async () => { @@ -245,6 +250,9 @@ describe('parseHookNames', () => { './__source__/__compiled__/bundle', 'ComponentWithExternalCustomHooks', ); // bundle source map + await test( + './__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks', + ); // simulated Webpack 'cheap-module-source-map' }); it('should work when multiple hooks are on a line', async () => { @@ -269,6 +277,24 @@ describe('parseHookNames', () => { './__source__/__compiled__/bundle', 'ComponentWithMultipleHooksPerLine', ); // bundle source map + + async function noColumnTest(path, name = 'Component') { + const Component = require(path)[name]; + const hookNames = await getHookNamesForComponent(Component); + expectHookNamesToEqual(hookNames, [ + 'a', // useContext() + 'b', // useContext() + null, // useContext() + null, // useContext() + ]); + } + + // Note that this test is expected to only match the first two hooks + // because the 3rd and 4th hook are on the same line, + // and this type of source map doesn't have column numbers. + await noColumnTest( + './__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine', + ); // simulated Webpack 'cheap-module-source-map' }); // TODO Inline require (e.g. require("react").useState()) isn't supported yet. @@ -287,6 +313,7 @@ describe('parseHookNames', () => { await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map await test('./__source__/__compiled__/external/InlineRequire'); // external source map await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map + await test('./__source__/__compiled__/no-columns/InlineRequire'); // simulated Webpack 'cheap-module-source-map' }); it('should support sources that contain the string "sourceMappingURL="', async () => { @@ -312,6 +339,9 @@ describe('parseHookNames', () => { './__source__/__compiled__/bundle', 'ContainingStringSourceMappingURL', ); // bundle source map + await test( + './__source__/__compiled__/no-columns/ContainingStringSourceMappingURL', + ); // simulated Webpack 'cheap-module-source-map' }); }); }); diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js index 231bdee521266..6906abf52c927 100644 --- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js +++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js @@ -14,18 +14,21 @@ const babel = require('rollup-plugin-babel'); const commonjs = require('rollup-plugin-commonjs'); const jsx = require('acorn-jsx'); const rollupResolve = require('rollup-plugin-node-resolve'); +const {encode, decode} = require('sourcemap-codec'); const sourceDir = resolve(__dirname, '__source__'); const buildRoot = resolve(sourceDir, '__compiled__'); const externalDir = resolve(buildRoot, 'external'); const inlineDir = resolve(buildRoot, 'inline'); const bundleDir = resolve(buildRoot, 'bundle'); +const noColumnsDir = resolve(buildRoot, 'no-columns'); // Remove previous builds emptyDirSync(buildRoot); mkdirSync(externalDir); mkdirSync(inlineDir); mkdirSync(bundleDir); +mkdirSync(noColumnsDir); function compile(fileName) { const code = readFileSync(resolve(sourceDir, fileName), 'utf8'); @@ -60,6 +63,25 @@ function compile(fileName) { 'utf8', ); + // Strip column numbers from source map to mimic Webpack 'cheap-module-source-map' + // The mappings field represents a list of integer arrays. + // Each array defines a pair of corresponding file locations, one in the generated code and one in the original. + // Each array has also been encoded first as VLQs (variable-length quantities) + // and then as base64 because this makes them more compact overall. + // https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/view# + const decodedMappings = decode(sourceMap.mappings).map(entries => + entries.map(entry => { + if (entry.length === 0) { + return entry; + } + + // Each non-empty segment has the following components: + // generated code column, source index, source code line, source code column, and (optional) name index + return [...entry.slice(0, 3), 0, ...entry.slice(4)]; + }), + ); + const encodedMappings = encode(decodedMappings); + // Generate compiled output with external inline base64 source maps writeFileSync( resolve(inlineDir, fileName), @@ -68,6 +90,20 @@ function compile(fileName) { btoa(JSON.stringify(sourceMap)), 'utf8', ); + + // Generate compiled output with external inline base64 source maps without column numbers + writeFileSync( + resolve(noColumnsDir, fileName), + transformed.code + + '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' + + btoa( + JSON.stringify({ + ...sourceMap, + mappings: encodedMappings, + }), + ), + 'utf8', + ); } async function bundle() { diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js index 879f17ae18055..87a4f47dcaeab 100644 --- a/packages/react-devtools-extensions/src/astUtils.js +++ b/packages/react-devtools-extensions/src/astUtils.js @@ -32,7 +32,7 @@ const AST_NODE_TYPES = Object.freeze({ function checkNodeLocation( path: NodePath, line: number, - column: number, + column?: number | null = null, ): boolean { const {start, end} = path.node.loc; @@ -40,22 +40,24 @@ function checkNodeLocation( return false; } - // Column numbers are representated differently between tools/engines. - // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based. - // - // In practice this will probably never matter, - // because this code matches the 1-based Error stack location for the hook Identifier (e.g. useState) - // with the larger 0-based VariableDeclarator (e.g. [foo, setFoo] = useState()) - // so the ranges should always overlap. - // - // For more info see https://github.com/facebook/react/pull/21833#discussion_r666831276 - column -= 1; - - if ( - (line === start.line && column < start.column) || - (line === end.line && column > end.column) - ) { - return false; + if (column !== null) { + // Column numbers are representated differently between tools/engines. + // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based. + // + // In practice this will probably never matter, + // because this code matches the 1-based Error stack location for the hook Identifier (e.g. useState) + // with the larger 0-based VariableDeclarator (e.g. [foo, setFoo] = useState()) + // so the ranges should always overlap. + // + // For more info see https://github.com/facebook/react/pull/21833#discussion_r666831276 + column -= 1; + + if ( + (line === start.line && column < start.column) || + (line === end.line && column > end.column) + ) { + return false; + } } return true; @@ -122,15 +124,35 @@ export function getHookName( ): string | null { const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST); - const potentialReactHookASTNode = hooksFromAST.find(node => { - const nodeLocationCheck = checkNodeLocation( - node, - originalSourceLineNumber, - originalSourceColumnNumber, - ); - const hookDeclaractionCheck = isConfirmedHookDeclaration(node); - return nodeLocationCheck && hookDeclaractionCheck; - }); + let potentialReactHookASTNode = null; + if (originalSourceColumnNumber === 0) { + // This most likely indicates a source map type like 'cheap-module-source-map' + // that intentionally drops column numbers for compilation speed in DEV builds. + // In this case, we can assume there's probably only one hook per line (true in most cases) + // and just fail if we find more than one match. + const matchingNodes = hooksFromAST.filter(node => { + const nodeLocationCheck = checkNodeLocation( + node, + originalSourceLineNumber, + ); + const hookDeclaractionCheck = isConfirmedHookDeclaration(node); + return nodeLocationCheck && hookDeclaractionCheck; + }); + + if (matchingNodes.length === 1) { + potentialReactHookASTNode = matchingNodes[0]; + } + } else { + potentialReactHookASTNode = hooksFromAST.find(node => { + const nodeLocationCheck = checkNodeLocation( + node, + originalSourceLineNumber, + originalSourceColumnNumber, + ); + const hookDeclaractionCheck = isConfirmedHookDeclaration(node); + return nodeLocationCheck && hookDeclaractionCheck; + }); + } if (!potentialReactHookASTNode) { return null; diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js index be6deb71f554a..218bd596d03a7 100644 --- a/packages/react-devtools-extensions/src/parseHookNames.js +++ b/packages/react-devtools-extensions/src/parseHookNames.js @@ -350,7 +350,7 @@ function fetchFile(url: string): Promise { }, error => { if (__DEBUG__) { - console.log(`fetchFile() Could not fetch file "${error.message}"`); + console.log(`fetchFile() Could not fetch file: ${error.message}`); } reject(null); }, diff --git a/yarn.lock b/yarn.lock index 3332b21474771..c0bddfe82c64e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13047,7 +13047,7 @@ source-map@^0.8.0-beta.0: dependencies: whatwg-url "^7.0.0" -sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4: +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" integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==