Home / File/ timelineCache.js — react Source File

timelineCache.js — react Source File

Architecture documentation for timelineCache.js, a javascript file in the react codebase. 4 imports, 1 dependents.

File javascript BabelCompiler 4 imports 1 dependents

Entity Profile

Dependency Diagram

graph LR
  a381d443_cec6_18eb_759f_5d0878906293["timelineCache.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  a381d443_cec6_18eb_759f_5d0878906293 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  a9fa5571_b040_365c_40f4_cd5d0a8cdc2f["index.js"]
  a381d443_cec6_18eb_759f_5d0878906293 --> a9fa5571_b040_365c_40f4_cd5d0a8cdc2f
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  a381d443_cec6_18eb_759f_5d0878906293 --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  a381d443_cec6_18eb_759f_5d0878906293 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  7fd04d1f_8e14_be78_275b_49d4237a927b["Timeline.js"]
  7fd04d1f_8e14_be78_275b_49d4237a927b --> a381d443_cec6_18eb_759f_5d0878906293
  style a381d443_cec6_18eb_759f_5d0878906293 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {
  Thenable,
  FulfilledThenable,
  RejectedThenable,
} from 'shared/ReactTypes';
import type {TimelineData} from './types';

import * as React from 'react';

import {importFile as importFileWorker} from './import-worker';

// This is intentionally a module-level Map, rather than a React-managed one.
// Otherwise, refreshing the inspected element cache would also clear this cache.
// Profiler file contents are static anyway.
const fileNameToProfilerDataMap: Map<
  string,
  Thenable<TimelineData>,
> = new Map();

function readRecord<T>(record: Thenable<T>): T | Error {
  if (typeof React.use === 'function') {
    try {
      // eslint-disable-next-line react-hooks-published/rules-of-hooks
      return React.use(record);
    } catch (x) {
      if (record.status === 'rejected') {
        return (record.reason: any);
      }
      throw x;
    }
  }
  if (record.status === 'fulfilled') {
    return record.value;
  } else if (record.status === 'rejected') {
    return (record.reason: any);
  } else {
    throw record;
  }
}

export function importFile(file: File): TimelineData | Error {
  const fileName = file.name;
  let record = fileNameToProfilerDataMap.get(fileName);

  if (!record) {
    const callbacks = new Set<(value: any) => mixed>();
    const rejectCallbacks = new Set<(reason: mixed) => mixed>();
    const thenable: Thenable<TimelineData> = {
      status: 'pending',
      value: null,
      reason: null,
      then(callback: (value: any) => mixed, reject: (error: mixed) => mixed) {
        callbacks.add(callback);
        rejectCallbacks.add(reject);
      },

      // Optional property used by Timeline:
      displayName: `Importing file "${fileName}"`,
    };

    const wake = () => {
      // This assumes they won't throw.
      callbacks.forEach(callback => callback((thenable: any).value));
      callbacks.clear();
      rejectCallbacks.clear();
    };
    const wakeRejections = () => {
      // This assumes they won't throw.
      rejectCallbacks.forEach(callback => callback((thenable: any).reason));
      rejectCallbacks.clear();
      callbacks.clear();
    };

    record = thenable;

    importFileWorker(file).then(data => {
      switch (data.status) {
        case 'SUCCESS':
          const fulfilledThenable: FulfilledThenable<TimelineData> =
            (thenable: any);
          fulfilledThenable.status = 'fulfilled';
          fulfilledThenable.value = data.processedData;
          wake();
          break;
        case 'INVALID_PROFILE_ERROR':
        case 'UNEXPECTED_ERROR':
          const rejectedThenable: RejectedThenable<TimelineData> =
            (thenable: any);
          rejectedThenable.status = 'rejected';
          rejectedThenable.reason = data.error;
          wakeRejections();
          break;
      }
    });

    fileNameToProfilerDataMap.set(fileName, record);
  }

  const response = readRecord(record);
  return response;
}

Domain

Dependencies

Frequently Asked Questions

What does timelineCache.js do?
timelineCache.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does timelineCache.js depend on?
timelineCache.js imports 4 module(s): ReactTypes, index.js, react, types.js.
What files import timelineCache.js?
timelineCache.js is imported by 1 file(s): Timeline.js.
Where is timelineCache.js in the architecture?
timelineCache.js is located at packages/react-devtools-timeline/src/timelineCache.js (domain: BabelCompiler, directory: packages/react-devtools-timeline/src).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free