Split flipper-plugin package

Summary:
flipper-server-companion depends on flipper-plugin. flipper-plugin includes dependencies that run only in a browser. Splitting flipper-plugin into core and browser packages helps to avoid including browser-only dependencies into flipper-server bundle.
As a result, bundle size could be cut in half. Subsequently, RSS usage drops as there is twice as less code to process for V8.

Note: it currently breaks external flipper-data-source package. It will be restored in subsequent diffs

Reviewed By: lblasa

Differential Revision: D38658285

fbshipit-source-id: 751b11fa9f3a2d938ce166687b8310ba8b059dee

desktop/flipper-plugin/src/ui/DataFormatter.tsx

@@ -15,8 +15,8 @@ import {
 import {Button, Typography} from 'antd';
 import {isPlainObject, pad} from 'lodash';
 import React, {createElement, Fragment, isValidElement, useState} from 'react';
-import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib';
-import {safeStringify} from '../utils/safeStringify';
+import {_tryGetFlipperLibImplementation} from 'flipper-plugin-core';
+import {safeStringify} from 'flipper-plugin-core';
 import {urlRegex} from '../utils/urlRegex';
 import {useTableRedraw} from '../data-source/index';
 import {theme} from './theme';
@@ -196,7 +196,7 @@ export function TruncateHelper({
       <Button
         icon={<CopyOutlined />}
         onClick={() => {
-          tryGetFlipperLibImplementation()?.writeTextToClipboard(value);
+          _tryGetFlipperLibImplementation()?.writeTextToClipboard(value);
         }}
         size="small"
         type="text"

desktop/flipper-plugin/src/ui/DataList.tsx

@@ -22,7 +22,7 @@ import {theme} from './theme';
 import styled from '@emotion/styled';
 import {DataTableManager} from './data-table/DataTableManager';
 import {useAssertStableRef} from '../utils/useAssertStableRef';
-import {DataSource} from '../data-source';
+import {DataSource} from 'flipper-plugin-core';
 import {useMakeStableCallback} from '../utils/useMakeStableCallback';
 
 const {Text} = Typography;
@@ -95,7 +95,9 @@ export const DataList: (<T extends object>(
   }: DataListProps<T>) {
     // if a tableManagerRef is provided, we piggy back on that same ref
     // eslint-disable-next-line
-    const tableManagerRef = tableProps.tableManagerRef ?? createRef<undefined | DataTableManager<T>>();
+    const tableManagerRef =
+      tableProps.tableManagerRef ??
+      createRef<undefined | DataTableManager<T>>();
 
     useAssertStableRef(onRenderItem, 'onRenderItem');
     useAssertStableRef(enableArrow, 'enableArrow');

desktop/flipper-plugin/src/ui/DetailSidebar.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib';
+import {_tryGetFlipperLibImplementation} from 'flipper-plugin-core';
 import {Layout} from './Layout';
 
 export type DetailSidebarProps = {
@@ -19,7 +19,7 @@ export type DetailSidebarProps = {
 
 /* eslint-disable react-hooks/rules-of-hooks */
 export function DetailSidebar(props: DetailSidebarProps) {
-  const lib = tryGetFlipperLibImplementation();
+  const lib = _tryGetFlipperLibImplementation();
   if (lib?.DetailsSidebarImplementation) {
     return <lib.DetailsSidebarImplementation {...props} />;
   }

desktop/flipper-plugin/src/ui/Dialog.tsx

@@ -8,7 +8,8 @@
  */
 
 import {Alert, ButtonProps, Input, Modal, Radio, Space, Typography} from 'antd';
-import {createState, useValue} from '../state/atom';
+import {createState} from 'flipper-plugin-core';
+import {useValue} from '../state/atom';
 import React from 'react';
 import {renderReactRoot} from '../utils/renderReactRoot';
 import {Layout} from './Layout';

desktop/flipper-plugin/src/ui/FileSelector.tsx

@@ -24,7 +24,7 @@ import {
   FileEncoding,
   FlipperLib,
   getFlipperLib,
-} from '../plugin/FlipperLib';
+} from 'flipper-plugin-core';
 import {fromUint8Array} from 'js-base64';
 import {assertNever} from 'flipper-common';
 

desktop/flipper-plugin/src/ui/MasterDetail.tsx

@@ -29,8 +29,9 @@ import {
 } from '@ant-design/icons';
 import {Button} from 'antd';
 import {usePluginInstance} from '../plugin/PluginContext';
-import {Atom, createState, useValue} from '../state/atom';
+import {Atom, createState} from 'flipper-plugin-core';
 import {useAssertStableRef} from '../utils/useAssertStableRef';
+import {useValue} from '../state/atom';
 
 type MasterDetailProps<T> = {
   /**

desktop/flipper-plugin/src/ui/NUX.tsx

@@ -19,12 +19,13 @@ import styled from '@emotion/styled';
 import {keyframes} from '@emotion/css';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {SandyPluginContext} from '../plugin/PluginContext';
-import {createState, useValue} from '../state/atom';
-import {SandyDevicePluginInstance} from '../plugin/DevicePlugin';
+import {createState} from 'flipper-plugin-core';
+import {useValue} from '../state/atom';
+import {_SandyDevicePluginInstance} from 'flipper-plugin-core';
 import {Layout} from './Layout';
 import {BulbTwoTone} from '@ant-design/icons';
 import type {TooltipPlacement} from 'antd/lib/tooltip';
-import {SandyPluginInstance} from '../plugin/Plugin';
+import {_SandyPluginInstance} from 'flipper-plugin-core';
 import {theme} from './theme';
 import {Tracked} from './Tracked';
 import {sha256} from '../utils/sha256';
@@ -37,7 +38,7 @@ const storageKey = `FLIPPER_NUX_STATE`;
 
 export async function getNuxKey(
   elem: React.ReactNode,
-  currentPlugin?: SandyPluginInstance | SandyDevicePluginInstance,
+  currentPlugin?: _SandyPluginInstance | _SandyDevicePluginInstance,
 ): Promise<string> {
   const hash = await sha256(reactElementToJSXString(elem));
   return `${currentPlugin?.definition.id ?? 'flipper'}:${hash}`;
@@ -59,14 +60,14 @@ export function createNuxManager() {
   return {
     async markRead(
       elem: React.ReactNode,
-      currentPlugin?: SandyPluginInstance | SandyDevicePluginInstance,
+      currentPlugin?: _SandyPluginInstance | _SandyDevicePluginInstance,
     ): Promise<void> {
       readMap[await getNuxKey(elem, currentPlugin)] = true;
       save();
     },
     async isRead(
       elem: React.ReactNode,
-      currentPlugin?: SandyPluginInstance | SandyDevicePluginInstance,
+      currentPlugin?: _SandyPluginInstance | _SandyDevicePluginInstance,
     ): Promise<boolean> {
       return !!readMap[await getNuxKey(elem, currentPlugin)];
     },

desktop/flipper-plugin/src/ui/data-inspector/DataInspectorNode.tsx

@@ -26,8 +26,8 @@ import {getSortedKeys} from './utils';
 import React from 'react';
 import {useHighlighter, HighlightManager} from '../Highlight';
 import {Dropdown, Menu, Tooltip} from 'antd';
-import {tryGetFlipperLibImplementation} from '../../plugin/FlipperLib';
-import {safeStringify} from '../../utils/safeStringify';
+import {_tryGetFlipperLibImplementation} from 'flipper-plugin-core';
+import {safeStringify} from 'flipper-plugin-core';
 import {useInUnitTest} from '../../utils/useInUnitTest';
 import {theme} from '../theme';
 
@@ -615,7 +615,7 @@ export const DataInspectorNode: React.FC<DataInspectorProps> = memo(
     }
 
     function getContextMenu() {
-      const lib = tryGetFlipperLibImplementation();
+      const lib = _tryGetFlipperLibImplementation();
       const extraItems = additionalContextMenuItems
         ? [
             additionalContextMenuItems(parentPath, value, name),

desktop/flipper-plugin/src/ui/data-table/DataTable.tsx

@@ -26,8 +26,6 @@ import {Percentage} from '../../utils/widthUtils';
 import {
   DataSourceRendererVirtual,
   DataSourceRendererStatic,
-  DataSource,
-  DataSourceView,
   DataSourceVirtualizer,
 } from '../../data-source/index';
 import {
@@ -53,7 +51,11 @@ import {Formatter} from '../DataFormatter';
 import {usePluginInstanceMaybe} from '../../plugin/PluginContext';
 import {debounce} from 'lodash';
 import {useInUnitTest} from '../../utils/useInUnitTest';
-import {createDataSource} from '../../state/createDataSource';
+import {
+  createDataSource,
+  DataSource,
+  _DataSourceView,
+} from 'flipper-plugin-core';
 import {HighlightProvider} from '../Highlight';
 import {useLatestRef} from '../../utils/useLatestRef';
 
@@ -77,7 +79,7 @@ type DataTableBaseProps<T = any> = {
   onContextMenu?: (selection: undefined | T) => React.ReactElement;
   onRenderEmpty?:
     | null
-    | ((dataView?: DataSourceView<T, T[keyof T]>) => React.ReactElement);
+    | ((dataView?: _DataSourceView<T, T[keyof T]>) => React.ReactElement);
 };
 
 export type ItemRenderer<T> = (
@@ -771,7 +773,7 @@ function syncRecordsToDataSource<T>(
 }
 
 function createDefaultEmptyRenderer<T>(dataTableManager?: DataTableManager<T>) {
-  return (dataView?: DataSourceView<T, T[keyof T]>) => (
+  return (dataView?: _DataSourceView<T, T[keyof T]>) => (
     <EmptyTable dataView={dataView} dataManager={dataTableManager} />
   );
 }
@@ -780,7 +782,7 @@ function EmptyTable<T>({
   dataView,
   dataManager,
 }: {
-  dataView?: DataSourceView<T, T[keyof T]>;
+  dataView?: _DataSourceView<T, T[keyof T]>;
   dataManager?: DataTableManager<T>;
 }) {
   const resetFilters = useCallback(() => {

desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx

@@ -10,13 +10,10 @@
 import type {DataTableColumn} from './DataTable';
 import {Percentage} from '../../utils/widthUtils';
 import {MutableRefObject, Reducer} from 'react';
-import {
-  DataSource,
-  DataSourceView,
-  DataSourceVirtualizer,
-} from '../../data-source/index';
+import {DataSourceVirtualizer} from '../../data-source/index';
 import produce, {castDraft, immerable, original} from 'immer';
 import {theme} from '../theme';
+import {DataSource, _DataSourceView} from 'flipper-plugin-core';
 
 export type OnColumnResize = (id: string, size: number | Percentage) => void;
 export type Sorting<T = any> = {
@@ -121,7 +118,7 @@ type DataManagerActions<T> =
 
 type DataManagerConfig<T> = {
   dataSource: DataSource<T, T[keyof T]>;
-  dataView: DataSourceView<T, T[keyof T]>;
+  dataView: _DataSourceView<T, T[keyof T]>;
   defaultColumns: DataTableColumn<T>[];
   scope: string;
   onSelect: undefined | ((item: T | undefined, items: T[]) => void);
@@ -299,7 +296,7 @@ export const dataTableManagerReducer = produce<
     }
     case 'setColumnFilterFromSelection': {
       const items = getSelectedItems(
-        config.dataView as DataSourceView<any, any>,
+        config.dataView as _DataSourceView<any, any>,
         draft.selection,
       );
       items.forEach((item, index) => {
@@ -376,7 +373,7 @@ export type DataTableManager<T> = {
   toggleColumnVisibility(column: keyof T): void;
   sortColumn(column: keyof T, direction?: SortDirection): void;
   setSearchValue(value: string, addToHistory?: boolean): void;
-  dataView: DataSourceView<T, T[keyof T]>;
+  dataView: _DataSourceView<T, T[keyof T]>;
   toggleSearchValue(): void;
   toggleHighlightSearch(): void;
   setSearchHighlightColor(color: string): void;
@@ -386,7 +383,7 @@ export type DataTableManager<T> = {
 };
 
 export function createDataTableManager<T>(
-  dataView: DataSourceView<T, T[keyof T]>,
+  dataView: _DataSourceView<T, T[keyof T]>,
   dispatch: DataTableDispatch<T>,
   stateRef: MutableRefObject<DataManagerState<T>>,
 ): DataTableManager<T> {
@@ -535,14 +532,14 @@ function addColumnFilter<T>(
 }
 
 export function getSelectedItem<T>(
-  dataView: DataSourceView<T, T[keyof T]>,
+  dataView: _DataSourceView<T, T[keyof T]>,
   selection: Selection,
 ): T | undefined {
   return selection.current < 0 ? undefined : dataView.get(selection.current);
 }
 
 export function getSelectedItems<T>(
-  dataView: DataSourceView<T, T[keyof T]>,
+  dataView: _DataSourceView<T, T[keyof T]>,
   selection: Selection,
 ): T[] {
   return [...selection.items]

desktop/flipper-plugin/src/ui/data-table/TableContextMenu.tsx

@@ -19,10 +19,12 @@ import {
   Selection,
 } from './DataTableManager';
 import React from 'react';
-import {tryGetFlipperLibImplementation} from '../../plugin/FlipperLib';
+import {
+  _tryGetFlipperLibImplementation,
+  _DataSourceView,
+} from 'flipper-plugin-core';
 import {DataTableColumn} from './DataTable';
 import {toFirstUpper} from '../../utils/toFirstUpper';
-import {DataSourceView} from '../../data-source/index';
 import {renderColumnValue} from './TableRow';
 import {textContent} from '../../utils/textContent';
 import {theme} from '../theme';
@@ -31,7 +33,7 @@ const {Item, SubMenu} = Menu;
 const {Option} = Select;
 
 export function tableContextMenuFactory<T>(
-  dataView: DataSourceView<T, T[keyof T]>,
+  dataView: _DataSourceView<T, T[keyof T]>,
   dispatch: DataTableDispatch<T>,
   selection: Selection,
   highlightSearchSetting: SearchHighlightSetting,
@@ -45,7 +47,7 @@ export function tableContextMenuFactory<T>(
   onContextMenu?: (selection: undefined | T) => React.ReactElement,
   sideBySideOption?: React.ReactElement,
 ) {
-  const lib = tryGetFlipperLibImplementation();
+  const lib = _tryGetFlipperLibImplementation();
   if (!lib) {
     return (
       <Menu>

desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx

@@ -10,7 +10,7 @@
 import React, {createRef} from 'react';
 import {DataTable, DataTableColumn} from '../DataTable';
 import {render, act} from '@testing-library/react';
-import {createDataSource} from '../../../state/createDataSource';
+import {createDataSource} from 'flipper-plugin-core';
 import {computeDataTableFilter, DataTableManager} from '../DataTableManager';
 import {Button} from 'antd';
 import {sleep} from 'flipper-common';

desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx

@@ -16,8 +16,8 @@ import {theme} from '../theme';
 import {Layout} from '../Layout';
 import {
   getFlipperLib,
-  tryGetFlipperLibImplementation,
-} from '../../plugin/FlipperLib';
+  _tryGetFlipperLibImplementation,
+} from 'flipper-plugin-core';
 import {DownOutlined, RightOutlined} from '@ant-design/icons';
 
 const {Text} = Typography;
@@ -533,7 +533,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
   };
 
   isDarwin =
-    tryGetFlipperLibImplementation()?.environmentInfo.os.platform === 'darwin';
+    _tryGetFlipperLibImplementation()?.environmentInfo.os.platform === 'darwin';
 
   onKeyDown = (e: KeyboardEvent<any>) => {
     const {selected} = this.props;