createBridgeAndStore() — react Function Reference

Architecture documentation for the createBridgeAndStore() function in index.js from the react codebase.

Function javascript BabelCompiler Validation calls 5 called by 1

Entity Profile

BabelCompiler→ Validation→ createBridgeAndStore() — react Function Reference

Dependency Diagram

graph TD
  bb19f56d_5cc8_e6cd_8df2_513f1715da12["createBridgeAndStore()"]
  b5e42467_7633_e234_1d51_a93bfc4818c7["index.js"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|defined in| b5e42467_7633_e234_1d51_a93bfc4818c7
  fcc10411_2c67_c71c_4b48_a0e0e4d6e62b["mountReactDevTools()"]
  fcc10411_2c67_c71c_4b48_a0e0e4d6e62b -->|calls| bb19f56d_5cc8_e6cd_8df2_513f1715da12
  ee67482a_cd7d_7dad_d2f6_17a2894ae5f9["createBridge()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| ee67482a_cd7d_7dad_d2f6_17a2894ae5f9
  a4ecef78_9729_369e_7aeb_a617b81c10ad["getProfilingFlags()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| a4ecef78_9729_369e_7aeb_a617b81c10ad
  2028470c_71b0_2765_a3f2_02e5ff13cefc["createSuspensePanel()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| 2028470c_71b0_2765_a3f2_02e5ff13cefc
  fe55e716_1b99_d487_e455_4f53837f6e29["injectBackendManager()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| fe55e716_1b99_d487_e455_4f53837f6e29
  c05796b8_048a_d776_6577_ac6515ba020c["viewAttributeSource()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| c05796b8_048a_d776_6577_ac6515ba020c
  style bb19f56d_5cc8_e6cd_8df2_513f1715da12 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 155–195

function createBridgeAndStore() {
  createBridge();

  const {isProfiling} = getProfilingFlags();

  store = new Store(bridge, {
    isProfiling,
    supportsReloadAndProfile: __IS_CHROME__ || __IS_EDGE__,
    // At this time, the timeline can only parse Chrome performance profiles.
    supportsTimeline: __IS_CHROME__,
    supportsTraceUpdates: true,
    supportsInspectMatchingDOMElement: true,
    supportsClickToInspect: true,
  });

  store.addListener('enableSuspenseTab', () => {
    createSuspensePanel();
  });

  store.addListener('settingsUpdated', (hookSettings, componentFilters) => {
    chrome.storage.local.set({...hookSettings, componentFilters});
  });

  if (!isProfiling) {
    // We previously stored this in performCleanup function
    store.profilerStore.profilingData = profilingData;
  }

  // Initialize the backend only once the Store has been initialized.
  // Otherwise, the Store may miss important initial tree op codes.
  injectBackendManager(chrome.devtools.inspectedWindow.tabId);

  const viewAttributeSourceFunction = (
    id: Element['id'],
    path: Array<string | number>,
  ) => {
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID != null) {
      viewAttributeSource(rendererID, id, path);
    }
  };