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

Co-authored-by: Brian Vaughn <[email protected]>
Co-authored-by: Saphal Patro <[email protected]>
Co-authored-by: VibhorCodecianGupta <[email protected]>

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