diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js index c0f0804f416..795f37183a8 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js @@ -862,6 +862,7 @@ describe('ProfilingCache', () => { { "compiledWithForget": false, "displayName": "render()", + "env": null, "hocDisplayNames": null, "id": 1, "key": null, @@ -903,6 +904,7 @@ describe('ProfilingCache', () => { { "compiledWithForget": false, "displayName": "createRoot()", + "env": null, "hocDisplayNames": null, "id": 1, "key": null, @@ -943,6 +945,7 @@ describe('ProfilingCache', () => { { "compiledWithForget": false, "displayName": "createRoot()", + "env": null, "hocDisplayNames": null, "id": 1, "key": null, diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 189d504ad51..c5fda9499a5 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -4630,6 +4630,7 @@ export function attach( displayName: getDisplayNameForFiber(fiber) || 'Anonymous', id: instance.id, key: fiber.key, + env: null, type: getElementTypeForFiber(fiber), }; } else { @@ -4638,6 +4639,7 @@ export function attach( displayName: componentInfo.name || 'Anonymous', id: instance.id, key: componentInfo.key == null ? null : componentInfo.key, + env: componentInfo.env == null ? null : componentInfo.env, type: ElementTypeVirtual, }; } @@ -5263,6 +5265,8 @@ export function attach( // List of owners owners, + env: null, + rootType, rendererPackageName: renderer.rendererPackageName, rendererVersion: renderer.version, @@ -5366,6 +5370,8 @@ export function attach( // List of owners owners, + env: componentInfo.env == null ? null : componentInfo.env, + rootType, rendererPackageName: renderer.rendererPackageName, rendererVersion: renderer.version, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index d2b846bee24..6153e08832a 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -795,6 +795,7 @@ export function attach( displayName: getData(owner).displayName || 'Unknown', id: getID(owner), key: element.key, + env: null, type: getElementType(owner), }); if (owner._currentElement) { @@ -857,6 +858,8 @@ export function attach( // List of owners owners, + env: null, + rootType: null, rendererPackageName: null, rendererVersion: null, diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 6324e63da14..585654252da 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -256,6 +256,7 @@ export type SerializedElement = { displayName: string | null, id: number, key: number | string | null, + env: null | string, type: ElementType, }; @@ -301,6 +302,10 @@ export type InspectedElement = { // List of owners owners: Array | null, + + // Environment name that this component executed in or null for the client + env: string | null, + source: ReactFunctionLocation | null, type: ElementType, diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js index d6aa18cd317..a27e70c26d0 100644 --- a/packages/react-devtools-shared/src/backendAPI.js +++ b/packages/react-devtools-shared/src/backendAPI.js @@ -255,6 +255,7 @@ export function convertInspectedElementBackendToFrontend( id, type, owners, + env, source, context, hooks, @@ -299,6 +300,7 @@ export function convertInspectedElementBackendToFrontend( owners === null ? null : owners.map(backendToFrontendSerializedElementMapper), + env, context: hydrateHelper(context), hooks: hydrateHelper(hooks), props: hydrateHelper(props), diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js index a829ad0153a..5a3355c60c4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js @@ -16,18 +16,21 @@ import styles from './ElementBadges.css'; type Props = { hocDisplayNames: Array | null, + environmentName: string | null, compiledWithForget: boolean, className?: string, }; export default function ElementBadges({ compiledWithForget, + environmentName, hocDisplayNames, className = '', }: Props): React.Node { if ( !compiledWithForget && - (hocDisplayNames == null || hocDisplayNames.length === 0) + (hocDisplayNames == null || hocDisplayNames.length === 0) && + environmentName == null ) { return null; } @@ -36,6 +39,8 @@ export default function ElementBadges({
{compiledWithForget && } + {environmentName != null ? {environmentName} : null} + {hocDisplayNames != null && hocDisplayNames.length > 0 && ( {hocDisplayNames[0]} )} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js index a1b76e49b6a..c24dd881e98 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js @@ -150,13 +150,28 @@ function SuspendedByRow({ {isOpen && (
- {showIOStack && } + {showIOStack && ( + + )} {(showIOStack || !showAwaitStack) && ioOwner !== null && ioOwner.id !== inspectedElement.id ? (
awaited at:
{asyncInfo.stack !== null && asyncInfo.stack.length > 0 && ( - + )} {asyncOwner !== null && asyncOwner.id !== inspectedElement.id ? ( | null, + environmentName: string | null, compiledWithForget: boolean, id: number, isInStore: boolean, @@ -27,6 +28,7 @@ type OwnerViewProps = { export default function OwnerView({ displayName, + environmentName, hocDisplayNames, compiledWithForget, id, @@ -65,6 +67,7 @@ export default function OwnerView({ diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js index 0fa5c0910bb..09bdb96af01 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js @@ -220,6 +220,7 @@ function ElementsDropdown({owners, selectOwner}: ElementsDropdownProps) { @@ -268,6 +269,7 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js index 4352ad6a827..fdbdba702da 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js @@ -12,6 +12,8 @@ import {use, useContext} from 'react'; import useOpenResource from '../useOpenResource'; +import ElementBadges from './ElementBadges'; + import styles from './StackTraceView.css'; import type { @@ -28,9 +30,13 @@ import formatLocationForDisplay from './formatLocationForDisplay'; type CallSiteViewProps = { callSite: ReactCallSite, + environmentName: null | string, }; -export function CallSiteView({callSite}: CallSiteViewProps): React.Node { +export function CallSiteView({ + callSite, + environmentName, +}: CallSiteViewProps): React.Node { const fetchFileWithCaching = useContext(FetchFileWithCachingContext); const [virtualFunctionName, virtualURL, virtualLine, virtualColumn] = @@ -64,19 +70,33 @@ export function CallSiteView({callSite}: CallSiteViewProps): React.Node { title={url + ':' + line}> {formatLocationForDisplay(url, line, column)} +
); } type Props = { stack: ReactStackTrace, + environmentName: null | string, }; -export default function StackTraceView({stack}: Props): React.Node { +export default function StackTraceView({ + stack, + environmentName, +}: Props): React.Node { return (
{stack.map((callSite, index) => ( - + ))}
); diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 622205dd672..e4a4c5400bf 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/packages/react-devtools-shared/src/frontend/types.js @@ -208,6 +208,7 @@ export type SerializedElement = { displayName: string | null, id: number, key: number | string | null, + env: null | string, hocDisplayNames: Array | null, compiledWithForget: boolean, type: ElementType, @@ -265,6 +266,9 @@ export type InspectedElement = { // List of owners owners: Array | null, + // Environment name that this component executed in or null for the client + env: string | null, + // Location of component in source code. source: ReactFunctionLocation | null,