init() — react Function Reference

Architecture documentation for the init() function in devtools.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ init() — react Function Reference

Dependency Diagram

graph TD
  915d1dee_3005_021a_bc1e_6e8a1a1aac85["init()"]
  32c34769_fd19_010a_b41f_6b377927190a["devtools.js"]
  915d1dee_3005_021a_bc1e_6e8a1a1aac85 -->|defined in| 32c34769_fd19_010a_b41f_6b377927190a
  724d7f6a_9e47_f8a8_905f_cefc244a567d["inject()"]
  915d1dee_3005_021a_bc1e_6e8a1a1aac85 -->|calls| 724d7f6a_9e47_f8a8_905f_cefc244a567d
  style 915d1dee_3005_021a_bc1e_6e8a1a1aac85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/multi/devtools.js lines 32–72

function init(appIframe, devtoolsContainer, appSource) {
  const {contentDocument, contentWindow} = appIframe;

  // Wire each DevTools instance directly to its app.
  // By default, DevTools dispatches "message" events on the window,
  // but this means that only one instance of DevTools can live on a page.
  const wall = {
    _listeners: [],
    listen(listener) {
      if (__DEBUG__) {
        console.log('[Shell] Wall.listen()');
      }

      wall._listeners.push(listener);
    },
    send(event, payload) {
      if (__DEBUG__) {
        console.log('[Shell] Wall.send()', {event, payload});
      }

      wall._listeners.forEach(listener => listener({event, payload}));
    },
  };

  const backendBridge = createBackendBridge(contentWindow, wall);

  initializeBackend(contentWindow);

  const frontendBridge = createFrontendBridge(contentWindow, wall);
  const store = createStore(frontendBridge);
  const DevTools = createDevTools(contentWindow, {
    bridge: frontendBridge,
    store,
  });

  inject(contentDocument, appSource, () => {
    createRoot(devtoolsContainer).render(<DevTools />);
  });

  activateBackend(contentWindow, {bridge: backendBridge});
}