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

InspectedElementContext.js — react Source File

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

File javascript BabelCompiler Validation 11 imports 6 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  73a58bda_a3e0_b7ab_6561_84167121e1ae["InspectedElementContext.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  5996f1e4_af81_a51b_84bc_175bfba4f818["SettingsContext.js"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 5996f1e4_af81_a51b_84bc_175bfba4f818
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  63da8956_050d_9cef_96c8_ea9c6f0c208c["inspectedElementCache"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 63da8956_050d_9cef_96c8_ea9c6f0c208c
  1f37b01d_ae85_5546_b005_b686486b8d9e["hookNamesCache"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 1f37b01d_ae85_5546_b005_b686486b8d9e
  b56890c4_868f_a5aa_e03a_3e4470a31a51["dynamicImportCache"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> b56890c4_868f_a5aa_e03a_3e4470a31a51
  2e5d5bab_71fd_5a80_3fa3_895dcaab6301["FetchFileWithCachingContext"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 2e5d5bab_71fd_5a80_3fa3_895dcaab6301
  30682191_b44f_4eb1_3fb6_03b9a7070443["HookNamesModuleLoaderContext"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 30682191_b44f_4eb1_3fb6_03b9a7070443
  aec7978f_0a19_ba93_de9e_ac8cf5ddc74b["types"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> aec7978f_0a19_ba93_de9e_ac8cf5ddc74b
  4c0d725a_27bd_a723_3599_a3e75bea5bd3["InspectedElement.js"]
  4c0d725a_27bd_a723_3599_a3e75bea5bd3 --> 73a58bda_a3e0_b7ab_6561_84167121e1ae
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3 --> 73a58bda_a3e0_b7ab_6561_84167121e1ae
  d09ae4bb_9ed0_3257_c11b_1c199408288d["InspectedElementView.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> 73a58bda_a3e0_b7ab_6561_84167121e1ae
  style 73a58bda_a3e0_b7ab_6561_84167121e1ae 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 {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {
  createContext,
  startTransition,
  unstable_useCacheRefresh as useCacheRefresh,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import {TreeStateContext} from './TreeContext';
import {BridgeContext, StoreContext} from '../context';
import {
  inspectElement,
  startElementUpdatesPolling,
} from 'react-devtools-shared/src/inspectedElementCache';
import {
  clearHookNamesCache,
  hasAlreadyLoadedHookNames,
  loadHookNames,
} from 'react-devtools-shared/src/hookNamesCache';
import {loadModule} from 'react-devtools-shared/src/dynamicImportCache';
import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
import {SettingsContext} from '../Settings/SettingsContext';

import type {HookNames} from 'react-devtools-shared/src/frontend/types';
import type {ReactNodeList} from 'shared/ReactTypes';
import type {
  Element,
  InspectedElement,
} from 'react-devtools-shared/src/frontend/types';

type Path = Array<string | number>;
type InspectPathFunction = (path: Path) => void;
export type ToggleParseHookNames = () => void;

type Context = {
  hookNames: HookNames | null,
  inspectedElement: InspectedElement | null,
  inspectPaths: InspectPathFunction,
  parseHookNames: boolean,
  toggleParseHookNames: ToggleParseHookNames,
};

export const InspectedElementContext: ReactContext<Context> =
  createContext<Context>(((null: any): Context));
// ... (210 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementContext.js do?
InspectedElementContext.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 InspectedElementContext.js?
InspectedElementContext.js defines 2 function(s): InspectPathFunction, InspectedElementContextController.
What does InspectedElementContext.js depend on?
InspectedElementContext.js imports 11 module(s): FetchFileWithCachingContext, HookNamesModuleLoaderContext, ReactTypes, SettingsContext.js, TreeContext.js, context.js, dynamicImportCache, hookNamesCache, and 3 more.
What files import InspectedElementContext.js?
InspectedElementContext.js is imported by 6 file(s): DevTools.js, HookChangeSummary.js, InspectedElement.js, InspectedElementHooksTree.js, InspectedElementView.js, KeyValue.js.
Where is InspectedElementContext.js in the architecture?
InspectedElementContext.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.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