react Architecture Docs
Home / File/ formatting.js — react Source File

formatting.js — react Source File

Architecture documentation for formatting.js, a javascript file in the react codebase. 2 imports, 6 dependents.

File javascript BabelCompiler Validation 2 imports 6 dependents 3 functions

Entity Profile

Dependency Diagram

graph LR
  f4cf9100_74bc_5445_ffb5_84c37b555dd3["formatting.js"]
  20cc2065_4b5b_fd6b_be12_28f36b0ff4cf["types.js"]
  f4cf9100_74bc_5445_ffb5_84c37b555dd3 --> 20cc2065_4b5b_fd6b_be12_28f36b0ff4cf
  65e567e3_019e_417b_4fbd_5664e20f8b65["pretty-ms"]
  f4cf9100_74bc_5445_ffb5_84c37b555dd3 --> 65e567e3_019e_417b_4fbd_5664e20f8b65
  57dc23c0_c74d_e09e_ad1f_116cb590a38c["EventTooltip.js"]
  57dc23c0_c74d_e09e_ad1f_116cb590a38c --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f["ComponentMeasuresView.js"]
  264bd2ad_e2e5_86fa_8a9c_741f2a953c2f --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73["NativeEventsView.js"]
  259c9bd5_8e3e_fcc5_0448_afc1cd9d1e73 --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  13604060_cb94_5e01_9368_0ead23d3891e["NetworkMeasuresView.js"]
  13604060_cb94_5e01_9368_0ead23d3891e --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  7a7af6eb_0683_8d73_95cc_81cc7b37dc33["ReactMeasuresView.js"]
  7a7af6eb_0683_8d73_95cc_81cc7b37dc33 --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac["SuspenseEventsView.js"]
  8ef7c873_9e8e_ccdf_ed63_88c7224b1bac --> f4cf9100_74bc_5445_ffb5_84c37b555dd3
  style f4cf9100_74bc_5445_ffb5_84c37b555dd3 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 {SchedulingEvent} from '../types';

import prettyMilliseconds from 'pretty-ms';

export function formatTimestamp(ms: number): string {
  return (
    ms.toLocaleString(undefined, {
      minimumFractionDigits: 1,
      maximumFractionDigits: 1,
    }) + 'ms'
  );
}

export function formatDuration(ms: number): string {
  return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});
}

export function trimString(string: string, length: number): string {
  if (string.length > length) {
    return `${string.slice(0, length - 1)}…`;
  }
  return string;
}

export function getSchedulingEventLabel(event: SchedulingEvent): string | null {
  switch (event.type) {
    case 'schedule-render':
      return 'render scheduled';
    case 'schedule-state-update':
      return 'state update scheduled';
    case 'schedule-force-update':
      return 'force update scheduled';
    default:
      return null;
  }
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does formatting.js do?
formatting.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in formatting.js?
formatting.js defines 3 function(s): formatDuration, formatTimestamp, trimString.
What does formatting.js depend on?
formatting.js imports 2 module(s): pretty-ms, types.js.
What files import formatting.js?
formatting.js is imported by 6 file(s): ComponentMeasuresView.js, EventTooltip.js, NativeEventsView.js, NetworkMeasuresView.js, ReactMeasuresView.js, SuspenseEventsView.js.
Where is formatting.js in the architecture?
formatting.js is located at packages/react-devtools-timeline/src/utils/formatting.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-timeline/src/utils).

Analyze Your Own Codebase

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

Try Supermodel Free