messageListener() — react Function Reference

Architecture documentation for the messageListener() function in installHook.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ messageListener() — react Function Reference

Dependency Diagram

graph TD
  4e913cf7_415c_1b60_2693_9f1e87d4d1a6["messageListener()"]
  1fa3327b_cae1_5cf2_9f33_dbea00aaa3ee["installHook.js"]
  4e913cf7_415c_1b60_2693_9f1e87d4d1a6 -->|defined in| 1fa3327b_cae1_5cf2_9f33_dbea00aaa3ee
  b9e76cd2_712c_d143_3531_87d4f39c2083["postMessage()"]
  4e913cf7_415c_1b60_2693_9f1e87d4d1a6 -->|calls| b9e76cd2_712c_d143_3531_87d4f39c2083
  style 4e913cf7_415c_1b60_2693_9f1e87d4d1a6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/contentScripts/installHook.js lines 17–37

function messageListener(event: UnknownMessageEvent) {
  if (event.source !== window) {
    return;
  }

  if (event.data.source === 'react-devtools-settings-injector') {
    const payload = event.data.payload;
    // In case handshake message was sent prior to hookSettingsInjector execution
    // We can't guarantee order
    if (payload.handshake) {
      postMessage({
        source: 'react-devtools-hook-installer',
        payload: {handshake: true},
      });
    } else if (payload.hookSettings) {
      window.removeEventListener('message', messageListener);
      resolveHookSettingsInjection(payload.hookSettings);
      resolveComponentFiltersInjection(payload.componentFilters);
    }
  }
}