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

utils.js — react Source File

Architecture documentation for utils.js, a javascript file in the react codebase. 5 imports, 10 dependents.

File javascript BabelCompiler Validation 5 imports 10 dependents 8 functions

Entity Profile

Dependency Diagram

graph LR
  d7b27d30_728f_ba37_ed97_d371fbd3de62["utils.js"]
  1c475223_c7f1_4358_0008_92ae679f42e4["hydration.js"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62 --> 1c475223_c7f1_4358_0008_92ae679f42e4
  0de29888_ca49_eb3c_33f7_ab4fff46de0b["utils.js"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62 --> 0de29888_ca49_eb3c_33f7_ab4fff46de0b
  5d6f7523_9188_a8e1_13fa_afee177bd98c["escape-string-regexp"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62 --> 5d6f7523_9188_a8e1_13fa_afee177bd98c
  7a7a2c85_2337_a4ad_6883_71d2c6b4b916["isArray"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62 --> 7a7a2c85_2337_a4ad_6883_71d2c6b4b916
  741f125f_8d71_2134_c016_a18fb8f60d66["ReactDebugHooks"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62 --> 741f125f_8d71_2134_c016_a18fb8f60d66
  9e753c35_ccc6_2061_a942_6e9b10c9177c["IndexableDisplayName.js"]
  9e753c35_ccc6_2061_a942_6e9b10c9177c --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  0b54b2a8_1c5a_d85b_7742_10a526b0dedd["InspectedElementContextTree.js"]
  0b54b2a8_1c5a_d85b_7742_10a526b0dedd --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  816abfef_4d5d_bc7e_fc00_1acadf628d28["InspectedElementPropsTree.js"]
  816abfef_4d5d_bc7e_fc00_1acadf628d28 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2["InspectedElementStateTree.js"]
  e495e7a2_ca5d_8be7_7ae7_0c5ccb871bc2 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  72d570aa_3875_3688_0200_4617e04d04ed["InspectedElementSuspendedBy.js"]
  72d570aa_3875_3688_0200_4617e04d04ed --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  276bc34e_3008_101e_3cd7_cc895fcd3848["KeyValue.js"]
  276bc34e_3008_101e_3cd7_cc895fcd3848 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  a7173e0c_ba07_009a_1ada_f864062596b5["StyleEditor.js"]
  a7173e0c_ba07_009a_1ada_f864062596b5 --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  style d7b27d30_728f_ba37_ed97_d371fbd3de62 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 escapeStringRegExp from 'escape-string-regexp';
import {meta} from '../../hydration';
import {formatDataForPreview} from '../../utils';
import isArray from 'react-devtools-shared/src/isArray';

import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';

// $FlowFixMe[method-unbinding]
const hasOwnProperty = Object.prototype.hasOwnProperty;

export function alphaSortEntries(
  entryA: [string, mixed],
  entryB: [string, mixed],
): number {
  const a = entryA[0];
  const b = entryB[0];
  if (String(+a) === a) {
    if (String(+b) !== b) {
      return -1;
    }
    return +a < +b ? -1 : 1;
  }
  return a < b ? -1 : 1;
}

export function createRegExp(string: string): RegExp {
  // Allow /regex/ syntax with optional last /
  if (string[0] === '/') {
    // Cut off first slash
    string = string.slice(1);
    // Cut off last slash, but only if it's there
    if (string[string.length - 1] === '/') {
      string = string.slice(0, string.length - 1);
    }
    try {
      return new RegExp(string, 'i');
    } catch (err) {
      // Bad regex. Make it not match anything.
      // TODO: maybe warn in console?
      return new RegExp('.^');
    }
  }

  function isLetter(char: string) {
    return char.toLowerCase() !== char.toUpperCase();
  }

  function matchAnyCase(char: string) {
    if (!isLetter(char)) {
      // Don't mess with special characters like [.
      return char;
// ... (198 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does utils.js do?
utils.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 utils.js?
utils.js defines 8 function(s): alphaSortEntries, createRegExp, downloadFile, pluralize, sanitize, serializeDataForCopy, serializeHooksForCopy, truncateText.
What does utils.js depend on?
utils.js imports 5 module(s): ReactDebugHooks, escape-string-regexp, hydration.js, isArray, utils.js.
What files import utils.js?
utils.js is imported by 10 file(s): IndexableDisplayName.js, InspectedElementContextTree.js, InspectedElementHooksTree.js, InspectedElementPropsTree.js, InspectedElementStateTree.js, InspectedElementSuspendedBy.js, KeyValue.js, ProfilingImportExportButtons.js, and 2 more.
Where is utils.js in the architecture?
utils.js is located at packages/react-devtools-shared/src/devtools/views/utils.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views).

Analyze Your Own Codebase

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

Try Supermodel Free