processScreenshot() — react Function Reference

Architecture documentation for the processScreenshot() function in preprocessData.js from the react codebase.

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ processScreenshot() — react Function Reference

Dependency Diagram

graph TD
  35f4151a_c74e_04cd_4b5c_7a2eba78ddcf["processScreenshot()"]
  a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a["preprocessData.js"]
  35f4151a_c74e_04cd_4b5c_7a2eba78ddcf -->|defined in| a3f7147d_da0b_56dc_ffc9_a9e2bbc4526a
  7e379096_4ef1_e90c_7e2b_b822b6321992["processTimelineEvent()"]
  7e379096_4ef1_e90c_7e2b_b822b6321992 -->|calls| 35f4151a_c74e_04cd_4b5c_7a2eba78ddcf
  style 35f4151a_c74e_04cd_4b5c_7a2eba78ddcf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/import-worker/preprocessData.js lines 346–385

function processScreenshot(
  event: TimelineEvent,
  timestamp: Milliseconds,
  profilerData: TimelineData,
  state: ProcessorState,
) {
  const encodedSnapshot = event.args.snapshot; // Base 64 encoded

  const snapshot: Snapshot = {
    height: 0,
    image: null,
    imageSource: `data:image/png;base64,${encodedSnapshot}`,
    timestamp,
    width: 0,
  };

  // Delay processing until we've extracted snapshot dimensions.
  let resolveFn = ((null: any): Function);
  state.asyncProcessingPromises.push(
    new Promise(resolve => {
      resolveFn = resolve;
    }),
  );

  // Parse the Base64 image data to determine native size.
  // This will be used later to scale for display within the thumbnail strip.
  fetch(snapshot.imageSource)
    .then(response => response.blob())
    .then(blob => {
      // $FlowFixMe[cannot-resolve-name] createImageBitmap
      createImageBitmap(blob).then(bitmap => {
        snapshot.height = bitmap.height;
        snapshot.width = bitmap.width;

        resolveFn();
      });
    });

  profilerData.snapshots.push(snapshot);
}