createBridge() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ createBridge() — react Function Reference

Dependency Diagram

graph TD
  ee67482a_cd7d_7dad_d2f6_17a2894ae5f9["createBridge()"]
  b5e42467_7633_e234_1d51_a93bfc4818c7["index.js"]
  ee67482a_cd7d_7dad_d2f6_17a2894ae5f9 -->|defined in| b5e42467_7633_e234_1d51_a93bfc4818c7
  bb19f56d_5cc8_e6cd_8df2_513f1715da12["createBridgeAndStore()"]
  bb19f56d_5cc8_e6cd_8df2_513f1715da12 -->|calls| ee67482a_cd7d_7dad_d2f6_17a2894ae5f9
  5c8f3c69_4960_a183_149e_75ac0f06f111["setReactSelectionFromBrowser()"]
  ee67482a_cd7d_7dad_d2f6_17a2894ae5f9 -->|calls| 5c8f3c69_4960_a183_149e_75ac0f06f111
  style ee67482a_cd7d_7dad_d2f6_17a2894ae5f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/main/index.js lines 59–141

function createBridge() {
  bridge = new Bridge({
    listen(fn) {
      const bridgeListener = (message: Message) => fn(message);
      // Store the reference so that we unsubscribe from the same object.
      const portOnMessage = ((port: any): ExtensionPort).onMessage;
      portOnMessage.addListener(bridgeListener);

      lastSubscribedBridgeListener = bridgeListener;

      return () => {
        port?.onMessage.removeListener(bridgeListener);
        lastSubscribedBridgeListener = null;
      };
    },

    send(event: string, payload: any, transferable?: Array<any>) {
      port?.postMessage({event, payload}, transferable);
    },
  });

  bridge.addListener('reloadAppForProfiling', () => {
    localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
    evalInInspectedWindow('reload', [], () => {});
  });

  bridge.addListener(
    'syncSelectionToBuiltinElementsPanel',
    setBrowserSelectionFromReact,
  );

  bridge.addListener('extensionBackendInitialized', () => {
    // Initialize the renderer's trace-updates setting.
    // This handles the case of navigating to a new page after the DevTools have already been shown.
    bridge.send(
      'setTraceUpdatesEnabled',
      localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) === 'true',
    );
  });

  const sourcesPanel = chrome.devtools.panels.sources;

  const onBrowserElementSelectionChanged = () =>
    setReactSelectionFromBrowser(bridge);
  const onBrowserSourceSelectionChanged = (location: {
    url: string,
    startLine: number,
    startColumn: number,
    endLine: number,
    endColumn: number,
  }) => {
    if (
      currentSelectedSource === null ||
      currentSelectedSource.url !== location.url
    ) {
      currentSelectedSource = {
        url: location.url,
        selectionRef: {
          // We use 1-based line and column, Chrome provides them 0-based.
          line: location.startLine + 1,
          column: location.startColumn + 1,
        },
      };
      // Rerender with the new file selection.
      render();
    } else {
      // Update the ref to the latest position without updating the url. No need to rerender.
      const selectionRef = currentSelectedSource.selectionRef;
      selectionRef.line = location.startLine + 1;
      selectionRef.column = location.startColumn + 1;
    }
  };
  const onBridgeShutdown = () => {
    chrome.devtools.panels.elements.onSelectionChanged.removeListener(
      onBrowserElementSelectionChanged,
    );
    if (sourcesPanel && sourcesPanel.onSelectionChanged) {
      currentSelectedSource = null;
      sourcesPanel.onSelectionChanged.removeListener(
        onBrowserSourceSelectionChanged,
      );