App.js — react Source File

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

File javascript BabelCompiler Optimization 9 imports 1 dependents 1 functions 1 classes

Entity Profile

BabelCompiler→ Optimization→ App.js — react Source File

Dependency Diagram

graph LR
  5bd02a98_f81e_d049_4b30_df0a827f81d8["App.js"]
  893bf185_5c7b_72e5_1ff7_056d167b9a23["Editor.js"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 893bf185_5c7b_72e5_1ff7_056d167b9a23
  2d3a4ccf_7ec0_78cb_10b7_9c3306bb0ba9["Editor"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 2d3a4ccf_7ec0_78cb_10b7_9c3306bb0ba9
  a811b6d7_3802_33c4_440e_c2d161277e14["Fibers.js"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> a811b6d7_3802_33c4_440e_c2d161277e14
  1287fd16_2b9c_ebc8_7d61_7642cb86b380["Fibers"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 1287fd16_2b9c_ebc8_7d61_7642cb86b380
  b3c14156_2ff4_ff95_50ff_0e0cc950d343["describeFibers.js"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> b3c14156_2ff4_ff95_50ff_0e0cc950d343
  4134c966_3571_94e1_409d_53b55e7ce639["describeFibers"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 4134c966_3571_94e1_409d_53b55e7ce639
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  1d235f27_062d_1cca_15d6_7fc07f92be41["react-draggable"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 1d235f27_062d_1cca_15d6_7fc07f92be41
  26ac3c24_949d_f682_9a6b_6abcde832928["react-noop-renderer"]
  5bd02a98_f81e_d049_4b30_df0a827f81d8 --> 26ac3c24_949d_f682_9a6b_6abcde832928
  971c39d9_65f1_5b76_72d8_ad9714afde27["index.js"]
  971c39d9_65f1_5b76_72d8_ad9714afde27 --> 5bd02a98_f81e_d049_4b30_df0a827f81d8
  style 5bd02a98_f81e_d049_4b30_df0a827f81d8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import React, {Component} from 'react';
import Draggable from 'react-draggable';
import ReactNoop from 'react-noop-renderer';
import Editor from './Editor';
import Fibers from './Fibers';
import describeFibers from './describeFibers';

// The only place where we use it.
const ReactFiberInstrumentation =
  ReactNoop.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
    .ReactFiberInstrumentation;

function getFiberState(root, workInProgress) {
  if (!root) {
    return null;
  }
  return describeFibers(root.current, workInProgress);
}

const defaultCode = `
log('Render <div>Hello</div>');
ReactNoop.render(<div>Hello</div>);
ReactNoop.flush();

log('Render <h1>Goodbye</h1>');
ReactNoop.render(<h1>Goodbye</h1>);
ReactNoop.flush();
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: localStorage.getItem('fiber-debugger-code') || defaultCode,
      isEditing: false,
      history: [],
      currentStep: 0,
      show: {
        alt: false,
        child: true,
        sibling: true,
        return: false,
        fx: false,
      },
      graphSettings: {
        rankdir: 'TB',
        trackActive: true,
      },
    };
  }

  componentDidMount() {
    this.runCode(this.state.code);
  }

  runCode(code) {
    let currentStage;
    let currentRoot;

    ReactFiberInstrumentation.debugTool = null;
// ... (201 more lines)