@samitouri / QOS-React / commits / 87b3ada89d

DevTools: Named hooks supports "cheap-module-source-map" (#21874)

"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.

Brian Vaughn committed Jul 14, 2021 at 14:37 UTC 87b3ada89dc83c88a89ff1b599b0f39e3c49cc32

15 files changed +498 -28

packages/react-devtools-extensions/package.json

@@ -50,6 +50,7 @@

50 "rollup-plugin-commonjs": "^9.3.4",

51 "rollup-plugin-node-resolve": "^2.1.1",

52 "source-map": "^0.8.0-beta.0",

53 + "sourcemap-codec": "^1.4.8",

54 "style-loader": "^0.23.1",

55 "web-ext": "^3.0.0",

56 "webpack": "^4.43.0",

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js new

+41

@@ -0,0 +1,41 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +var _react = _interopRequireWildcard(require("react"));

9 +

10 +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

11 +

12 +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; }

13 +

14 +/**

15 + * Copyright (c) Facebook, Inc. and its affiliates.

16 + *

17 + * This source code is licensed under the MIT license found in the

18 + * LICENSE file in the root directory of this source tree.

19 + *

20 + * @flow

21 + */

22 +function Component() {

23 + const [count, setCount] = (0, _react.useState)(0);

24 + const isDarkMode = useIsDarkMode();

25 + (0, _react.useEffect)(() => {// ...

26 + }, []);

27 +

28 + const handleClick = () => setCount(count + 1);

29 +

30 + 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", {

31 + onClick: handleClick

32 + }, "Update count"));

33 +}

34 +

35 +function useIsDarkMode() {

36 + const [isDarkMode] = (0, _react.useState)(false);

37 + (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...

38 + }, []);

39 + return isDarkMode;

40 +}

41 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFFQSx3QkFBQSxNQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTs7QUFJQSxRQUFBQyxXQUFBLEdBQUEsTUFBQUgsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBOztBQUVBLHNCQUNBLHlFQUNBLHlEQUFBRSxVQUFBLENBREEsZUFFQSxxREFBQUYsS0FBQSxDQUZBLGVBR0E7QUFBQSxJQUFBLE9BQUEsRUFBQUk7QUFBQSxvQkFIQSxDQURBO0FBT0E7O0FBRUEsU0FBQUQsYUFBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBRCxVQUFBLElBQUEscUJBQUEsS0FBQSxDQUFBO0FBRUEsd0JBQUEsU0FBQUcsZUFBQSxHQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTtBQUlBLFNBQUFILFVBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gaXNEYXJrTW9kZTtcbn1cbiJdfQ==

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js new

+26

@@ -0,0 +1,26 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +var _react = _interopRequireDefault(require("react"));

9 +

10 +var _useTheme = _interopRequireDefault(require("./useTheme"));

11 +

12 +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

13 +

14 +/**

15 + * Copyright (c) Facebook, Inc. and its affiliates.

16 + *

17 + * This source code is licensed under the MIT license found in the

18 + * LICENSE file in the root directory of this source tree.

19 + *

20 + * @flow

21 + */

22 +function Component() {

23 + const theme = (0, _useTheme.default)();

24 + return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);

25 +}

26 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxLQUFBLEdBQUEsd0JBQUE7QUFFQSxzQkFBQSxxREFBQUEsS0FBQSxDQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1c2VUaGVtZSBmcm9tICcuL3VzZVRoZW1lJztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiA8ZGl2PnRoZW1lOiB7dGhlbWV9PC9kaXY+O1xufVxuIl19

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js new

+30

@@ -0,0 +1,30 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +var _react = require("react");

9 +

10 +/**

11 + * Copyright (c) Facebook, Inc. and its affiliates.

12 + *

13 + * This source code is licensed under the MIT license found in the

14 + * LICENSE file in the root directory of this source tree.

15 + *

16 + * @flow

17 + */

18 +const A = /*#__PURE__*/(0, _react.createContext)(1);

19 +const B = /*#__PURE__*/(0, _react.createContext)(2);

20 +

21 +function Component() {

22 + const a = (0, _react.useContext)(A);

23 + const b = (0, _react.useContext)(B); // prettier-ignore

24 +

25 + const c = (0, _react.useContext)(A),

26 + d = (0, _react.useContext)(B); // eslint-disable-line one-var

27 +

28 + return a + b + c + d;

29 +}

30 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFBQSxDQUFBLGdCQUFBLDBCQUFBLENBQUEsQ0FBQTtBQUNBLE1BQUFDLENBQUEsZ0JBQUEsMEJBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFDLFNBQUEsR0FBQTtBQUNBLFFBQUFDLENBQUEsR0FBQSx1QkFBQUgsQ0FBQSxDQUFBO0FBQ0EsUUFBQUksQ0FBQSxHQUFBLHVCQUFBSCxDQUFBLENBQUEsQ0FGQSxDQUlBOztBQUNBLFFBQUFJLENBQUEsR0FBQSx1QkFBQUwsQ0FBQSxDQUFBO0FBQUEsUUFBQU0sQ0FBQSxHQUFBLHVCQUFBTCxDQUFBLENBQUEsQ0FMQSxDQUtBOztBQUVBLFNBQUFFLENBQUEsR0FBQUMsQ0FBQSxHQUFBQyxDQUFBLEdBQUFDLENBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQge2NyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHR9IGZyb20gJ3JlYWN0JztcblxuY29uc3QgQSA9IGNyZWF0ZUNvbnRleHQoMSk7XG5jb25zdCBCID0gY3JlYXRlQ29udGV4dCgyKTtcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgYSA9IHVzZUNvbnRleHQoQSk7XG4gIGNvbnN0IGIgPSB1c2VDb250ZXh0KEIpO1xuXG4gIC8vIHByZXR0aWVyLWlnbm9yZVxuICBjb25zdCBjID0gdXNlQ29udGV4dChBKSwgZCA9IHVzZUNvbnRleHQoQik7IC8vIGVzbGludC1kaXNhYmxlLWxpbmUgb25lLXZhclxuXG4gIHJldHVybiBhICsgYiArIGMgKyBkO1xufVxuIl19

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js new

+29

@@ -0,0 +1,29 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +var _react = _interopRequireWildcard(require("react"));

9 +

10 +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

11 +

13 +

14 +/**

15 + * Copyright (c) Facebook, Inc. and its affiliates.

16 + *

17 + * This source code is licensed under the MIT license found in the

18 + * LICENSE file in the root directory of this source tree.

19 + *

20 + * @flow

21 + */

22 +// ?sourceMappingURL=([^\s'"]+)/gm

23 +function Component() {

24 + const [count, setCount] = (0, _react.useState)(0);

25 + return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {

26 + onClick: () => setCount(count + 1)

27 + }, "Click me"));

28 +}

29 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js new

+28

@@ -0,0 +1,28 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +var _react = _interopRequireWildcard(require("react"));

9 +

10 +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

11 +

13 +

14 +/**

15 + * Copyright (c) Facebook, Inc. and its affiliates.

16 + *

17 + * This source code is licensed under the MIT license found in the

18 + * LICENSE file in the root directory of this source tree.

19 + *

20 + * @flow

21 + */

22 +function Component() {

23 + const [count, setCount] = (0, _react.useState)(0);

24 + return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {

25 + onClick: () => setCount(count + 1)

26 + }, "Click me"));

27 +}

28 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js new

+21

@@ -0,0 +1,21 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.Component = Component;

7 +

8 +/**

9 + * Copyright (c) Facebook, Inc. and its affiliates.

10 + *

11 + * This source code is licensed under the MIT license found in the

12 + * LICENSE file in the root directory of this source tree.

13 + *

14 + * @flow

15 + */

16 +function Component() {

17 + const [count] = require('react').useState(0);

18 +

19 + return count;

20 +}

21 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsSUFBQUMsT0FBQSxDQUFBLE9BQUEsQ0FBQSxDQUFBQyxRQUFBLENBQUEsQ0FBQSxDQUFBOztBQUVBLFNBQUFGLEtBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnRdID0gcmVxdWlyZSgncmVhY3QnKS51c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gY291bnQ7XG59XG4iXX0=

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js new

+106

@@ -0,0 +1,106 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.ListItem = ListItem;

7 +exports.List = List;

8 +

9 +var React = _interopRequireWildcard(require("react"));

10 +

11 +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

12 +

13 +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; }

14 +

15 +/**

16 + * Copyright (c) Facebook, Inc. and its affiliates.

17 + *

18 + * This source code is licensed under the MIT license found in the

19 + * LICENSE file in the root directory of this source tree.

20 + *

21 + * @flow

22 + */

23 +function ListItem({

24 + item,

25 + removeItem,

26 + toggleItem

27 +}) {

28 + const handleDelete = (0, React.useCallback)(() => {

29 + removeItem(item);

30 + }, [item, removeItem]);

31 + const handleToggle = (0, React.useCallback)(() => {

32 + toggleItem(item);

33 + }, [item, toggleItem]);

34 + return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {

35 + onClick: handleDelete

36 + }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {

37 + checked: item.isComplete,

38 + onChange: handleToggle,

39 + type: "checkbox"

40 + }), ' ', item.text));

41 +}

42 +

43 +function List(props) {

44 + const [newItemText, setNewItemText] = (0, React.useState)('');

45 + const [items, setItems] = (0, React.useState)([{

46 + id: 1,

47 + isComplete: true,

48 + text: 'First'

49 + }, {

50 + id: 2,

51 + isComplete: true,

52 + text: 'Second'

53 + }, {

54 + id: 3,

55 + isComplete: false,

56 + text: 'Third'

57 + }]);

58 + const [uid, setUID] = (0, React.useState)(4);

59 + const handleClick = (0, React.useCallback)(() => {

60 + if (newItemText !== '') {

61 + setItems([...items, {

62 + id: uid,

63 + isComplete: false,

64 + text: newItemText

65 + }]);

66 + setUID(uid + 1);

67 + setNewItemText('');

68 + }

69 + }, [newItemText, items, uid]);

70 + const handleKeyPress = (0, React.useCallback)(event => {

71 + if (event.key === 'Enter') {

72 + handleClick();

73 + }

74 + }, [handleClick]);

75 + const handleChange = (0, React.useCallback)(event => {

76 + setNewItemText(event.currentTarget.value);

77 + }, [setNewItemText]);

78 + const removeItem = (0, React.useCallback)(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);

79 + const toggleItem = (0, React.useCallback)(itemToToggle => {

80 + // Dont use indexOf()

81 + // because editing props in DevTools creates a new Object.

82 + const index = items.findIndex(item => item.id === itemToToggle.id);

83 + setItems(items.slice(0, index).concat({ ...itemToToggle,

84 + isComplete: !itemToToggle.isComplete

85 + }).concat(items.slice(index + 1)));

86 + }, [items]);

87 + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {

88 + type: "text",

89 + placeholder: "New list item...",

90 + value: newItemText,

91 + onChange: handleChange,

92 + onKeyPress: handleKeyPress

93 + }), /*#__PURE__*/React.createElement("button", {

94 + disabled: newItemText === '',

95 + onClick: handleClick

96 + }, /*#__PURE__*/React.createElement("span", {

97 + role: "img",

98 + "aria-label": "Add item"

99 + }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {

100 + key: item.id,

101 + item: item,

102 + removeItem: removeItem,

103 + toggleItem: toggleItem

104 + }))));

105 +}

106 +//# 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

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js new

+73

@@ -0,0 +1,73 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +Object.defineProperty(exports, "ComponentWithCustomHook", {

7 + enumerable: true,

8 + get: function () {

9 + return _ComponentWithCustomHook.Component;

10 + }

11 +});

12 +Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {

13 + enumerable: true,

14 + get: function () {

15 + return _ComponentWithExternalCustomHooks.Component;

16 + }

17 +});

18 +Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {

19 + enumerable: true,

20 + get: function () {

21 + return _ComponentWithMultipleHooksPerLine.Component;

22 + }

23 +});

24 +Object.defineProperty(exports, "ContainingStringSourceMappingURL", {

25 + enumerable: true,

26 + get: function () {

27 + return _ContainingStringSourceMappingURL.Component;

28 + }

29 +});

30 +Object.defineProperty(exports, "Example", {

31 + enumerable: true,

32 + get: function () {

33 + return _Example.Component;

34 + }

35 +});

36 +Object.defineProperty(exports, "InlineRequire", {

37 + enumerable: true,

38 + get: function () {

39 + return _InlineRequire.Component;

40 + }

41 +});

42 +Object.defineProperty(exports, "useTheme", {

43 + enumerable: true,

44 + get: function () {

45 + return _useTheme.default;

46 + }

47 +});

48 +exports.ToDoList = void 0;

49 +

50 +var _ComponentWithCustomHook = require("./ComponentWithCustomHook");

51 +

52 +var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");

53 +

54 +var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");

55 +

56 +var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");

57 +

58 +var _Example = require("./Example");

59 +

60 +var _InlineRequire = require("./InlineRequire");

61 +

62 +var ToDoList = _interopRequireWildcard(require("./ToDoList"));

63 +

64 +exports.ToDoList = ToDoList;

65 +

66 +var _useTheme = _interopRequireDefault(require("./useTheme"));

67 +

68 +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

69 +

70 +function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

71 +

72 +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; }

73 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==

\ No newline at end of file

packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js new

+27

@@ -0,0 +1,27 @@

1 +"use strict";

2 +

3 +Object.defineProperty(exports, "__esModule", {

4 + value: true

5 +});

6 +exports.default = useTheme;

7 +exports.ThemeContext = void 0;

8 +

9 +var _react = require("react");

10 +

11 +/**

12 + * Copyright (c) Facebook, Inc. and its affiliates.

13 + *

14 + * This source code is licensed under the MIT license found in the

15 + * LICENSE file in the root directory of this source tree.

16 + *

17 + * @flow

18 + */

19 +const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');

20 +exports.ThemeContext = ThemeContext;

21 +

22 +function useTheme() {

23 + const theme = (0, _react.useContext)(ThemeContext);

24 + (0, _react.useDebugValue)(theme);

25 + return theme;

26 +}

27 +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV0EsTUFBQUEsWUFBQSxnQkFBQSwwQkFBQSxRQUFBLENBQUE7OztBQUVBLFNBQUFDLFFBQUEsR0FBQTtBQUNBLFFBQUFDLEtBQUEsR0FBQSx1QkFBQUYsWUFBQSxDQUFBO0FBQ0EsNEJBQUFFLEtBQUE7QUFDQSxTQUFBQSxLQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19

\ No newline at end of file

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

+30

@@ -172,6 +172,7 @@ describe('parseHookNames', () => {

172 await test('./__source__/__compiled__/inline/Example'); // inline source map

173 await test('./__source__/__compiled__/external/Example'); // external source map

174 await test('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map

175 + await test('./__source__/__compiled__/no-columns/Example'); // simulated Webpack 'cheap-module-source-map'

176 });

177

178 it('should work with more complex files and components', async () => {

@@ -203,6 +204,7 @@ describe('parseHookNames', () => {

204 await test('./__source__/__compiled__/inline/ToDoList'); // inline source map

205 await test('./__source__/__compiled__/external/ToDoList'); // external source map

206 await test('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map

207 + await test('./__source__/__compiled__/no-columns/ToDoList'); // simulated Webpack 'cheap-module-source-map'

208 });

209

210 it('should work for custom hook', async () => {

@@ -220,6 +222,9 @@ describe('parseHookNames', () => {

222 await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map

223 await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map

224 await test('./__source__/__compiled__/bundle', 'ComponentWithCustomHook'); // bundle source map

225 + await test(

226 + './__source__/__compiled__/no-columns/ComponentWithCustomHook',

227 + ); // simulated Webpack 'cheap-module-source-map'

228 });

229

230 it('should work for external hooks', async () => {

@@ -245,6 +250,9 @@ describe('parseHookNames', () => {

250 './__source__/__compiled__/bundle',

251 'ComponentWithExternalCustomHooks',

252 ); // bundle source map

253 + await test(

254 + './__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks',

255 + ); // simulated Webpack 'cheap-module-source-map'

256 });

257

258 it('should work when multiple hooks are on a line', async () => {

@@ -269,6 +277,24 @@ describe('parseHookNames', () => {

277 './__source__/__compiled__/bundle',

278 'ComponentWithMultipleHooksPerLine',

279 ); // bundle source map

280 +

281 + async function noColumnTest(path, name = 'Component') {

282 + const Component = require(path)[name];

283 + const hookNames = await getHookNamesForComponent(Component);

284 + expectHookNamesToEqual(hookNames, [

285 + 'a', // useContext()

286 + 'b', // useContext()

287 + null, // useContext()

288 + null, // useContext()

289 + ]);

290 + }

291 +

292 + // Note that this test is expected to only match the first two hooks

293 + // because the 3rd and 4th hook are on the same line,

294 + // and this type of source map doesn't have column numbers.

295 + await noColumnTest(

296 + './__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine',

297 + ); // simulated Webpack 'cheap-module-source-map'

298 });

299

300 // TODO Inline require (e.g. require("react").useState()) isn't supported yet.

@@ -287,6 +313,7 @@ describe('parseHookNames', () => {

313 await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map

314 await test('./__source__/__compiled__/external/InlineRequire'); // external source map

315 await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map

316 + await test('./__source__/__compiled__/no-columns/InlineRequire'); // simulated Webpack 'cheap-module-source-map'

317 });

318

319 it('should support sources that contain the string "sourceMappingURL="', async () => {

@@ -312,6 +339,9 @@ describe('parseHookNames', () => {

339 './__source__/__compiled__/bundle',

340 'ContainingStringSourceMappingURL',

341 ); // bundle source map

342 + await test(

343 + './__source__/__compiled__/no-columns/ContainingStringSourceMappingURL',

344 + ); // simulated Webpack 'cheap-module-source-map'

345 });

346 });

347 });

packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js

+36

@@ -14,18 +14,21 @@ const babel = require('rollup-plugin-babel');

14 const commonjs = require('rollup-plugin-commonjs');

15 const jsx = require('acorn-jsx');

16 const rollupResolve = require('rollup-plugin-node-resolve');

17 +const {encode, decode} = require('sourcemap-codec');

19 const sourceDir = resolve(__dirname, '__source__');

20 const buildRoot = resolve(sourceDir, '__compiled__');

21 const externalDir = resolve(buildRoot, 'external');

22 const inlineDir = resolve(buildRoot, 'inline');

23 const bundleDir = resolve(buildRoot, 'bundle');

24 +const noColumnsDir = resolve(buildRoot, 'no-columns');

26 // Remove previous builds

27 emptyDirSync(buildRoot);

28 mkdirSync(externalDir);

29 mkdirSync(inlineDir);

30 mkdirSync(bundleDir);

31 +mkdirSync(noColumnsDir);

33 function compile(fileName) {

34 const code = readFileSync(resolve(sourceDir, fileName), 'utf8');

@@ -60,6 +63,25 @@ function compile(fileName) {

63 'utf8',

64 );

66 + // Strip column numbers from source map to mimic Webpack 'cheap-module-source-map'

67 + // The mappings field represents a list of integer arrays.

68 + // Each array defines a pair of corresponding file locations, one in the generated code and one in the original.

69 + // Each array has also been encoded first as VLQs (variable-length quantities)

70 + // and then as base64 because this makes them more compact overall.

71 + // https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/view#

72 + const decodedMappings = decode(sourceMap.mappings).map(entries =>

73 + entries.map(entry => {

74 + if (entry.length === 0) {

75 + return entry;

76 + }

77 +

78 + // Each non-empty segment has the following components:

79 + // generated code column, source index, source code line, source code column, and (optional) name index

80 + return [...entry.slice(0, 3), 0, ...entry.slice(4)];

81 + }),

82 + );

83 + const encodedMappings = encode(decodedMappings);

84 +

85 // Generate compiled output with external inline base64 source maps

86 writeFileSync(

87 resolve(inlineDir, fileName),

@@ -68,6 +90,20 @@ function compile(fileName) {

90 btoa(JSON.stringify(sourceMap)),

91 'utf8',

92 );

93 +

94 + // Generate compiled output with external inline base64 source maps without column numbers

95 + writeFileSync(

96 + resolve(noColumnsDir, fileName),

97 + transformed.code +

98 + '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +

99 + btoa(

100 + JSON.stringify({

101 + ...sourceMap,

102 + mappings: encodedMappings,

103 + }),

104 + ),

105 + 'utf8',

106 + );

107 }

108

109 async function bundle() {

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

+48 -26

@@ -32,7 +32,7 @@ const AST_NODE_TYPES = Object.freeze({

32 function checkNodeLocation(

33 path: NodePath,

34 line: number,

35 - column: number,

35 + column?: number | null = null,

36 ): boolean {

37 const {start, end} = path.node.loc;

@@ -40,22 +40,24 @@ function checkNodeLocation(

40 return false;

41 }

43 - // Column numbers are representated differently between tools/engines.

44 - // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.

45 - //

46 - // In practice this will probably never matter,

47 - // because this code matches the 1-based Error stack location for the hook Identifier (e.g. useState)

48 - // with the larger 0-based VariableDeclarator (e.g. [foo, setFoo] = useState())

49 - // so the ranges should always overlap.

50 - //

51 - // For more info see https://github.com/facebook/react/pull/21833#discussion_r666831276

52 - column -= 1;

53 -

54 - if (

55 - (line === start.line && column < start.column) ||

56 - (line === end.line && column > end.column)

57 - ) {

58 - return false;

43 + if (column !== null) {

44 + // Column numbers are representated differently between tools/engines.

45 + // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.

46 + //

47 + // In practice this will probably never matter,

48 + // because this code matches the 1-based Error stack location for the hook Identifier (e.g. useState)

49 + // with the larger 0-based VariableDeclarator (e.g. [foo, setFoo] = useState())

50 + // so the ranges should always overlap.

51 + //

52 + // For more info see https://github.com/facebook/react/pull/21833#discussion_r666831276

53 + column -= 1;

54 +

55 + if (

56 + (line === start.line && column < start.column) ||

57 + (line === end.line && column > end.column)

58 + ) {

59 + return false;

60 + }

61 }

63 return true;

@@ -122,15 +124,35 @@ export function getHookName(

124 ): string | null {

125 const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);

126

125 - const potentialReactHookASTNode = hooksFromAST.find(node => {

126 - const nodeLocationCheck = checkNodeLocation(

127 - node,

128 - originalSourceLineNumber,

129 - originalSourceColumnNumber,

130 - );

131 - const hookDeclaractionCheck = isConfirmedHookDeclaration(node);

132 - return nodeLocationCheck && hookDeclaractionCheck;

133 - });

127 + let potentialReactHookASTNode = null;

128 + if (originalSourceColumnNumber === 0) {

129 + // This most likely indicates a source map type like 'cheap-module-source-map'

130 + // that intentionally drops column numbers for compilation speed in DEV builds.

131 + // In this case, we can assume there's probably only one hook per line (true in most cases)

132 + // and just fail if we find more than one match.

133 + const matchingNodes = hooksFromAST.filter(node => {

134 + const nodeLocationCheck = checkNodeLocation(

135 + node,

136 + originalSourceLineNumber,

137 + );

138 + const hookDeclaractionCheck = isConfirmedHookDeclaration(node);

139 + return nodeLocationCheck && hookDeclaractionCheck;

140 + });

141 +

142 + if (matchingNodes.length === 1) {

143 + potentialReactHookASTNode = matchingNodes[0];

144 + }

145 + } else {

146 + potentialReactHookASTNode = hooksFromAST.find(node => {

147 + const nodeLocationCheck = checkNodeLocation(

148 + node,

149 + originalSourceLineNumber,

150 + originalSourceColumnNumber,

151 + );

152 + const hookDeclaractionCheck = isConfirmedHookDeclaration(node);

153 + return nodeLocationCheck && hookDeclaractionCheck;

154 + });

155 + }

156

157 if (!potentialReactHookASTNode) {

158 return null;

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

+1 -1

@@ -350,7 +350,7 @@ function fetchFile(url: string): Promise<string> {

350 },

351 error => {

352 if (__DEBUG__) {

353 - console.log(`fetchFile() Could not fetch file "${error.message}"`);

353 + console.log(`fetchFile() Could not fetch file: ${error.message}`);

354 }

355 reject(null);

356 },

yarn.lock

+1 -1

@@ -13047,7 +13047,7 @@ source-map@^0.8.0-beta.0:

13047 dependencies:

13048 whatwg-url "^7.0.0"

13049

13050 -sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:

13050 +sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:

13051 version "1.4.8"

13052 resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"

13053 integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==