UID refactor 2/n Split types into client and desktop types

Summary: This file was getting overwelhming, and this seemed like a reasonable way to split it

Reviewed By: elboman

Differential Revision: D47547532

fbshipit-source-id: ab2bfa22daabbed13ec1445da0cf8ba88bda12d7

desktop/plugins/public/ui-debugger/ClientTypes.tsx

@@ -7,67 +7,6 @@
  * @format
  */
 
-import {Atom} from 'flipper-plugin';
-
-export type UIState = {
-  viewMode: Atom<ViewMode>;
-  isConnected: Atom<boolean>;
-  isPaused: Atom<boolean>;
-  streamState: Atom<StreamState>;
-  searchTerm: Atom<string>;
-  isContextMenuOpen: Atom<boolean>;
-  hoveredNodes: Atom<Id[]>;
-  selectedNode: Atom<NodeSelection | undefined>;
-  highlightedNodes: Atom<Set<Id>>;
-  focusedNode: Atom<Id | undefined>;
-  expandedNodes: Atom<Set<Id>>;
-  visualiserWidth: Atom<number>;
-  frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
-  filterMainThreadMonitoring: Atom<boolean>;
-};
-
-export type ViewMode =
-  | {mode: 'default'}
-  | {mode: 'frameworkEventsTable'; treeRootId: Id};
-
-export type NodeSelection = {
-  id: Id;
-  source: SelectionSource;
-};
-
-export type OnSelectNode = (
-  node: Id | undefined,
-  source: SelectionSource,
-) => void;
-
-export type UIActions = {
-  onHoverNode: (node?: Id) => void;
-  onFocusNode: (focused?: Id) => void;
-  onContextMenuOpen: (open: boolean) => void;
-  onSelectNode: OnSelectNode;
-  onExpandNode: (node: Id) => void;
-  onCollapseNode: (node: Id) => void;
-  setVisualiserWidth: (width: number) => void;
-  onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
-  onSetViewMode: (viewMode: ViewMode) => void;
-};
-
-export type SelectionSource = 'visualiser' | 'tree' | 'keyboard';
-
-export type StreamState =
-  | {state: 'Ok'}
-  | {state: 'RetryingAfterError'}
-  | {
-      state: 'StreamInterceptorRetryableError';
-      error: StreamInterceptorError;
-      retryCallback: () => Promise<void>;
-    }
-  | {
-      state: 'FatalError';
-      error: Error;
-      clearCallBack: () => Promise<void>;
-    };
-
 export type Events = {
   init: InitEvent;
   subtreeUpdate: SubtreeUpdateEvent;
@@ -77,8 +16,6 @@ export type Events = {
   metadataUpdate: UpdateMetadataEvent;
 };
 
-export type StreamFlowState = {paused: boolean};
-
 export type FrameScanEvent = {
   frameTime: number;
   nodes: UINode[];
@@ -170,16 +107,6 @@ export type UpdateMetadataEvent = {
   attributeMetadata: Record<MetadataId, Metadata>;
 };
 
-export type NestedNode = {
-  id: Id;
-  name: string;
-  attributes: Record<string, Inspectable>;
-  children: NestedNode[];
-  bounds: Bounds;
-  tags: Tag[];
-  activeChildIdx?: number;
-};
-
 export type UINode = {
   id: Id;
   parent?: Id;
@@ -246,7 +173,6 @@ export type SnapshotInfo = {nodeId: Id; data: Snapshot};
 export type Id = number | string;
 
 export type MetadataId = number;
-export type TreeState = {expandedNodes: Id[]};
 
 export type Tag =
   | 'Native'
@@ -338,20 +264,3 @@ export type InspectableUnknown = {
   type: 'unknown';
   value: string;
 };
-
-export interface StreamInterceptor {
-  transformNodes(
-    nodes: Map<Id, UINode>,
-  ): Promise<[Map<Id, UINode>, Metadata[]]>;
-
-  transformMetadata(metadata: Metadata): Promise<Metadata>;
-}
-
-export class StreamInterceptorError extends Error {
-  title: string;
-
-  constructor(title: string, message: string) {
-    super(message);
-    this.title = title;
-  }
-}

desktop/plugins/public/ui-debugger/DesktopTypes.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import {Atom} from 'flipper-plugin';
+import {
+  Id,
+  FrameworkEventType,
+  Inspectable,
+  Bounds,
+  Tag,
+  UINode,
+  Metadata,
+} from './ClientTypes';
+
+export type UIState = {
+  viewMode: Atom<ViewMode>;
+  isConnected: Atom<boolean>;
+  isPaused: Atom<boolean>;
+  streamState: Atom<StreamState>;
+  searchTerm: Atom<string>;
+  isContextMenuOpen: Atom<boolean>;
+  hoveredNodes: Atom<Id[]>;
+  selectedNode: Atom<NodeSelection | undefined>;
+  highlightedNodes: Atom<Set<Id>>;
+  focusedNode: Atom<Id | undefined>;
+  expandedNodes: Atom<Set<Id>>;
+  visualiserWidth: Atom<number>;
+  frameworkEventMonitoring: Atom<Map<FrameworkEventType, boolean>>;
+  filterMainThreadMonitoring: Atom<boolean>;
+};
+
+export type StreamFlowState = {paused: boolean};
+
+export type NestedNode = {
+  id: Id;
+  name: string;
+  attributes: Record<string, Inspectable>;
+  children: NestedNode[];
+  bounds: Bounds;
+  tags: Tag[];
+  activeChildIdx?: number;
+};
+
+export type ViewMode =
+  | {mode: 'default'}
+  | {mode: 'frameworkEventsTable'; treeRootId: Id};
+
+export type NodeSelection = {
+  id: Id;
+  source: SelectionSource;
+};
+
+export type OnSelectNode = (
+  node: Id | undefined,
+  source: SelectionSource,
+) => void;
+
+export type UIActions = {
+  onHoverNode: (node?: Id) => void;
+  onFocusNode: (focused?: Id) => void;
+  onContextMenuOpen: (open: boolean) => void;
+  onSelectNode: OnSelectNode;
+  onExpandNode: (node: Id) => void;
+  onCollapseNode: (node: Id) => void;
+  setVisualiserWidth: (width: number) => void;
+  onSetFilterMainThreadMonitoring: (toggled: boolean) => void;
+  onSetViewMode: (viewMode: ViewMode) => void;
+};
+
+export type SelectionSource = 'visualiser' | 'tree' | 'keyboard';
+
+export type StreamState =
+  | {state: 'Ok'}
+  | {state: 'RetryingAfterError'}
+  | {
+      state: 'StreamInterceptorRetryableError';
+      error: StreamInterceptorError;
+      retryCallback: () => Promise<void>;
+    }
+  | {
+      state: 'FatalError';
+      error: Error;
+      clearCallBack: () => Promise<void>;
+    };
+
+export interface StreamInterceptor {
+  transformNodes(
+    nodes: Map<Id, UINode>,
+  ): Promise<[Map<Id, UINode>, Metadata[]]>;
+
+  transformMetadata(metadata: Metadata): Promise<Metadata>;
+}
+
+export class StreamInterceptorError extends Error {
+  title: string;
+
+  constructor(title: string, message: string) {
+    super(message);
+    this.title = title;
+  }
+}

desktop/plugins/public/ui-debugger/components/Controls.tsx

@@ -26,7 +26,7 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
-import {FrameworkEventType} from '../types';
+import {FrameworkEventType} from '../ClientTypes';
 import {tracker} from '../utils/tracker';
 import {debounce} from 'lodash';
 

desktop/plugins/public/ui-debugger/components/FrameworkEventsTable.tsx

@@ -16,7 +16,7 @@ import {
   usePlugin,
 } from 'flipper-plugin';
 import React, {useEffect, useRef} from 'react';
-import {FrameworkEvent, Id} from '../types';
+import {FrameworkEvent, Id} from '../ClientTypes';
 import {plugin} from '../index';
 import {Button, Tooltip} from 'antd';
 

desktop/plugins/public/ui-debugger/components/PerfStats.tsx

@@ -10,11 +10,11 @@
 import {
   PerformanceStatsEvent,
   DynamicPerformanceStatsEvent,
-  UIState,
   Id,
   UINode,
   FrameworkEvent,
-} from '../types';
+} from '../ClientTypes';
+import {UIState} from '../DesktopTypes';
 import React, {useMemo} from 'react';
 import {
   DataInspector,

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -7,14 +7,8 @@
  * @format
  */
 
-import {
+import {FrameworkEvent, FrameworkEventType, Id, UINode} from '../ClientTypes';
-  FrameworkEvent,
+import {OnSelectNode, ViewMode} from '../DesktopTypes';
-  FrameworkEventType,
-  Id,
-  OnSelectNode,
-  UINode,
-  ViewMode,
-} from '../types';
 import React, {
   ReactNode,
   Ref,

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -8,14 +8,8 @@
  */
 
 import React, {useEffect, useMemo, useRef} from 'react';
-import {
+import {Bounds, Coordinate, Id, UINode} from '../ClientTypes';
-  Bounds,
+import {NestedNode, OnSelectNode} from '../DesktopTypes';
-  Coordinate,
-  Id,
-  NestedNode,
-  OnSelectNode,
-  UINode,
-} from '../types';
 
 import {produce, styled, theme, usePlugin, useValue} from 'flipper-plugin';
 import {plugin} from '../index';

desktop/plugins/public/ui-debugger/components/fb-stubs/IDEContextMenu.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 
-import {UINode} from '../../types';
+import {UINode} from '../../ClientTypes';
 
 export async function prefetchSourceFileLocation(_: UINode) {}
 

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -18,7 +18,7 @@ import {
   theme,
 } from 'flipper-plugin';
 import {useHotkeys} from 'react-hotkeys-hook';
-import {Id, Metadata, MetadataId, UINode} from '../types';
+import {Id, Metadata, MetadataId, UINode} from '../ClientTypes';
 import {PerfStats} from './PerfStats';
 import {Visualization2D} from './Visualization2D';
 import {Inspector} from './sidebar/Inspector';

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -19,7 +19,7 @@ import {
   usePlugin,
   useValue,
 } from 'flipper-plugin';
-import {Id, Metadata, MetadataId, UINode} from '../../types';
+import {Id, Metadata, MetadataId, UINode} from '../../ClientTypes';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
 import {Tooltip} from 'antd';

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -14,7 +14,7 @@ import {
   Metadata,
   MetadataId,
   UINode,
-} from '../../../types';
+} from '../../../ClientTypes';
 import {DataInspector, Panel, styled} from 'flipper-plugin';
 import {Col, Row} from 'antd';
 import {displayableName} from '../utilities/displayableName';

desktop/plugins/public/ui-debugger/components/sidebar/inspector/BoundsInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Bounds} from '../../../types';
+import {Bounds} from '../../../ClientTypes';
 import {InspectorStyle} from './Styles';
 
 type Props = {

desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import {Col, Popover, Row} from 'antd';
-import {Color} from '../../../types';
+import {Color} from '../../../ClientTypes';
 import {SketchPicker, ColorResult} from 'react-color';
 import {styled} from 'flipper-plugin';
 import {

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Coordinate3DInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Coordinate3D} from '../../../types';
+import {Coordinate3D} from '../../../ClientTypes';
 import {Col, Row} from 'antd';
 import {
   CenteredContentStyle,

desktop/plugins/public/ui-debugger/components/sidebar/inspector/CoordinateInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Coordinate} from '../../../types';
+import {Coordinate} from '../../../ClientTypes';
 import {Col, Row} from 'antd';
 import {
   CenteredContentStyle,

desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {UINode} from '../../../types';
+import {UINode} from '../../../ClientTypes';
 
 type Props = {
   node: UINode;

desktop/plugins/public/ui-debugger/components/sidebar/inspector/FrameworkEventsInspector.tsx

@@ -9,7 +9,7 @@
 
 import {Button} from 'antd';
 import {theme, TimelineDataDescription} from 'flipper-plugin';
-import {FrameworkEvent, UINode} from '../../../types';
+import {FrameworkEvent, UINode} from '../../../ClientTypes';
 import React, {ReactNode, useState} from 'react';
 import {StackTraceInspector} from './StackTraceInspector';
 

desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import {Col, Row} from 'antd';
-import {UINode} from '../../../types';
+import {UINode} from '../../../ClientTypes';
 import {styled, theme} from 'flipper-plugin';
 import {CodeInspector} from './fb-stubs/CodeInspector';
 import {TopSpacedContainerStyle} from './Styles';

desktop/plugins/public/ui-debugger/components/sidebar/inspector/SizeInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Size} from '../../../types';
+import {Size} from '../../../ClientTypes';
 import {Col, Row} from 'antd';
 import {
   CenteredContentStyle,

desktop/plugins/public/ui-debugger/components/sidebar/inspector/SpaceBoxInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {SpaceBox} from '../../../types';
+import {SpaceBox} from '../../../ClientTypes';
 import {InspectorStyle} from './Styles';
 
 type Props = {

desktop/plugins/public/ui-debugger/components/sidebar/inspector/StackTraceInspector.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 // eslint-disable-next-line rulesdir/no-restricted-imports-clone
 import {StackTrace} from 'flipper';
-import {Tag} from '../../../types';
+import {Tag} from '../../../ClientTypes';
 
 const FacebookLibraries = ['Facebook'];
 const CKFilter = ['UIDCKAnalyticsListener'];

desktop/plugins/public/ui-debugger/components/sidebar/inspector/fb-stubs/CodeInspector.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Tag} from '../../../../types';
+import {Tag} from '../../../../ClientTypes';
 
 type CodeInspectorProps = {
   name: string;

desktop/plugins/public/ui-debugger/fb-stubs/StreamInterceptor.tsx

@@ -8,7 +8,8 @@
  */
 
 import {DeviceOS} from 'flipper-plugin';
-import {Id, Metadata, StreamInterceptor, UINode} from '../types';
+import {Id, Metadata, UINode} from '../ClientTypes';
+import {StreamInterceptor} from '../DesktopTypes';
 
 export function getStreamInterceptor(_: DeviceOS): StreamInterceptor {
   return new NoOpStreamInterceptor();

desktop/plugins/public/ui-debugger/hooks/useDelay.tsx

@@ -7,7 +7,6 @@
  * @format
  */
 
-import {Atom} from 'flipper-plugin';
 import {useEffect, useRef, useState} from 'react';
 
 export function useDelay(delayTimeMs: number) {

desktop/plugins/public/ui-debugger/index.tsx

@@ -22,17 +22,19 @@ import {
   Id,
   Metadata,
   MetadataId,
-  NodeSelection,
   PerformanceStatsEvent,
-  SelectionSource,
   SnapshotInfo,
+  UINode,
+} from './ClientTypes';
+import {
+  UIState,
+  NodeSelection,
+  SelectionSource,
   StreamInterceptorError,
   StreamState,
   UIActions,
-  UINode,
-  UIState,
   ViewMode,
-} from './types';
+} from './DesktopTypes';
 import {Draft} from 'immer';
 import {tracker} from './utils/tracker';
 import {getStreamInterceptor} from './fb-stubs/StreamInterceptor';
@@ -531,4 +533,4 @@ function collapseinActiveChildren(node: UINode, expandedNodes: Draft<Set<Id>>) {
 const HighlightTime = 300;
 
 export {Component} from './components/main';
-export * from './types';
+export * from './ClientTypes';

desktop/plugins/public/ui-debugger/utils/dataTransform.tsx

@@ -7,7 +7,12 @@
  * @format
  */
 
-import {Inspectable, InspectableObject, Metadata, MetadataId} from '../types';
+import {
+  Inspectable,
+  InspectableObject,
+  Metadata,
+  MetadataId,
+} from '../ClientTypes';
 
 function transformAny(
   metadata: Map<MetadataId, Metadata>,

desktop/plugins/public/ui-debugger/utils/tracker.tsx

@@ -8,8 +8,9 @@
  */
 
 import {getFlipperLib} from 'flipper-plugin';
-import {SelectionSource} from '..';
+
-import {FrameworkEventType, Tag} from '../types';
+import {FrameworkEventType, Tag} from '../ClientTypes';
+import {SelectionSource} from '../DesktopTypes';
 
 const UI_DEBUGGER_IDENTIFIER = 'ui-debugger';