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

SuspenseRects.js — react Source File

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

File javascript BabelCompiler 11 imports 1 dependents

Entity Profile

Dependency Diagram

graph LR
  cf8221e2_1aa3_8c65_096d_d49b44597f09["SuspenseRects.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  315baf50_1028_51ca_a9c1_679c6a17ed98["hooks.js"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  adea4ea1_fbc1_685d_2033_a7ef78aeaeec["SuspenseRects.css"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> adea4ea1_fbc1_685d_2033_a7ef78aeaeec
  9526441b_1b8b_0410_c862_2232f8e4ba65["SuspenseTreeContext.js"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> 9526441b_1b8b_0410_c862_2232f8e4ba65
  0e3e3ccf_5730_dd0d_ff2f_15f01903193c["SuspenseEnvironmentColors.js"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> 0e3e3ccf_5730_dd0d_ff2f_15f01903193c
  baf70b0e_4867_b3ed_962a_e5c9ae820fef["store"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> baf70b0e_4867_b3ed_962a_e5c9ae820fef
  aec7978f_0a19_ba93_de9e_ac8cf5ddc74b["types"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> aec7978f_0a19_ba93_de9e_ac8cf5ddc74b
  ebb48597_9981_bb7d_08db_b9fe29a0f62e["SyntheticEvent"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> ebb48597_9981_bb7d_08db_b9fe29a0f62e
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  ea6df2b0_aa79_64d3_ce39_1fd881c2faaa["rbush"]
  cf8221e2_1aa3_8c65_096d_d49b44597f09 --> ea6df2b0_aa79_64d3_ce39_1fd881c2faaa
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60["SuspenseTab.js"]
  3249b7c1_ae10_2672_10ce_a66fd0ee6f60 --> cf8221e2_1aa3_8c65_096d_d49b44597f09
  style cf8221e2_1aa3_8c65_096d_d49b44597f09 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 type Store from 'react-devtools-shared/src/devtools/store';
import type {
  Element,
  SuspenseNode,
  Rect,
} from 'react-devtools-shared/src/frontend/types';
import typeof {
  SyntheticMouseEvent,
  SyntheticPointerEvent,
} from 'react-dom-bindings/src/events/SyntheticEvent';

import * as React from 'react';
import {createContext, useContext, useLayoutEffect, useMemo} from 'react';
import {
  TreeDispatcherContext,
  TreeStateContext,
} from '../Components/TreeContext';
import {StoreContext} from '../context';
import {useHighlightHostInstance} from '../hooks';
import styles from './SuspenseRects.css';
import {
  SuspenseTreeStateContext,
  SuspenseTreeDispatcherContext,
} from './SuspenseTreeContext';
import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
import type RBush from 'rbush';

function ScaledRect({
  className,
  rect,
  visible,
  suspended,
  selected,
  hovered,
  adjust,
  ...props
}: {
  className: string,
  rect: Rect,
  visible: boolean,
  suspended: boolean,
  selected?: boolean,
  hovered?: boolean,
  adjust?: boolean,
  ...
}): React$Node {
  const viewBox = useContext(ViewBox);
  const width = (rect.width / viewBox.width) * 100 + '%';
  const height = (rect.height / viewBox.height) * 100 + '%';
  const x = ((rect.x - viewBox.x) / viewBox.width) * 100 + '%';
  const y = ((rect.y - viewBox.y) / viewBox.height) * 100 + '%';
// ... (561 more lines)

Domain

Dependencies

Imported By

Source

Frequently Asked Questions

What does SuspenseRects.js do?
SuspenseRects.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does SuspenseRects.js depend on?
SuspenseRects.js imports 11 module(s): SuspenseEnvironmentColors.js, SuspenseRects.css, SuspenseTreeContext.js, SyntheticEvent, TreeContext.js, context.js, hooks.js, rbush, and 3 more.
What files import SuspenseRects.js?
SuspenseRects.js is imported by 1 file(s): SuspenseTab.js.
Where is SuspenseRects.js in the architecture?
SuspenseRects.js is located at packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js (domain: BabelCompiler, directory: packages/react-devtools-shared/src/devtools/views/SuspenseTab).

Analyze Your Own Codebase

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

Try Supermodel Free