diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 1b85e113cbf40..35334517cf7d4 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -17,10 +17,12 @@
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
     "improve-images": "node ./improveImages.mjs",
-    "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
+    "update-mock-source-maps": "babel-node --presets=@babel/preset-env,@babel/preset-flow ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
+    "@babel/node": "^7.14.7",
+    "@babel/parser": "^7.14.8",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-flow-strip-types": "^7.10.4",
     "@babel/plugin-transform-modules-commonjs": "^7.10.4",
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 0000000000000..6925712d17c7c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"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 countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (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 darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 0000000000000..f8e72b2f12626
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 0000000000000..e326d7a4962d5
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 0000000000000..1e55e029876c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 0000000000000..05aedb938b715
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 0000000000000..b09f62f6e0baa
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 0000000000000..c657f3eb54551
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 0000000000000..96ff387bccc68
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 0000000000000..3cfed69078a8c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * 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 {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 0000000000000..d894f112fe2af
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_fb_sources":[[null,{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 0000000000000..0fc2c078ca125
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 0000000000000..bed33eccdea3c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
new file mode 100644
index 0000000000000..19134738824bc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
new file mode 100644
index 0000000000000..799ee59c1d707
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
new file mode 100644
index 0000000000000..388aeda62b308
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
new file mode 100644
index 0000000000000..635462c6c1176
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
new file mode 100644
index 0000000000000..a6eb863b661ff
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
new file mode 100644
index 0000000000000..b06880d9253cc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;AATA;;;;;;;;AAYO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD,qBACE,uCADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
new file mode 100644
index 0000000000000..a0f706b19fbaf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+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, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.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 _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+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=index.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
new file mode 100644
index 0000000000000..ed73e714bec48
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
new file mode 100644
index 0000000000000..95bb454253ec3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/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=useTheme.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
new file mode 100644
index 0000000000000..e5129095bfcd0
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 0000000000000..6925712d17c7c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"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 countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (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 darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return [isDarkMode, () => {}];
+}
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 0000000000000..0740333a06d7c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,UAAU,GAAG,qBAAS,CAAT,CAAnB;AACA,QAAMC,KAAK,GAAGD,UAAU,CAAC,CAAD,CAAxB;AACA,QAAME,QAAQ,GAAGF,UAAU,CAAC,CAAD,CAA3B;AAEA,QAAMG,QAAQ,GAAGC,aAAa,EAA9B;AACA,QAAM,CAACC,UAAD,IAAeF,QAArB;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMG,WAAW,GAAG,MAAMJ,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAMG,aAAa,GAAG,qBAAS,KAAT,CAAtB;AACA,QAAM,CAACF,UAAD,IAAeE,aAArB;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAO,CAACH,UAAD,EAAa,MAAM,CAAE,CAArB,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const countState = useState(0);\n  const count = countState[0];\n  const setCount = countState[1];\n\n  const darkMode = useIsDarkMode();\n  const [isDarkMode] = darkMode;\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const darkModeState = useState(false);\n  const [isDarkMode] = darkModeState;\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return [isDarkMode, () => {}];\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 0000000000000..e326d7a4962d5
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 0000000000000..53b09d9ef25b2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useEffect, useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\n\n  useEffect(() => {\n    // ...\n  }, []);\n\n  const handleClick = () => setCount(count + 1);\n\n  return (\n    <>\n      <div>Dark mode? {isDarkMode}</div>\n      <div>Count: {count}</div>\n      <button onClick={handleClick}>Update count</button>\n    </>\n  );\n}\n\nfunction useIsDarkMode() {\n  const [isDarkMode] = useState(false);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 0000000000000..05aedb938b715
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 0000000000000..5c01a8334dbcb
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React from 'react';\nimport useTheme from './useTheme';\n\nexport function Component() {\n  const theme = useTheme();\n\n  return <div>theme: {theme}</div>;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 0000000000000..c657f3eb54551
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 0000000000000..f6a743e1cebf9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithMultipleHooksPerLine.js"],"names":["A","B","Component","a","b","c","d"],"mappings":";;;;;;;AASA;;AATA;;;;;;;;AAWA,MAAMA,CAAC,gBAAG,0BAAc,CAAd,CAAV;AACA,MAAMC,CAAC,gBAAG,0BAAc,CAAd,CAAV;;AAEO,SAASC,SAAT,GAAqB;AAC1B,QAAMC,CAAC,GAAG,uBAAWH,CAAX,CAAV;AACA,QAAMI,CAAC,GAAG,uBAAWH,CAAX,CAAV,CAF0B,CAI1B;;AACA,QAAMI,CAAC,GAAG,uBAAWL,CAAX,CAAV;AAAA,QAAyBM,CAAC,GAAG,uBAAWL,CAAX,CAA7B,CAL0B,CAKkB;;AAE5C,SAAOE,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext} from 'react';\n\nconst A = createContext(1);\nconst B = createContext(2);\n\nexport function Component() {\n  const a = useContext(A);\n  const b = useContext(B);\n\n  // prettier-ignore\n  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var\n\n  return a + b + c + d;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","a","b","c","d"],"mappings":"CAAD;gBYCA,AaDA;iBbEA,AaFA;oBbGA,AaHA,AMIA,AaJA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 0000000000000..3cfed69078a8c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * 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 {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 0000000000000..b633971efcc7a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithNestedHooks.js"],"names":["useMemo","useState","require","Component","props","InnerComponent","state","callback","module","exports"],"mappings":";;AAAA;;;;;;;;AAQA,MAAM;AAACA,EAAAA,OAAD;AAAUC,EAAAA;AAAV,IAAsBC,OAAO,CAAC,OAAD,CAAnC;;AAEA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGL,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACM,KAAD,IAAUL,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAOK,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAEDG,MAAM,CAACC,OAAP,GAAiB;AAACN,EAAAA;AAAD,CAAjB","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst {useMemo, useState} = require('react');\n\nfunction Component(props) {\n  const InnerComponent = useMemo(() => () => {\n    const [state] = useState(0);\n\n    return state;\n  });\n  props.callback(InnerComponent);\n\n  return null;\n}\n\nmodule.exports = {Component};\n"],"x_react_sources":[[{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 0000000000000..0fc2c078ca125
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 0000000000000..fdca45ffcf128
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\n// ?sourceMappingURL=([^\\s'\"]+)/gm\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
new file mode 100644
index 0000000000000..19134738824bc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
new file mode 100644
index 0000000000000..614e8ec7bc7e7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport React, {useState} from 'react';\n\nexport function Component() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>You clicked {count} times</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </div>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
new file mode 100644
index 0000000000000..388aeda62b308
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
new file mode 100644
index 0000000000000..f4b2ac45fff32
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["InlineRequire.js"],"names":["Component","count","require","useState"],"mappings":";;;;;;;AAAA;;;;;;;;AASO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUC,OAAO,CAAC,OAAD,CAAP,CAAiBC,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport function Component() {\n  const [count] = require('react').useState(0);\n\n  return count;\n}\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
new file mode 100644
index 0000000000000..a6eb863b661ff
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
new file mode 100644
index 0000000000000..5499d109beec8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ToDoList.js"],"names":["ListItem","item","removeItem","toggleItem","handleDelete","handleToggle","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleClick","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","map"],"mappings":";;;;;;;;AASA;;;;;;AATA;;;;;;;;AAYO,SAASA,QAAT,CAAkB;AAACC,EAAAA,IAAD;AAAOC,EAAAA,UAAP;AAAmBC,EAAAA;AAAnB,CAAlB,EAAkD;AACvD,QAAMC,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACD,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOC,UAAP,CAFkB,CAArB;AAIA,QAAMG,YAAY,GAAG,uBAAY,MAAM;AACrCF,IAAAA,UAAU,CAACF,IAAD,CAAV;AACD,GAFoB,EAElB,CAACA,IAAD,EAAOE,UAAP,CAFkB,CAArB;AAIA,sBACE,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGJ,IAAI,CAACM,IANR,CAFF,CADF;AAaD;;AAEM,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,oBAAS,EAAT,CAAtC;AACA,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,oBAAS,CACjC;AAACC,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GADiC,EAEjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,IAApB;AAA0BC,IAAAA,IAAI,EAAE;AAAhC,GAFiC,EAGjC;AAACO,IAAAA,EAAE,EAAE,CAAL;AAAQR,IAAAA,UAAU,EAAE,KAApB;AAA2BC,IAAAA,IAAI,EAAE;AAAjC,GAHiC,CAAT,CAA1B;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB,oBAAS,CAAT,CAAtB;AAEA,QAAMC,WAAW,GAAG,uBAAY,MAAM;AACpC,QAAIP,WAAW,KAAK,EAApB,EAAwB;AACtBG,MAAAA,QAAQ,CAAC,CACP,GAAGD,KADI,EAEP;AACEE,QAAAA,EAAE,EAAEC,GADN;AAEET,QAAAA,UAAU,EAAE,KAFd;AAGEC,QAAAA,IAAI,EAAEG;AAHR,OAFO,CAAD,CAAR;AAQAM,MAAAA,MAAM,CAACD,GAAG,GAAG,CAAP,CAAN;AACAJ,MAAAA,cAAc,CAAC,EAAD,CAAd;AACD;AACF,GAbmB,EAajB,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAbiB,CAApB;AAeA,QAAMG,cAAc,GAAG,uBACrBC,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBH,MAAAA,WAAW;AACZ;AACF,GALoB,EAMrB,CAACA,WAAD,CANqB,CAAvB;AASA,QAAMI,YAAY,GAAG,uBACnBF,KAAK,IAAI;AACPR,IAAAA,cAAc,CAACQ,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAHkB,EAInB,CAACZ,cAAD,CAJmB,CAArB;AAOA,QAAMT,UAAU,GAAG,uBACjBsB,YAAY,IAAIX,QAAQ,CAACD,KAAK,CAACa,MAAN,CAAaxB,IAAI,IAAIA,IAAI,KAAKuB,YAA9B,CAAD,CADP,EAEjB,CAACZ,KAAD,CAFiB,CAAnB;AAKA,QAAMT,UAAU,GAAG,uBACjBuB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGf,KAAK,CAACgB,SAAN,CAAgB3B,IAAI,IAAIA,IAAI,CAACa,EAAL,KAAYY,YAAY,CAACZ,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFiB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENpB,MAAAA,UAAU,EAAE,CAACoB,YAAY,CAACpB;AAFpB,KAFV,EAMGwB,MANH,CAMUlB,KAAK,CAACiB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAfgB,EAgBjB,CAACf,KAAD,CAhBiB,CAAnB;AAmBA,sBACE,oBAAC,cAAD,qBACE,uCADF,eAEE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEF,WAHT;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,KAAK,CAACmB,GAAN,CAAU9B,IAAI,iBACb,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEA,IAAI,CAACa,EADZ;AAEE,IAAA,IAAI,EAAEb,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport * as React from 'react';\nimport {Fragment, useCallback, useState} from 'react';\n\nexport function ListItem({item, removeItem, toggleItem}) {\n  const handleDelete = useCallback(() => {\n    removeItem(item);\n  }, [item, removeItem]);\n\n  const handleToggle = useCallback(() => {\n    toggleItem(item);\n  }, [item, toggleItem]);\n\n  return (\n    <li>\n      <button onClick={handleDelete}>Delete</button>\n      <label>\n        <input\n          checked={item.isComplete}\n          onChange={handleToggle}\n          type=\"checkbox\"\n        />{' '}\n        {item.text}\n      </label>\n    </li>\n  );\n}\n\nexport function List(props) {\n  const [newItemText, setNewItemText] = useState('');\n  const [items, setItems] = useState([\n    {id: 1, isComplete: true, text: 'First'},\n    {id: 2, isComplete: true, text: 'Second'},\n    {id: 3, isComplete: false, text: 'Third'},\n  ]);\n  const [uid, setUID] = useState(4);\n\n  const handleClick = useCallback(() => {\n    if (newItemText !== '') {\n      setItems([\n        ...items,\n        {\n          id: uid,\n          isComplete: false,\n          text: newItemText,\n        },\n      ]);\n      setUID(uid + 1);\n      setNewItemText('');\n    }\n  }, [newItemText, items, uid]);\n\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        handleClick();\n      }\n    },\n    [handleClick],\n  );\n\n  const handleChange = useCallback(\n    event => {\n      setNewItemText(event.currentTarget.value);\n    },\n    [setNewItemText],\n  );\n\n  const removeItem = useCallback(\n    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),\n    [items],\n  );\n\n  const toggleItem = useCallback(\n    itemToToggle => {\n      // Dont use indexOf()\n      // because editing props in DevTools creates a new Object.\n      const index = items.findIndex(item => item.id === itemToToggle.id);\n\n      setItems(\n        items\n          .slice(0, index)\n          .concat({\n            ...itemToToggle,\n            isComplete: !itemToToggle.isComplete,\n          })\n          .concat(items.slice(index + 1)),\n      );\n    },\n    [items],\n  );\n\n  return (\n    <Fragment>\n      <h1>List</h1>\n      <input\n        type=\"text\"\n        placeholder=\"New list item...\"\n        value={newItemText}\n        onChange={handleChange}\n        onKeyPress={handleKeyPress}\n      />\n      <button disabled={newItemText === ''} onClick={handleClick}>\n        <span role=\"img\" aria-label=\"Add item\">\n          Add\n        </span>\n      </button>\n      <ul>\n        {items.map(item => (\n          <ListItem\n            key={item.id}\n            item={item}\n            removeItem={removeItem}\n            toggleItem={toggleItem}\n          />\n        ))}\n      </ul>\n    </Fragment>\n  );\n}\n"],"x_react_sources":[[{"names":["<no-hook>","handleDelete","handleToggle","newItemText","items","uid","handleClick","handleKeyPress","handleChange","removeItem","toggleItem"],"mappings":"CAAD;cuBCA;gBCDA;kBDEA;oBCFA;sCgBGA,AYHA;uCxBIA;2CxBJA;4CoBKA,AWLA;8CbMA;2DSNA;6DNOA;oEtBPA;sEoBQA;2EpBRA;6EkBSA;gFlBTA;kFkBUA;mGlBVA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
new file mode 100644
index 0000000000000..a0f706b19fbaf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+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, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.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 _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+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=index.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
new file mode 100644
index 0000000000000..fe3a9c29b7527
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nexport {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksIndirectly';\nexport {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\nexport {Component as ComponentWithNestedHooks} from './ComponentWithNestedHooks';\nexport {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';\nexport {Component as Example} from './Example';\nexport {Component as InlineRequire} from './InlineRequire';\nimport * as ToDoList from './ToDoList';\nexport {ToDoList};\nexport {default as useTheme} from './useTheme';\n"],"x_react_sources":[[{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
new file mode 100644
index 0000000000000..95bb454253ec3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/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=useTheme.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
new file mode 100644
index 0000000000000..bc7ae9fddd8aa
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["useTheme.js"],"names":["ThemeContext","useTheme","theme"],"mappings":";;;;;;;;AASA;;AATA;;;;;;;;AAWO,MAAMA,YAAY,gBAAG,0BAAc,QAAd,CAArB;;;AAEQ,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAG,uBAAWF,YAAX,CAAd;AACA,4BAAcE,KAAd;AACA,SAAOA,KAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport {createContext, useContext, useDebugValue} from 'react';\n\nexport const ThemeContext = createContext('bright');\n\nexport default function useTheme() {\n  const theme = useContext(ThemeContext);\n  useDebugValue(theme);\n  return theme;\n}\n"],"x_react_sources":[[{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 0000000000000..ee19fdf9ba3d8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"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 countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (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 darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 0000000000000..ac7f10f99e8b0
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7Z0NiRUEsQWVGQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 0000000000000..a88a83c4078fc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 0000000000000..747e2ccd42b73
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiJDQUFEO2dCWUNBLEFhREE7aUJiRUEsQWFGQTtvQmJHQSxBYUhBLEFNSUEsQWFKQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 0000000000000..c7736181d435b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * 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 {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiSW5uZXJDb21wb25lbnQiLCJzdGF0ZSJdLCJtYXBwaW5ncyI6IkNBQUQ7WXlCQ0E7YUxDQSxBV0RBO2dCM0JEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 0000000000000..d5520ecc3230d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
new file mode 100644
index 0000000000000..583fd413e41fd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
new file mode 100644
index 0000000000000..e95e996016dd4
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
new file mode 100644
index 0000000000000..35f3c827f402d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwibmV3SXRlbVRleHQiLCJpdGVtcyIsInVpZCIsImhhbmRsZUNsaWNrIiwiaGFuZGxlS2V5UHJlc3MiLCJoYW5kbGVDaGFuZ2UiLCJyZW1vdmVJdGVtIiwidG9nZ2xlSXRlbSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y3VCQ0E7Z0JDREE7a0JERUE7b0JDRkE7c0NnQkdBLEFZSEE7dUN4QklBOzJDeEJKQTs0Q29CS0EsQVdMQTs4Q2JNQTsyRFNOQTs2RE5PQTtvRXRCUEE7c0VvQlFBOzJFcEJSQTs2RWtCU0E7Z0ZsQlRBO2tGa0JVQTttR2xCVkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
new file mode 100644
index 0000000000000..671a6e4bfdf81
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+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, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.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 _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
new file mode 100644
index 0000000000000..16d4789500b8a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2VnQkNBLEF3QkRBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 0000000000000..f4d3572ad6944
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"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 countState = (0, _react.useState)(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
+  (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 darkModeState = (0, _react.useState)(false);
+  const [isDarkMode] = darkModeState;
+  (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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 0000000000000..d9aea69a221df
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 0000000000000..7e525c715238a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 0000000000000..c79712b137048
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 0000000000000..d9394fd366ea0
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * 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 {
+  useMemo,
+  useState
+} = require('react');
+
+function Component(props) {
+  const InnerComponent = useMemo(() => () => {
+    const [state] = useState(0);
+    return state;
+  });
+  props.callback(InnerComponent);
+  return null;
+}
+
+module.exports = {
+  Component
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 0000000000000..6e446dd87e944
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
new file mode 100644
index 0000000000000..40e7fbf0b4287
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
new file mode 100644
index 0000000000000..a215395840d73
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
new file mode 100644
index 0000000000000..0c7a15e919ec8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
new file mode 100644
index 0000000000000..d0e793c8f72b3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ComponentUsingHooksIndirectly", {
+  enumerable: true,
+  get: function () {
+    return _ComponentUsingHooksIndirectly.Component;
+  }
+});
+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, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.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 _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
+var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
new file mode 100644
index 0000000000000..44d321d6a6b14
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js b/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
new file mode 100644
index 0000000000000..88393b0f1db24
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {parse} from '@babel/parser';
+import {generateEncodedHookMap, generateHookMap} from '../generateHookMap';
+
+function expectHookMapToEqual(actual, expected) {
+  expect(actual.names).toEqual(expected.names);
+
+  const formattedMappings = [];
+  actual.mappings.forEach(lines => {
+    lines.forEach(segment => {
+      const name = actual.names[segment[2]];
+      if (name == null) {
+        throw new Error(`Expected to find name at position ${segment[2]}`);
+      }
+      formattedMappings.push(`${name} from ${segment[0]}:${segment[1]}`);
+    });
+  });
+  expect(formattedMappings).toEqual(expected.mappings);
+}
+
+describe('generateHookMap', () => {
+  it('should parse names for built-in hooks', () => {
+    const code = `
+import {useState, useContext, useMemo, useReducer} from 'react';
+
+export function Component() {
+  const a = useMemo(() => A);
+  const [b, setB] = useState(0);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  const [e, dispatch] = useReducer(reducer, initialState);
+  const f = useRef(null)
+
+  return a + b + c + d + e + f.current;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'a', 'b', 'c', 'd', 'e', 'f'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'a from 5:12',
+        '<no-hook> from 5:28',
+        'b from 6:20',
+        '<no-hook> from 6:31',
+        'c from 9:12',
+        '<no-hook> from 9:25',
+        'd from 9:31',
+        '<no-hook> from 9:44',
+        'e from 11:24',
+        '<no-hook> from 11:57',
+        'f from 12:12',
+        '<no-hook> from 12:24',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    Object {
+      "mappings": "CAAD;KYCA,AgBDA;MREA,AWFA;SnBGA,AaHA,AMIA,AaJA;WpBKA,AiCLA;Y7CMA,AYNA",
+      "names": Array [
+        "<no-hook>",
+        "a",
+        "b",
+        "c",
+        "d",
+        "e",
+        "f",
+      ],
+    }
+  `);
+  });
+
+  it('should parse names for custom hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const theme = useTheme();
+  const [val, setVal] = useValue();
+
+  return theme;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'theme', 'val'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'theme from 6:16',
+        '<no-hook> from 6:26',
+        'val from 7:24',
+        '<no-hook> from 7:34',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    Object {
+      "mappings": "CAAD;MgBCA,AUDA;OFEA,AUFA",
+      "names": Array [
+        "<no-hook>",
+        "theme",
+        "val",
+      ],
+    }
+  `);
+  });
+
+  it('should parse names for nested hook calls', () => {
+    const code = `
+import {useMemo, useState} from 'react';
+
+export function Component() {
+  const InnerComponent = useMemo(() => () => {
+    const [state, setState] = useState(0);
+
+    return state;
+  });
+
+  return null;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'InnerComponent', 'state'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'InnerComponent from 5:25',
+        'state from 6:30',
+        'InnerComponent from 6:41',
+        '<no-hook> from 9:4',
+      ],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    Object {
+      "mappings": "CAAD;KyBCA;MKCA,AWDA;SrCDA",
+      "names": Array [
+        "<no-hook>",
+        "InnerComponent",
+        "state",
+      ],
+    }
+  `);
+  });
+
+  it('should skip names for non-nameable hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const [val, setVal] = useState(0);
+
+  useEffect(() => {
+    // ...
+  });
+
+  useLayoutEffect(() => {
+    // ...
+  });
+
+  return val;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'val'],
+      mappings: ['<no-hook> from 1:0', 'val from 6:24', '<no-hook> from 6:35'],
+    });
+
+    const encodedHookMap = generateEncodedHookMap(parsed);
+    expect(encodedHookMap).toMatchInlineSnapshot(`
+    Object {
+      "mappings": "CAAD;MwBCA,AWDA",
+      "names": Array [
+        "<no-hook>",
+        "val",
+      ],
+    }
+  `);
+  });
+});
diff --git a/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js b/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
new file mode 100644
index 0000000000000..7b215fc6de787
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {parse} from '@babel/parser';
+import {generateHookMap} from '../generateHookMap';
+import {getHookNameForLocation} from '../getHookNameForLocation';
+
+function expectHookMapToEqual(actual, expected) {
+  expect(actual.names).toEqual(expected.names);
+
+  const formattedMappings = [];
+  actual.mappings.forEach(lines => {
+    lines.forEach(segment => {
+      const name = actual.names[segment[2]];
+      if (name == null) {
+        throw new Error(`Expected to find name at position ${segment[2]}`);
+      }
+      formattedMappings.push(`${name} from ${segment[0]}:${segment[1]}`);
+    });
+  });
+  expect(formattedMappings).toEqual(expected.mappings);
+}
+
+describe('generateHookMap', () => {
+  it('should parse names for built-in hooks', () => {
+    const code = `
+import {useState, useContext, useMemo, useReducer} from 'react';
+
+export function Component() {
+  const a = useMemo(() => A);
+  const [b, setB] = useState(0);
+
+  // prettier-ignore
+  const c = useContext(A), d = useContext(B); // eslint-disable-line one-var
+
+  const [e, dispatch] = useReducer(reducer, initialState);
+  const f = useRef(null)
+
+  return a + b + c + d + e + f.current;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'a', 'b', 'c', 'd', 'e', 'f'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'a from 5:12',
+        '<no-hook> from 5:28',
+        'b from 6:20',
+        '<no-hook> from 6:31',
+        'c from 9:12',
+        '<no-hook> from 9:25',
+        'd from 9:31',
+        '<no-hook> from 9:44',
+        'e from 11:24',
+        '<no-hook> from 11:57',
+        'f from 12:12',
+        '<no-hook> from 12:24',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 2, column: 25}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 5, column: 12}, hookMap)).toEqual('a');
+    expect(getHookNameForLocation({line: 5, column: 13}, hookMap)).toEqual('a');
+    expect(getHookNameForLocation({line: 5, column: 28}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 5, column: 29}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 6, column: 20}, hookMap)).toEqual('b');
+    expect(getHookNameForLocation({line: 6, column: 30}, hookMap)).toEqual('b');
+    expect(getHookNameForLocation({line: 6, column: 31}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 7, column: 31}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 8, column: 20}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 12}, hookMap)).toEqual('c');
+    expect(getHookNameForLocation({line: 9, column: 13}, hookMap)).toEqual('c');
+    expect(getHookNameForLocation({line: 9, column: 25}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 26}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 31}, hookMap)).toEqual('d');
+    expect(getHookNameForLocation({line: 9, column: 32}, hookMap)).toEqual('d');
+    expect(getHookNameForLocation({line: 9, column: 44}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 9, column: 45}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 11, column: 24}, hookMap)).toEqual(
+      'e',
+    );
+    expect(getHookNameForLocation({line: 11, column: 56}, hookMap)).toEqual(
+      'e',
+    );
+    expect(getHookNameForLocation({line: 11, column: 57}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 11, column: 58}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 12, column: 12}, hookMap)).toEqual(
+      'f',
+    );
+    expect(getHookNameForLocation({line: 12, column: 23}, hookMap)).toEqual(
+      'f',
+    );
+    expect(getHookNameForLocation({line: 12, column: 24}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 100, column: 50}, hookMap)).toEqual(
+      null,
+    );
+  });
+
+  it('should parse names for custom hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const theme = useTheme();
+  const [val, setVal] = useValue();
+
+  return theme;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'theme', 'val'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'theme from 6:16',
+        '<no-hook> from 6:26',
+        'val from 7:24',
+        '<no-hook> from 7:34',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 6, column: 16}, hookMap)).toEqual(
+      'theme',
+    );
+    expect(getHookNameForLocation({line: 6, column: 26}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 7, column: 24}, hookMap)).toEqual(
+      'val',
+    );
+    expect(getHookNameForLocation({line: 7, column: 34}, hookMap)).toEqual(
+      null,
+    );
+  });
+
+  it('should parse names for nested hook calls', () => {
+    const code = `
+import {useMemo, useState} from 'react';
+
+export function Component() {
+  const InnerComponent = useMemo(() => () => {
+    const [state, setState] = useState(0);
+
+    return state;
+  });
+
+  return null;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'InnerComponent', 'state'],
+      mappings: [
+        '<no-hook> from 1:0',
+        'InnerComponent from 5:25',
+        'state from 6:30',
+        'InnerComponent from 6:41',
+        '<no-hook> from 9:4',
+      ],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 5, column: 25}, hookMap)).toEqual(
+      'InnerComponent',
+    );
+    expect(getHookNameForLocation({line: 6, column: 30}, hookMap)).toEqual(
+      'state',
+    );
+    expect(getHookNameForLocation({line: 6, column: 40}, hookMap)).toEqual(
+      'state',
+    );
+    expect(getHookNameForLocation({line: 6, column: 41}, hookMap)).toEqual(
+      'InnerComponent',
+    );
+    expect(getHookNameForLocation({line: 9, column: 4}, hookMap)).toEqual(null);
+  });
+
+  it('should skip names for non-nameable hooks', () => {
+    const code = `
+import useTheme from 'useTheme';
+import useValue from 'useValue';
+
+export function Component() {
+  const [val, setVal] = useState(0);
+
+  useEffect(() => {
+    // ...
+  });
+
+  useLayoutEffect(() => {
+    // ...
+  });
+
+  return val;
+}`;
+
+    const parsed = parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'flow'],
+    });
+    const hookMap = generateHookMap(parsed);
+    expectHookMapToEqual(hookMap, {
+      names: ['<no-hook>', 'val'],
+      mappings: ['<no-hook> from 1:0', 'val from 6:24', '<no-hook> from 6:35'],
+    });
+
+    expect(getHookNameForLocation({line: 1, column: 0}, hookMap)).toEqual(null);
+    expect(getHookNameForLocation({line: 6, column: 24}, hookMap)).toEqual(
+      'val',
+    );
+    expect(getHookNameForLocation({line: 6, column: 35}, hookMap)).toEqual(
+      null,
+    );
+    expect(getHookNameForLocation({line: 8, column: 2}, hookMap)).toEqual(null);
+  });
+});
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 110eee269205f..52032b3723103 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -421,6 +421,298 @@ describe('parseHookNames', () => {
       ); // simulated Webpack 'cheap-module-source-map'
     });
   });
+
+  describe('extended source maps', () => {
+    let parseMock;
+
+    beforeEach(() => {
+      parseMock = jest.fn();
+      jest.mock('@babel/parser', () => {
+        const actual = jest.requireActual('@babel/parser');
+        const parse = (...args) => {
+          parseMock();
+          return actual.parse(...args);
+        };
+        return {
+          parse,
+          ...actual,
+        };
+      });
+    });
+
+    it('should work for simple components', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/Example'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/Example',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/Example',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/Example',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/Example',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work with more complex files and components', async () => {
+      async function test(path, name = undefined) {
+        const components = name != null ? require(path)[name] : require(path);
+
+        let hookNames = await getHookNamesForComponent(components.List);
+        expectHookNamesToEqual(hookNames, [
+          'newItemText', // useState
+          'items', // useState
+          'uid', // useState
+          'handleClick', // useCallback
+          'handleKeyPress', // useCallback
+          'handleChange', // useCallback
+          'removeItem', // useCallback
+          'toggleItem', // useCallback
+        ]);
+
+        hookNames = await getHookNamesForComponent(components.ListItem, {
+          item: {},
+        });
+        expectHookNamesToEqual(hookNames, [
+          'handleDelete', // useCallback
+          'handleToggle', // useCallback
+        ]);
+
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/ToDoList'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ToDoList',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ToDoList',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ToDoList',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ToDoList',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for custom hook', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'isDarkMode', // useIsDarkMode()
+          'isDarkMode', // useIsDarkMode -> useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when code is using hooks indirectly', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'darkMode', // useDarkMode()
+          'isDarkMode', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when code is using nested hooks', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        let InnerComponent;
+        const hookNames = await getHookNamesForComponent(Component, {
+          callback: innerComponent => {
+            InnerComponent = innerComponent;
+          },
+        });
+        const innerHookNames = await getHookNamesForComponent(InnerComponent);
+        expectHookNamesToEqual(hookNames, [
+          'InnerComponent', // useMemo()
+        ]);
+        expectHookNamesToEqual(innerHookNames, [
+          'state', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for external hooks', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'theme', // useTheme()
+          'theme', // useContext()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      // We can't test the uncompiled source here, because it either needs to get transformed,
+      // which would break the source mapping, or the import statements will fail.
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work when multiple hooks are on a line', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          'c', // useContext()
+          'd', // useContext()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
+    // Maybe this isn't an important use case to support,
+    // since inline requires are most likely to exist in compiled source (if at all).
+    xit('should work for inline requires', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/InlineRequire'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/InlineRequire',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/InlineRequire',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should support sources that contain the string "sourceMappingURL="', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      // We expect the inline sourceMappingURL to be invalid in this case; mute the warning.
+      console.warn = () => {};
+
+      await test('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+  });
 });
 
 describe('parseHookNames worker', () => {
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 6906abf52c927..6e8b8bdff596e 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -15,6 +15,8 @@ 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 {generateEncodedHookMap} = require('../generateHookMap');
+const {parse} = require('@babel/parser');
 
 const sourceDir = resolve(__dirname, '__source__');
 const buildRoot = resolve(sourceDir, '__compiled__');
@@ -22,6 +24,19 @@ const externalDir = resolve(buildRoot, 'external');
 const inlineDir = resolve(buildRoot, 'inline');
 const bundleDir = resolve(buildRoot, 'bundle');
 const noColumnsDir = resolve(buildRoot, 'no-columns');
+const inlineFbSourcesExtendedDir = resolve(inlineDir, 'fb-sources-extended');
+const externalFbSourcesExtendedDir = resolve(
+  externalDir,
+  'fb-sources-extended',
+);
+const inlineReactSourcesExtendedDir = resolve(
+  inlineDir,
+  'react-sources-extended',
+);
+const externalReactSourcesExtendedDir = resolve(
+  externalDir,
+  'react-sources-extended',
+);
 
 // Remove previous builds
 emptyDirSync(buildRoot);
@@ -29,6 +44,10 @@ mkdirSync(externalDir);
 mkdirSync(inlineDir);
 mkdirSync(bundleDir);
 mkdirSync(noColumnsDir);
+mkdirSync(inlineFbSourcesExtendedDir);
+mkdirSync(externalFbSourcesExtendedDir);
+mkdirSync(inlineReactSourcesExtendedDir);
+mkdirSync(externalReactSourcesExtendedDir);
 
 function compile(fileName) {
   const code = readFileSync(resolve(sourceDir, fileName), 'utf8');
@@ -63,6 +82,15 @@ function compile(fileName) {
     'utf8',
   );
 
+  // Generate compiled output with inline base64 source maps
+  writeFileSync(
+    resolve(inlineDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(sourceMap)),
+    '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.
@@ -82,16 +110,7 @@ function compile(fileName) {
   );
   const encodedMappings = encode(decodedMappings);
 
-  // Generate compiled output with external inline base64 source maps
-  writeFileSync(
-    resolve(inlineDir, fileName),
-    transformed.code +
-      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
-      btoa(JSON.stringify(sourceMap)),
-    'utf8',
-  );
-
-  // Generate compiled output with external inline base64 source maps without column numbers
+  // Generate compiled output with inline base64 source maps without column numbers
   writeFileSync(
     resolve(noColumnsDir, fileName),
     transformed.code +
@@ -104,6 +123,65 @@ function compile(fileName) {
       ),
     'utf8',
   );
+
+  // Generate compiled output with an extended sourcemap that
+  // includes a map of hook names.
+  const parsed = parse(code, {
+    sourceType: 'module',
+    plugins: ['jsx', 'flow'],
+  });
+  const encodedHookMap = generateEncodedHookMap(parsed);
+  const fbSourcesExtendedSourceMap = {
+    ...sourceMap,
+    // When using the x_fb_sources extension field, the first item
+    // for a given source is reserved for the Function Map, and the
+    // Hook Map is added as the second item.
+    x_fb_sources: [[null, encodedHookMap]],
+  };
+  const reactSourcesExtendedSourceMap = {
+    ...sourceMap,
+    // When using the x_react_sources extension field, the first item
+    // for a given source is reserved for the Hook Map.
+    x_react_sources: [[encodedHookMap]],
+  };
+
+  // Using the x_fb_sources field
+  writeFileSync(
+    resolve(inlineFbSourcesExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(fbSourcesExtendedSourceMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesExtendedDir, fileName),
+    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(fbSourcesExtendedSourceMap),
+    'utf8',
+  );
+
+  // Using the x_react_sources field
+  writeFileSync(
+    resolve(inlineReactSourcesExtendedDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(reactSourcesExtendedSourceMap)),
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesExtendedDir, fileName),
+    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(reactSourcesExtendedSourceMap),
+    'utf8',
+  );
 }
 
 async function bundle() {
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 64aaf1fb0371d..818ec578a87c5 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -12,6 +12,11 @@ import {File} from '@babel/types';
 
 import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
 
+export type Position = {|
+  line: number,
+  column: number,
+|};
+
 export type SourceConsumer = any;
 
 export type SourceFileASTWithHookDetails = {
@@ -20,12 +25,16 @@ export type SourceFileASTWithHookDetails = {
   source: string,
 };
 
+export const NO_HOOK_NAME = '<no-hook>';
+
 const AST_NODE_TYPES = Object.freeze({
+  PROGRAM: 'Program',
   CALL_EXPRESSION: 'CallExpression',
   MEMBER_EXPRESSION: 'MemberExpression',
   ARRAY_PATTERN: 'ArrayPattern',
   IDENTIFIER: 'Identifier',
   NUMERIC_LITERAL: 'NumericLiteral',
+  VARIABLE_DECLARATOR: 'VariableDeclarator',
 });
 
 // Check if line number obtained from source map and the line number in hook node match
@@ -51,7 +60,6 @@ function checkNodeLocation(
     //
     // 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)
@@ -284,13 +292,209 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   return potentialHooksFound;
 }
 
+/**
+ * This function traverses the sourceAST and returns a mapping
+ * that maps locations in the source code to their corresponding
+ * Hook name, if there is a relevant Hook name for that location.
+ *
+ * A location in the source code is represented by line and column
+ * numbers as a Position object: { line, column }.
+ *   - line is 1-indexed.
+ *   - column is 0-indexed.
+ *
+ * A Hook name will be assigned to a Hook CallExpression if the
+ * CallExpression is for a variable declaration (i.e. it returns
+ * a value that is assigned to a variable), and if we can reliably
+ * infer the correct name to use (see comments in the function body
+ * for more details).
+ *
+ * The returned mapping is an array of locations and their assigned
+ * names, sorted by location. Specifically, each entry in the array
+ * contains a `name` and a `start` Position. The `name` of a given
+ * entry is the "assigned" name in the source code until the `start`
+ * of the **next** entry. This means that given the mapping, in order
+ * to determine the Hook name assigned for a given source location, we
+ * need to find the adjacent entries that most closely contain the given
+ * location.
+ *
+ * E.g. for the following code:
+ *
+ * 1|  function Component() {
+ * 2|    const [state, setState] = useState(0);
+ * 3|                              ^---------^ -> Cols 28 - 38: Hook CallExpression
+ * 4|
+ * 5|    useEffect(() => {...}); -> call ignored since not declaring a variable
+ * 6|
+ * 7|    return (...);
+ * 8|  }
+ *
+ * The returned "mapping" would be something like:
+ *   [
+ *     {name: '<no-hook>', start: {line: 1, column: 0}},
+ *     {name: 'state', start: {line: 2, column: 28}},
+ *     {name: '<no-hook>', start: {line: 2, column: 38}},
+ *   ]
+ *
+ * Where the Hook name `state` (corresponding to the `state` variable)
+ * is assigned to the location in the code for the CallExpression
+ * representing the call to `useState(0)` (line 2, col 28-38).
+ */
+export function getHookNamesMappingFromAST(
+  sourceAST: File,
+): $ReadOnlyArray<{|name: string, start: Position|}> {
+  const hookStack = [];
+  const hookNames = [];
+  const pushFrame = (name: string, node: Node) => {
+    const nameInfo = {name, start: {...node.loc.start}};
+    hookStack.unshift(nameInfo);
+    hookNames.push(nameInfo);
+  };
+  const popFrame = (node: Node) => {
+    hookStack.shift();
+    const top = hookStack[0];
+    if (top != null) {
+      hookNames.push({name: top.name, start: {...node.loc.end}});
+    }
+  };
+
+  traverse(sourceAST, {
+    [AST_NODE_TYPES.PROGRAM]: {
+      enter(path) {
+        pushFrame(NO_HOOK_NAME, path.node);
+      },
+      exit(path) {
+        popFrame(path.node);
+      },
+    },
+    [AST_NODE_TYPES.VARIABLE_DECLARATOR]: {
+      enter(path) {
+        // Check if this variable declaration corresponds to a variable
+        // declared by calling a Hook.
+        if (isConfirmedHookDeclaration(path)) {
+          const hookDeclaredVariableName = getHookVariableName(path);
+          if (!hookDeclaredVariableName) {
+            return;
+          }
+          const callExpressionNode = assertCallExpression(path.node.init);
+
+          // Check if this variable declaration corresponds to a call to a
+          // built-in Hook that returns a tuple (useState, useReducer,
+          // useTransition).
+          // If it doesn't, we immediately use the declared variable name
+          // as the Hook name. We do this because for any other Hooks that
+          // aren't the built-in Hooks that return a tuple, we can't reliably
+          // extract a Hook name from other variable declartions derived from
+          // this one, since we don't know which of the declared variables
+          // are the relevant ones to track and show in dev tools.
+          if (!isBuiltInHookThatReturnsTuple(path)) {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+            return;
+          }
+
+          // Check if the variable declared by the Hook call is referenced
+          // anywhere else in the code. If not, we immediately use the
+          // declared variable name as the Hook name.
+          const referencePaths =
+            hookDeclaredVariableName != null
+              ? path.scope.bindings[hookDeclaredVariableName]?.referencePaths
+              : null;
+          if (referencePaths == null) {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+            return;
+          }
+
+          // Check each reference to the variable declared by the Hook call,
+          // and for each, we do the following:
+          let declaredVariableName = null;
+          for (let i = 0; i <= referencePaths.length; i++) {
+            const referencePath = referencePaths[i];
+            if (declaredVariableName != null) {
+              break;
+            }
+
+            // 1. Check if the reference is contained within a VariableDeclarator
+            // Node. This will allow us to determine if the variable declared by
+            // the Hook call is being used to declare other variables.
+            let variableDeclaratorPath = referencePath;
+            while (
+              variableDeclaratorPath != null &&
+              variableDeclaratorPath.node.type !==
+                AST_NODE_TYPES.VARIABLE_DECLARATOR
+            ) {
+              variableDeclaratorPath = variableDeclaratorPath.parentPath;
+            }
+
+            // 2. If we find a VariableDeclarator containing the
+            // referenced variable, we extract the Hook name from the new
+            // variable declaration.
+            // E.g., a case like the following:
+            //    const countState = useState(0);
+            //    const count = countState[0];
+            //    const setCount = countState[1]
+            // Where the reference to `countState` is later referenced
+            // within a VariableDeclarator, so we can extract `count` as
+            // the Hook name.
+            const varDeclInit = variableDeclaratorPath?.node.init;
+            if (varDeclInit != null) {
+              switch (varDeclInit.type) {
+                case AST_NODE_TYPES.MEMBER_EXPRESSION: {
+                  // When encountering a MemberExpression inside the new
+                  // variable declaration, we only want to extract the variable
+                  // name if we're assinging the value of the first member,
+                  // which is handled by `filterMemberWithHookVariableName`.
+                  // E.g.
+                  //    const countState = useState(0);
+                  //    const count = countState[0];    -> extract the name from this reference
+                  //    const setCount = countState[1]; -> ignore this reference
+                  if (
+                    filterMemberWithHookVariableName(variableDeclaratorPath)
+                  ) {
+                    declaredVariableName = getHookVariableName(
+                      variableDeclaratorPath,
+                    );
+                  }
+                  break;
+                }
+                case AST_NODE_TYPES.IDENTIFIER: {
+                  declaredVariableName = getHookVariableName(
+                    variableDeclaratorPath,
+                  );
+                  break;
+                }
+                default:
+                  break;
+              }
+            }
+          }
+
+          // If we were able to extract a name from the new variable
+          // declaration, use it as the Hook name. Otherwise, use the
+          // original declared variable as the variable name.
+          if (declaredVariableName != null) {
+            pushFrame(declaredVariableName, callExpressionNode);
+          } else {
+            pushFrame(hookDeclaredVariableName, callExpressionNode);
+          }
+        }
+      },
+      exit(path) {
+        if (isConfirmedHookDeclaration(path)) {
+          const callExpressionNode = assertCallExpression(path.node.init);
+          popFrame(callExpressionNode);
+        }
+      },
+    },
+  });
+  return hookNames;
+}
+
 // Check if 'path' contains declaration of the form const X = useState(0);
 function isConfirmedHookDeclaration(path: NodePath): boolean {
-  const node = path.node.init;
-  if (node.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+  const nodeInit = path.node.init;
+  if (nodeInit == null || nodeInit.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
     return false;
   }
-  const callee = node.callee;
+  const callee = nodeInit.callee;
   return isHook(callee);
 }
 
@@ -370,10 +574,12 @@ function isReactFunction(node: Node, functionName: string): boolean {
 }
 
 // Check if 'path' is either State or Reducer hook
-function isStateOrReducerHook(path: NodePath): boolean {
+function isBuiltInHookThatReturnsTuple(path: NodePath): boolean {
   const callee = path.node.init.callee;
   return (
-    isReactFunction(callee, 'useState') || isReactFunction(callee, 'useReducer')
+    isReactFunction(callee, 'useState') ||
+    isReactFunction(callee, 'useReducer') ||
+    isReactFunction(callee, 'useTransition')
   );
 }
 
@@ -394,9 +600,17 @@ function nodeContainsHookVariableName(hookNode: NodePath): boolean {
   const node = hookNode.node.id;
   if (
     node.type === AST_NODE_TYPES.ARRAY_PATTERN ||
-    (node.type === AST_NODE_TYPES.IDENTIFIER && !isStateOrReducerHook(hookNode))
+    (node.type === AST_NODE_TYPES.IDENTIFIER &&
+      !isBuiltInHookThatReturnsTuple(hookNode))
   ) {
     return true;
   }
   return false;
 }
+
+function assertCallExpression(node: Node): Node {
+  if (node.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+    throw new Error('Expected a CallExpression node for a Hook declaration.');
+  }
+  return node;
+}
diff --git a/packages/react-devtools-extensions/src/generateHookMap.js b/packages/react-devtools-extensions/src/generateHookMap.js
new file mode 100644
index 0000000000000..d57bbb6063854
--- /dev/null
+++ b/packages/react-devtools-extensions/src/generateHookMap.js
@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {getHookNamesMappingFromAST} from './astUtils';
+import {encode, decode} from 'sourcemap-codec';
+import {File} from '@babel/types';
+
+export type HookMap = {|
+  names: $ReadOnlyArray<string>,
+  mappings: HookMapMappings,
+|};
+
+export type EncodedHookMap = {|
+  names: $ReadOnlyArray<string>,
+  mappings: string,
+|};
+
+// See generateHookMap below for more details on formatting
+export type HookMapEntry = [
+  number, // 1-indexed line number
+  number, // 0-indexed column number
+  number, // 0-indexed index into names array
+  number, // TODO: filler number to support reusing encoding from `sourcemap-codec` (see TODO below)
+];
+export type HookMapLine = HookMapEntry[];
+export type HookMapMappings = HookMapLine[];
+
+/**
+ * Given a parsed source code AST, returns a "Hook Map", which is a
+ * mapping which maps locations in the source code to their to their
+ * corresponding Hook name, if there is a relevant Hook name for that
+ * location (see getHookNamesMappingFromAST for details on the
+ * representation of the mapping).
+ *
+ * The format of the Hook Map follows a similar format as the `name`
+ * and `mappings` fields in the Source Map spec, where `names` is an
+ * array of strings, and `mappings` contains segments lines, columns,
+ * and indices into the `names` array.
+ *
+ * E.g.:
+ *   {
+ *     names: ["<no-hook>", "state"],
+ *     mappings: [
+ *       [ -> line 1
+ *         [1, 0, 0],  -> line, col, name index
+ *       ],
+ *       [ -> line 2
+ *         [2, 5, 1],  -> line, col, name index
+ *         [2, 15, 0],  -> line, col, name index
+ *       ],
+ *     ],
+ *   }
+ */
+export function generateHookMap(sourceAST: File): HookMap {
+  const hookNamesMapping = getHookNamesMappingFromAST(sourceAST);
+  const namesMap: Map<string, number> = new Map();
+  const names = [];
+  const mappings = [];
+
+  let currentLine = null;
+  hookNamesMapping.forEach(({name, start}) => {
+    let nameIndex = namesMap.get(name);
+    if (nameIndex == null) {
+      names.push(name);
+      nameIndex = names.length - 1;
+      namesMap.set(name, nameIndex);
+    }
+
+    // TODO: We add a -1 at the end of the entry so we can later
+    // encode/decode the mappings by reusing the encode/decode functions
+    // from the `sourcemap-codec` library. This library expects segments
+    // of specific sizes (i.e. of size 4) in order to encode them correctly.
+    // In the future, when we implement our own encoding, we will not
+    // need this restriction and can remove the -1 at the end.
+    const entry = [start.line, start.column, nameIndex, -1];
+
+    if (currentLine !== start.line) {
+      currentLine = start.line;
+      mappings.push([entry]);
+    } else {
+      const current = mappings[mappings.length - 1];
+      current.push(entry);
+    }
+  });
+
+  return {names, mappings};
+}
+
+/**
+ * Returns encoded version of a Hook Map that is returned
+ * by generateHookMap.
+ *
+ * **NOTE:**
+ * TODO: To encode the `mappings` in the Hook Map, we
+ * reuse the encode function from the `sourcemap-codec`
+ * library, which means that we are restricted to only
+ * encoding segments of specific sizes.
+ * Inside generateHookMap we make sure to build segments
+ * of size 4.
+ * In the future, when we implement our own encoding, we will not
+ * need this restriction and can remove the -1 at the end.
+ */
+export function generateEncodedHookMap(sourceAST: File): EncodedHookMap {
+  const hookMap = generateHookMap(sourceAST);
+  const encoded = encode(hookMap.mappings);
+  return {
+    names: hookMap.names,
+    mappings: encoded,
+  };
+}
+
+export function decodeHookMap(encodedHookMap: EncodedHookMap): HookMap {
+  return {
+    names: encodedHookMap.names,
+    mappings: decode(encodedHookMap.mappings),
+  };
+}
diff --git a/packages/react-devtools-extensions/src/getHookNameForLocation.js b/packages/react-devtools-extensions/src/getHookNameForLocation.js
new file mode 100644
index 0000000000000..c65c5fb5a8024
--- /dev/null
+++ b/packages/react-devtools-extensions/src/getHookNameForLocation.js
@@ -0,0 +1,274 @@
+/*
+ * 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 strict-local
+ */
+
+import type {
+  HookMap,
+  HookMapEntry,
+  HookMapLine,
+  HookMapMappings,
+} from './generateHookMap';
+import type {Position} from './astUtils';
+import {NO_HOOK_NAME} from './astUtils';
+
+/**
+ * Finds the Hook name assigned to a given location in the source code,
+ * and a HookMap extracted from an extended source map.
+ * The given location must correspond to the location in the *original*
+ * source code (i.e. *not* the generated one).
+ *
+ * Note that all locations in the source code are guaranteed to map
+ * to a name, including a sentinel value that represents a missing
+ * Hook name: '<no-hook>'.
+ *
+ * For more details on the format of the HookMap, see generateHookMap
+ * and the tests for that function and this function.
+ */
+export function getHookNameForLocation(
+  location: Position,
+  hookMap: HookMap,
+): string | null {
+  const {names, mappings} = hookMap;
+
+  // The HookMap mappings are grouped by lines, so first we look up
+  // which line of mappings covers the target location.
+  // Note that we expect to find a line since all the locations in the
+  // source code are guaranteed to map to a name, including a '<no-hook>'
+  // name.
+  const foundLine = binSearch(location, mappings, compareLinePositions);
+  if (foundLine == null) {
+    throw new Error(
+      `Expected to find a line in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  let foundEntry;
+  const foundLineNumber = getLineNumberFromLine(foundLine);
+  // The line found in the mappings will never be larger than the target
+  // line, and vice-versa, so if the target line doesn't match the found
+  // line, we immediately know that it must correspond to the last mapping
+  // entry for that line.
+  if (foundLineNumber !== location.line) {
+    foundEntry = foundLine[foundLine.length - 1];
+  } else {
+    foundEntry = binSearch(location, foundLine, compareColumnPositions);
+  }
+
+  if (foundEntry == null) {
+    throw new Error(
+      `Expected to find a mapping in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  const foundNameIndex = getHookNameIndexFromEntry(foundEntry);
+  if (foundNameIndex == null) {
+    throw new Error(
+      `Expected to find a name index in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+  const foundName = names[foundNameIndex];
+  if (foundName == null) {
+    throw new Error(
+      `Expected to find a name in the HookMap that covers the target location at line: ${location.line}, column: ${location.column}`,
+    );
+  }
+
+  if (foundName === NO_HOOK_NAME) {
+    return null;
+  }
+  return foundName;
+}
+
+function binSearch<T>(
+  location: Position,
+  items: T[],
+  compare: (
+    location: Position,
+    items: T[],
+    index: number,
+  ) => {|index: number | null, direction: number|},
+): T | null {
+  let count = items.length;
+  let index = 0;
+  let firstElementIndex = 0;
+  let step;
+
+  while (count > 0) {
+    index = firstElementIndex;
+    step = Math.floor(count / 2);
+    index += step;
+
+    const comparison = compare(location, items, index);
+    if (comparison.direction === 0) {
+      if (comparison.index == null) {
+        throw new Error('Expected an index when matching element is found.');
+      }
+      firstElementIndex = comparison.index;
+      break;
+    }
+
+    if (comparison.direction > 0) {
+      index++;
+      firstElementIndex = index;
+      count -= step + 1;
+    } else {
+      count = step;
+    }
+  }
+
+  return firstElementIndex != null ? items[firstElementIndex] : null;
+}
+
+/**
+ * Compares the target line location to the current location
+ * given by the provided index.
+ *
+ * If the target line location matches the current location, returns
+ * the index of the matching line in the mappings. In order for a line
+ * to match, the target line must match the line exactly, or be within
+ * the line range of the current line entries and the adjacent line
+ * entries.
+ *
+ * If the line doesn't match, returns the search direction for the
+ * next step in the binary search.
+ */
+function compareLinePositions(
+  location: Position,
+  mappings: HookMapMappings,
+  index: number,
+): {|index: number | null, direction: number|} {
+  const startIndex = index;
+  const start = mappings[startIndex];
+  if (start == null) {
+    throw new Error(`Unexpected line missing in HookMap at index ${index}.`);
+  }
+  const startLine = getLineNumberFromLine(start);
+
+  let endLine;
+  let endIndex = index + 1;
+  const end = mappings[endIndex];
+  if (end != null) {
+    endLine = getLineNumberFromLine(end);
+  } else {
+    endIndex = startIndex;
+    endLine = startLine;
+  }
+
+  // When the line matches exactly, return the matching index
+  if (startLine === location.line) {
+    return {index: startIndex, direction: 0};
+  }
+  if (endLine === location.line) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If we're at the end of the mappings, and the target line is greater
+  // than the current line, then this final line must cover the
+  // target location, so we return it.
+  if (location.line > endLine && end == null) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If the location is within the current line and the adjacent one,
+  // we know that the target location must be covered by the current line.
+  if (startLine < location.line && location.line < endLine) {
+    return {index: startIndex, direction: 0};
+  }
+
+  // Otherwise, return the next direction in the search.
+  return {index: null, direction: location.line - startLine};
+}
+
+/**
+ * Compares the target column location to the current location
+ * given by the provided index.
+ *
+ * If the target column location matches the current location, returns
+ * the index of the matching entry in the mappings. In order for a column
+ * to match, the target column must match the column exactly, or be within
+ * the column range of the current entry and the adjacent entry.
+ *
+ * If the column doesn't match, returns the search direction for the
+ * next step in the binary search.
+ */
+function compareColumnPositions(
+  location: Position,
+  line: HookMapLine,
+  index: number,
+): {|index: number | null, direction: number|} {
+  const startIndex = index;
+  const start = line[index];
+  if (start == null) {
+    throw new Error(
+      `Unexpected mapping missing in HookMap line at index ${index}.`,
+    );
+  }
+  const startColumn = getColumnNumberFromEntry(start);
+
+  let endColumn;
+  let endIndex = index + 1;
+  const end = line[endIndex];
+  if (end != null) {
+    endColumn = getColumnNumberFromEntry(end);
+  } else {
+    endIndex = startIndex;
+    endColumn = startColumn;
+  }
+
+  // When the column matches exactly, return the matching index
+  if (startColumn === location.column) {
+    return {index: startIndex, direction: 0};
+  }
+  if (endColumn === location.column) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If we're at the end of the entries for this line, and the target
+  // column is greater than the current column, then this final entry
+  // must cover the target location, so we return it.
+  if (location.column > endColumn && end == null) {
+    return {index: endIndex, direction: 0};
+  }
+
+  // If the location is within the current column and the adjacent one,
+  // we know that the target location must be covered by the current entry.
+  if (startColumn < location.column && location.column < endColumn) {
+    return {index: startIndex, direction: 0};
+  }
+
+  // Otherwise, return the next direction in the search.
+  return {index: null, direction: location.column - startColumn};
+}
+
+function getLineNumberFromLine(line: HookMapLine): number {
+  return getLineNumberFromEntry(line[0]);
+}
+
+function getLineNumberFromEntry(entry: HookMapEntry): number {
+  const lineNumber = entry[0];
+  if (lineNumber == null) {
+    throw new Error('Unexpected line number missing in entry in HookMap');
+  }
+  return lineNumber;
+}
+
+function getColumnNumberFromEntry(entry: HookMapEntry): number {
+  const columnNumber = entry[1];
+  if (columnNumber == null) {
+    throw new Error('Unexpected column number missing in entry in HookMap');
+  }
+  return columnNumber;
+}
+
+function getHookNameIndexFromEntry(entry: HookMapEntry): number {
+  const hookNameIndex = entry[2];
+  if (hookNameIndex == null) {
+    throw new Error('Unexpected hook name index missing in entry in HookMap');
+  }
+  return hookNameIndex;
+}
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 8bae59ce461b4..78e0b7ef66f25 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -14,7 +14,10 @@ import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
+import {decodeHookMap} from '../generateHookMap';
+import {getHookNameForLocation} from '../getHookNameForLocation';
 
+import type {HookMap} from '../generateHookMap';
 import type {
   HooksNode,
   HookSource,
@@ -26,10 +29,15 @@ import type {SourceConsumer} from '../astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
+const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_fb_sources';
 
 type AST = mixed;
 
 type HookSourceData = {|
+  // Hook map extracted from extended source map
+  hookMap: HookMap | null,
+
   // Generated by react-debug-tools.
   hookSource: HookSource,
 
@@ -128,6 +136,7 @@ export async function parseHookNames(
       const runtimeSourceURL = ((hookSource.fileName: any): string);
 
       const hookSourceData: HookSourceData = {
+        hookMap: null,
         hookSource,
         originalSourceAST: null,
         originalSourceCode: null,
@@ -244,12 +253,16 @@ function extractAndLoadSourceMaps(
 
           // Hook source might be a URL like "https://4syus.csb.app/src/App.js"
           // Parsed source map might be a partial path like "src/App.js"
-          const match = parsed.sources.find(
+          const sourceIndex = parsed.sources.findIndex(
             source =>
               source === 'Inline Babel script' ||
               runtimeSourceURL.endsWith(source),
           );
-          if (match) {
+          if (sourceIndex !== -1) {
+            const hookMap = extractHookMapFromSourceMap(parsed, sourceIndex);
+            if (hookMap != null) {
+              hookSourceData.hookMap = hookMap;
+            }
             setPromises.push(
               new SourceMapConsumer(parsed).then(sourceConsumer => {
                 hookSourceData.sourceConsumer = sourceConsumer;
@@ -288,9 +301,22 @@ function extractAndLoadSourceMaps(
           const fetchPromise =
             fetchPromises.get(url) ||
             fetchFile(url).then(
-              sourceMapContents =>
-                new SourceMapConsumer(JSON.parse(sourceMapContents)),
-
+              sourceMapContents => {
+                const parsed = JSON.parse(sourceMapContents);
+                const sourceIndex = parsed.sources.findIndex(source =>
+                  runtimeSourceURL.endsWith(source),
+                );
+                if (sourceIndex !== -1) {
+                  const hookMap = extractHookMapFromSourceMap(
+                    parsed,
+                    sourceIndex,
+                  );
+                  if (hookMap != null) {
+                    hookSourceData.hookMap = hookMap;
+                  }
+                }
+                return new SourceMapConsumer(parsed);
+              },
               // In this case, we fall back to the assumption that the source has no source map.
               // This might indicate an (unlikely) edge case that had no source map,
               // but contained the string "sourceMappingURL".
@@ -414,13 +440,24 @@ function findHookNames(
       return null;
     }
 
-    const name = getHookName(
-      hook,
-      hookSourceData.originalSourceAST,
-      ((hookSourceData.originalSourceCode: any): string),
-      ((originalSourceLineNumber: any): number),
-      originalSourceColumnNumber,
-    );
+    let name;
+    if (hookSourceData.hookMap != null) {
+      name = getHookNameForLocation(
+        {
+          line: originalSourceLineNumber,
+          column: originalSourceColumnNumber,
+        },
+        hookSourceData.hookMap,
+      );
+    } else {
+      name = getHookName(
+        hook,
+        hookSourceData.originalSourceAST,
+        ((hookSourceData.originalSourceCode: any): string),
+        ((originalSourceLineNumber: any): number),
+        originalSourceColumnNumber,
+      );
+    }
 
     if (__DEBUG__) {
       console.log(`findHookNames() Found name "${name || '-'}"`);
@@ -475,6 +512,12 @@ async function parseSourceAST(
       // Use cached metadata.
       return;
     }
+    if (hookSourceData.hookMap != null) {
+      // If there's a hook map present from an extended sourcemap then
+      // we don't need to parse the source files and instead can use the
+      // hook map to extract hook names.
+      return;
+    }
 
     const {sourceConsumer} = hookSourceData;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
@@ -618,6 +661,29 @@ function updateLruCache(
   return Promise.resolve();
 }
 
+function extractHookMapFromSourceMap(
+  sourcemap,
+  sourceIndex: number,
+): HookMap | null {
+  let hookMap;
+  if (sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY)) {
+    // When using the x_react_sources extension field, the first item
+    // for a given source is reserved for the Hook Map, which is why
+    // we look up the index at position 0.
+    hookMap = sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex][0];
+  } else if (sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY)) {
+    // When using the x_fb_sources extension field, the first item
+    // for a given source is reserved for the Function Map, and the
+    // Hook Map is added as the second item, which is why we look up
+    // the index at position 1.
+    hookMap = sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex][1];
+  }
+  if (hookMap != null) {
+    return decodeHookMap(hookMap);
+  }
+  return null;
+}
+
 export function purgeCachedMetadata(): void {
   originalURLToMetadataCache.reset();
   runtimeURLToMetadataCache.reset();
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 2ace94c2d7cba..453c8406d061c 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -43,6 +43,7 @@ untyped-type-import=error
 server.max_workers=4
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
diff --git a/yarn.lock b/yarn.lock
index fbb9f335e6a36..a5134686016b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -546,6 +546,18 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/node@^7.14.7":
+  version "7.14.7"
+  resolved "https://registry.yarnpkg.com/@babel/node/-/node-7.14.7.tgz#0090e83e726027ea682240718ca39e4b625b15ad"
+  integrity sha512-QghINtVgOUCrSpE7z4IXPTGJfRYyjoY7ny5Qz0cuUlsThQv6WSn1xJk217WlEDucPLP2o5HwGXPSkxD4LWOZxQ==
+  dependencies:
+    "@babel/register" "^7.14.5"
+    commander "^4.0.1"
+    core-js "^3.15.0"
+    node-environment-flags "^1.0.5"
+    regenerator-runtime "^0.13.4"
+    v8flags "^3.1.1"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.3.tgz#790874091d2001c9be6ec426c2eed47bc7679081"
@@ -561,6 +573,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0"
   integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==
 
+"@babel/parser@^7.14.8":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
+  integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
+
 "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -1420,6 +1437,17 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
+"@babel/register@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.14.5.tgz#d0eac615065d9c2f1995842f85d6e56c345f3233"
+  integrity sha512-TjJpGz/aDjFGWsItRBQMOFTrmTI9tr79CHOK+KIvLeCkbxuOAk2M5QHjvruIMGoo9OuccMh5euplPzc5FjAKGg==
+  dependencies:
+    clone-deep "^4.0.1"
+    find-cache-dir "^2.0.0"
+    make-dir "^2.1.0"
+    pirates "^4.0.0"
+    source-map-support "^0.5.16"
+
 "@babel/runtime-corejs2@^7.2.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.8.3.tgz#b62a61e0c41a90d2d91181fda6de21cecd3a9734"
@@ -4701,6 +4729,15 @@ clone-buffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
   integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
 
+clone-deep@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
+  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
+  dependencies:
+    is-plain-object "^2.0.4"
+    kind-of "^6.0.2"
+    shallow-clone "^3.0.0"
+
 clone-response@1.0.2, clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -5066,6 +5103,11 @@ core-js@^2.4.1, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.15.0:
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.0.tgz#1d46fb33720bc1fa7f90d20431f36a5540858986"
+  integrity sha512-5+5VxRFmSf97nM8Jr2wzOwLqRo6zphH2aX+7KsAUONObyzakDNq2G/bgbhinxB4PoV9L3aXQYhiDKyIKWd2c8g==
+
 core-js@^3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -11210,6 +11252,14 @@ node-cleanup@^2.1.2:
   resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
   integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
 
+node-environment-flags@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.6.tgz#a30ac13621f6f7d674260a54dede048c3982c088"
+  integrity sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+    semver "^5.7.0"
+
 node-fetch@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -12353,7 +12403,7 @@ pinpoint@^1.1.0:
   resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
   integrity sha1-DPd1eml38b9/ajIge3CeN3OI6HQ=
 
-pirates@^4.0.1:
+pirates@^4.0.0, pirates@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
   integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
@@ -13830,7 +13880,7 @@ semver-truncate@^1.1.2:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -13957,6 +14007,13 @@ sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-clone@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
+  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
+  dependencies:
+    kind-of "^6.0.2"
+
 shallow-copy@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
@@ -14193,7 +14250,7 @@ source-map-support@0.5.16:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@0.5.19, source-map-support@^0.5.17, source-map-support@~0.5.12:
+source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -15690,6 +15747,13 @@ v8-to-istanbul@^7.0.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+v8flags@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.2.0.tgz#b243e3b4dfd731fa774e7492128109a0fe66d656"
+  integrity sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==
+  dependencies:
+    homedir-polyfill "^1.0.1"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"