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

InspectedElementSourcePanel.js — react Source File

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

File javascript BabelCompiler Validation 15 imports 1 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  50c39210_7831_dde4_3a12_fc8ea644bc38["InspectedElementSourcePanel.js"]
  f9049b08_60f8_abce_a6a6_153f88447124["Button.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> f9049b08_60f8_abce_a6a6_153f88447124
  f71ee326_17f0_7db4_4178_2763fb1c2ad1["Button"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> f71ee326_17f0_7db4_4178_2763fb1c2ad1
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  cca513cc_90f4_6a92_3258_2ffeb3fbe572["Skeleton.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> cca513cc_90f4_6a92_3258_2ffeb3fbe572
  00062c79_0939_b3b6_bd53_3417a2bdb8c0["Skeleton"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 00062c79_0939_b3b6_bd53_3417a2bdb8c0
  4d6a124e_fdc4_9da9_8ac7_85f75cd106fe["useOpenResource.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 4d6a124e_fdc4_9da9_8ac7_85f75cd106fe
  ec06b889_b5e8_d898_a8bc_9717ca67fedf["InspectedElementSourcePanel.css"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> ec06b889_b5e8_d898_a8bc_9717ca67fedf
  b2ae7acd_23fc_8be6_1598_6a4162c47a7b["formatLocationForDisplay.js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> b2ae7acd_23fc_8be6_1598_6a4162c47a7b
  0387a47c_28df_b84f_2410_96bf24210782["formatLocationForDisplay"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 0387a47c_28df_b84f_2410_96bf24210782
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  1e290487_2c6f_fbaf_7be9_e14d5df52457["clipboard-js"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> 1e290487_2c6f_fbaf_7be9_e14d5df52457
  b69d8d17_a331_bd78_20f6_a9cb90ca08bf["withPermissionsCheck"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> b69d8d17_a331_bd78_20f6_a9cb90ca08bf
  c3870ba8_6512_a088_2557_ff78b3a22e41["symbolicateSource"]
  50c39210_7831_dde4_3a12_fc8ea644bc38 --> c3870ba8_6512_a088_2557_ff78b3a22e41
  style 50c39210_7831_dde4_3a12_fc8ea644bc38 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 {copy} from 'clipboard-js';

import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Skeleton from './Skeleton';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import useOpenResource from '../useOpenResource';

import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';
import type {ReactFunctionLocation} from 'shared/ReactTypes';
import styles from './InspectedElementSourcePanel.css';

import formatLocationForDisplay from './formatLocationForDisplay';

type Props = {
  source: ReactFunctionLocation,
  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
};

function InspectedElementSourcePanel({
  source,
  symbolicatedSourcePromise,
}: Props): React.Node {
  return (
    <div>
      <div className={styles.SourceHeaderRow}>
        <div className={styles.SourceHeader}>source</div>

        <React.Suspense
          fallback={
            <Button disabled={true} title="Loading source maps...">
              <ButtonIcon type="copy" />
            </Button>
          }>
          <CopySourceButton
            source={source}
            symbolicatedSourcePromise={symbolicatedSourcePromise}
          />
        </React.Suspense>
      </div>

      <React.Suspense
        fallback={
          <div className={styles.SourceOneLiner}>
            <Skeleton height={16} width="40%" />
          </div>
        }>
        <FormattedSourceString
          source={source}
// ... (63 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementSourcePanel.js do?
InspectedElementSourcePanel.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 InspectedElementSourcePanel.js?
InspectedElementSourcePanel.js defines 3 function(s): CopySourceButton, FormattedSourceString, InspectedElementSourcePanel.
What does InspectedElementSourcePanel.js depend on?
InspectedElementSourcePanel.js imports 15 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, InspectedElementSourcePanel.css, ReactTypes, Skeleton, Skeleton.js, and 7 more.
What files import InspectedElementSourcePanel.js?
InspectedElementSourcePanel.js is imported by 1 file(s): InspectedElementView.js.
Where is InspectedElementSourcePanel.js in the architecture?
InspectedElementSourcePanel.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.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