Viewing github.com/facebook/react/packages/react-devtools-shared/src/utils.js

```
/**
```

 * 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 LRU from 'lru-cache';
```
```
import {
```
```
  isElement,
```
```
  typeOf,
```
```
  ContextConsumer,
```
```
  ContextProvider,
```
```
  ForwardRef,
```
```
  Fragment,
```
```
  Lazy,
```
```
  Memo,
```
```
  Portal,
```
```
  Profiler,
```
```
  StrictMode,
```
```
  Suspense,
```
```
} from 'react-is';
```
```
import {
```

  REACT_SUSPENSE_LIST_TYPE as SuspenseList,

  REACT_TRACING_MARKER_TYPE as TracingMarker,

```
} from 'shared/ReactSymbols';
```
```
import {
```
```
  TREE_OPERATION_ADD,
```
```
  TREE_OPERATION_REMOVE,
```
```
  TREE_OPERATION_REMOVE_ROOT,
```
```
  TREE_OPERATION_REORDER_CHILDREN,
```
```
  TREE_OPERATION_SET_SUBTREE_MODE,
```

  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,

  TREE_OPERATION_UPDATE_TREE_BASE_DURATION,

  LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,

```
  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
```

  LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,

  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,

  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,

  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,

```
} from './constants';
```
```
import {
```
```
  ComponentFilterElementType,
```
```
  ElementTypeHostComponent,
```
```
} from './frontend/types';
```
```
import {
```
```
  ElementTypeRoot,
```
```
  ElementTypeClass,
```
```
  ElementTypeForwardRef,
```
```
  ElementTypeFunction,
```
```
  ElementTypeMemo,
```

} from 'react-devtools-shared/src/frontend/types';

import {localStorageGetItem, localStorageSetItem} from './storage';

```
import {meta} from './hydration';
```
```
import isArray from './isArray';
```
```
import type {
```
```
  ComponentFilter,
```
```
  ElementType,
```
```
  BrowserTheme,
```
```
} from './frontend/types';
```

import type {LRUCache} from 'react-devtools-shared/src/frontend/types';

```
// $FlowFixMe[method-unbinding]
```

const hasOwnProperty = Object.prototype.hasOwnProperty;

const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();

// On large trees, encoding takes significant time.

// Try to reuse the already encoded strings.

const encodedStringCache: LRUCache<string, Array<number>> = new LRU({

```
  max: 1000,
```
```
});
```
```
export function alphaSortKeys(
```
```
  a: string | number | symbol,
```
```
  b: string | number | symbol,
```
```
): number {
```
```
  if (a.toString() > b.toString()) {
```
```
    return 1;
```

  } else if (b.toString() > a.toString()) {

```
    return -1;
```
```
  } else {
```
```
    return 0;
```
```
  }
```
```
}
```
```
export function getAllEnumerableKeys(
```
```
  obj: Object,
```
```
): Set<string | number | symbol> {
```

  const keys = new Set<string | number | symbol>();

```
  let current = obj;
```
```
  while (current != null) {
```
```
    const currentKeys = [
```
```
      ...Object.keys(current),
```

      ...Object.getOwnPropertySymbols(current),

```
    ];
```

    const descriptors = Object.getOwnPropertyDescriptors(current);

```
    currentKeys.forEach(key => {
```

      // $FlowFixMe[incompatible-type]: key can be a Symbol https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

      if (descriptors[key].enumerable) {

```
        keys.add(key);
```
```
      }
```
```
    });
```

    current = Object.getPrototypeOf(current);

```
  }
```
```
  return keys;
```
```
}
```

// Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37

```
export function getWrappedDisplayName(
```
```
  outerType: mixed,
```
```
  innerType: any,
```
```
  wrapperName: string,
```
```
  fallbackName?: string,
```
```
): string {
```

  const displayName = (outerType: any).displayName;

```
  return (
```

    displayName || `${wrapperName}(${getDisplayName(innerType, fallbackName)})`

```
  );
```
```
}
```
```
export function getDisplayName(
```
```
  type: Function,
```
```
  fallbackName: string = 'Anonymous',
```
```
): string {
```

  const nameFromCache = cachedDisplayNames.get(type);

```
  if (nameFromCache != null) {
```
```
    return nameFromCache;
```
```
  }
```
```
  let displayName = fallbackName;
```

  // The displayName property is not guaranteed to be a string.

  // It's only safe to use for our purposes if it's a string.

  // github.com/facebook/react-devtools/issues/803

  if (typeof type.displayName === 'string') {

```
    displayName = type.displayName;
```

  } else if (typeof type.name === 'string' && type.name !== '') {

```
    displayName = type.name;
```
```
  }
```

  cachedDisplayNames.set(type, displayName);

```
  return displayName;
```
```
}
```
```
let uidCounter: number = 0;
```
```
export function getUID(): number {
```
```
  return ++uidCounter;
```
```
}
```

export function utfDecodeString(array: Array<number>): string {

  // Avoid spreading the array (e.g. String.fromCodePoint(...array))

  // Functions arguments are first placed on the stack before the function is called

  // which throws a RangeError for large arrays.

  // See github.com/facebook/react/issues/22293

```
  let string = '';
```

  for (let i = 0; i < array.length; i++) {

```
    const char = array[i];
```

    string += String.fromCodePoint(char);

```
  }
```
```
  return string;
```
```
}
```
```
function surrogatePairToCodePoint(
```
```
  charCode1: number,
```
```
  charCode2: number,
```
```
): number {
```

  return ((charCode1 & 0x3ff) << 10) + (charCode2 & 0x3ff) + 0x10000;

```
}
```

// Credit for this encoding approach goes to Tim Down:

// https://stackoverflow.com/questions/4877326/how-can-i-tell-if-a-string-contains-multibyte-characters-in-javascript

export function utfEncodeString(string: string): Array<number> {

  const cached = encodedStringCache.get(string);

```
  if (cached !== undefined) {
```
```
    return cached;
```
```
  }
```
```
  const encoded = [];
```
```
  let i = 0;
```
```
  let charCode;
```
```
  while (i < string.length) {
```
```
    charCode = string.charCodeAt(i);
```

    // Handle multibyte unicode characters (like emoji).

    if ((charCode & 0xf800) === 0xd800) {

      encoded.push(surrogatePairToCodePoint(charCode, string.charCodeAt(++i)));

```
    } else {
```
```
      encoded.push(charCode);
```
```
    }
```
```
    ++i;
```
```
  }
```

  encodedStringCache.set(string, encoded);

```
  return encoded;
```
```
}
```

export function printOperationsArray(operations: Array<number>) {

  // The first two values are always rendererID and rootID

```
  const rendererID = operations[0];
```
```
  const rootID = operations[1];
```

  const logs = [`operations for renderer:${rendererID} and root:${rootID}`];

```
  let i = 2;
```
```
  // Reassemble the string table.
```

  const stringTable: Array<null | string> = [

    null, // ID = 0 corresponds to the null string.

```
  ];
```

  const stringTableSize = operations[i++];

  const stringTableEnd = i + stringTableSize;

```
  while (i < stringTableEnd) {
```

    const nextLength = operations[i++];

    const nextString = utfDecodeString(

      (operations.slice(i, i + nextLength): any),

```
    );
```
```
    stringTable.push(nextString);
```
```
    i += nextLength;
```
```
  }
```
```
  while (i < operations.length) {
```
```
    const operation = operations[i];
```
```
    switch (operation) {
```
```
      case TREE_OPERATION_ADD: {
```

        const id = ((operations[i + 1]: any): number);

        const type = ((operations[i + 2]: any): ElementType);

```
        i += 3;
```

        if (type === ElementTypeRoot) {

          logs.push(`Add new root node ${id}`);

          i++; // isStrictModeCompliant

```
          i++; // supportsProfiling
```
```
          i++; // supportsStrictMode
```
```
          i++; // hasOwnerMetadata
```
```
        } else {
```

          const parentID = ((operations[i]: any): number);

```
          i++;
```
```
          i++; // ownerID
```

          const displayNameStringID = operations[i];

          const displayName = stringTable[displayNameStringID];

```
          i++;
```
```
          i++; // key
```
```
          logs.push(
```

            `Add node ${id} (${displayName || 'null'}) as child of ${parentID}`,

```
          );
```
```
        }
```
```
        break;
```
```
      }
```
```
      case TREE_OPERATION_REMOVE: {
```

        const removeLength = ((operations[i + 1]: any): number);

```
        i += 2;
```

        for (let removeIndex = 0; removeIndex < removeLength; removeIndex++) {

          const id = ((operations[i]: any): number);

```
          i += 1;
```

          logs.push(`Remove node ${id}`);

```
        }
```
```
        break;
```
```
      }
```

      case TREE_OPERATION_REMOVE_ROOT: {

```
        i += 1;
```

        logs.push(`Remove root ${rootID}`);

```
        break;
```
```
      }
```

      case TREE_OPERATION_SET_SUBTREE_MODE: {

```
        const id = operations[i + 1];
```

        const mode = operations[i + 1];

```
        i += 3;
```

        logs.push(`Mode ${mode} set for subtree with root ${id}`);

```
        break;
```
```
      }
```

      case TREE_OPERATION_REORDER_CHILDREN: {

        const id = ((operations[i + 1]: any): number);

        const numChildren = ((operations[i + 2]: any): number);

```
        i += 3;
```

        const children = operations.slice(i, i + numChildren);

```
        i += numChildren;
```

        logs.push(`Re-order node ${id} children ${children.join(',')}`);

```
        break;
```
```
      }
```

      case TREE_OPERATION_UPDATE_TREE_BASE_DURATION:

        // Base duration updates are only sent while profiling is in progress.

        // We can ignore them at this point.

        // The profiler UI uses them lazily in order to generate the tree.

```
        i += 3;
```
```
        break;
```

      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:

```
        const id = operations[i + 1];
```

        const numErrors = operations[i + 2];

        const numWarnings = operations[i + 3];

```
        i += 4;
```
```
        logs.push(
```

          `Node ${id} has ${numErrors} errors and ${numWarnings} warnings`,

```
        );
```
```
        break;
```
```
      default:
```

        throw Error(`Unsupported Bridge operation "${operation}"`);

```
    }
```
```
  }
```
```
  console.log(logs.join('\n  '));
```
```
}
```

export function getDefaultComponentFilters(): Array<ComponentFilter> {

```
  return [
```
```
    {
```

      type: ComponentFilterElementType,

```
      value: ElementTypeHostComponent,
```
```
      isEnabled: true,
```
```
    },
```
```
  ];
```
```
}
```

export function getSavedComponentFilters(): Array<ComponentFilter> {

```
  try {
```
```
    const raw = localStorageGetItem(
```

      LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,

```
    );
```
```
    if (raw != null) {
```
```
      return JSON.parse(raw);
```
```
    }
```
```
  } catch (error) {}
```
```
  return getDefaultComponentFilters();
```
```
}
```

export function setSavedComponentFilters(

  componentFilters: Array<ComponentFilter>,

```
): void {
```
```
  localStorageSetItem(
```

    LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,

```
    JSON.stringify(componentFilters),
```
```
  );
```
```
}
```

function parseBool(s: ?string): ?boolean {

```
  if (s === 'true') {
```
```
    return true;
```
```
  }
```
```
  if (s === 'false') {
```
```
    return false;
```
```
  }
```
```
}
```

export function castBool(v: any): ?boolean {

```
  if (v === true || v === false) {
```
```
    return v;
```
```
  }
```
```
}
```

export function castBrowserTheme(v: any): ?BrowserTheme {

  if (v === 'light' || v === 'dark' || v === 'auto') {

```
    return v;
```
```
  }
```
```
}
```

export function getAppendComponentStack(): boolean {

```
  const raw = localStorageGetItem(
```

    LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,

```
  );
```
```
  return parseBool(raw) ?? true;
```
```
}
```

export function getBreakOnConsoleErrors(): boolean {

  const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS);

```
  return parseBool(raw) ?? false;
```
```
}
```

export function getHideConsoleLogsInStrictMode(): boolean {

```
  const raw = localStorageGetItem(
```

    LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,

```
  );
```
```
  return parseBool(raw) ?? false;
```
```
}
```

export function getShowInlineWarningsAndErrors(): boolean {

```
  const raw = localStorageGetItem(
```

    LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,

```
  );
```
```
  return parseBool(raw) ?? true;
```
```
}
```

export function getDefaultOpenInEditorURL(): string {

  return typeof process.env.EDITOR_URL === 'string'

```
    ? process.env.EDITOR_URL
```
```
    : '';
```
```
}
```

export function getOpenInEditorURL(): string {

```
  try {
```

    const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);

```
    if (raw != null) {
```
```
      return JSON.parse(raw);
```
```
    }
```
```
  } catch (error) {}
```
```
  return getDefaultOpenInEditorURL();
```
```
}
```

export function separateDisplayNameAndHOCs(

```
  displayName: string | null,
```
```
  type: ElementType,
```

): [string | null, Array<string> | null] {

```
  if (displayName === null) {
```
```
    return [null, null];
```
```
  }
```
```
  let hocDisplayNames = null;
```
```
  switch (type) {
```
```
    case ElementTypeClass:
```
```
    case ElementTypeForwardRef:
```
```
    case ElementTypeFunction:
```
```
    case ElementTypeMemo:
```

      if (displayName.indexOf('(') >= 0) {

        const matches = displayName.match(/[^()]+/g);

```
        if (matches != null) {
```
```
          displayName = matches.pop();
```
```
          hocDisplayNames = matches;
```
```
        }
```
```
      }
```
```
      break;
```
```
    default:
```
```
      break;
```
```
  }
```

  return [displayName, hocDisplayNames];

```
}
```
```
// Pulled from react-compat
```

// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349

export function shallowDiffers(prev: Object, next: Object): boolean {

```
  for (const attribute in prev) {
```
```
    if (!(attribute in next)) {
```
```
      return true;
```
```
    }
```
```
  }
```
```
  for (const attribute in next) {
```

    if (prev[attribute] !== next[attribute]) {

```
      return true;
```
```
    }
```
```
  }
```
```
  return false;
```
```
}
```

export function getInObject(object: Object, path: Array<string | number>): any {

  return path.reduce((reduced: Object, attr: any): any => {

```
    if (reduced) {
```

      if (hasOwnProperty.call(reduced, attr)) {

```
        return reduced[attr];
```
```
      }
```

      if (typeof reduced[Symbol.iterator] === 'function') {

        // Convert iterable to array and return array[index]

```
        //
```
```
        // TRICKY
```

        // Don't use [...spread] syntax for this purpose.

        // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.

        // Other types (e.g. typed arrays, Sets) will not spread correctly.

        return Array.from(reduced)[attr];

```
      }
```
```
    }
```
```
    return null;
```
```
  }, object);
```
```
}
```
```
export function deletePathInObject(
```
```
  object: Object,
```
```
  path: Array<string | number>,
```
```
) {
```
```
  const length = path.length;
```
```
  const last = path[length - 1];
```
```
  if (object != null) {
```

    const parent = getInObject(object, path.slice(0, length - 1));

```
    if (parent) {
```
```
      if (isArray(parent)) {
```

        parent.splice(((last: any): number), 1);

```
      } else {
```
```
        delete parent[last];
```
```
      }
```
```
    }
```
```
  }
```
```
}
```
```
export function renamePathInObject(
```
```
  object: Object,
```
```
  oldPath: Array<string | number>,
```
```
  newPath: Array<string | number>,
```
```
) {
```
```
  const length = oldPath.length;
```
```
  if (object != null) {
```

    const parent = getInObject(object, oldPath.slice(0, length - 1));

```
    if (parent) {
```

      const lastOld = oldPath[length - 1];

      const lastNew = newPath[length - 1];

      parent[lastNew] = parent[lastOld];

```
      if (isArray(parent)) {
```

        parent.splice(((lastOld: any): number), 1);

```
      } else {
```
```
        delete parent[lastOld];
```
```
      }
```
```
    }
```
```
  }
```
```
}
```
```
export function setInObject(
```
```
  object: Object,
```
```
  path: Array<string | number>,
```
```
  value: any,
```
```
) {
```
```
  const length = path.length;
```
```
  const last = path[length - 1];
```
```
  if (object != null) {
```

    const parent = getInObject(object, path.slice(0, length - 1));

```
    if (parent) {
```
```
      parent[last] = value;
```
```
    }
```
```
  }
```
```
}
```
```
export type DataType =
```
```
  | 'array'
```
```
  | 'array_buffer'
```
```
  | 'bigint'
```
```
  | 'boolean'
```
```
  | 'class_instance'
```
```
  | 'data_view'
```
```
  | 'date'
```
```
  | 'function'
```
```
  | 'html_all_collection'
```
```
  | 'html_element'
```
```
  | 'infinity'
```
```
  | 'iterator'
```
```
  | 'opaque_iterator'
```
```
  | 'nan'
```
```
  | 'null'
```
```
  | 'number'
```
```
  | 'object'
```
```
  | 'react_element'
```
```
  | 'regexp'
```
```
  | 'string'
```
```
  | 'symbol'
```
```
  | 'typed_array'
```
```
  | 'undefined'
```
```
  | 'unknown';
```
```
/**
```

 * Get a enhanced/artificial type string based on the object instance

```
 */
```

export function getDataType(data: Object): DataType {

```
  if (data === null) {
```
```
    return 'null';
```
```
  } else if (data === undefined) {
```
```
    return 'undefined';
```
```
  }
```
```
  if (isElement(data)) {
```
```
    return 'react_element';
```
```
  }
```

  if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {

```
    return 'html_element';
```
```
  }
```
```
  const type = typeof data;
```
```
  switch (type) {
```
```
    case 'bigint':
```
```
      return 'bigint';
```
```
    case 'boolean':
```
```
      return 'boolean';
```
```
    case 'function':
```
```
      return 'function';
```
```
    case 'number':
```
```
      if (Number.isNaN(data)) {
```
```
        return 'nan';
```

      } else if (!Number.isFinite(data)) {

```
        return 'infinity';
```
```
      } else {
```
```
        return 'number';
```
```
      }
```
```
    case 'object':
```
```
      if (isArray(data)) {
```
```
        return 'array';
```

      } else if (ArrayBuffer.isView(data)) {

        return hasOwnProperty.call(data.constructor, 'BYTES_PER_ELEMENT')

```
          ? 'typed_array'
```
```
          : 'data_view';
```

      } else if (data.constructor && data.constructor.name === 'ArrayBuffer') {

        // HACK This ArrayBuffer check is gross; is there a better way?

        // We could try to create a new DataView with the value.

        // If it doesn't error, we know it's an ArrayBuffer,

        // but this seems kind of awkward and expensive.

```
        return 'array_buffer';
```

      } else if (typeof data[Symbol.iterator] === 'function') {

        const iterator = data[Symbol.iterator]();

```
        if (!iterator) {
```

          // Proxies might break assumptoins about iterators.

          // See github.com/facebook/react/issues/21654

```
        } else {
```

          return iterator === data ? 'opaque_iterator' : 'iterator';

```
        }
```

      } else if (data.constructor && data.constructor.name === 'RegExp') {

```
        return 'regexp';
```
```
      } else {
```

        // $FlowFixMe[method-unbinding]

        const toStringValue = Object.prototype.toString.call(data);

        if (toStringValue === '[object Date]') {

```
          return 'date';
```

        } else if (toStringValue === '[object HTMLAllCollection]') {

          return 'html_all_collection';

```
        }
```
```
      }
```
```
      if (!isPlainObject(data)) {
```
```
        return 'class_instance';
```
```
      }
```
```
      return 'object';
```
```
    case 'string':
```
```
      return 'string';
```
```
    case 'symbol':
```
```
      return 'symbol';
```
```
    case 'undefined':
```
```
      if (
```

        // $FlowFixMe[method-unbinding]

        Object.prototype.toString.call(data) === '[object HTMLAllCollection]'

```
      ) {
```
```
        return 'html_all_collection';
```
```
      }
```
```
      return 'undefined';
```
```
    default:
```
```
      return 'unknown';
```
```
  }
```
```
}
```

export function getDisplayNameForReactElement(

```
  element: React$Element<any>,
```
```
): string | null {
```
```
  const elementType = typeOf(element);
```
```
  switch (elementType) {
```
```
    case ContextConsumer:
```
```
      return 'ContextConsumer';
```
```
    case ContextProvider:
```
```
      return 'ContextProvider';
```
```
    case ForwardRef:
```
```
      return 'ForwardRef';
```
```
    case Fragment:
```
```
      return 'Fragment';
```
```
    case Lazy:
```
```
      return 'Lazy';
```
```
    case Memo:
```
```
      return 'Memo';
```
```
    case Portal:
```
```
      return 'Portal';
```
```
    case Profiler:
```
```
      return 'Profiler';
```
```
    case StrictMode:
```
```
      return 'StrictMode';
```
```
    case Suspense:
```
```
      return 'Suspense';
```
```
    case SuspenseList:
```
```
      return 'SuspenseList';
```
```
    case TracingMarker:
```
```
      return 'TracingMarker';
```
```
    default:
```
```
      const {type} = element;
```
```
      if (typeof type === 'string') {
```
```
        return type;
```

      } else if (typeof type === 'function') {

        return getDisplayName(type, 'Anonymous');

```
      } else if (type != null) {
```

        return 'NotImplementedInDevtools';

```
      } else {
```
```
        return 'Element';
```
```
      }
```
```
  }
```
```
}
```
```
const MAX_PREVIEW_STRING_LENGTH = 50;
```
```
function truncateForDisplay(
```
```
  string: string,
```

  length: number = MAX_PREVIEW_STRING_LENGTH,

```
) {
```
```
  if (string.length > length) {
```

    return string.slice(0, length) + '…';

```
  } else {
```
```
    return string;
```
```
  }
```
```
}
```

// Attempts to mimic Chrome's inline preview for values.

```
// For example, the following value...
```
```
//   {
```
```
//      foo: 123,
```
```
//      bar: "abc",
```
```
//      baz: [true, false],
```
```
//      qux: { ab: 1, cd: 2 }
```
```
//   };
```
```
//
```
```
// Would show a preview of...
```

//   {foo: 123, bar: "abc", baz: Array(2), qux: {…}}

```
//
```
```
// And the following value...
```
```
//   [
```
```
//     123,
```
```
//     "abc",
```
```
//     [true, false],
```
```
//     { foo: 123, bar: "abc" }
```
```
//   ];
```
```
//
```
```
// Would show a preview of...
```
```
//   [123, "abc", Array(2), {…}]
```
```
export function formatDataForPreview(
```
```
  data: any,
```
```
  showFormattedValue: boolean,
```
```
): string {
```

  if (data != null && hasOwnProperty.call(data, meta.type)) {

```
    return showFormattedValue
```
```
      ? data[meta.preview_long]
```
```
      : data[meta.preview_short];
```
```
  }
```
```
  const type = getDataType(data);
```
```
  switch (type) {
```
```
    case 'html_element':
```

      return `<${truncateForDisplay(data.tagName.toLowerCase())} />`;

```
    case 'function':
```
```
      return truncateForDisplay(
```

        `ƒ ${typeof data.name === 'function' ? '' : data.name}() {}`,

```
      );
```
```
    case 'string':
```
```
      return `"${data}"`;
```
```
    case 'bigint':
```

      return truncateForDisplay(data.toString() + 'n');

```
    case 'regexp':
```

      return truncateForDisplay(data.toString());

```
    case 'symbol':
```

      return truncateForDisplay(data.toString());

```
    case 'react_element':
```
```
      return `<${truncateForDisplay(
```

        getDisplayNameForReactElement(data) || 'Unknown',

```
      )} />`;
```
```
    case 'array_buffer':
```

      return `ArrayBuffer(${data.byteLength})`;

```
    case 'data_view':
```

      return `DataView(${data.buffer.byteLength})`;

```
    case 'array':
```
```
      if (showFormattedValue) {
```
```
        let formatted = '';
```

        for (let i = 0; i < data.length; i++) {

```
          if (i > 0) {
```
```
            formatted += ', ';
```
```
          }
```

          formatted += formatDataForPreview(data[i], false);

          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {

            // Prevent doing a lot of unnecessary iteration...

```
            break;
```
```
          }
```
```
        }
```

        return `[${truncateForDisplay(formatted)}]`;

```
      } else {
```

        const length = hasOwnProperty.call(data, meta.size)

```
          ? data[meta.size]
```
```
          : data.length;
```
```
        return `Array(${length})`;
```
```
      }
```
```
    case 'typed_array':
```

      const shortName = `${data.constructor.name}(${data.length})`;

```
      if (showFormattedValue) {
```
```
        let formatted = '';
```

        for (let i = 0; i < data.length; i++) {

```
          if (i > 0) {
```
```
            formatted += ', ';
```
```
          }
```
```
          formatted += data[i];
```

          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {

            // Prevent doing a lot of unnecessary iteration...

```
            break;
```
```
          }
```
```
        }
```

        return `${shortName} [${truncateForDisplay(formatted)}]`;

```
      } else {
```
```
        return shortName;
```
```
      }
```
```
    case 'iterator':
```

      const name = data.constructor.name;

```
      if (showFormattedValue) {
```
```
        // TRICKY
```

        // Don't use [...spread] syntax for this purpose.

        // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.

        // Other types (e.g. typed arrays, Sets) will not spread correctly.

        const array = Array.from(data);

```
        let formatted = '';
```

        for (let i = 0; i < array.length; i++) {

          const entryOrEntries = array[i];

```
          if (i > 0) {
```
```
            formatted += ', ';
```
```
          }
```
```
          // TRICKY
```

          // Browsers display Maps and Sets differently.

          // To mimic their behavior, detect if we've been given an entries tuple.

          //   Map(2) {"abc" => 123, "def" => 123}

```
          //   Set(2) {"abc", 123}
```

          if (isArray(entryOrEntries)) {

            const key = formatDataForPreview(entryOrEntries[0], true);

            const value = formatDataForPreview(entryOrEntries[1], false);

            formatted += `${key} => ${value}`;

```
          } else {
```

            formatted += formatDataForPreview(entryOrEntries, false);

```
          }
```

          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {

            // Prevent doing a lot of unnecessary iteration...

```
            break;
```
```
          }
```
```
        }
```

        return `${name}(${data.size}) {${truncateForDisplay(formatted)}}`;

```
      } else {
```

        return `${name}(${data.size})`;

```
      }
```
```
    case 'opaque_iterator': {
```
```
      return data[Symbol.toStringTag];
```
```
    }
```
```
    case 'date':
```
```
      return data.toString();
```
```
    case 'class_instance':
```
```
      return data.constructor.name;
```
```
    case 'object':
```
```
      if (showFormattedValue) {
```

        const keys = Array.from(getAllEnumerableKeys(data)).sort(alphaSortKeys);

```
        let formatted = '';
```

        for (let i = 0; i < keys.length; i++) {

```
          const key = keys[i];
```
```
          if (i > 0) {
```
```
            formatted += ', ';
```
```
          }
```

          formatted += `${key.toString()}: ${formatDataForPreview(

```
            data[key],
```
```
            false,
```
```
          )}`;
```

          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {

            // Prevent doing a lot of unnecessary iteration...

```
            break;
```
```
          }
```
```
        }
```

        return `{${truncateForDisplay(formatted)}}`;

```
      } else {
```
```
        return '{…}';
```
```
      }
```
```
    case 'boolean':
```
```
    case 'number':
```
```
    case 'infinity':
```
```
    case 'nan':
```
```
    case 'null':
```
```
    case 'undefined':
```
```
      return data;
```
```
    default:
```
```
      try {
```

        return truncateForDisplay(String(data));

```
      } catch (error) {
```
```
        return 'unserializable';
```
```
      }
```
```
  }
```
```
}
```

// Basically checking that the object only has Object in its prototype chain

export const isPlainObject = (object: Object): boolean => {

  const objectPrototype = Object.getPrototypeOf(object);

```
  if (!objectPrototype) return true;
```

  const objectParentPrototype = Object.getPrototypeOf(objectPrototype);

```
  return !objectParentPrototype;
```
```
};
```