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

DevToolsFiberComponentStack.js — react Source File

Architecture documentation for DevToolsFiberComponentStack.js, a javascript file in the react codebase. 10 imports, 2 dependents.

File javascript BabelCompiler Validation 10 imports 2 dependents 6 functions

Entity Profile

Dependency Diagram

graph LR
  2bbfa631_5780_6883_1746_b7c42df10b5d["DevToolsFiberComponentStack.js"]
  0304bbc8_f110_6643_71c6_d26bddc58fde["types.js"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> 0304bbc8_f110_6643_71c6_d26bddc58fde
  c59dc57c_ed0c_b6cd_803d_b7eeab46f99e["DevToolsComponentStackFrame.js"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> c59dc57c_ed0c_b6cd_803d_b7eeab46f99e
  b79d7933_7e8b_53e4_29f2_b6516a60dac8["describeBuiltInComponentFrame"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> b79d7933_7e8b_53e4_29f2_b6516a60dac8
  b4c6f9e5_d92e_ecc4_3cd0_0b109bf71a32["describeFunctionComponentFrame"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> b4c6f9e5_d92e_ecc4_3cd0_0b109bf71a32
  5cbc52da_c9f7_de68_6aad_129d03cab0de["describeClassComponentFrame"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> 5cbc52da_c9f7_de68_6aad_129d03cab0de
  f8ce27e3_0da1_4966_9299_5058a4677f17["describeDebugInfoFrame"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> f8ce27e3_0da1_4966_9299_5058a4677f17
  ca4a7497_d233_4d3d_e832_e2f96306e9ae["DevToolsOwnerStack.js"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> ca4a7497_d233_4d3d_e832_e2f96306e9ae
  a8f4c31f_f504_975a_5ac7_bb83d1cf4164["formatOwnerStack"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> a8f4c31f_f504_975a_5ac7_bb83d1cf4164
  42892443_e223_3da0_aeb9_e1b32a408fb0["ReactInternalTypes"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> 42892443_e223_3da0_aeb9_e1b32a408fb0
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  2bbfa631_5780_6883_1746_b7c42df10b5d --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  7dc1582f_e5c4_6fb0_e998_bd2982c8c801["renderer.js"]
  7dc1582f_e5c4_6fb0_e998_bd2982c8c801 --> 2bbfa631_5780_6883_1746_b7c42df10b5d
  bd550dba_eac8_68ba_63f3_1127c8e84572["profilingHooks.js"]
  bd550dba_eac8_68ba_63f3_1127c8e84572 --> 2bbfa631_5780_6883_1746_b7c42df10b5d
  style 2bbfa631_5780_6883_1746_b7c42df10b5d 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
 */

// This is a DevTools fork of ReactFiberComponentStack.
// This fork enables DevTools to use the same "native" component stack format,
// while still maintaining support for multiple renderer versions
// (which use different values for ReactTypeOfWork).

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {CurrentDispatcherRef, WorkTagMap} from '../types';

import type {ReactComponentInfo} from 'shared/ReactTypes';

import {
  describeBuiltInComponentFrame,
  describeFunctionComponentFrame,
  describeClassComponentFrame,
  describeDebugInfoFrame,
} from '../shared/DevToolsComponentStackFrame';

import {formatOwnerStack} from '../shared/DevToolsOwnerStack';

export function describeFiber(
  workTagMap: WorkTagMap,
  workInProgress: Fiber,
  currentDispatcherRef: CurrentDispatcherRef,
): string {
  const {
    HostHoistable,
    HostSingleton,
    HostComponent,
    LazyComponent,
    SuspenseComponent,
    SuspenseListComponent,
    FunctionComponent,
    IndeterminateComponent,
    SimpleMemoComponent,
    ForwardRef,
    ClassComponent,
    ViewTransitionComponent,
    ActivityComponent,
  } = workTagMap;

  switch (workInProgress.tag) {
    case HostHoistable:
    case HostSingleton:
    case HostComponent:
      return describeBuiltInComponentFrame(workInProgress.type);
    case LazyComponent:
      // TODO: When we support Thenables as component types we should rename this.
      return describeBuiltInComponentFrame('Lazy');
    case SuspenseComponent:
      return describeBuiltInComponentFrame('Suspense');
    case SuspenseListComponent:
// ... (173 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does DevToolsFiberComponentStack.js do?
DevToolsFiberComponentStack.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 DevToolsFiberComponentStack.js?
DevToolsFiberComponentStack.js defines 6 function(s): describeFiber, getOwnerStackByFiberInDev, getSourceLocationByFiber, getStackByFiberInDevAndProd, supportsConsoleTasks, supportsOwnerStacks.
What does DevToolsFiberComponentStack.js depend on?
DevToolsFiberComponentStack.js imports 10 module(s): DevToolsComponentStackFrame.js, DevToolsOwnerStack.js, ReactInternalTypes, ReactTypes, describeBuiltInComponentFrame, describeClassComponentFrame, describeDebugInfoFrame, describeFunctionComponentFrame, and 2 more.
What files import DevToolsFiberComponentStack.js?
DevToolsFiberComponentStack.js is imported by 2 file(s): profilingHooks.js, renderer.js.
Where is DevToolsFiberComponentStack.js in the architecture?
DevToolsFiberComponentStack.js is located at packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/backend/fiber).

Analyze Your Own Codebase

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

Try Supermodel Free