DevTools: Show hook names based on variable usage (facebook#21641)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Co-authored-by: Saphal Patro <saphal1998@gmail.com>
Co-authored-by: VibhorCodecianGupta <vibhordelgupta@gmail.com>

Author: 4 people

.eslintignore

@@ -20,6 +20,8 @@ packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-scheduling-profiler/dist

.prettierignore

@@ -2,6 +2,8 @@ packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-scheduling-profiler/dist

package.json

@@ -107,7 +107,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

packages/react-devtools-core/webpack.backend.js

@@ -47,6 +47,9 @@ module.exports = {
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
+  node: {
+    fs: 'empty',
+  },
   plugins: [
     new DefinePlugin({
       __DEV__,

packages/react-devtools-extensions/build.js

@@ -93,6 +93,12 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
   );
 
+  // The "source-map" library requires this chunk of WASM to be bundled at runtime.
+  await copy(
+    join(__dirname, 'node_modules', 'source-map', 'lib', 'mappings.wasm'),
+    join(zipPath, 'mappings.wasm'),
+  );
+
   const commit = getGitCommit();
   const dateString = new Date().toLocaleDateString();
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());

packages/react-devtools-extensions/chrome/manifest.json

@@ -32,7 +32,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {

packages/react-devtools-extensions/edge/manifest.json

@@ -32,7 +32,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {

packages/react-devtools-extensions/firefox/manifest.json

@@ -37,7 +37,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {

packages/react-devtools-extensions/package.json

@@ -15,12 +15,14 @@
     "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
-    "test:edge": "node ./edge/test"
+    "test:edge": "node ./edge/test",
+    "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@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",
     "@babel/plugin-transform-react-jsx-source": "^7.10.5",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
@@ -29,16 +31,20 @@
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
+    "babel-preset-minify": "^0.5.1",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
     "firefox-profile": "^1.0.2",
+    "fs-extra": "^4.0.2",
+    "jest-fetch-mock": "^3.0.3",
     "node-libs-browser": "0.5.3",
     "nullthrows": "^1.0.0",
     "open": "^7.0.2",
     "os-name": "^3.1.0",
     "raw-loader": "^3.1.0",
+    "source-map": "^0.8.0-beta.0",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",

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

@@ -0,0 +1,34 @@
+/**
+ * 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 ErrorStackParser from 'error-stack-parser';
+import testErrorStack, {
+  SOURCE_STACK_FRAME_LINE_NUMBER,
+} from './ErrorTesterCompiled';
+
+let sourceMapsAreAppliedToErrors: boolean | null = null;
+
+// Source maps are automatically applied to Error stack frames.
+export function areSourceMapsAppliedToErrors(): boolean {
+  if (sourceMapsAreAppliedToErrors === null) {
+    try {
+      testErrorStack();
+      sourceMapsAreAppliedToErrors = false;
+    } catch (error) {
+      const parsed = ErrorStackParser.parse(error);
+      const topStackFrame = parsed[0];
+      const lineNumber = topStackFrame.lineNumber;
+      if (lineNumber === SOURCE_STACK_FRAME_LINE_NUMBER) {
+        sourceMapsAreAppliedToErrors = true;
+      }
+    }
+  }
+
+  return sourceMapsAreAppliedToErrors === true;
+}

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

@@ -0,0 +1 @@
+The JavaScript files and source maps in this directory are used to test DevTools hook name parsing code. The files here use source maps in different formats to mirror real world applications. The source for the files is located in the parnet `__tests__` folder. To regenerate these compiled files, run `yarn update-mock-source-maps` in the `react-devtools-extensions` directory.

packages/react-devtools-extensions/src/__tests__/README.md

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useEffect, useState} from 'react';
+
+export function Component() {
+  const [count, setCount] = useState(0);
+  const isDarkMode = useIsDarkMode();
+
+  useEffect(() => {
+    // ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return (
+    <>
+      <div>Dark mode? {isDarkMode}</div>
+      <div>Count: {count}</div>
+      <button onClick={handleClick}>Update count</button>
+    </>
+  );
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = useState(false);
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return isDarkMode;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React from 'react';
+import useTheme from './useTheme';
+
+export function Component() {
+  const theme = useTheme();
+
+  return <div>theme: {theme}</div>;
+}

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+export function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}