runCode() — react Function Reference

Architecture documentation for the runCode() function in App.js from the react codebase.

Function javascript BabelCompiler Optimization calls 2 called by 1

Entity Profile

BabelCompiler→ Optimization→ runCode() — react Function Reference

Dependency Diagram

graph TD
  717f296c_5c0e_d70a_b7a0_36f42d94b93a["runCode()"]
  72f84b20_1f9e_8954_9445_3d634de54f95["App"]
  717f296c_5c0e_d70a_b7a0_36f42d94b93a -->|defined in| 72f84b20_1f9e_8954_9445_3d634de54f95
  59ae9226_be8b_b84a_06bc_5d17f0ec0d4d["componentDidMount()"]
  59ae9226_be8b_b84a_06bc_5d17f0ec0d4d -->|calls| 717f296c_5c0e_d70a_b7a0_36f42d94b93a
  6e024402_fbab_bcad_3b7f_7b23d116a5f0["render()"]
  717f296c_5c0e_d70a_b7a0_36f42d94b93a -->|calls| 6e024402_fbab_bcad_3b7f_7b23d116a5f0
  095c9a88_1730_b616_9fba_83641cabc05e["getFiberState()"]
  717f296c_5c0e_d70a_b7a0_36f42d94b93a -->|calls| 095c9a88_1730_b616_9fba_83641cabc05e
  style 717f296c_5c0e_d70a_b7a0_36f42d94b93a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/fiber-debugger/src/App.js lines 56–127

  runCode(code) {
    let currentStage;
    let currentRoot;

    ReactFiberInstrumentation.debugTool = null;
    ReactNoop.render(null);
    ReactNoop.flush();
    ReactFiberInstrumentation.debugTool = {
      onMountContainer: root => {
        currentRoot = root;
      },
      onUpdateContainer: root => {
        currentRoot = root;
      },
      onBeginWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'BEGIN',
              fibers,
              stage,
            },
          ],
        }));
      },
      onCompleteWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'COMPLETE',
              fibers,
              stage,
            },
          ],
        }));
      },
      onCommitWork: fiber => {
        const fibers = getFiberState(currentRoot, fiber);
        const stage = currentStage;
        this.setState(({history}) => ({
          history: [
            ...history,
            {
              action: 'COMMIT',
              fibers,
              stage,
            },
          ],
        }));
      },
    };
    window.React = React;
    window.ReactNoop = ReactNoop;
    window.expect = () => ({
      toBe() {},
      toContain() {},
      toEqual() {},
    });
    window.log = s => (currentStage = s);
    // eslint-disable-next-line
    eval(
      window.Babel.transform(code, {
        presets: ['react', 'es2015'],
      }).code
    );
  }