activateBackend() — react Function Reference

Architecture documentation for the activateBackend() function in backendManager.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ activateBackend() — react Function Reference

Dependency Diagram

graph TD
  850f866e_d60f_317f_0442_0354d3c889ac["activateBackend()"]
  90e8e836_8a48_d6c0_6325_60776b1ad6d2["backendManager.js"]
  850f866e_d60f_317f_0442_0354d3c889ac -->|defined in| 90e8e836_8a48_d6c0_6325_60776b1ad6d2
  74df88b7_2c4d_b47c_87ff_25f127f61424["setup()"]
  74df88b7_2c4d_b47c_87ff_25f127f61424 -->|calls| 850f866e_d60f_317f_0442_0354d3c889ac
  style 850f866e_d60f_317f_0442_0354d3c889ac fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/contentScripts/backendManager.js lines 111–182

function activateBackend(version: string, hook: DevToolsHook) {
  const backend = hook.backends.get(version);
  if (!backend) {
    throw new Error(`Could not find backend for version "${version}"`);
  }

  const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend;
  const bridge = new Bridge({
    listen(fn) {
      const listener = (event: $FlowFixMe) => {
        if (
          event.source !== window ||
          !event.data ||
          event.data.source !== 'react-devtools-content-script' ||
          !event.data.payload
        ) {
          return;
        }
        fn(event.data.payload);
      };
      window.addEventListener('message', listener);
      return () => {
        window.removeEventListener('message', listener);
      };
    },
    send(event: string, payload: any, transferable?: Array<any>) {
      window.postMessage(
        {
          source: 'react-devtools-bridge',
          payload: {event, payload},
        },
        '*',
        transferable,
      );
    },
  });

  const agent = new Agent(
    bridge,
    getIfReloadedAndProfiling(),
    onReloadAndProfile,
  );
  // Agent read flags successfully, we can count it as successful launch
  // Clean up flags, so that next reload won't start profiling
  onReloadAndProfileFlagsReset();

  agent.addListener('shutdown', () => {
    // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down,
    // and that caused the 'shutdown' event on the `agent`, so we don't need to call `bridge.shutdown()` here.
    hook.emit('shutdown');
    delete window.__REACT_DEVTOOLS_BACKEND_MANAGER_INJECTED__;
  });

  initBackend(hook, agent, window, getIsReloadAndProfileSupported());

  // Setup React Native style editor if a renderer like react-native-web has injected it.
  if (typeof setupNativeStyleEditor === 'function' && hook.resolveRNStyle) {
    setupNativeStyleEditor(
      bridge,
      agent,
      hook.resolveRNStyle,
      hook.nativeStyleEditorValidAttributes,
    );
  }

  // Let the frontend know that the backend has attached listeners and is ready for messages.
  // This covers the case of syncing saved values after reloading/navigating while DevTools remain open.
  bridge.send('extensionBackendInitialized');

  // this backend is activated
  requiredBackends.delete(version);
}