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

InspectedElementSuspendedBy.js — react Source File

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

File javascript CompilerCore Gating 25 imports 1 dependents 7 functions

Entity Profile

Dependency Diagram

graph LR
  bf3f0769_e771_c16b_55cf_16e6a318ce77["InspectedElementSuspendedBy.js"]
  dfdc514c_c9f0_03aa_08da_95db1513b03f["Button.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> dfdc514c_c9f0_03aa_08da_95db1513b03f
  60bedddf_fa05_6e3d_041d_fb52639786ab["Button"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 60bedddf_fa05_6e3d_041d_fb52639786ab
  4405a8c4_477f_8de1_2606_42722c13cd6a["ButtonIcon.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 4405a8c4_477f_8de1_2606_42722c13cd6a
  6e94959c_9b19_880a_2fc7_e2fded6a445c["ButtonIcon"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 6e94959c_9b19_880a_2fc7_e2fded6a445c
  df1a1d74_eb1b_2c47_1e7c_4cf250954d55["KeyValue.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> df1a1d74_eb1b_2c47_1e7c_4cf250954d55
  76f59e9e_828a_8ff6_8393_366b2bb79b36["KeyValue"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 76f59e9e_828a_8ff6_8393_366b2bb79b36
  f8349be4_421c_d470_6aed_39c75d603992["utils.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> f8349be4_421c_d470_6aed_39c75d603992
  84752d7a_6d41_4e6c_366a_8457d769aa0f["serializeDataForCopy"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 84752d7a_6d41_4e6c_366a_8457d769aa0f
  5261513b_578b_8076_6981_2efbbad83cab["pluralize"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 5261513b_578b_8076_6981_2efbbad83cab
  8b005f78_4efc_c836_599e_c4475c1c22c6["store.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 8b005f78_4efc_c836_599e_c4475c1c22c6
  f39134d2_dd48_e043_3697_90f9c60e391a["InspectedElementSharedStyles.css"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> f39134d2_dd48_e043_3697_90f9c60e391a
  fcfc0e25_c6dc_f8a6_de91_8e2fa18e9e8a["StackTraceView.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> fcfc0e25_c6dc_f8a6_de91_8e2fa18e9e8a
  4939f697_961e_04e4_355a_c7022bd150f2["StackTraceView"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> 4939f697_961e_04e4_355a_c7022bd150f2
  c8c7fd48_5f37_8b50_41c8_a9983f79de15["OwnerView.js"]
  bf3f0769_e771_c16b_55cf_16e6a318ce77 --> c8c7fd48_5f37_8b50_41c8_a9983f79de15
  style bf3f0769_e771_c16b_55cf_16e6a318ce77 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 {copy} from 'clipboard-js';
import * as React from 'react';
import {useState, useTransition} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import KeyValue from './KeyValue';
import {serializeDataForCopy, pluralize} from '../utils';
import Store from '../../store';
import styles from './InspectedElementSharedStyles.css';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
import StackTraceView from './StackTraceView';
import OwnerView from './OwnerView';
import {meta} from '../../../hydration';
import useInferredName from '../useInferredName';

import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js';

import type {
  InspectedElement,
  SerializedAsyncInfo,
} from 'react-devtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';

import {
  UNKNOWN_SUSPENDERS_NONE,
  UNKNOWN_SUSPENDERS_REASON_PRODUCTION,
  UNKNOWN_SUSPENDERS_REASON_OLD_VERSION,
  UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE,
} from '../../../constants';

type RowProps = {
  bridge: FrontendBridge,
  element: Element,
  inspectedElement: InspectedElement,
  store: Store,
  asyncInfo: SerializedAsyncInfo,
  index: number,
  minTime: number,
  maxTime: number,
  skipName?: boolean,
};

function getShortDescription(name: string, description: string): string {
  const descMaxLength = 30 - name.length;
  if (descMaxLength > 1) {
    const l = description.length;
    if (l > 0 && l <= descMaxLength) {
      // We can fit the full description
      return description;
    } else if (
      description.startsWith('http://') ||
// ... (567 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementSuspendedBy.js do?
InspectedElementSuspendedBy.js is a source file in the react codebase, written in javascript. It belongs to the CompilerCore domain, Gating subdomain.
What functions are defined in InspectedElementSuspendedBy.js?
InspectedElementSuspendedBy.js defines 7 function(s): InspectedElementSuspendedBy, SuspendedByGroup, SuspendedByRow, compareTime, formatBytes, getShortDescription, withIndex.
What does InspectedElementSuspendedBy.js depend on?
InspectedElementSuspendedBy.js imports 25 module(s): Button, Button.js, ButtonIcon, ButtonIcon.js, InspectedElementSharedStyles.css, KeyValue, KeyValue.js, OwnerView, and 17 more.
What files import InspectedElementSuspendedBy.js?
InspectedElementSuspendedBy.js is imported by 1 file(s): InspectedElementView.js.
Where is InspectedElementSuspendedBy.js in the architecture?
InspectedElementSuspendedBy.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspendedBy.js (domain: CompilerCore, subdomain: Gating, 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