{"patch":"diff --git a\/packages\/react-devtools-extensions\/package.json b\/packages\/react-devtools-extensions\/package.json\nindex 218e9aa799..2771c31c5a 100644\n--- a\/packages\/react-devtools-extensions\/package.json\n+++ b\/packages\/react-devtools-extensions\/package.json\n@@ -6,7 +6,7 @@\n \"build\": \"cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge\",\n \"build:dev\": \"cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev\",\n \"build:chrome\": \"cross-env NODE_ENV=production node .\/chrome\/build\",\n- \"build:chrome:crx\": \"cross-env NODE_ENV=production node .\/chrome\/build --crx\",\n+ \"build:chrome:crx\": \"cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node .\/chrome\/build --crx\",\n \"build:chrome:dev\": \"cross-env NODE_ENV=development node .\/chrome\/build\",\n \"build:firefox\": \"cross-env NODE_ENV=production node .\/firefox\/build\",\n \"build:firefox:dev\": \"cross-env NODE_ENV=development node .\/firefox\/build\",\ndiff --git a\/packages\/react-devtools-extensions\/webpack.backend.js b\/packages\/react-devtools-extensions\/webpack.backend.js\nindex 2399c10892..885d9aa03b 100644\n--- a\/packages\/react-devtools-extensions\/webpack.backend.js\n+++ b\/packages\/react-devtools-extensions\/webpack.backend.js\n@@ -3,6 +3,7 @@\n const {resolve} = require('path');\n const {DefinePlugin} = require('webpack');\n const {GITHUB_URL, getVersionString} = require('.\/utils');\n+const {resolveFeatureFlags} = require('react-devtools-shared\/buildUtils');\n \n const NODE_ENV = process.env.NODE_ENV;\n if (!NODE_ENV) {\n@@ -16,6 +17,8 @@ const __DEV__ = NODE_ENV === 'development';\n \n const DEVTOOLS_VERSION = getVersionString();\n \n+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';\n+\n module.exports = {\n mode: __DEV__ ? 'development' : 'production',\n devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n@@ -34,6 +37,7 @@ module.exports = {\n alias: {\n react: resolve(builtModulesDir, 'react'),\n 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),\n+ 'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),\n 'react-dom': resolve(builtModulesDir, 'react-dom'),\n 'react-is': resolve(builtModulesDir, 'react-is'),\n scheduler: resolve(builtModulesDir, 'scheduler'),\ndiff --git a\/packages\/react-devtools-extensions\/webpack.config.js b\/packages\/react-devtools-extensions\/webpack.config.js\nindex 4d6d00c52a..f754a99b86 100644\n--- a\/packages\/react-devtools-extensions\/webpack.config.js\n+++ b\/packages\/react-devtools-extensions\/webpack.config.js\n@@ -17,6 +17,8 @@ const __DEV__ = NODE_ENV === 'development';\n \n const DEVTOOLS_VERSION = getVersionString();\n \n+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';\n+\n module.exports = {\n mode: __DEV__ ? 'development' : 'production',\n devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,\n@@ -40,7 +42,7 @@ module.exports = {\n alias: {\n react: resolve(builtModulesDir, 'react'),\n 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),\n- 'react-devtools-feature-flags': resolveFeatureFlags('extension'),\n+ 'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),\n 'react-dom': resolve(builtModulesDir, 'react-dom'),\n 'react-is': resolve(builtModulesDir, 'react-is'),\n scheduler: resolve(builtModulesDir, 'scheduler'),\ndiff --git a\/packages\/react-devtools-shared\/buildUtils.js b\/packages\/react-devtools-shared\/buildUtils.js\nindex d5f48d6342..036c94386a 100644\n--- a\/packages\/react-devtools-shared\/buildUtils.js\n+++ b\/packages\/react-devtools-shared\/buildUtils.js\n@@ -17,8 +17,11 @@ function resolveFeatureFlags(target) {\n case 'shell':\n flagsPath = 'DevToolsFeatureFlags.default';\n break;\n- case 'extension':\n- flagsPath = 'DevToolsFeatureFlags.extension';\n+ case 'extension-oss':\n+ flagsPath = 'DevToolsFeatureFlags.extension-oss';\n+ break;\n+ case 'extension-fb':\n+ flagsPath = 'DevToolsFeatureFlags.extension-fb';\n break;\n default:\n console.error(`Invalid target \"${target}\"`);\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/renderer.js b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\nindex c2de357a1b..3bc2abe46a 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/renderer.js\n@@ -79,6 +79,7 @@ import {\n MEMO_SYMBOL_STRING,\n } from '.\/ReactSymbols';\n import {format} from '.\/utils';\n+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';\n \n import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n import type {\n@@ -978,12 +979,9 @@ export function attach(\n state: null,\n };\n } else {\n- return {\n+ const data: ChangeDescription = {\n context: getContextChangedKeys(nextFiber),\n- didHooksChange: didHooksChange(\n- prevFiber.memoizedState,\n- nextFiber.memoizedState,\n- ),\n+ didHooksChange: false,\n isFirstMount: false,\n props: getChangedKeys(\n prevFiber.memoizedProps,\n@@ -994,6 +992,23 @@ export function attach(\n nextFiber.memoizedState,\n ),\n };\n+\n+ \/\/ Only traverse the hooks list once, depending on what info we're returning.\n+ if (enableProfilerChangedHookIndices) {\n+ const indices = getChangedHooksIndices(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState,\n+ );\n+ data.hooks = indices;\n+ data.didHooksChange = indices !== null && indices.length > 0;\n+ } else {\n+ data.didHooksChange = didHooksChange(\n+ prevFiber.memoizedState,\n+ nextFiber.memoizedState,\n+ );\n+ }\n+\n+ return data;\n }\n default:\n return null;\n@@ -1154,6 +1169,36 @@ export function attach(\n return false;\n }\n \n+ function getChangedHooksIndices(prev: any, next: any): null | Array {\n+ if (enableProfilerChangedHookIndices) {\n+ if (prev == null || next == null) {\n+ return null;\n+ }\n+\n+ const indices = [];\n+ let index = 0;\n+ if (\n+ next.hasOwnProperty('baseState') &&\n+ next.hasOwnProperty('memoizedState') &&\n+ next.hasOwnProperty('next') &&\n+ next.hasOwnProperty('queue')\n+ ) {\n+ while (next !== null) {\n+ if (didHookChange(prev, next)) {\n+ indices.push(index);\n+ }\n+ next = next.next;\n+ prev = prev.next;\n+ index++;\n+ }\n+ }\n+\n+ return indices;\n+ }\n+\n+ return null;\n+ }\n+\n function getChangedKeys(prev: any, next: any): null | Array {\n if (prev == null || next == null) {\n return null;\ndiff --git a\/packages\/react-devtools-shared\/src\/backend\/types.js b\/packages\/react-devtools-shared\/src\/backend\/types.js\nindex 627e9a4504..c0ef91021f 100644\n--- a\/packages\/react-devtools-shared\/src\/backend\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/backend\/types.js\n@@ -150,6 +150,7 @@ export type ChangeDescription = {|\n isFirstMount: boolean,\n props: Array | null,\n state: Array | null,\n+ hooks?: Array | null,\n |};\n \n export type CommitDataBackend = {|\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\nindex 9e2d09d630..da7784c759 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js\n@@ -13,4 +13,4 @@\n * It should always be imported from \"react-devtools-feature-flags\".\n ************************************************************************\/\n \n-\/\/ TODO Add feature flags here...\n+export const enableProfilerChangedHookIndices = false;\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\nsimilarity index 94%\nrename from packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension.js\nrename to packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\nindex a224621bb7..08fb7178c7 100644\n--- a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension.js\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js\n@@ -13,7 +13,7 @@\n * It should always be imported from \"react-devtools-feature-flags\".\n ************************************************************************\/\n \n-\/\/ TODO Add feature flags here...\n+export const enableProfilerChangedHookIndices = true;\n \n \/************************************************************************\n * Do not edit the code below.\n@@ -21,7 +21,7 @@\n ************************************************************************\/\n \n import typeof * as FeatureFlagsType from '.\/DevToolsFeatureFlags.default';\n-import typeof * as ExportsType from '.\/DevToolsFeatureFlags.extension';\n+import typeof * as ExportsType from '.\/DevToolsFeatureFlags.extension-fb';\n \n \/\/ eslint-disable-next-line no-unused-vars\n type Check<_X, Y: _X, X: Y = _X> = null;\ndiff --git a\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js\nnew file mode 100644\nindex 0000000000..6ad795840d\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js\n@@ -0,0 +1,29 @@\n+\/**\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+\n+\/************************************************************************\n+ * This file is forked between different DevTools implementations.\n+ * It should never be imported directly!\n+ * It should always be imported from \"react-devtools-feature-flags\".\n+ ************************************************************************\/\n+\n+export const enableProfilerChangedHookIndices = false;\n+\n+\/************************************************************************\n+ * Do not edit the code below.\n+ * It ensures this fork exports the same types as the default flags file.\n+ ************************************************************************\/\n+\n+import typeof * as FeatureFlagsType from '.\/DevToolsFeatureFlags.default';\n+import typeof * as ExportsType from '.\/DevToolsFeatureFlags.extension-oss';\n+\n+\/\/ eslint-disable-next-line no-unused-vars\n+type Check<_X, Y: _X, X: Y = _X> = null;\n+\/\/ eslint-disable-next-line no-unused-expressions\n+(null: Check);\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.css\nindex 7b381faa9f..a708593553 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.css\n@@ -69,3 +69,12 @@\n flex: 0 0 1rem;\n width: 1rem;\n }\n+\n+.PrimitiveHookNumber {\n+ color: var(--color-component-badge-count-inverted);\n+ background-color: var(--color-component-badge-background-inverted);\n+ font-size: var(--font-size-monospace-small);\n+ margin-right: 0.25rem;\n+ border-radius: 0.125rem;\n+ padding: 0.125rem 0.25rem;\n+}\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.js\nindex 4303f8e406..7ed5290569 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.js\n@@ -20,6 +20,7 @@ import Store from '..\/..\/store';\n import styles from '.\/InspectedElementHooksTree.css';\n import useContextMenu from '..\/..\/ContextMenu\/useContextMenu';\n import {meta} from '..\/..\/..\/hydration';\n+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';\n \n import type {InspectedElement} from '.\/types';\n import type {HooksNode, HooksTree} from 'react-debug-tools\/src\/ReactDebugHooks';\n@@ -108,7 +109,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {\n canEditHooksAndDeletePaths,\n canEditHooksAndRenamePaths,\n } = inspectedElement;\n- const {name, id: hookID, isStateEditable, subHooks, value} = hook;\n+ const {id: hookID, isStateEditable, subHooks, value} = hook;\n \n const isReadOnly = hookID == null || !isStateEditable;\n \n@@ -162,6 +163,18 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {\n \n const isCustomHook = subHooks.length > 0;\n \n+ let name = hook.name;\n+ if (enableProfilerChangedHookIndices) {\n+ if (!isCustomHook) {\n+ name = (\n+ <>\n+ {hookID + 1}<\/span>\n+ {name}\n+ <\/>\n+ );\n+ }\n+ }\n+\n const type = typeof value;\n \n let displayValue;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\nindex 00bdedddc9..7a2f9e5bf4 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js\n@@ -9,11 +9,30 @@\n \n import * as React from 'react';\n import {useContext} from 'react';\n+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';\n import {ProfilerContext} from '..\/Profiler\/ProfilerContext';\n import {StoreContext} from '..\/context';\n \n import styles from '.\/WhatChanged.css';\n \n+function hookIndicesToString(indices: Array): string {\n+ \/\/ This is debatable but I think 1-based might ake for a nicer UX.\n+ const numbers = indices.map(value => value + 1);\n+\n+ switch (numbers.length) {\n+ case 0:\n+ return 'No hooks changed';\n+ case 1:\n+ return `Hook ${numbers[0]} changed`;\n+ case 2:\n+ return `Hooks ${numbers[0]} and ${numbers[1]} changed`;\n+ default:\n+ return `Hooks ${numbers.slice(0, numbers.length - 1).join(', ')} and ${\n+ numbers[numbers.length - 1]\n+ } changed`;\n+ }\n+}\n+\n type Props = {|\n fiberID: number,\n |};\n@@ -44,7 +63,16 @@ export default function WhatChanged({fiberID}: Props) {\n return null;\n }\n \n- if (changeDescription.isFirstMount) {\n+ const {\n+ context,\n+ didHooksChange,\n+ hooks,\n+ isFirstMount,\n+ props,\n+ state,\n+ } = changeDescription;\n+\n+ if (isFirstMount) {\n return (\n

\n Why did this render?<\/label>\n@@ -57,21 +85,21 @@ export default function WhatChanged({fiberID}: Props) {\n \n const changes = [];\n \n- if (changeDescription.context === true) {\n+ if (context === true) {\n changes.push(\n

\n • Context changed\n <\/div>,\n );\n } else if (\n- typeof changeDescription.context === 'object' &&\n- changeDescription.context !== null &&\n- changeDescription.context.length !== 0\n+ typeof context === 'object' &&\n+ context !== null &&\n+ context.length !== 0\n ) {\n changes.push(\n

\n • Context changed:\n- {changeDescription.context.map(key => (\n+ {context.map(key => (\n \n {key}\n <\/span>\n@@ -80,22 +108,27 @@ export default function WhatChanged({fiberID}: Props) {\n );\n }\n \n- if (changeDescription.didHooksChange) {\n- changes.push(\n-

\n- • Hooks changed\n- <\/div>,\n- );\n+ if (didHooksChange) {\n+ if (enableProfilerChangedHookIndices && Array.isArray(hooks)) {\n+ changes.push(\n+

\n+ • {hookIndicesToString(hooks)}\n+ <\/div>,\n+ );\n+ } else {\n+ changes.push(\n+

\n+ • Hooks changed\n+ <\/div>,\n+ );\n+ }\n }\n \n- if (\n- changeDescription.props !== null &&\n- changeDescription.props.length !== 0\n- ) {\n+ if (props !== null && props.length !== 0) {\n changes.push(\n

\n • Props changed:\n- {changeDescription.props.map(key => (\n+ {props.map(key => (\n \n {key}\n <\/span>\n@@ -104,14 +137,11 @@ export default function WhatChanged({fiberID}: Props) {\n );\n }\n \n- if (\n- changeDescription.state !== null &&\n- changeDescription.state.length !== 0\n- ) {\n+ if (state !== null && state.length !== 0) {\n changes.push(\n

\n • State changed:\n- {changeDescription.state.map(key => (\n+ {state.map(key => (\n \n {key}\n <\/span>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\nindex 803aeac6a0..11e99c05b1 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js\n@@ -46,6 +46,7 @@ export type ChangeDescription = {|\n isFirstMount: boolean,\n props: Array | null,\n state: Array | null,\n+ hooks?: Array | null,\n |};\n \n export type CommitDataFrontend = {|\n","commit":{"shortRevision":"119736b1c2","authoredAt":"2021-03-17T12:28:21-04:00","authorName":"Brian Vaughn","revision":"119736b1c2ea0d404ad466e39138462453392008","subject":"[FB-only] Show which hooks (indices) changed when profiling (#20998)","authorEmail":"bvaughn@fb.com"},"parents":["bf11788bf0c2e861dc6378ac9ab59d37e7c3e812"],"files":[{"status":"M","path":"packages\/react-devtools-extensions\/package.json"},{"status":"M","path":"packages\/react-devtools-extensions\/webpack.backend.js"},{"status":"M","path":"packages\/react-devtools-extensions\/webpack.config.js"},{"status":"M","path":"packages\/react-devtools-shared\/buildUtils.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/renderer.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/backend\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.default.js"},{"status":"R094","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-fb.js","previousPath":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/config\/DevToolsFeatureFlags.extension-oss.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/InspectedElementHooksTree.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/WhatChanged.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/types.js"}],"body":""}

dillon1000/react

Files changed