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

Components.js — react Source File

Architecture documentation for Components.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
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2["Components.js"]
  80ad5569_a221_98e5_daec_ede1bea33ee0["Tree.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 80ad5569_a221_98e5_daec_ede1bea33ee0
  8903e7f2_b245_fcae_5413_05a60dcaa5e4["Tree"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 8903e7f2_b245_fcae_5413_05a60dcaa5e4
  fd0c3251_3b74_cf9d_8897_18f7e16e765e["OwnersListContext.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> fd0c3251_3b74_cf9d_8897_18f7e16e765e
  112f19f5_c561_f36f_4f9c_12048819ad24["portaledContent.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 112f19f5_c561_f36f_4f9c_12048819ad24
  99e412e8_4291_b219_15f8_f660472850c6["portaledContent"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 99e412e8_4291_b219_15f8_f660472850c6
  8d1aac2b_7bad_9e53_cab3_6414b0d9e4c5["InspectedElementErrorBoundary.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 8d1aac2b_7bad_9e53_cab3_6414b0d9e4c5
  4c0d725a_27bd_a723_3599_a3e75bea5bd3["InspectedElement.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 4c0d725a_27bd_a723_3599_a3e75bea5bd3
  899cf357_78bc_8627_bd54_2c00e2c9fde2["ModalDialog.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 899cf357_78bc_8627_bd54_2c00e2c9fde2
  b8ce5a14_1cf8_1044_56d2_6d19fb6e7b7b["context.js"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> b8ce5a14_1cf8_1044_56d2_6d19fb6e7b7b
  9169680e_9eb4_de6b_963f_eeec3876e5bb["Components.css"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 9169680e_9eb4_de6b_963f_eeec3876e5bb
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  cab260e5_67e4_97ee_dc26_d13e154dd4d1["SettingsModalContext"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> cab260e5_67e4_97ee_dc26_d13e154dd4d1
  4f31ec17_ed00_bfa1_f25f_2101aa0548ee["storage"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> 4f31ec17_ed00_bfa1_f25f_2101aa0548ee
  bdd49eed_fb0b_b1e8_aa94_610902a7b682["SettingsModal"]
  a2fac529_5caa_fd15_61d0_e5b11d75bdd2 --> bdd49eed_fb0b_b1e8_aa94_610902a7b682
  style a2fac529_5caa_fd15_61d0_e5b11d75bdd2 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, useEffect, useLayoutEffect, useReducer, useRef} from 'react';
import Tree from './Tree';
import {OwnersListContextController} from './OwnersListContext';
import portaledContent from '../portaledContent';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
import {
  localStorageGetItem,
  localStorageSetItem,
} from 'react-devtools-shared/src/storage';
import InspectedElementErrorBoundary from './InspectedElementErrorBoundary';
import InspectedElement from './InspectedElement';
import {ModalDialog} from '../ModalDialog';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
import {NativeStyleContextController} from './NativeStyleEditor/context';

import styles from './Components.css';
import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

type Orientation = 'horizontal' | 'vertical';

type ResizeActionType =
  | 'ACTION_SET_DID_MOUNT'
  | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
  | 'ACTION_SET_VERTICAL_PERCENTAGE';

type ResizeAction = {
  type: ResizeActionType,
  payload: any,
};

type ResizeState = {
  horizontalPercentage: number,
  verticalPercentage: number,
};

function Components(_: {}) {
  const wrapperElementRef = useRef<null | HTMLElement>(null);
  const resizeElementRef = useRef<null | HTMLElement>(null);

  const [state, dispatch] = useReducer<ResizeState, any, ResizeAction>(
    resizeReducer,
    null,
    initResizeState,
  );

  const {horizontalPercentage, verticalPercentage} = state;

  useLayoutEffect(() => {
    const resizeElement = resizeElementRef.current;

// ... (183 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does Components.js do?
Components.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 Components.js?
Components.js defines 3 function(s): Components, initResizeState, resizeReducer.
What does Components.js depend on?
Components.js imports 15 module(s): Components.css, InspectedElement.js, InspectedElementErrorBoundary.js, ModalDialog.js, OwnersListContext.js, SettingsModal, SettingsModalContext, SyntheticEvent, and 7 more.
What files import Components.js?
Components.js is imported by 1 file(s): DevTools.js.
Where is Components.js in the architecture?
Components.js is located at packages/react-devtools-shared/src/devtools/views/Components/Components.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