react Architecture Docs
Home / File/ InspectedElementView.js — react Source File

InspectedElementView.js — react Source File

Architecture documentation for InspectedElementView.js, a javascript file in the react codebase. 33 imports, 1 dependents.

File javascript BabelCompiler Validation 33 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  d09ae4bb_9ed0_3257_c11b_1c199408288d["InspectedElementView.js"]
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  d5989364_e16c_e349_6082_7c3e50da7772["InspectedElementBadges.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> d5989364_e16c_e349_6082_7c3e50da7772
  96fe9a6e_9e70_bef0_7ce0_b2431ac09b94["InspectedElementBadges"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 96fe9a6e_9e70_bef0_7ce0_b2431ac09b94
  0b54b2a8_1c5a_d85b_7742_10a526b0dedd["InspectedElementContextTree.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 0b54b2a8_1c5a_d85b_7742_10a526b0dedd
  79ff7235_b89c_9668_275e_ec383c086c1b["InspectedElementContextTree"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 79ff7235_b89c_9668_275e_ec383c086c1b
  e489f60d_6c21_9c69_16d7_a97323c0790f["InspectedElementErrorsAndWarningsTree.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> e489f60d_6c21_9c69_16d7_a97323c0790f
  6d2b6d26_451b_f792_c321_14bc0e84ccc7["InspectedElementErrorsAndWarningsTree"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 6d2b6d26_451b_f792_c321_14bc0e84ccc7
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3
  0fa73964_8efc_3a75_e0b4_c7c54024c46a["InspectedElementHooksTree"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 0fa73964_8efc_3a75_e0b4_c7c54024c46a
  816abfef_4d5d_bc7e_fc00_1acadf628d28["InspectedElementPropsTree.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 816abfef_4d5d_bc7e_fc00_1acadf628d28
  0c87191a_5cd0_19e9_6a78_c4e93b9472e3["InspectedElementPropsTree"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 0c87191a_5cd0_19e9_6a78_c4e93b9472e3
  e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2["InspectedElementStateTree.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2
  abbdd482_edd4_85ba_aff5_1b324cb4864f["InspectedElementStateTree"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> abbdd482_edd4_85ba_aff5_1b324cb4864f
  9ec8fdcf_1944_ffb8_5f23_12eaf9528535["InspectedElementStyleXPlugin.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 9ec8fdcf_1944_ffb8_5f23_12eaf9528535
  style d09ae4bb_9ed0_3257_c11b_1c199408288d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and 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 * as React from 'react';
import {Fragment, useContext} from 'react';
import {BridgeContext, StoreContext} from '../context';
import InspectedElementBadges from './InspectedElementBadges';
import InspectedElementContextTree from './InspectedElementContextTree';
import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
import InspectedElementHooksTree from './InspectedElementHooksTree';
import InspectedElementPropsTree from './InspectedElementPropsTree';
import InspectedElementStateTree from './InspectedElementStateTree';
import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
import InspectedElementSuspendedBy from './InspectedElementSuspendedBy';
import NativeStyleEditor from './NativeStyleEditor';
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
import InspectedElementSourcePanel from './InspectedElementSourcePanel';
import StackTraceView from './StackTraceView';
import OwnerView from './OwnerView';
import Skeleton from './Skeleton';
import {
  ElementTypeSuspense,
  ElementTypeActivity,
} from 'react-devtools-shared/src/frontend/types';

import styles from './InspectedElementView.css';

import type {
  Element,
  InspectedElement,
} from 'react-devtools-shared/src/frontend/types';
import type {HookNames} from 'react-devtools-shared/src/frontend/types';
import type {ToggleParseHookNames} from './InspectedElementContext';
import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

type Props = {
  element: Element,
  hookNames: HookNames | null,
  inspectedElement: InspectedElement,
  parseHookNames: boolean,
  toggleParseHookNames: ToggleParseHookNames,
  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
};

export default function InspectedElementView({
  element,
  hookNames,
  inspectedElement,
  parseHookNames,
  toggleParseHookNames,
  symbolicatedSourcePromise,
}: Props): React.Node {
  const {
    stack,
// ... (175 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementView.js do?
InspectedElementView.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in InspectedElementView.js?
InspectedElementView.js defines 1 function(s): InspectedElementView.
What does InspectedElementView.js depend on?
InspectedElementView.js imports 33 module(s): InspectedElementBadges, InspectedElementBadges.js, InspectedElementContext.js, InspectedElementContextTree, InspectedElementContextTree.js, InspectedElementErrorsAndWarningsTree, InspectedElementErrorsAndWarningsTree.js, InspectedElementHooksTree, and 25 more.
What files import InspectedElementView.js?
InspectedElementView.js is imported by 1 file(s): InspectedElement.js.
Where is InspectedElementView.js in the architecture?
InspectedElementView.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free