 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
import type {WorkTagMap} from '../../types';

import {getFiberFlags} from './DevToolsFiberInspection';
import is from 'shared/objectIs';

export function getContextChanged(prevFiber: Fiber, nextFiber: Fiber): boolean {
  let prevContext =
    prevFiber.dependen

pport this key (e.v. 18+)
    // For older versions, there's no good way to read the current context value after render has completed.
    // This is because React maintains a stack of context values during render,
    // but by the time DevTools is called

cies && prevFiber.dependencies.firstContext;
  let nextContext =
    nextFiber.dependencies && nextFiber.dependencies.firstContext;

  while (prevContext && nextContext) {
    // Note this only works for versions of React that su


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
import type {
  ReactComponentInfo,
  ReactAsyncInfo,
  ReactIOInfo,
  ReactFunctionLocation,
} from 'shared/ReactTypes';
import type {Rect} from '../../types';

// Kinds
export const FIBER_INSTANCE = 0;
export const VIRTUAL_INSTANCE = 1;
export const FILTERED_FIBER_INSTANCE = 2;

// This type represents a stateful instance of a Client Comp

lsInstance,
  nextSibling: null | DevToolsInstance,
  source: null | string | Error | ReactFunctionLocation, // source location of this component function, or owned child stack
  logCount: number, // total number of errors/warnings last seen
  treeBaseDura

onent i.e. a Fiber pair.
// These instances also let us track stateful DevTools meta data like id and warnings.
export type FiberInstance = {
  kind: 0,
  id: number,
  parent: null | DevToolsInstance,
  firstChild: null | DevToo


*/

import {compareVersions} from 'compare-versions';
import {dehydrate} from 'react-devtools-shared/src/hydration';
import isArray from 'shared/isArray';

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

export {default as formatWithStyles} from './formatWithStyles';
export {default as formatConsoleArguments} from './formatConsoleArguments';

// TODO: update this to the first React version that has a corresponding DevTools backend
const FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER = '9

ge(
  data: Object | null,
  isPathAllowed: (path: Array<string | number>) => boolean,
  path: Array<string | number> = [],
): DehydratedData | null {
  if (data !== null) {
    const cleanedPaths: Array<Array<string | number>> = [];
    const unserializab

99.9.9';
export function hasAssignedBackend(version?: string): boolean {
  if (version == null || version === '') {
    return false;
  }
  return gte(version, FIRST_DEVTOOLS_BACKEND_LOCKSTEP_VER);
}

export function cleanForBrid


import type {ReactComponentInfo} from 'shared/ReactTypes';

import type {DevToolsHook, ReactRenderer, RendererInterface} from '../types';

import {getOwnerStackByComponentInfoInDev} from './DevToolsComponentInfoStack';

import {formatOwnerStack} from '../shared/DevToolsOwnerStack';

import {componentInfoToComponentLogsMap} from '../shared/DevToolsServerComponentLogs';

import {formatConsoleArgumentsToSingleString} from 'react-devtools-shared/src/backend/utils';

function supportsConsoleTasks(componentInfo:

 detect if this task was created while the DevTools was open or not.
  return !!componentInfo.debugTask;
}

export function attach(
  hook: DevToolsHook,
  rendererID: number,
  renderer: ReactRenderer,
  global: Object,
): RendererInterface {
  const {get

ReactComponentInfo): boolean {
  // If this ReactComponentInfo supports native console.createTask then we are already running
  // inside a native async stack trace if it's active - meaning the DevTools is open.
  // Ideally we'd


ight (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 * as React from 'react';
import {useCallback} from 'react';

import styles from './Toggle.css';
import Tooltip from './Components/reach-ui/tooltip';

type Props = {
  children: React$Node,
  className?: string,
  isChecked: boolean,
  isDisabled?: boolean,
  onChange: (isChecked: boolean) => void,
  testName?: ?

ed) {
    defaultClassName = styles.ToggleDisabled;
  } else if (isChecked) {
    defaultClassName = styles.ToggleOn;
  } else {
    defaultClassName = styles.ToggleOff;
  }

  const handleClick = useCallback(
    () => onChange(!isChecked),
    [isChecked

string,
  title?: string,
  ...
};

export default function Toggle({
  children,
  className = '',
  isDisabled = false,
  isChecked,
  onChange,
  testName,
  title,
}: Props): React.Node {
  let defaultClassName;
  if (isDisabl


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useContext, useEffect} from 'react';
import {ModalDialogContext} from './ModalDialog';
import {StoreContext} from './context';
import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
import Button from './Button';
import ButtonIcon from './ButtonIcon';
import {copy} from 'clipboard-js';
import styles from './UnsupportedBridgeProtocolDialog.cs

;
const INSTRUCTIONS_FB_URL =
  'https://fb.me/devtools-unsupported-bridge-protocol';
const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';

export default function UnsupportedBridgeProtocolDialog(_: {}): null {
  const {dialogs, dispatch} = useContex

s';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';

const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION


devtools-shared/src/storage';
import {StoreContext, BridgeContext} from './context';
import {sanitizeForParse, smartParse, smartStringify} from '../utils';

type ACTION_RESET = {
  type: 'RESET',
  externalValue: any,
};
type ACTION_UPDATE = {
  type: 'UPDATE',
  editableValue: any,
  externalValue: any,
};

type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE;
type UseEditableValueDispatch = (action: UseEditableValueAction) => void;
type UseEditableValueState = {
  editableValue: any,
  externalValue

     return {
        ...state,
        editableValue: smartStringify(action.externalValue),
        externalValue: action.externalValue,
        hasPendingChanges: false,
        isValid: true,
        parsedValue: action.externalValue,
      };
    case

: any,
  hasPendingChanges: boolean,
  isValid: boolean,
  parsedValue: any,
};

function useEditableValueReducer(
  state: UseEditableValueState,
  action: UseEditableValueAction,
) {
  switch (action.type) {
    case 'RESET':


iates.
 *
 * 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 {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';

import {useCallback, useContext, useSyncExternalStore} from 'react';

import ViewElementSourceContext from './Components/ViewElementSourceContext';

import {getAlwaysOpenInEditor} from '../../utils';
import useEditorURL from './useEditorURL';
import {LOCAL_STORAGE_ALWAYS_OPEN_IN_E

,
): [
  boolean, // isEnabled
  () => void, // Open Resource
] => {
  const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
    ViewElementSourceContext,
  );

  const editorURL = useEditorURL();

  const alwaysOpenInEditor = useSy

DITOR} from '../../constants';

import {checkConditions} from './Editor/utils';

const useOpenResource = (
  source: null | ReactFunctionLocation | ReactCallSite,
  symbolicatedSource: null | ReactFunctionLocation | ReactCallSite


 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 * as React from 'react';
import {startTransition, useContext} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
import {TreeDispatcherContext, TreeStateContext} from './TreeCon

eContext(StoreContext);

  const activity =
    activityID === null ? null : store.getElementByID(activityID);
  const name = activity ? activity.nameProp : null;

  const changeActivitySliceAction = useChangeActivitySliceAction();

  return (
    <div cla

text';
import styles from './ActivitySlice.css';

export default function ActivitySlice(): React.Node {
  const dispatch = useContext(TreeDispatcherContext);
  const {activityID} = useContext(TreeStateContext);
  const store = us


ight (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
 */

/************************************************************************
 * This file is forked between different DevTools implementations.
 * It should never be imported directly!
 * It should always be imported from "react-devtools-feature-flags".
 ********************************************************************

****/

export const enableActivitySlices: boolean = __DEV__;
export const enableLogger: boolean = false;
export const enableStyleXFeatures: boolean = false;
export const isInternalFacebookBuild: boolean = false;

/***************


iority,
    IdlePriority,
    NoPriority,
  } = ReactPriorityLevels;

  const {
    getLaneLabelMap,
    injectProfilingHooks,
    overrideHookState,
    overrideHookStateDeletePath,
    overrideHookStateRenamePath,
    overrideProps,
    overridePropsDeletePath,
    overridePropsRenamePath,
    scheduleRefresh,
    setErrorHandler,
    setSuspenseHandler,
    scheduleUpdate,
    scheduleRetry,
    getCurrentFiber,
  } = renderer;
  const supportsTogglingError =
    typeof setErrorHandler === 'function' &&

 if (typeof scheduleRefresh === 'function') {
    // When Fast Refresh updates a component, the frontend may need to purge cached information.
    // For example, ASTs cached for the component (for named hooks) may no longer be valid.
    // Send a signal

    typeof scheduleUpdate === 'function';
  const supportsTogglingSuspense =
    typeof setSuspenseHandler === 'function' &&
    typeof scheduleUpdate === 'function';
  const supportsPerformanceTracks = gte(version, '19.2.0');


import * as React from 'react';
import styles from './Icon.css';

export type IconType =
  | 'arrow'
  | 'bug'
  | 'code'
  | 'components'
  | 'copy'
  | 'error'
  | 'facebook'
  | 'flame-chart'
  | 'profiler'
  | 'ranked-chart'
  | 'timeline'
  | 'search'
  | 'settings'
  | 'store-as-global-variable'
  | 'strict-mode-non-compliant'
  | 'suspense'
  | 'warning';

type Props = {
  className?: string,
  title?: string,
  type: IconType,
  ...
};

export default function Icon({
  className = '',
  title = '',

    case 'code':
      pathData = PATH_CODE;
      break;
    case 'components':
      pathData = PATH_COMPONENTS;
      break;
    case 'copy':
      pathData = PATH_COPY;
      break;
    case 'error':
      pathData = PATH_ERROR;
      break;
    case '

  type,
  ...props
}: Props): React.Node {
  let pathData = null;
  let viewBox = '0 0 24 24';
  switch (type) {
    case 'arrow':
      pathData = PATH_ARROW;
      break;
    case 'bug':
      pathData = PATH_BUG;
      break;


(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 * as React from 'react';

import styles from './ReactLogo.css';

type Props = {
  className?: string,
};

export default function ReactLogo({className}: Props): React.Node {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.ReactLogo} ${className || ''}`}
      viewBox="-11.5 -10

2.05" fill="currentColor" />
      <g stroke="currentColor" strokeWidth="1" fill="none">
        <ellipse rx="11" ry="4.2" />
        <ellipse rx="11" ry="4.2" transform="rotate(60)" />
        <ellipse rx="11" ry="4.2" transform="rotate(120)" />
      </g


 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 {ReactContext} from 'shared/ReactTypes';
import {createContext} from 'react';
import Store from '../store';

import type {ViewAttributeSource} from 'react-devtools-shared/src/devtools/views/DevTools';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';

export const BridgeContext: ReactContext<Frontend

t.displayName = 'StoreContext';

export type ContextMenuContextType = {
  isEnabledForInspectedElement: boolean,
  viewAttributeSourceFunction: ViewAttributeSource | null,
};

export const ContextMenuContext: ReactContext<ContextMenuContextType> =
  create

Bridge> =
  createContext<FrontendBridge>(((null: any): FrontendBridge));
BridgeContext.displayName = 'BridgeContext';

export const StoreContext: ReactContext<Store> = createContext<Store>(
  ((null: any): Store),
);
StoreContex


import * as React from 'react';
import {Fragment, useEffect, useLayoutEffect, useReducer, useRef} from 'react';
import Tree from './Tree';
import {OwnersListContextController} from './OwnersListContext';
import portaledContent from '../portaledContent';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
import {
  localStorageGetItem,
  localStorageSetItem,
} from 'react-devtools-shared/src/storage';
import InspectedElementErrorBoundary fro

rt {NativeStyleContextController} from './NativeStyleEditor/context';

import styles from './Components.css';
import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

type Orientation = 'horizontal' | 'vertical';

type Re

m './InspectedElementErrorBoundary';
import InspectedElement from './InspectedElement';
import {ModalDialog} from '../ModalDialog';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
impo


ct-devtools-shared/src/utils';
import {gt, gte} from 'react-devtools-shared/src/backend/utils';
import {
  CONCURRENT_MODE_NUMBER,
  CONCURRENT_MODE_SYMBOL_STRING,
  DEPRECATED_ASYNC_MODE_SYMBOL_STRING,
  PROVIDER_NUMBER,
  PROVIDER_SYMBOL_STRING,
  CONTEXT_NUMBER,
  CONTEXT_SYMBOL_STRING,
  CONSUMER_SYMBOL_STRING,
  STRICT_MODE_NUMBER,
  STRICT_MODE_SYMBOL_STRING,
  PROFILER_NUMBER,
  PROFILER_SYMBOL_STRING,
  REACT_MEMO_CACHE_SENTINEL,
  SCOPE_NUMBER,
  SCOPE_SYMBOL_STRING,
  FORWARD_REF_NUMBER,
  FORWARD

xport type getTypeSymbolType = (type: any) => symbol | string | number;

export type ReactPriorityLevelsType = {
  ImmediatePriority: number,
  UserBlockingPriority: number,
  NormalPriority: number,
  LowPriority: number,
  IdlePriority: number,
  NoPrior

_REF_SYMBOL_STRING,
  MEMO_NUMBER,
  MEMO_SYMBOL_STRING,
  SERVER_CONTEXT_SYMBOL_STRING,
} from 'react-devtools-shared/src/backend/shared/ReactSymbols';

export type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
e


import Agent from 'react-devtools-shared/src/backend/agent';
import resolveBoxStyle from './resolveBoxStyle';
import isArray from 'react-devtools-shared/src/isArray';

import type {BackendBridge} from 'react-devtools-shared/src/bridge';
import type {RendererID} from '../types';
import type {StyleAndLayout} from './types';

export type ResolveNativeStyle = (stylesheetID: any) => ?Object;
export type SetupNativeStyleEditor = typeof setupNativeStyleEditor;

export default function setupNativeStyleEditor(
  bri

rerID: RendererID}) => {
      measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
    },
  );

  bridge.addListener(
    'NativeStyleEditor_renameAttribute',
    ({
      id,
      rendererID,
      oldName,
      newName,
      value,
    }:

dge: BackendBridge,
  agent: Agent,
  resolveNativeStyle: ResolveNativeStyle,
  validAttributes?: $ReadOnlyArray<string> | null,
) {
  bridge.addListener(
    'NativeStyleEditor_measure',
    ({id, rendererID}: {id: number, rende


 * 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 {useCallback, useSyncExternalStore} from 'react';

import {getOpenInEditorURL} from '../../utils';
import {
  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
} from '../../constants';

const useEditorURL = (): string => {
  const editorURL = useSyncExternalStore(
    useCall

n function unsubscribe() {
        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
        window.removeEventListener(
          LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
          callback,
        );
      };
    }, []),
    getOpe

back(function subscribe(callback) {
      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
      window.addEventListener(
        LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
        callback,
      );
      retur


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useContext, useEffect, useState} from 'react';
import {ModalDialogContext} from './ModalDialog';
import {StoreContext} from './context';
import {UNSUPPORTED_VERSION_URL} from '../constants';

import styles from './UnsupportedVersionDialog.css';

type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialo

not-shown');

  useEffect(() => {
    if (state === 'dialog-not-shown') {
      const showDialog = () => {
        setState('show-dialog');
        dispatch({
          canBeDismissed: true,
          id: 'UnsupportedVersionDialog',
          type: 'SHOW',

g-shown';

export default function UnsupportedVersionDialog(_: {}): null {
  const {dispatch} = useContext(ModalDialogContext);
  const store = useContext(StoreContext);
  const [state, setState] = useState<DAILOG_STATE>('dialog-


ource code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import styles from './Button.css';
import Tooltip from './Components/reach-ui/tooltip';

type Props = {
  children: React$Node,
  className?: string,
  testName?: ?string,
  title: React$Node,
  ...
};

export default function Button({
  children,
  className = '',
  testName,
  title,
  ...rest
}: Props): React.Node {
  let button = (
    //

<button
      className={`${styles.Button} ${className}`}
      data-testname={testName}
      {...rest}>
      <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
        {children}
      </span>
    </button>
  );

  if (title) {


import OwnersStack from './OwnersStack';
import ComponentSearchInput from './ComponentSearchInput';
import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
import TreeFocusedContext from './TreeFocusedContext';
import {useHighlightHostInstance, useSubscription} from '../hooks';
import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
import styles from './Tree.css';
import ButtonIcon from '../Butt

ty';
import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
import {useChangeOwnerAction} from './OwnersListContext';
import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
import ActivitySlice from './ActivitySlic

onIcon';
import Button from '../Button';
import {logEvent} from 'react-devtools-shared/src/Logger';
import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibili


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {copy} from 'clipboard-js';
import * as React from 'react';
import {ElementTypeHostComponent} from 'react-devtools-shared/src/frontend/types';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import KeyValue from './KeyValue';
import {alphaSortEntries, serializeDataForCopy} from '../utils';
import Store from '../../store';
impo

es';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type {Element} from 'react-devtools-shared/src/frontend/types';

type Props = {
  bridge: FrontendBridge,
  element: Element,
  inspectedElement: InspectedElement,
  store: S

rt styles from './InspectedElementSharedStyles.css';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {InspectedElement} from 'react-devtools-shared/src/frontend/typ


 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 * as React from 'react';
import KeyValue from './KeyValue';
import Store from '../../store';
import sharedStyles from './InspectedElementSharedStyles.css';
import styles from './InspectedElementStyleXPlugin.css';
import {enableStyleXFeatures} from 'react-devtools-feature-flags';

import type {InspectedElement} from 'react-de

Element,
  inspectedElement: InspectedElement,
  store: Store,
};

export default function InspectedElementStyleXPlugin({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  if (!enableStyleXFeatures) {
    return null;
  }

  const

vtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type {Element} from 'react-devtools-shared/src/frontend/types';

type Props = {
  bridge: FrontendBridge,
  element:


import * as React from 'react';
import {Fragment, useContext} from 'react';
import {BridgeContext, StoreContext} from '../context';
import InspectedElementBadges from './InspectedElementBadges';
import InspectedElementContextTree from './InspectedElementContextTree';
import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
import InspectedElementHooksTree from './InspectedElementHooksTree';
import InspectedElementPropsTree from './InspectedElementPropsTree';
import Inspec

from './NativeStyleEditor';
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
import InspectedElementSourcePanel from './InspectedElementSourcePanel';
import StackTraceView from './StackTraceView';
import OwnerView from './OwnerView';
impo

tedElementStateTree from './InspectedElementStateTree';
import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
import InspectedElementSuspendedBy from './InspectedElementSuspendedBy';
import NativeStyleEditor


ableValue from './EditableValue';
import NewArrayValue from './NewArrayValue';
import NewKeyValue from './NewKeyValue';
import LoadingAnimation from './LoadingAnimation';
import ExpandCollapseToggle from './ExpandCollapseToggle';
import {alphaSortEntries, getMetaValueLabel} from '../utils';
import {meta} from '../../../hydration';
import Store from '../../store';
import {parseHookPathForEdit} from './utils';
import styles from './KeyValue.css';
import Button from 'react-devtools-shared/src/devtools/views/Bu

PPORTED_AS_LINKS_IN_KEY_VALUE} from './constants';
import KeyValueContextMenuContainer from './KeyValueContextMenuContainer';
import {ContextMenuContext} from '../context';

import type {ContextMenuContextType} from '../context';
import type {InspectedElem

tton';
import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
import isArray from 'react-devtools-shared/src/isArray';
import {InspectedElementContext} from './InspectedElementContext';
import {PROTOCOLS_SU


ight (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 * as React from 'react';
import styles from './LoadingAnimation.css';

type Props = {
  className?: string,
};

export default function LoadingAnimation({className = ''}: Props): React.Node {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.Icon} ${className}`}
      width=

   dur="1s"
          values="0;1;0"
          repeatCount="indefinite"
          begin="0.1"
        />
      </circle>
      <circle fill="currentColor" stroke="none" cx="50" cy="50" r="10">
        <animate
          attributeName="opacity"
          du

"24"
      height="24"
      viewBox="0 0 100 100">
      <path d="M0 0h100v100H0z" fill="none" />
      <circle fill="currentColor" stroke="none" cx="20" cy="50" r="10">
        <animate
          attributeName="opacity"


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useState} from 'react';
import Store from '../../store';
import EditableName from './EditableName';
import EditableValue from './EditableValue';
import {parseHookPathForEdit} from './utils';
import styles from './NewKeyValue.css';

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

,
  store: Store,
  type: 'props' | 'state' | 'hooks' | 'context',
};

export default function NewKeyValue({
  bridge,
  depth,
  hidden,
  hookID,
  inspectedElement,
  path,
  store,
  type,
}: Props): React.Node {
  const [newPropKey, setNewPropKey] = u

type {FrontendBridge} from 'react-devtools-shared/src/bridge';

type Props = {
  bridge: FrontendBridge,
  depth: number,
  hidden: boolean,
  hookID?: ?number,
  inspectedElement: InspectedElement,
  path: Array<string | number>


 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 * as React from 'react';
import {useCallback, useContext} from 'react';
import {TreeDispatcherContext} from './TreeContext';
import Button from '../Button';
import ElementBadges from './ElementBadges';
import {useHighlightHostInstance} from '../hooks';
import {logEvent} from 'react-devtools-shared/src/Logger';

import styles

ault function OwnerView({
  displayName,
  environmentName,
  hocDisplayNames,
  compiledWithForget,
  id,
  isInStore,
}: OwnerViewProps): React.Node {
  const dispatch = useContext(TreeDispatcherContext);
  const {highlightHostInstance, clearHighlightHos

 from './OwnerView.css';

type OwnerViewProps = {
  displayName: string,
  hocDisplayNames: Array<string> | null,
  environmentName: string | null,
  compiledWithForget: boolean,
  id: number,
  isInStore: boolean,
};

export def


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {createContext, useCallback, useContext, useEffect} from 'react';
import {createResource} from '../../cache';
import {BridgeContext, StoreContext} from '../context';
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
import {backendToFrontendSerializedElementMapper} from 'react-devtools-shared/sr

he';

type Context = (id: number) => Array<SerializedElement> | null;

const OwnersListContext: ReactContext<Context> = createContext<Context>(
  ((null: any): Context),
);
OwnersListContext.displayName = 'OwnersListContext';

type ResolveFn = (ownersList:

c/utils';

import type {OwnersList} from 'react-devtools-shared/src/backend/types';
import type {
  Element,
  SerializedElement,
} from 'react-devtools-shared/src/frontend/types';
import type {Resource, Thenable} from '../../cac


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useState} from 'react';
import Store from '../../store';
import EditableName from './EditableName';
import {smartParse} from '../../utils';
import {parseHookPathForEdit} from './utils';
import styles from './NewArrayValue.css';

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

ring | number>,
  store: Store,
  type: 'props' | 'context' | 'hooks' | 'state',
};

export default function NewArrayValue({
  bridge,
  depth,
  hidden,
  hookID,
  index,
  inspectedElement,
  path,
  store,
  type,
}: Props): React.Node {
  const [key,

e {FrontendBridge} from 'react-devtools-shared/src/bridge';

type Props = {
  bridge: FrontendBridge,
  depth: number,
  hidden: boolean,
  hookID?: ?number,
  index: number,
  inspectedElement: InspectedElement,
  path: Array<st


import * as React from 'react';
import {useContext, useMemo} from 'react';
import {SettingsContext} from './SettingsContext';
import {StoreContext} from '../context';
import {CHANGE_LOG_URL} from 'react-devtools-shared/src/devtools/constants';
import {isInternalFacebookBuild} from 'react-devtools-feature-flags';

import styles from './SettingsShared.css';

import CodeEditorOptions from './CodeEditorOptions';
import CodeEditorByDefault from './CodeEditorByDefault';
import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR

>.<patch>-<sha>
  // e.g. "4.23.0-f0dd459e0"
  // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
  // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
  const versionAnchor = version.replace(/^(\d+)\.(\d+)

} from '../../../constants';
import {useLocalStorage} from '../hooks';

function getChangeLogUrl(version: ?string): string | null {
  if (!version) {
    return null;
  }

  // Version numbers are in the format of: <major>.<minor


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useCallback, useContext, useMemo, useRef} from 'react';
import {useSubscription} from '../hooks';
import {StoreContext} from '../context';
import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';

import styles from './SettingsShared.css';
import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

exp

Context(StoreContext);

  const recordChangeDescriptionsSubscription = useMemo(
    () => ({
      getCurrentValue: () => store.recordChangeDescriptions,
      subscribe: (callback: Function) => {
        store.addListener('recordChangeDescriptions', callb

ort default function ProfilerSettings(_: {}): React.Node {
  const {
    isCommitFilterEnabled,
    minCommitDuration,
    setIsCommitFilterEnabled,
    setMinCommitDuration,
  } = useContext(ProfilerContext);
  const store = use


import type {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {
  createContext,
  useContext,
  useEffect,
  useLayoutEffect,
  useMemo,
} from 'react';
import {
  LOCAL_STORAGE_BROWSER_THEME,
  LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
  LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
} from 'react-devtools-shared/src/constants';
import {
  COMFORTABLE_LINE_HEIGHT,
  COMPACT_LINE_HEIGHT,
} from 'react-devtools-shared/src/devtools/constants';
import {useLocalStorage} from '../hooks';
impo

;
export type Theme = 'auto' | 'light' | 'dark';

type Context = {
  displayDensity: DisplayDensity,
  setDisplayDensity(value: DisplayDensity): void,

  // Derived from display density.
  // Specified as a separate prop so it can trigger a re-render of Fi

rt {BridgeContext} from '../context';
import {logEvent} from 'react-devtools-shared/src/Logger';

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

export type DisplayDensity = 'comfortable' | 'compact'


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
import {SettingsModalContext} from './SettingsModalContext';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import TabBar from '../TabBar';
import {StoreContext} from '../context';
import {
  useLocalStorage,
  useModalDismissSignal,
  useSubscription,
} from '../hooks';
import

ingsModal.css';

import type Store from 'react-devtools-shared/src/devtools/store';

type TabID = 'general' | 'debugging' | 'components' | 'profiler';

export default function SettingsModal(): React.Node {
  const {isModalShowing, setIsModalShowing} = useC

 ComponentsSettings from './ComponentsSettings';
import DebuggingSettings from './DebuggingSettings';
import GeneralSettings from './GeneralSettings';
import ProfilerSettings from './ProfilerSettings';

import styles from './Sett


iates.
 *
 * 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 {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {
  createContext,
  useContext,
  useCallback,
  useState,
  startTransition,
} from 'react';

import {BridgeContext, StoreContext} from '../context';

import type {FrontendBridge} from '../../../bridge';
import type {DevToolsHookSettings} from '../../../backend/ty

ng>>,
  hookSettings: null | Promise<$ReadOnly<DevToolsHookSettings>>,
};

const SettingsModalContext: ReactContext<Context> = createContext<Context>(
  ((null: any): Context),
);
SettingsModalContext.displayName = 'SettingsModalContext';

function fetchEn

pes';
import type Store from '../../store';

export type Theme = 'auto' | 'light' | 'dark';

type Context = {
  isModalShowing: boolean,
  setIsModalShowing: (value: boolean) => void,
  environmentNames: null | Promise<Array<stri


 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 * as React from 'react';
import {useCallback, useContext, useMemo} from 'react';
import {SettingsModalContext} from './SettingsModalContext';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {useSubscription} from '../hooks';

export default function Sett

etIsModalShowing(true),
    [setIsModalShowing],
  );

  // Updating preferences while profiling is in progress could break things (e.g. filtering)
  // Explicitly disallow it for now.
  const isProfilingSubscription = useMemo(
    () => ({
      getCurren

ingsModalContextToggle(): React.Node {
  const {setIsModalShowing} = useContext(SettingsModalContext);
  const store = useContext(StoreContext);
  const {profilerStore} = store;

  const showFilterModal = useCallback(
    () => s


 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 * as React from 'react';

import styles from './ChartNode.css';
import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

type Props = {
  color: string,
  height: number,
  isDimmed?: boolean,
  label: string,
  onClick: (event: SyntheticMouseEvent) => mixed,
  onDoubleClick?: (event: Synthet

r,
};

const minWidthToDisplay = 35;

export default function ChartNode({
  color,
  height,
  isDimmed = false,
  label,
  onClick,
  onMouseEnter,
  onMouseLeave,
  onDoubleClick,
  textStyle,
  width,
  x,
  y,
}: Props): React.Node {
  return (
    <g

icMouseEvent) => mixed,
  onMouseEnter: (event: SyntheticMouseEvent) => mixed,
  onMouseLeave: (event: SyntheticMouseEvent) => mixed,
  placeLabelAboveNode?: boolean,
  textStyle?: Object,
  width: number,
  x: number,
  y: numbe


ight (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 * as React from 'react';
import {useContext} from 'react';
import {ProfilerContext} from './ProfilerContext';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';

export defau

{profilerStore} = store;

  const doesHaveInMemoryData = didRecordCommits;
  const doesHaveUserTimingData = file !== null;

  const clear = () => {
    if (doesHaveInMemoryData) {
      profilerStore.clear();
    }
    if (doesHaveUserTimingData) {
      s

lt function ClearProfilingDataButton(): React.Node {
  const store = useContext(StoreContext);
  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
  const {file, setFile} = useContext(TimelineContext);
  const


import * as React from 'react';
import {forwardRef, useCallback, useContext, useMemo, useState} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {ProfilerContext} from './ProfilerContext';
import NoCommitData from './NoCommitData';
import CommitFlamegraphListItem from './CommitFlamegraphListItem';
import HoveredFiberInfo from './HoveredFiberInfo';
import {scale} from './utils';
import {useHighlightHostInstance} from '../hooks';
import {St

import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
import type {CommitTree} from './types';

export type ItemData = {
  chartData: ChartData,
  onElementMouseEnter: (fiberData: TooltipFiberData) => void,
  onElementMouseLeave: () => void,

oreContext} from '../context';
import {SettingsContext} from '../Settings/SettingsContext';
import Tooltip from './Tooltip';

import styles from './CommitFlamegraph.css';

import type {TooltipFiberData} from './HoveredFiberInfo';


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, memo, useCallback, useContext} from 'react';
import {areEqual} from 'react-window';
import {barWidthThreshold} from './constants';
import {getGradientColor} from './utils';
import ChartNode from './ChartNode';
import {SettingsContext} from '../Settings/SettingsContext';

import type {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
import type {I

istItem({data, index, style}: Props): React.Node {
  const {
    chartData,
    onElementMouseEnter,
    onElementMouseLeave,
    scaleX,
    selectedChartNode,
    selectedChartNodeIndex,
    selectFiber,
    width,
  } = data;
  const {renderPathNodes, m

temData} from './CommitFlamegraph';
import typeof {SyntheticMouseEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

type Props = {
  data: ItemData,
  index: number,
  style: Object,
  ...
};

function CommitFlamegraphL


import * as React from 'react';
import {useCallback, useContext, useMemo, useState} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {ProfilerContext} from './ProfilerContext';
import NoCommitData from './NoCommitData';
import CommitRankedListItem from './CommitRankedListItem';
import HoveredFiberInfo from './HoveredFiberInfo';
import {scale} from './utils';
import {StoreContext} from '../context';
import {SettingsContext} from '../Settin

 from './RankedChartBuilder';
import type {CommitTree} from './types';

export type ItemData = {
  chartData: ChartData,
  onElementMouseEnter: (fiberData: TooltipFiberData) => void,
  onElementMouseLeave: () => void,
  scaleX: (value: number, fallbackValu

gs/SettingsContext';
import {useHighlightHostInstance} from '../hooks';
import Tooltip from './Tooltip';

import styles from './CommitRanked.css';

import type {TooltipFiberData} from './HoveredFiberInfo';
import type {ChartData}


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {memo, useCallback, useContext} from 'react';
import {areEqual} from 'react-window';
import {minBarWidth} from './constants';
import {getGradientColor} from './utils';
import ChartNode from './ChartNode';
import {SettingsContext} from '../Settings/SettingsContext';

import type {ItemData} from './CommitRanked';

type P

rIndex,
    selectFiber,
    width,
  } = data;

  const node = chartData.nodes[index];

  const {lineHeight} = useContext(SettingsContext);

  const handleClick = useCallback(
    (event: $FlowFixMe) => {
      event.stopPropagation();
      const {id, na

rops = {
  data: ItemData,
  index: number,
  style: Object,
};

function CommitRankedListItem({data, index, style}: Props) {
  const {
    chartData,
    onElementMouseEnter,
    onElementMouseLeave,
    scaleX,
    selectedFibe


E_ERRORS_OR_WARNINGS,
  TREE_OPERATION_APPLIED_ACTIVITY_SLICE_CHANGE,
  SUSPENSE_TREE_OPERATION_ADD,
  SUSPENSE_TREE_OPERATION_REMOVE,
  SUSPENSE_TREE_OPERATION_REORDER_CHILDREN,
  SUSPENSE_TREE_OPERATION_RESIZE,
  SUSPENSE_TREE_OPERATION_SUSPENDERS,
} from 'react-devtools-shared/src/constants';
import {
  parseElementDisplayNameFromBackend,
  utfDecodeStringWithRanges,
} from 'react-devtools-shared/src/utils';
import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';
import ProfilerStore fr

ls-shared/src/devtools/views/Profiler/types';

const debug = (methodName: string, ...args: Array<string>) => {
  if (__DEBUG__) {
    console.log(
      `%cCommitTreeBuilder %c${methodName}`,
      'color: pink; font-weight: bold;',
      'font-weight: bol

om 'react-devtools-shared/src/devtools/ProfilerStore';

import type {ElementType} from 'react-devtools-shared/src/frontend/types';
import type {
  CommitTree,
  CommitTreeNode,
  ProfilingDataForRootFrontend,
} from 'react-devtoo


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {formatDuration} from './utils';
import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';

import type {CommitTree} from './types';

export type ChartNode = {
  actualDuration: number,
  didRender: boolean,
  id: number,
  label: string,
  name: string,
  offset: number,
  selfDuration: number,
  treeBaseDuration: number,
};

export type ChartData = {
  baseDuration: number,
  de

tData({
  commitIndex,
  commitTree,
  profilerStore,
  rootID,
}: {
  commitIndex: number,
  commitTree: CommitTree,
  profilerStore: ProfilerStore,
  rootID: number,
}): ChartData {
  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);

pth: number,
  idToDepthMap: Map<number, number>,
  maxSelfDuration: number,
  renderPathNodes: Set<number>,
  rows: Array<Array<ChartNode>>,
};

const cachedChartData: Map<string, ChartData> = new Map();

export function getChar


import * as React from 'react';
import {
  useContext,
  useMemo,
  useCallback,
  memo,
  useState,
  useEffect,
} from 'react';
import styles from './HookChangeSummary.css';
import ButtonIcon from '../ButtonIcon';
import {InspectedElementContext} from '../Components/InspectedElementContext';
import {StoreContext} from '../context';

import {getAlreadyLoadedHookNames} from 'react-devtools-shared/src/hookNamesCache';
import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
impo

ew Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
});

type HookProps = {
  hook: HooksNode,
  hookNames: Map<string, string> | null,
};

const Hook: component(...props: HookProps) = memo(
  ({hook, hookNames}: HookProps) => {
    const ho

rt Toggle from '../Toggle';
import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
import type {ChangeDescription} from './types';

// $FlowFixMe: Flow doesn't know about Intl.ListFormat
const hookListFormatter = n


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useContext} from 'react';

import InspectedElementBadges from '../Components/InspectedElementBadges';
import {ProfilerContext} from './ProfilerContext';
import {formatDuration} from './utils';
import WhatChanged from './WhatChanged';
import {StoreContext} from '../context';

import styles from './HoveredFibe

{fiberData}: Props): React.Node {
  const {profilerStore} = useContext(StoreContext);
  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);

  const {id, name} = fiberData;
  const {profilingCache} = profilerStore;

  if (rootID === null ||

rInfo.css';

import type {ChartNode} from './FlamegraphChartBuilder';

export type TooltipFiberData = {
  id: number,
  name: string,
};

export type Props = {
  fiberData: ChartNode,
};

export default function HoveredFiberInfo(


ource code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import RecordToggle from './RecordToggle';

import styles from './Profiler.css';

export default function NoProfilingData(): React.Node {
  return (

No profiling data has been recorded.

        Click the record button <RecordToggle

Name={`${styles.Row} ${styles.LearnMoreRow}`}>
        Click{' '}
        <a
          className={styles.LearnMoreLink}
          href="https://fb.me/react-devtools-profiling"
          rel="noopener noreferrer"
          target="_blank">
          here

/> to start recording.
      </div>
      <div class


import * as React from 'react';
import {Fragment, useContext, useEffect, useRef, useEffectEvent} from 'react';
import {ModalDialog} from '../ModalDialog';
import {ProfilerContext} from './ProfilerContext';
import TabBar from '../TabBar';
import ClearProfilingDataButton from './ClearProfilingDataButton';
import CommitFlamegraph from './CommitFlamegraph';
import CommitRanked from './CommitRanked';
import RootSelector from './RootSelector';
import {Timeline} from 'react-devtools-timeline/src/Timeline';
import

rt SnapshotSelector from './SnapshotSelector';
import SidebarCommitInfo from './SidebarCommitInfo';
import NoProfilingData from './NoProfilingData';
import RecordingInProgress from './RecordingInProgress';
import ProcessingData from './ProcessingData';
imp

SidebarEventInfo from './SidebarEventInfo';
import RecordToggle from './RecordToggle';
import ReloadAndProfileButton from './ReloadAndProfileButton';
import ProfilingImportExportButtons from './ProfilingImportExportButtons';
impo


ocalStorage, useSubscription} from '../hooks';
import {
  TreeDispatcherContext,
  TreeStateContext,
} from '../Components/TreeContext';
import {StoreContext} from '../context';
import {logEvent} from 'react-devtools-shared/src/Logger';
import {useCommitFilteringAndNavigation} from './useCommitFilteringAndNavigation';

import type {CommitDataFrontend, ProfilingDataFrontend} from './types';

export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';

export type Context = {
  // Which tab is selected i

elf (after a reload-and-profile action).
  // It is synced between the backend and frontend via a Store subscription.
  didRecordCommits: boolean,
  isProcessingData: boolean,
  isProfiling: boolean,
  profilingData: ProfilingDataFrontend | null,
  startPr

n the Profiler UI?
  selectedTabID: TabID,
  selectTab(id: TabID): void,

  // Store subscription based values.
  // The isProfiling value may be modified by the record button in the Profiler toolbar,
  // or from the backend its


import * as React from 'react';
import {Fragment, useContext, useCallback, useRef} from 'react';
import {ProfilerContext} from './ProfilerContext';
import {ModalDialogContext} from '../ModalDialog';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {
  prepareProfilingDataExport,
  prepareProfilingDataFrontendFromExport,
} from './utils';
import {downloadFile} from '../utils';
import {TimelineContext} from 'react-devtools-timeline/src/Tim

 function ProfilingImportExportButtons(): React.Node {
  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
  const {setFile} = useContext(TimelineContext);
  const store = useContext(StoreContext);
  const {profilerStore} = store;

elineContext';
import isArray from 'shared/isArray';
import hasOwnProperty from 'shared/hasOwnProperty';

import styles from './ProfilingImportExportButtons.css';

import type {ProfilingDataExport} from './types';

export default


nder the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import styles from './Profiler.css';

export default function ProfilingNotSupported(): React.Node {
  return (

Profiling not supported.

        Profiling support requires either a development or profiling build of
        React v16.5+.

e at{' '}
        <a
          className={styles.Link}
          href="https://fb.me/react-devtools-profiling"
          rel="noopener noreferrer"
          target="_blank">
          reactjs.org/link/profiling
        </a>
        .
      </p>
    </div>

  <p className={styles.Paragraph}>
        Learn mor


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {
  ElementTypeForwardRef,
  ElementTypeMemo,
} from 'react-devtools-shared/src/frontend/types';
import {formatDuration} from './utils';
import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';

import type {CommitTree} from './types';

export type ChartNode = {
  id: number,
  label: string,
  name: string,
  value: number,
};

  commitIndex: number,
  commitTree: CommitTree,
  profilerStore: ProfilerStore,
  rootID: number,
}): ChartData {
  const commitDatum = profilerStore.getCommitData(rootID, commitIndex);

  const {fiberActualDurations, fiberSelfDurations} = commitDatum;

export type ChartData = {
  maxValue: number,
  nodes: Array<ChartNode>,
};

const cachedChartData: Map<string, ChartData> = new Map();

export function getChartData({
  commitIndex,
  commitTree,
  profilerStore,
  rootID,
}: {


ight (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 * as React from 'react';
import {useContext} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {ProfilerContext} from './ProfilerContext';

import styles from './RecordToggle.css';

export type Props = {
  disabled?: boolean,
};

export default function RecordToggle({di

  } else if (isProfiling) {
    className = styles.ActiveRecordToggle;
  }

  const isMac =
    typeof navigator !== 'undefined' &&
    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  const shortcut = isMac ? '⌘E' : 'Ctrl+E';
  const title = `${isP

sabled}: Props): React.Node {
  const {isProfiling, startProfiling, stopProfiling} =
    useContext(ProfilerContext);

  let className = styles.InactiveRecordToggle;
  if (disabled) {
    className = styles.DisabledRecordToggle;


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useCallback, useContext, useMemo} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {BridgeContext, StoreContext} from '../context';
import {useSubscription} from '../hooks';

type SubscriptionData = {
  recordChangeDescriptions: boolean,
  supportsReloadAndProfile: boolean,

  () => ({
      getCurrentValue: () => ({
        recordChangeDescriptions: store.recordChangeDescriptions,
        supportsReloadAndProfile: store.supportsReloadAndProfile,
      }),
      subscribe: (callback: Function) => {
        store.addListener('r

};

export default function ReloadAndProfileButton({
  disabled,
}: {
  disabled: boolean,
}): React.Node {
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const subscription = useMemo(


m '../portaledContent';
import styles from './SuspenseTab.css';
import SuspenseBreadcrumbs from './SuspenseBreadcrumbs';
import SuspenseRects from './SuspenseRects';
import SuspenseTimeline from './SuspenseTimeline';
import ActivityList from './ActivityList';
import {
  SuspenseTreeDispatcherContext,
  SuspenseTreeStateContext,
} from './SuspenseTreeContext';
import {BridgeContext, StoreContext, OptionsContext} from '../context';
import Button from '../Button';
import Toggle from '../Toggle';
import typeof

ed/src/devtools/views/Settings/SettingsModalContextToggle';
import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
import {TreeStateContext} from '../Components/TreeContext';

type Orientation

{SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
import SettingsModalContextToggle from 'react-devtools-shar


 * 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 * as React from 'react';
import {LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR} from '../../../constants';
import {useLocalStorage} from '../hooks';

import styles from './SettingsShared.css';

export default function CodeEditorByDefault({
  onChange,
}: {
  onChange?: boolean => void,
}): React.Node {
  const [a

cked={alwaysOpenInEditor}
        onChange={({currentTarget}) => {
          setAlwaysOpenInEditor(currentTarget.checked);
          if (onChange) {
            onChange(currentTarget.checked);
          }
        }}
        className={styles.SettingRowChe

lwaysOpenInEditor, setAlwaysOpenInEditor] = useLocalStorage<boolean>(
    LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
    false,
  );

  return (
    <label className={styles.SettingRow}>
      <input
        type="checkbox"
        che


ElementTypeFunction,
  ElementTypeForwardRef,
  ElementTypeHostComponent,
  ElementTypeMemo,
  ElementTypeOtherOrUnknown,
  ElementTypeProfiler,
  ElementTypeSuspense,
  ElementTypeActivity,
  ElementTypeViewTransition,
} from 'react-devtools-shared/src/frontend/types';

import styles from './SettingsShared.css';

import type {
  BooleanComponentFilter,
  ComponentFilter,
  ComponentFilterType,
  ElementType,
  ElementTypeComponentFilter,
  RegExpComponentFilter,
  EnvironmentNameComponentFilter,
} from 're

 React.Node {
  const store = useContext(StoreContext);
  const {parseHookNames, setParseHookNames} = useContext(SettingsContext);

  const collapseNodesByDefaultSubscription = useMemo(
    () => ({
      getCurrentValue: () => store.collapseNodesByDefault

act-devtools-shared/src/frontend/types';
import {isInternalFacebookBuild} from 'react-devtools-feature-flags';

export default function ComponentsSettings({
  environmentNames,
}: {
  environmentNames: Promise<Array<string>>,
}):


import * as React from 'react';
import {use, useState, useEffect} from 'react';

import type {DevToolsHookSettings} from 'react-devtools-shared/src/backend/types';
import type Store from 'react-devtools-shared/src/devtools/store';

import styles from './SettingsShared.css';

type Props = {
  hookSettings: Promise<$ReadOnly<DevToolsHookSettings>>,
  store: Store,
};

export default function DebuggingSettings({
  hookSettings,
  store,
}: Props): React.Node {
  const usedHookSettings = use(hookSettings);

  c

  const [hideConsoleLogsInStrictMode, setHideConsoleLogsInStrictMode] =
    useState(usedHookSettings.hideConsoleLogsInStrictMode);
  const [showInlineWarningsAndErrors, setShowInlineWarningsAndErrors] =
    useState(usedHookSettings.showInlineWarningsAndE

onst [appendComponentStack, setAppendComponentStack] = useState(
    usedHookSettings.appendComponentStack,
  );
  const [breakOnConsoleErrors, setBreakOnConsoleErrors] = useState(
    usedHookSettings.breakOnConsoleErrors,
  );


mport * as React from 'react';
import {
  Fragment,
  useCallback,
  useContext,
  useLayoutEffect,
  useReducer,
  useRef,
  useState,
} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Toggle from '../Toggle';
import ElementBadges from './ElementBadges';
import {OwnersListContext, useChangeOwnerAction} from './OwnersListContext';
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
import {useIsOverflowing} from '../hooks';
import {StoreContext

shared/src/frontend/types';

import styles from './OwnersStack.css';

type SelectOwner = (owner: SerializedElement | null) => void;

type ACTION_UPDATE_OWNER_ID = {
  type: 'UPDATE_OWNER_ID',
  ownerID: number | null,
  owners: Array<SerializedElement>,
};

} from '../context';
import Tooltip from '../Components/reach-ui/tooltip';
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
} from '../Components/reach-ui/menu-button';

import type {SerializedElement} from 'react-devtools-


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {use, useContext} from 'react';

import useOpenResource from '../useOpenResource';

import ElementBadges from './ElementBadges';

import styles from './StackTraceView.css';

import type {ReactStackTrace, ReactCallSite} from 'shared/ReactTypes';

import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

import FetchFileWithCachingContext fr

te: ReactCallSite,
  environmentName: null | string,
};

export function CallSiteView({
  callSite,
  environmentName,
}: CallSiteViewProps): React.Node {
  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);

  const [virtualFunctionName

om './FetchFileWithCachingContext';

import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';

import formatLocationForDisplay from './formatLocationForDisplay';

type CallSiteViewProps = {
  callSi


e from '../useInferredName';

import {getClassNameForEnvironment} from '../SuspenseTab/SuspenseEnvironmentColors.js';

import type {
  InspectedElement,
  SerializedAsyncInfo,
} from 'react-devtools-shared/src/frontend/types';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';

import {
  UNKNOWN_SUSPENDERS_NONE,
  UNKNOWN_SUSPENDERS_REASON_PRODUCTION,
  UNKNOWN_SUSPENDERS_REASON_OLD_VERSION,
  UNKNOWN_SUSPENDERS_REASON_THROWN_PROMISE,
} from '../../../constants';
import {ElementTypeRoot}

: number,
  maxTime: number,
  skipName?: boolean,
};

function getShortDescription(name: string, description: string): string {
  const descMaxLength = 30 - name.length;
  if (descMaxLength > 1) {
    const l = description.length;
    if (l > 0 && l <= de

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

type RowProps = {
  bridge: FrontendBridge,
  element: Element,
  inspectedElement: InspectedElement,
  store: Store,
  asyncInfo: SerializedAsyncInfo,
  index: number,
  minTime


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useContext} from 'react';

import {ContextMenuContext} from '../context';
import {
  copyInspectedElementPath as copyInspectedElementPathAPI,
  storeAsGlobal as storeAsGlobalAPI,
} from '../../../backendAPI';
import Icon from '../Icon';
import ContextMenuContainer from '../../ContextMenu/ContextMenuContainer';

import type Store from 'react-devtools-shared/src/devtool

ode,
  anchorElementRef: {
    current: React.ElementRef<any> | null,
  },
  store: Store,
  attributeSourceCanBeInspected: boolean,
  bridge: FrontendBridge,
  id: number,
  path: Array<any>,
  canBeCopiedToClipboard: boolean,
};

export default function

s/store';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type {ContextMenuContextType} from '../context';

import styles from './KeyValueContextMenuContainer.css';

type Props = {
  children: React.N


ight (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 * as React from 'react';
import styles from './AutoSizeInput.css';

type Props = {
  className?: string,
  onFocus?: (event: FocusEvent) => void,
  placeholder?: string,
  testName?: ?string,
  value: any,
};

export default function AutoSizeInput({
  className,
  onFocus,
  placeholder = '',
  testName,
  value

ue.length;
    }

    if (typeof onFocus === 'function') {
      onFocus(event);
    }
  };

  const isEmpty = value === '' || value === '""';

  return (
    // $FlowFixMe[cannot-spread-inexact] unsafe rest spread
    <input
      className={[styles.Input

,
  ...rest
}: Props): React.Node {
  // $FlowFixMe[missing-local-annot]
  const onFocusWrapper = event => {
    const input = event.target;
    if (input !== null) {
      input.selectionStart = 0;
      input.selectionEnd = val


 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 * as React from 'react';
import styles from './LayoutViewer.css';

import type {Layout} from './types';

type Props = {
  id: number,
  layout: Layout,
};

export default function LayoutViewer({id, layout}: Props): React.Node {
  const {height, margin, padding, y, width, x} = layout;

  return (
    <div className={styles.La

top || '-'}

          {margin.left || '-'}

              <label className={styles.Labe

youtViewer}>

layout

          margin

          {margin.


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {createContext, useContext, useEffect, useState} from 'react';
import {
  BridgeContext,
  StoreContext,
} from 'react-devtools-shared/src/devtools/views/context';
import {TreeStateContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';

import type {StateContext} from 'react-devtools-shared

ckend} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
import type {StyleAndLayout as StyleAndLayoutFrontend} from './types';

type Context = StyleAndLayoutFrontend | null;

const NativeStyleContext: ReactContext<Context> = createContext<

/src/devtools/views/Components/TreeContext';
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
import type Store from 'react-devtools-shared/src/devtools/store';
import type {StyleAndLayout as StyleAndLayoutBa


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {useState, startTransition} from 'react';

import portaledContent from '../portaledContent';

import styles from './EditorPane.css';

import Button from 'react-devtools-shared/src/devtools/views/Button';
import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';

import OpenInEditorButton from './OpenInEditorButton';
import useEditorURL from '../useE

render every keystroke.
  selectionRef: {
    line: number,
    column: number,
  },
};

export type Props = {selectedSource: ?SourceSelection};

function EditorPane({selectedSource}: Props) {
  const [showSettings, setShowSettings] = useState(false);
  co

ditorURL';

import EditorSettings from './EditorSettings';
import CodeEditorByDefault from '../Settings/CodeEditorByDefault';

export type SourceSelection = {
  url: string,
  // The selection is a ref so that we don't have to re


iates.
 *
 * 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 {ReactFunctionLocation, ReactCallSite} from 'shared/ReactTypes';

export function checkConditions(
  editorURL: string,
  source: ReactFunctionLocation | ReactCallSite,
): {url: URL | null, shouldDisableButton: boolean} {
  try {
    const url = new URL(editorURL);

    const [, sourceURL, line, column] = source;
    let filePath;

    // Check

e-name]
      if (!__IS_INTERNAL_VERSION__) {
        // In this case, we can't really determine the path to a file, disable a button
        return {url: null, shouldDisableButton: true};
      } else {
        const endOfSourceMapURLPattern = '.js/';

if sourceURL is a correct URL, which has a protocol specified
    if (sourceURL.startsWith('file:///')) {
      filePath = new URL(sourceURL).pathname;
    } else if (sourceURL.includes('://')) {
      // $FlowFixMe[cannot-resolv


mport type {
  Element,
  ActivitySliceFilter,
  ComponentFilter,
} from 'react-devtools-shared/src/frontend/types';
import typeof {
  SyntheticMouseEvent,
  SyntheticKeyboardEvent,
} from 'react-dom-bindings/src/events/SyntheticEvent';
import type Store from 'react-devtools-shared/src/devtools/store';

import * as React from 'react';
import {useContext, useMemo, useTransition} from 'react';
import {
  ComponentFilterActivitySlice,
  ElementTypeActivity,
} from 'react-devtools-shared/src/frontend/types';
im

function useChangeActivitySliceAction(): (
  id: Element['id'] | null,
) => void {
  const store = useContext(StoreContext);

  function changeActivitySliceAction(activityID: Element['id'] | null) {
    const nextFilters: ComponentFilter[] = [];
    // Rem

port styles from './ActivityList.css';
import {
  TreeStateContext,
  TreeDispatcherContext,
} from '../Components/TreeContext';
import {useHighlightHostInstance} from '../hooks';
import {StoreContext} from '../context';

export


';
import {
  SuspenseTreeStateContext,
  SuspenseTreeDispatcherContext,
} from './SuspenseTreeContext';
import {getClassNameForEnvironment} from './SuspenseEnvironmentColors.js';
import type RBush from 'rbush';

function ScaledRect({
  className,
  rect,
  visible,
  suspended,
  selected,
  hovered,
  adjust,
  ...props
}: {
  className: string,
  rect: Rect,
  visible: boolean,
  suspended: boolean,
  selected?: boolean,
  hovered?: boolean,
  adjust?: boolean,
  ...
}): React$Node {
  const viewBox = us

Box.y) / viewBox.height) * 100 + '%';

  return (
    <div
      {...props}
      className={styles.SuspenseRectsScaledRect + ' ' + className}
      data-visible={visible}
      data-suspended={suspended}
      data-selected={selected}
      data-hovered={

eContext(ViewBox);
  const width = (rect.width / viewBox.width) * 100 + '%';
  const height = (rect.height / viewBox.height) * 100 + '%';
  const x = ((rect.x - viewBox.x) / viewBox.width) * 100 + '%';
  const y = ((rect.y - view


  timelineIndex: number | -1,
  hoveredTimelineIndex: number | -1,
  uniqueSuspendersOnly: boolean,
  playing: boolean,
  autoSelect: boolean,
  autoScroll: {id: number}, // Ref that's set to 0 after scrolling once.
};

type ACTION_SUSPENSE_TREE_MUTATION = {
  type: 'HANDLE_SUSPENSE_TREE_MUTATION',
  payload: [Map<SuspenseNode['id'], SuspenseNode['id']>],
};
type ACTION_SET_SUSPENSE_LINEAGE = {
  type: 'SET_SUSPENSE_LINEAGE',
  payload: SuspenseNode['id'],
};
type ACTION_SELECT_SUSPENSE_BY_ID = {
  type: 'S

imeline
    SuspenseNode['id'] | null,
    // Whether this timeline includes only unique suspenders
    boolean,
  ],
};
type ACTION_SUSPENSE_SET_TIMELINE_INDEX = {
  type: 'SUSPENSE_SET_TIMELINE_INDEX',
  payload: number,
};
type ACTION_SUSPENSE_SKIP_TIME

ELECT_SUSPENSE_BY_ID',
  payload: SuspenseNode['id'],
};
type ACTION_SET_SUSPENSE_TIMELINE = {
  type: 'SET_SUSPENSE_TIMELINE',
  payload: [
    $ReadOnlyArray<SuspenseTimelineStep>,
    // The next Suspense ID to select in the t


 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 * as React from 'react';
import {
  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
  LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
} from '../../../constants';
import {useLocalStorage} from '../hooks';
import {
  getDefaultPreset,
  getDefaultOpenInEditorURL,
} from 'react-devtools-shared/src/utils';

import styles from './SettingsShared.css'

tom',
  >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, getDefaultPreset());

  const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
    LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
    getDefaultOpenInEditorURL(),
  );

  return (
    <>
      <select

;

export default function CodeEditorOptions({
  environmentNames,
}: {
  environmentNames: Promise<Array<string>>,
}): React.Node {
  const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
    'vscode' | 'cus


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {copy} from 'clipboard-js';

import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Skeleton from './Skeleton';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import useOpenResource from '../useOpenResource';

import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSourc

Location,
  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
};

function InspectedElementSourcePanel({
  source,
  symbolicatedSourcePromise,
}: Props): React.Node {
  return (

e';
import type {ReactFunctionLocation} from 'shared/ReactTypes';
import styles from './InspectedElementSourcePanel.css';

import formatLocationForDisplay from './formatLocationForDisplay';

type Props = {
  source: ReactFunction


btreeLeafElementID: number | null,

  // Search
  searchIndex: number | null,
  searchResults: Array<number>,
  searchText: string,

  // Owners
  ownerID: number | null,
  ownerFlatTree: Array<Element> | null,

  // Activity slice
  activityID: Element['id'] | null,
  activities: $ReadOnlyArray<{id: Element['id'], depth: number}>,

  // Inspection element panel
  inspectedElementID: number | null,
  inspectedElementIndex: number | null,
};

type ACTION_GO_TO_NEXT_SEARCH_RESULT = {
  type: 'GO_TO_NEXT_SEARC

lement['id']],
};
type ACTION_RESET_OWNER_STACK = {
  type: 'RESET_OWNER_STACK',
};
type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {
  type: 'SELECT_CHILD_ELEMENT_IN_TREE',
};
type ACTION_SELECT_ELEMENT_AT_INDEX = {
  type: 'SELECT_ELEMENT_AT_INDEX',
  payload

H_RESULT',
};
type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
  type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
};
type ACTION_HANDLE_STORE_MUTATION = {
  type: 'HANDLE_STORE_MUTATION',
  payload: [Array<number>, Map<number, number>, null | E


ight (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 {toNormalUrl} from 'jsc-safe-url';

// This function is based on describeComponentFrame() in packages/shared/ReactComponentStackFrame
export default function formatLocationForDisplay(
  sourceURL: string,
  line: number,
  column: number,
): string {
  // Metro can return JSC-safe URLs, which have `//&` as a del

h provides bundle URL with query parameters prefixed with /&
  const BEFORE_SLASH_RE = /^(.*)[\\\/]/;

  let nameOnly = sanitizedSourceURL.replace(BEFORE_SLASH_RE, '');

  // In DEV, include code for a common special case:
  // prefer "folder/index.js" ins

imiter
  // https://www.npmjs.com/package/jsc-safe-url
  const sanitizedSourceURL = sourceURL.includes('//&')
    ? toNormalUrl(sourceURL)
    : sourceURL;

  // Note: this RegExp doesn't work well with URLs from Metro,
  // whic


ight (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 * as React from 'react';
import ReachTooltip from '@reach/tooltip';
import tooltipStyles from './Tooltip.css';
import useThemeStyles from '../../useThemeStyles';

const Tooltip = ({
  children,
  className = '',
  ...props
}: {
  children: React$Node,
  className: string,
  ...
}): React.Node => {
  const style

es();
  return (
    // $FlowFixMe[cannot-spread-inexact] unsafe spread
    <ReachTooltip
      className={`${tooltipStyles.Tooltip} ${className}`}
      style={style}
      {...props}>
      {children}
    </ReachTooltip>
  );
};

export default Tooltip;


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import Button from 'react-devtools-shared/src/devtools/views/Button';
import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
import ButtonLabel from 'react-devtools-shared/src/devtools/views/ButtonLabel';

import type {SourceSelection} from './EditorPane';
import type {ReactFunctionLocation} from 'shar

): React.Node {
  let disable;
  if (source == null) {
    disable = true;
  } else {
    const staleLocation: ReactFunctionLocation = [
      '',
      source.url,
      // This is not live but we just use any line/column to validate whether this can be o

ed/ReactTypes';

import {checkConditions} from './utils';

type Props = {
  editorURL: string,
  source: ?SourceSelection,
  className?: string,
};

function ActualOpenInEditorButton({
  editorURL,
  source,
  className,
}: Props


import * as React from 'react';
import {useContext, useEffect} from 'react';
import {BridgeContext, StoreContext} from '../context';
import {TreeDispatcherContext} from '../Components/TreeContext';
import {useScrollToHostInstance} from '../hooks';
import {
  SuspenseTreeDispatcherContext,
  SuspenseTreeStateContext,
} from './SuspenseTreeContext';
import styles from './SuspenseTimeline.css';
import SuspenseScrubber from './SuspenseScrubber';
import Button from '../Button';
import ButtonIcon from '../ButtonI

atcherContext);
  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
  const scrollToHostInstance = useScrollToHostInstance();

  const {timeline, timelineIndex, hoveredTimelineIndex, playing, autoScroll} =
    useContext(SuspenseTreeS

con';
import type {SuspenseNode} from '../../../frontend/types';

function SuspenseTimelineInput() {
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);
  const treeDispatch = useContext(TreeDisp


 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 * as React from 'react';

import Button from 'react-devtools-shared/src/devtools/views/Button';
import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';

import type {ReactFunctionLocation} from 'shared/ReactTypes';
import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

i

utton({
  editorURL,
  source,
  symbolicatedSourcePromise,
}: Props): React.Node {
  const symbolicatedSource = React.use(symbolicatedSourcePromise);

  const {url, shouldDisableButton} = checkConditions(
    editorURL,
    symbolicatedSource ? symbolicat

mport {checkConditions} from '../Editor/utils';

type Props = {
  editorURL: string,
  source: ReactFunctionLocation,
  symbolicatedSourcePromise: Promise<SourceMappedLocation | null>,
};

function OpenSymbolicatedSourceInEditorB


 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 * as React from 'react';
import {useContext, useMemo} from 'react';

import {StoreContext} from 'react-devtools-shared/src/devtools/views/context';
import {useSubscription} from 'react-devtools-shared/src/devtools/views/hooks';
import {TreeStateContext} from 'react-devtools-shared/src/devtools/views/Components/TreeContext';

{
  const store = useContext(StoreContext);
  const subscription = useMemo(
    () => ({
      getCurrentValue: () => store.supportsNativeStyleEditor,
      subscribe: (callback: Function) => {
        store.addListener('supportsNativeStyleEditor', callbac

import {NativeStyleContext} from './context';
import LayoutViewer from './LayoutViewer';
import StyleEditor from './StyleEditor';
import styles from './index.css';

export default function NativeStyleEditorWrapper(): React.Node


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

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

import typeof {SyntheticEvent} from 'react-dom-bindings/src/events/SyntheticEvent';

import * as React from 'react';
import {useContext, useRef} from 'react';
import {ElementTypeRoot} from 'react-devtools-shared/src/frontend/types';

import styles from './SuspenseScrubber.css';

import {getClassNameForEnvironment} from './S

 onChange,
  onFocus,
  onHoverSegment,
  onHoverLeave,
}: {
  min: number,
  max: number,
  timeline: $ReadOnlyArray<SuspenseTimelineStep>,
  value: number,
  highlight: number,
  onBlur?: () => void,
  onChange: (index: number) => void,
  onFocus?: () =>

uspenseEnvironmentColors.js';

import Tooltip from '../Components/reach-ui/tooltip';
import {StoreContext} from '../context';

export default function SuspenseScrubber({
  min,
  max,
  timeline,
  value,
  highlight,
  onBlur,


 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 * as React from 'react';

import ButtonIcon from '../ButtonIcon';
import Button from '../Button';

import type {ReactFunctionLocation} from 'shared/ReactTypes';
import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

import useOpenResource from '../useOpenResource';

type Props = {
  source: n

<React.Suspense
      fallback={
        <Button disabled={true} title="Loading source maps...">
          <ButtonIcon type="view-source" />
        </Button>
      }>
      <ActualSourceButton
        source={source}
        symbolicatedSourcePromise={sym

ull | ReactFunctionLocation,
  symbolicatedSourcePromise: Promise<SourceMappedLocation | null> | null,
};

function InspectedElementViewSourceButton({
  source,
  symbolicatedSourcePromise,
}: Props): React.Node {
  return (


import * as React from 'react';
import {useContext, useMemo, useRef, useState} from 'react';
import {copy} from 'clipboard-js';
import {
  BridgeContext,
  StoreContext,
} from 'react-devtools-shared/src/devtools/views/context';
import Button from '../../Button';
import ButtonIcon from '../../ButtonIcon';
import {serializeDataForCopy} from '../../utils';
import AutoSizeInput from './AutoSizeInput';
import styles from './StyleEditor.css';
import {sanitizeForParse} from '../../../utils';
import {withPermissio

ue: any) => void;
type ChangeValueFn = (name: string, value: any) => void;

export default function StyleEditor({id, style}: Props): React.Node {
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const changeAttribute

nsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {Style} from './types';

type Props = {
  id: number,
  style: Style,
};

type ChangeAttributeFn = (oldName: string, newName: string, val


{Fragment, useContext, useLayoutEffect, useRef, useState} from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Tooltip from '../Components/reach-ui/tooltip';
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
} from '../Components/reach-ui/menu-button';
import {
  TreeDispatcherContext,
  TreeStateContext,
} from '../Components/TreeContext';
import {StoreContext} from '../context';
import {useHighlightHostInstance, useIsOverflowing} from '../hooks';
import styles

theticMouseEvent) => void,
  onItemPointerEnter: (
    id: SuspenseNode['id'],
    scrollIntoView?: boolean,
  ) => void,
  onItemPointerLeave: (event: SyntheticMouseEvent) => void,
  setElementsTotalWidth: (width: number) => void,
};

function SuspenseBre

from './SuspenseBreadcrumbs.css';
import {
  SuspenseTreeStateContext,
  SuspenseTreeDispatcherContext,
} from './SuspenseTreeContext';

type SuspenseBreadcrumbsFlatListProps = {
  onItemClick: (id: SuspenseNode['id'], event: Syn


 MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {SchedulingEvent} from 'react-devtools-timeline/src/types';
import type {ReactFunctionLocation} from 'shared/ReactTypes';

import * as React from 'react';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {useContext} from 'react';
import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
import {
  formatTimestamp,
  getSchedulingEventLabel,
} fro

c/frontend/utils/withPermissionsCheck';
import useOpenResource from '../useOpenResource';

import styles from './SidebarEventInfo.css';

export type Props = {};

type FunctionLocationProps = {
  location: ReactFunctionLocation,
  displayName: string,
};
fu

m 'react-devtools-timeline/src/utils/formatting';
import {stackToComponentLocations} from 'react-devtools-shared/src/devtools/utils';
import {copy} from 'clipboard-js';
import {withPermissionsCheck} from 'react-devtools-shared/sr


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @emails react-core
 *
 * @jest-environment node
 */

'use strict';

let useSyncExternalStore;
let React;
let ReactDOM;
let ReactDOMServer;
let Scheduler;
let assertLog;

// This tests the userspace shim of `useSyncExternalStore` in a server-rendering
// (Node) environment
describe('useSyncExternalStore (userspace shim, server rendering)', () => {
  beforeEach(() => {

de useSyncExternalStore.
    //
    // Longer term, we'll probably test this branch using an actual build of
    // React 17.
    jest.mock('react', () => {
      const {
        startTransition: _,
        useSyncExternalStore: __,
        ...otherExports

    jest.resetModules();

    // Remove useSyncExternalStore from the React imports so that we use the
    // shim instead. Also removing startTransition, since we use that to detect
    // outdated 18 alphas that don't yet inclu


ons/utils');
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
const semver = require('semver');

const {SUCCESSFUL_COMPILATION_MESSAGE} = require('./constants');

const {ReactVersion: currentReactVersion} = require('../../ReactVersions');

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  console.error('NODE_ENV not set');
  process.exit(1);
}

const EDITOR_URL = process.env.EDITOR_URL || null;

const builtModulesDir = resolve(
  __dirname,
  '..',
  '..',
  'build',
  'oss

isnt' set, we'll use the build folder
// for both React DevTools and React
const REACT_VERSION = process.env.REACT_VERSION
  ? semver.coerce(process.env.REACT_VERSION).version
  : currentReactVersion;

const E2E_APP_BUILD_DIR = process.env.REACT_VERSION

-experimental',
);

const __DEV__ = NODE_ENV === 'development';

const DEVTOOLS_VERSION = getVersionString();

// If the React version isn't set, we will use the
// current React version instead. Likewise if the
// React version


ight (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
 */

function ignoreStrings(
  methodName: string,
  stringsToIgnore: Array<string>,
): void {
  // $FlowFixMe[prop-missing] index access only allowed for objects with index keys
  console[methodName] = (...args: $ReadOnlyArray<mixed>) => {
    const maybeString = args[0];
    if (typeof maybeString === 'string') {
      fo

e.
    // Our test app code uses the iframe's console though.
    // To simulate a more accurate end-to-end environment,
    // the shell's console patching should pass through to the parent override methods.
    window.parent.console[methodName](...args);

r (let i = 0; i < stringsToIgnore.length; i++) {
        if (maybeString.startsWith(stringsToIgnore[i])) {
          return;
        }
      }
    }

    // HACKY In the test harness, DevTools overrides the parent window's consol


import {createRoot} from 'react-dom/client';
import {
  activate as activateBackend,
  initialize as initializeBackend,
} from 'react-devtools-inline/backend';
import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
import {initDevTools} from 'react-devtools-shared/src/devtools';

// This is a pretty gross hack to make the runtime loaded named-hooks-code work.
// TODO (Webpack 5) Hoepfully we can remove this once we upgrade to Webpack 5.
// $FlowFixMe[cannot-resolve-name]
__webpack_

tentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

initializeBackend(contentWindow);

// Initialize the front end and activate the backend early so that we are able
// to pass console settings in local storage to the backend before initial render
const

public_path__ = '/dist/'; // eslint-disable-line no-undef

const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);

const {contentDocument, contentWindow} = iframe;

// Helps with positioning Overlay UI.
con


ions.

import semver from 'semver';

import {createElement} from 'react';
import {createRoot} from 'react-dom/client';

import DeeplyNestedComponents from './DeeplyNestedComponents';
import Iframe from './Iframe';
import EditableProps from './EditableProps';
import ElementTypes from './ElementTypes';
import Hydration from './Hydration';
import InspectableElements from './InspectableElements';
import ReactNativeWeb from './ReactNativeWeb';
import ToDoList from './ToDoList';
import Toggle from './Toggle';
imp

TraceUpdatesTest from './TraceUpdatesTest';
import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';

import './styles.css';

// DevTools intentionally tests compatibility with certain legacy APIs.
// Suppress their error messages in the local d

ort ErrorBoundaries from './ErrorBoundaries';
import PartiallyStrictApp from './PartiallyStrictApp';
import Segments from './Segments';
import SuspenseTree from './SuspenseTree';
import ActivityTree from './ActivityTree';
import


('This warning fires during every render');
  return children;
}

// $FlowFixMe[missing-local-annot]
function WarnOnMount({children = null}) {
  useEffect(() => {
    console.warn('This warning fires on initial mount only');
  }, []);
  return children;
}

// $FlowFixMe[missing-local-annot]
function WarnOnUpdate({children = null}) {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (didMountRef.current) {
      console.warn('This warning fires on every update');
    } else {
      didMountRef.

 }, []);
  return children;
}

// $FlowFixMe[missing-local-annot]
function ErrorDuringRender({children = null}) {
  console.error('This error fires during every render');
  return children;
}

// $FlowFixMe[missing-local-annot]
function ErrorOnMount({child

current = true;
    }
  });
  return children;
}

// $FlowFixMe[missing-local-annot]
function WarnOnUnmount({children = null}) {
  useEffect(() => {
    return () => {
      console.warn('This warning fires on unmount');
    };


agment>

Suspense

Primary to Fallback Cycle

      <PrimaryFallbackTest initialSuspend={false} />

Fallback to Primary Cycle

      <PrimaryFallbackTest initialSuspend={true} />
      <NestedSuspenseTest />
      <SuspenseListTest />
      <EmptySuspense />
      <SuspenseTreeOperations />
    </Fragment>
  );
}

function IgnoreMePassthrough({children}: {children: React$Node}) {
  return {children};
}

const suspenseTreeOperationsChildren = {
  a: (

  ),
  d: (
    <Suspense key="d" name="d">

D

    </Suspense>
  ),
  e: (
    <Suspense key="e" name="e">
      <IgnoreMePassthrough key="e1">
        <Suspense name="e-child-one">

e1

        </Suspense>
      </Ig

<Suspense key="a" name="a">

A

    </Suspense>
  ),
  b: (

      <Suspense name="b">B</Suspense>

  ),
  c: (

      <Suspense key="c" name="c">
        C
      </Suspense>


 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 * as React from 'react';
import {
  createContext,
  forwardRef,
  lazy,
  memo,
  Component,
  Fragment,
  Profiler,
  StrictMode,
  Suspense,
} from 'react';

const Context = createContext('abc');
Context.displayName = 'ExampleContext';

class ClassComponent extends Component<any> {
  render(): null {
    return null;
  }

);
const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
  return <ClassComponent ref={ref} {...props} />;
});
const ForwardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
  <ClassComponent ref={ref} {...props} /

}

function FunctionComponent() {
  return null;
}

const MemoFunctionComponent = memo(FunctionComponent);

const ForwardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
  <ClassComponent ref={ref} {...props} />
)


eNamedFunction() {}

function formatContextForDisplay(name: string, value: any | string) {
  return (

      {name}:
{JSON.stringify(value, null, 2)}

  );
}

const contextData = {
  array: ['first', 'second', 'third'],
  bool: true,
  func: someNamedFunction,
  number: 123,
  object: {outer: {inner: {} as {...}}},
  string: 'abc',
  symbol: Symbol.for('symbol'),
  null: null,
  undefined: undefined,
};

class LegacyContextProvider extends Component<any> {
  static childContextTy

ropTypes.func,
    number: PropTypes.number,
    object: PropTypes.object,
    string: PropTypes.string,
    symbol: PropTypes.symbol,
    null: PropTypes.any,
    undefined: PropTypes.any,
  };

  getChildContext(): {
    array: Array<string>,
    bool: b

pes: {
    array: any,
    bool: any,
    func: any,
    null: any,
    number: any,
    object: any,
    string: any,
    symbol: any,
    undefined: any,
  } = {
    array: PropTypes.array,
    bool: PropTypes.bool,
    func: P


import * as React from 'react';
import {
  createContext,
  forwardRef,
  Fragment,
  memo,
  useCallback,
  useContext,
  useDebugValue,
  useEffect,
  useOptimistic,
  useState,
  use,
} from 'react';
import {useFormState, useFormStatus} from 'react-dom';

const object = {
  string: 'abc',
  number: 123,
  boolean: true,
  null: null,
  undefined: undefined,
  array: ['a', 'b', 'c'],
  object: {foo: 1, bar: 2, baz: 3},
};

function useNestedInnerHook() {
  return useState(123);
}
function useNestedOuterHo

useDebugValue('useDeepHookB');
  useDeepHookC();
}
function useDeepHookC() {
  useDebugValue('useDeepHookC');
  useDeepHookD();
}
function useDeepHookD() {
  useDebugValue('useDeepHookD');
  useDeepHookE();
}
function useDeepHookE() {
  useDebugValue('useD

ok() {
  return useNestedInnerHook();
}

function useCustomObject() {
  useDebugValue(object);
  return useState(123);
}

function useDeepHookA() {
  useDebugValue('useDeepHookA');
  useDeepHookB();
}
function useDeepHookB() {


opyright (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 * as React from 'react';

const objectWithModifiedHasOwnProperty = {
  foo: 'abc',
  bar: 123,
  hasOwnProperty: true,
};

const objectWithNullProto = Object.create(null);
// $FlowFixMe[prop-missing] found when upgrading Flow
objectWithNullProto.foo = 'abc';
// $FlowFixMe[prop-missing] found when upgrading F

unction EdgeCaseObjects(): React.Node {
  return (
    <ChildComponent
      objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
      objectWithNullProto={objectWithNullProto}
    />
  );
}

function ChildComponent(props: any) {
  return n

low
objectWithNullProto.bar = 123;

export default f


ight (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 * as React from 'react';
import {Fragment} from 'react';
import UnserializableProps from './UnserializableProps';
import CircularReferences from './CircularReferences';
import Contexts from './Contexts';
import CustomHooks from './CustomHooks';
import CustomObject from './CustomObject';
import EdgeCaseObjects fr

ectEvent';
import UseSyncExternalStore from './UseSyncExternalStore';

// TODO Add Immutable JS example

export default function InspectableElements(): React.Node {
  return (
    <Fragment>

Inspectable elements

      <SimpleValues />

om './EdgeCaseObjects.js';
import NestedProps from './NestedProps';
import SimpleValues from './SimpleValues';
import SymbolKeys from './SymbolKeys';
import UseMemoCache from './UseMemoCache';
import UseEffectEvent from './UseEff


ight (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 * as React from 'react';

const object = {
  string: 'abc',
  longString: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKJLMNOPQRSTUVWXYZ1234567890',
  emptyString: '',
  number: 123,
  boolean: true,
  undefined: undefined,
  null: null,
};

export default function ObjectProps(): React.Node {
  return (
    <ChildCompon

ect={{
        // Known limitation: we won't go deeper than several levels.
        // In the future, we might offer a way to request deeper access on demand.
        a: {
          b: {
            c: {
              d: {
                e: {

ent
      object={{
        outer: {
          inner: object,
        },
      }}
      array={['first', 'second', 'third']}
      objectInArray={[object]}
      arrayInObject={{array: ['first', 'second', 'third']}}
      deepObj


, 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 * as React from 'react';
import {Component} from 'react';

function noop() {}

export default class SimpleValues extends Component {
  anonymousFunction: () => void = () => {};

  render(): React.Node {
    return (
      <ChildComponent
        string="abc"
        emptyString=""
        number={123}
        undefined={undefined}

{Infinity}
        minusInfinity={-Infinity}
        true={true}
        false={false}
        function={noop}
        anonymousFunction={this.anonymousFunction}
        boundFunction={noop.bind(this)}
        regex={/abc[123]+/i}
      />
    );
  }
}

fu

     null={null}
        nan={NaN}
        infinity=


 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 * as React from 'react';

const base = Object.create(Object.prototype, {
  enumerableStringBase: {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true,
  },
  // $FlowFixMe[invalid-computed-prop]
  [Symbol('enumerableSymbolBase')]: {
    value: 1,
    writable: true,
    enumerable: true,
    confi

    writable: true,
    enumerable: false,
    configurable: true,
  },
});

const data = Object.create(base, {
  enumerableString: {
    value: 2,
    writable: true,
    enumerable: true,
    configurable: true,
  },
  nonEnumerableString: {
    value: 3

gurable: true,
  },
  nonEnumerableStringBase: {
    value: 1,
    writable: true,
    enumerable: false,
    configurable: true,
  },
  // $FlowFixMe[invalid-computed-prop]
  [Symbol('nonEnumerableSymbolBase')]: {
    value: 1,


ight (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 * as React from 'react';
import Immutable from 'immutable';

const set = new Set(['abc', 123]);
const map = new Map([
  ['name', 'Brian'],
  ['food', 'sushi'],
]);
const setOfSets = new Set([new Set(['a', 'b', 'c']), new Set([1, 2, 3])]);
const mapOfMaps = new Map([
  ['first', map],
  ['second', map],
]);
const

': 'xyz',
    xyz: 1,
  },
});
const bigInt = BigInt(123);

class Foo {
  flag = false;
  object: Object = {
    a: {b: {c: {d: 1}}},
  };
}

export default function UnserializableProps(): React.Node {
  return (
    <ChildComponent
      arrayBuffer={arra

 typedArray = Int8Array.from([100, -100, 0]);
const arrayBuffer = typedArray.buffer;
const dataView = new DataView(arrayBuffer);
const immutable = Immutable.fromJS({
  a: [{hello: 'there'}, 'fixed', true],
  b: 123,
  c: {
    '1


iates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

const {useState, useEffect, useSyncExternalStore} = React;

// Create a simple external store for demonstratio
function createStore<T>(initialValue: T): {
  subscribe: (cb: () => void) => () => any,
  getSnapshot: () => T,
  setValue: (newValue: T) => void,
} {
  let value = initialValue;
  const subscribers = new Set<() =>

e;
      subscribers.forEach(callback => callback());
    },
  };
}

const counterStore = createStore(0);
const themeStore = createStore('light');

export default function UseSyncExternalStore(): React.Node {
  return (
    <>
      <h2>useSyncExternalStor

void>();

  return {
    subscribe(callback) {
      subscribers.add(callback);
      return () => subscribers.delete(callback);
    },
    getSnapshot() {
      return value;
    },
    setValue(newValue) {
      value = newValu


 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 * as React from 'react';
import {Fragment} from 'react';

class ErrorBoundary extends React.Component {
  state: {hasError: boolean} = {hasError: false};

  static getDerivedStateFromError(error: any): {hasError: boolean} {
    return {hasError: true};
  }

  render(): any {
    const {hasError} = this.state;
    if (hasErro

        An error was thrown.
        </div>
      );
    }

    const {children} = this.props;
    return (
      <div
        style={{
          border: '1px solid gray',
          borderRadius: '0.25rem',
          margin: '0.5rem',
          padding: '0

r) {
      return (
        <div
          style={{
            color: 'red',
            border: '1px solid red',
            borderRadius: '0.25rem',
            margin: '0.5rem',
            padding: '0.5rem',
          }}>