Move app/src (mostly) to flipper-ui-core/src

Summary:
This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts.

* But at least flipper-ui-core is Electron free :)
* Killed all cross module imports as well, as they where now even more in the way
* Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that)
* Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those

Follow up work:
* make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here
* remove node deps (aigoncharov)
* figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module
* clean up deps

Reviewed By: aigoncharov

Differential Revision: D32427722

fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70

desktop/.vscode/settings.json

@@ -16,10 +16,10 @@
     }
   ],
   "[typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"

desktop/app/package.json

@@ -14,81 +14,15 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
-    "@emotion/css": "^11.5.0",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@iarna/toml": "^2.2.5",
-    "@tanishiking/aho-corasick": "^0.0.1",
-    "@types/archiver": "^5.1.1",
-    "@types/uuid": "^8.3.1",
-    "adbkit": "^2.11.1",
-    "adbkit-logcat": "^2.0.1",
-    "antd": "4.16.8",
-    "archiver": "^5.0.2",
-    "async-mutex": "^0.3.2",
-    "axios": "^0.22.0",
-    "cbuffer": "^2.2.0",
-    "console-feed": "^3.2.2",
-    "crc32": "^0.2.2",
-    "deep-equal": "^2.0.5",
-    "expand-tilde": "^2.0.2",
-    "flipper-client-sdk": "^0.0.3",
     "flipper-common": "0.0.0",
-    "flipper-doctor": "0.0.0",
-    "flipper-plugin": "0.0.0",
-    "flipper-plugin-lib": "0.0.0",
     "flipper-server-core": "0.0.0",
     "flipper-ui-core": "0.0.0",
-    "fs-extra": "^10.0.0",
-    "immer": "^9.0.6",
     "invariant": "^2.2.2",
-    "js-base64": "^3.7.2",
-    "lodash": "^4.17.21",
-    "lodash.memoize": "^4.1.2",
-    "open": "^8.3.0",
-    "openssl-wrapper": "^0.3.4",
-    "p-filter": "^2.1.0",
-    "p-map": "^4.0.0",
-    "promise-retry": "^2.0.1",
-    "promisify-child-process": "^4.1.0",
-    "react": "17.0.2",
-    "react-async": "^10.0.0",
-    "react-debounce-render": "^7.0.0",
-    "react-dom": "^17.0.1",
-    "react-electron-web-view": "^2.0.1",
-    "react-element-to-jsx-string": "^14.3.1",
-    "react-markdown": "^6.0.3",
-    "react-player": "^2.9.0",
-    "react-redux": "^7.2.6",
-    "react-test-renderer": "^17.0.1",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
-    "recursive-readdir": "^2.2.2",
-    "redux": "^4.1.1",
-    "redux-persist": "^6.0.0",
-    "reselect": "^4.0.0",
-    "semver": "^7.3.5",
-    "tmp": "^0.2.1",
-    "uuid": "^8.3.2",
-    "which": "^2.0.1",
-    "ws": "^8.2.3",
-    "xdg-basedir": "^4.0.0"
-  },
-  "optionalDependencies": {
-    "7zip-bin-mac": "^1.0.1"
-  },
-  "devDependencies": {
-    "@testing-library/dom": "^8.10.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/lodash.memoize": "^4.1.6",
-    "@types/split2": "^3.2.1",
-    "flipper-test-utils": "0.0.0",
     "metro-runtime": "^0.66.2",
-    "mock-fs": "^5.0.0",
+    "pretty-format": "^27.3.1"
-    "pretty-format": "^27.3.1",
+  },
-    "react-refresh": "^0.10.0",
+  "optionalDependencies": {},
-    "redux-mock-store": "^1.0.1",
+  "devDependencies": {
-    "ts-jest": "^26.5.6"
+    "react-refresh": "^0.10.0"
   }
 }

desktop/app/src/electron/initializeElectron.tsx

@@ -22,15 +22,59 @@ import {
   clipboard,
   shell,
 } from 'electron';
-import {getRenderHostInstance, setRenderHostInstance} from '../RenderHost';
+import type {RenderHost} from 'flipper-ui-core';
-import isProduction from '../utils/isProduction';
 import fs from 'fs';
 import {setupMenuBar} from './setupMenuBar';
+import os from 'os';
+
+declare global {
+  interface Window {
+    FlipperRenderHostInstance: RenderHost;
+  }
+}
+
+if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
+  // By default Node.JS has its internal certificate storage and doesn't use
+  // the system store. Because of this, it's impossible to access ondemand / devserver
+  // which are signed using some internal self-issued FB certificates. These certificates
+  // are automatically installed to MacOS system store on FB machines, so here we're using
+  // this "mac-ca" library to load them into Node.JS.
+  global.electronRequire('mac-ca');
+}
 
 export function initializeElectron() {
   const app = remote.app;
-  setRenderHostInstance({
+  const execPath = process.execPath || remote.process.execPath;
+  const isProduction = !/node_modules[\\/]electron[\\/]/.test(execPath);
+
+  function restart(update: boolean = false) {
+    if (isProduction) {
+      if (update) {
+        const options = {
+          args: process.argv
+            .splice(0, 1)
+            .filter((arg) => arg !== '--no-launcher' && arg !== '--no-updater'),
+        };
+        remote.app.relaunch(options);
+      } else {
+        remote.app.relaunch();
+      }
+      remote.app.exit();
+    } else {
+      // Relaunching the process with the standard way doesn't work in dev mode.
+      // So instead we're sending a signal to dev server to kill the current instance of electron and launch new.
+      fetch(
+        `${window.FlipperRenderHostInstance.env.DEV_SERVER_URL}/_restartElectron`,
+        {
+          method: 'POST',
+        },
+      );
+    }
+  }
+
+  window.FlipperRenderHostInstance = {
     processId: remote.process.pid,
+    isProduction,
     readTextFromClipboard() {
       return clipboard.readText();
     },
@@ -95,16 +139,23 @@ export function initializeElectron() {
     paths: {
       appPath: app.getAppPath(),
       homePath: app.getPath('home'),
-      execPath: process.execPath || remote.process.execPath,
+      execPath,
       staticPath: getStaticDir(),
       tempPath: app.getPath('temp'),
       desktopPath: app.getPath('desktop'),
     },
-  });
+    loadDefaultPlugins: getDefaultPluginsIndex,
+  };
 
   setupMenuBar();
 }
 
+function getDefaultPluginsIndex() {
+  // eslint-disable-next-line import/no-unresolved
+  const index = require('../defaultPlugins');
+  return index.default || index;
+}
+
 function getStaticDir() {
   let _staticPath = path.resolve(__dirname, '..', '..', '..', 'static');
   if (fs.existsSync(_staticPath)) {
@@ -118,25 +169,3 @@ function getStaticDir() {
   }
   return _staticPath;
 }
-
-function restart(update: boolean = false) {
-  if (isProduction()) {
-    if (update) {
-      const options = {
-        args: process.argv
-          .splice(0, 1)
-          .filter((arg) => arg !== '--no-launcher' && arg !== '--no-updater'),
-      };
-      remote.app.relaunch(options);
-    } else {
-      remote.app.relaunch();
-    }
-    remote.app.exit();
-  } else {
-    // Relaunching the process with the standard way doesn't work in dev mode.
-    // So instead we're sending a signal to dev server to kill the current instance of electron and launch new.
-    fetch(`${getRenderHostInstance().env.DEV_SERVER_URL}/_restartElectron`, {
-      method: 'POST',
-    });
-  }
-}

desktop/app/src/electron/setupMenuBar.tsx

@@ -14,7 +14,6 @@ import electron, {MenuItemConstructorOptions} from 'electron';
 import {getLogger} from 'flipper-common';
 import {_buildInMenuEntries, _wrapInteractionHandler} from 'flipper-plugin';
 import {webFrame} from 'electron';
-import reloadFlipper from '../utils/reloadFlipper';
 
 export function setupMenuBar() {
   const template = getTemplate(electron.remote.app);
@@ -44,8 +43,13 @@ function getTemplate(app: electron.App): Array<MenuItemConstructorOptions> {
       label: 'Reload',
       accelerator: 'CmdOrCtrl+R',
       click: function (_, _focusedWindow: electron.BrowserWindow | undefined) {
+        try {
           getLogger().track('usage', 'reload');
-        reloadFlipper();
+        } catch (e) {
+          // Ignore track failures (which can happen if we try to reload from a broken state)
+          console.warn('Could not track reload', e);
+        }
+        window.location.reload();
       },
     },
     {

desktop/app/src/fb-stubs/WatchTools.tsx

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its 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 React, {Component} from 'react';
-import {StaticViewProps} from '../reducers/connections';
-import {Text} from '../ui';
-
-export default class extends Component<StaticViewProps, {}> {
-  render() {
-    return <Text>Debug Videos on Watch Bugs.</Text>;
-  }
-}

desktop/app/src/index.tsx

@@ -7,126 +7,5 @@
  * @format
  */
 
-export {default as styled} from '@emotion/styled';
+// Ideally we don't want to expose those, but this is for legacy compatibility
-export {keyframes} from '@emotion/css';
+export * from 'flipper-ui-core';
-export {produce} from 'immer';
-
-export * from './ui/index';
-export {textContent, sleep} from 'flipper-plugin';
-export * from './utils/jsonTypes';
-export {default as GK, loadGKs, loadDistilleryGK} from './fb-stubs/GK';
-export {default as createPaste} from './fb-stubs/createPaste';
-export {
-  internGraphGETAPIRequest,
-  internGraphPOSTAPIRequest,
-  graphQLQuery,
-  isLoggedIn,
-  getUser,
-} from './fb-stubs/user';
-export {FlipperPlugin, FlipperDevicePlugin, BaseAction} from './plugin';
-export {PluginClient, Props, KeyboardActions} from './plugin';
-export {default as Client} from './Client';
-export {reportUsage} from 'flipper-common';
-export {default as promiseTimeout} from './utils/promiseTimeout';
-export {bufferToBlob} from './utils/screenshot';
-export {getPluginKey} from './utils/pluginKey';
-export {Notification, Idler} from 'flipper-plugin';
-export {IdlerImpl} from './utils/Idler';
-export {Store, State as ReduxState} from './reducers/index';
-export {default as BaseDevice} from './devices/BaseDevice';
-export {default as isProduction} from './utils/isProduction';
-export {DetailSidebar} from 'flipper-plugin';
-export {default as Device} from './devices/BaseDevice';
-export {default as ArchivedDevice} from './devices/ArchivedDevice';
-export {DeviceOS as OS} from 'flipper-plugin';
-export {default as Button} from './ui/components/Button';
-export {default as ToggleButton} from './ui/components/ToggleSwitch';
-export {default as ButtonGroup} from './ui/components/ButtonGroup';
-export {colors, brandColors} from './ui/components/colors';
-export {default as Glyph} from './ui/components/Glyph';
-export {default as LoadingIndicator} from './ui/components/LoadingIndicator';
-export {
-  TableColumns,
-  TableRows,
-  TableBodyColumn,
-  TableBodyRow,
-  TableHighlightedRows,
-  TableRowSortOrder,
-  TableColumnOrder,
-  TableColumnSizes,
-} from './ui/components/table/types';
-export {default as ManagedTable} from './ui/components/table/ManagedTable';
-export {ManagedTableProps} from './ui/components/table/ManagedTable';
-export {
-  DataInspectorExpanded,
-  DataDescriptionType,
-  MarkerTimeline,
-} from 'flipper-plugin';
-export {DataInspector as ManagedDataInspector} from 'flipper-plugin';
-export {HighlightManager} from 'flipper-plugin';
-export {default as Tabs} from './ui/components/Tabs';
-export {default as Tab} from './ui/components/Tab';
-export {default as Input} from './ui/components/Input';
-export {default as Textarea} from './ui/components/Textarea';
-export {default as Select} from './ui/components/Select';
-export {default as Checkbox} from './ui/components/Checkbox';
-export {default as Orderable} from './ui/components/Orderable';
-export {Component, PureComponent} from 'react';
-export {default as ContextMenu} from './ui/components/ContextMenu';
-export {FileListFiles} from './ui/components/FileList';
-export {default as FileList} from './ui/components/FileList';
-export {default as View} from './ui/components/View';
-export {default as Sidebar} from './ui/components/Sidebar';
-export {default as FlexBox} from './ui/components/FlexBox';
-export {default as FlexRow} from './ui/components/FlexRow';
-export {default as FlexColumn} from './ui/components/FlexColumn';
-export {default as FlexCenter} from './ui/components/FlexCenter';
-export {Toolbar} from 'flipper-plugin';
-export {Spacer} from './ui/components/Toolbar';
-export {default as ToolbarIcon} from './ui/components/ToolbarIcon';
-export {default as Panel} from './ui/components/Panel';
-export {default as Text} from './ui/components/Text';
-export {default as Link} from './ui/components/Link';
-export {default as Tooltip} from './ui/components/Tooltip';
-export {default as StatusIndicator} from './ui/components/StatusIndicator';
-export {default as HorizontalRule} from './ui/components/HorizontalRule';
-export {default as Label} from './ui/components/Label';
-export {default as Heading} from './ui/components/Heading';
-export * from './utils/pathUtils';
-export {Filter} from './ui/components/filter/types';
-export {default as StackTrace} from './ui/components/StackTrace';
-export {
-  SearchBox,
-  SearchInput,
-  SearchIcon,
-  SearchableProps,
-  default as Searchable,
-} from './ui/components/searchable/Searchable';
-export {
-  default as SearchableTable,
-  filterRowsFactory,
-} from './ui/components/searchable/SearchableTable';
-export {
-  ElementsInspector,
-  ElementsInspectorElement as Element,
-  // TODO: clean up or create namespace
-  ElementsInspectorProps,
-  ElementAttribute,
-  ElementData,
-  ElementSearchResultSet,
-  ElementID,
-} from 'flipper-plugin';
-export {ElementFramework} from './ui/components/elements-inspector/ElementFramework';
-export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';
-export {default as FileSelector} from './ui/components/FileSelector';
-export {getFlipperMediaCDN, appendAccessTokenToUrl} from './fb-stubs/user';
-export {Rect} from './utils/geometry';
-export {Logger} from 'flipper-common';
-export {getLogger} from 'flipper-common';
-export {callVSCode} from './utils/vscodeUtils';
-export {IDEFileResolver, IDEType} from './fb-stubs/IDEFileResolver';
-export {renderMockFlipperWithPlugin} from './test-utils/createMockFlipperWithPlugin';
-export {Tracked} from 'flipper-plugin'; // To be able to use it in legacy plugins
-export {RequireLogin} from './ui/components/RequireLogin';
-export {TestDevice} from './test-utils/TestDevice';
-export {connect} from 'react-redux';

desktop/app/src/init.tsx

@@ -8,29 +8,15 @@
  */
 
 import {initializeElectron} from './electron/initializeElectron';
-
-import GK from './fb-stubs/GK';
 import {enableMapSet} from 'immer';
-import os from 'os';
 
 initializeElectron();
 
-if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
-  // By default Node.JS has its internal certificate storage and doesn't use
-  // the system store. Because of this, it's impossible to access ondemand / devserver
-  // which are signed using some internal self-issued FB certificates. These certificates
-  // are automatically installed to MacOS system store on FB machines, so here we're using
-  // this "mac-ca" library to load them into Node.JS.
-  global.electronRequire('mac-ca');
-}
-
 enableMapSet();
 
-GK.init();
-
 // By turning this in a require, we force the JS that the body of this module (init) has completed (initializeElectron),
 // before starting the rest of the Flipper process.
 // This prevent issues where the render host is referred at module initialisation level,
 // but not set yet, which might happen when using normal imports.
 // eslint-disable-next-line import/no-commonjs
-require('./startFlipperDesktop');
+require('flipper-ui-core').startFlipperDesktop();

desktop/app/src/utils/isProduction.tsx

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its 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 {getRenderHostInstance} from '../RenderHost';
-
-let _isProduction: boolean | undefined;
-
-export default function isProduction(): boolean {
-  if (_isProduction === undefined) {
-    _isProduction = !/node_modules[\\/]electron[\\/]/.test(
-      getRenderHostInstance().paths.execPath,
-    );
-  }
-  return _isProduction;
-}

desktop/app/tsconfig.json

@@ -7,29 +7,14 @@
     "emitDeclarationOnly": true
   },
   "references": [
-    {
-      "path": "../doctor"
-    },
     {
       "path": "../flipper-common"
     },
-    {
-      "path": "../flipper-plugin"
-    },
     {
       "path": "../flipper-server-core"
     },
     {
       "path": "../flipper-ui-core"
-    },
-    {
-      "path": "../plugin-lib"
-    },
-    {
-      "path": "../test-utils"
-    },
-    {
-      "path": "../plugins/public/navigation"
     }
   ],
   "exclude": ["**/node_modules/", "**/__tests__/", "**/lib/"]

desktop/flipper-ui-core/package.json

@@ -9,9 +9,81 @@
   "types": "lib/index.d.ts",
   "license": "MIT",
   "bugs": "https://github.com/facebook/flipper/issues",
-  "dependencies": {},
+  "dependencies": {
-  "devDependencies": {},
+    "@ant-design/icons": "^4.7.0",
-  "peerDependencies": {},
+    "@emotion/css": "^11.5.0",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@iarna/toml": "^2.2.5",
+    "@tanishiking/aho-corasick": "^0.0.1",
+    "@types/archiver": "^5.1.1",
+    "@types/uuid": "^8.3.1",
+    "adbkit": "^2.11.1",
+    "adbkit-logcat": "^2.0.1",
+    "antd": "4.16.8",
+    "archiver": "^5.0.2",
+    "async-mutex": "^0.3.2",
+    "axios": "^0.22.0",
+    "cbuffer": "^2.2.0",
+    "console-feed": "^3.2.2",
+    "crc32": "^0.2.2",
+    "deep-equal": "^2.0.5",
+    "expand-tilde": "^2.0.2",
+    "flipper-client-sdk": "^0.0.3",
+    "flipper-common": "0.0.0",
+    "flipper-doctor": "0.0.0",
+    "flipper-plugin": "0.0.0",
+    "flipper-plugin-lib": "0.0.0",
+    "flipper-server-core": "0.0.0",
+    "flipper-ui-core": "0.0.0",
+    "fs-extra": "^10.0.0",
+    "immer": "^9.0.6",
+    "invariant": "^2.2.2",
+    "js-base64": "^3.7.2",
+    "lodash": "^4.17.21",
+    "lodash.memoize": "^4.1.2",
+    "open": "^8.3.0",
+    "openssl-wrapper": "^0.3.4",
+    "p-filter": "^2.1.0",
+    "p-map": "^4.0.0",
+    "promise-retry": "^2.0.1",
+    "promisify-child-process": "^4.1.0",
+    "react": "17.0.2",
+    "react-async": "^10.0.0",
+    "react-debounce-render": "^7.0.0",
+    "react-dom": "^17.0.1",
+    "react-electron-web-view": "^2.0.1",
+    "react-element-to-jsx-string": "^14.3.1",
+    "react-markdown": "^6.0.3",
+    "react-player": "^2.9.0",
+    "react-redux": "^7.2.6",
+    "react-test-renderer": "^17.0.1",
+    "react-virtualized-auto-sizer": "^1.0.6",
+    "react-window": "^1.8.6",
+    "recursive-readdir": "^2.2.2",
+    "redux": "^4.1.1",
+    "redux-persist": "^6.0.0",
+    "reselect": "^4.0.0",
+    "semver": "^7.3.5",
+    "tmp": "^0.2.1",
+    "uuid": "^8.3.2",
+    "which": "^2.0.1",
+    "ws": "^8.2.3",
+    "xdg-basedir": "^4.0.0"
+  },
+  "optionalDependencies": {
+    "7zip-bin-mac": "^1.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^8.10.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/lodash.memoize": "^4.1.6",
+    "@types/split2": "^3.2.1",
+    "flipper-test-utils": "0.0.0",
+    "mock-fs": "^5.0.0",
+    "redux-mock-store": "^1.0.1",
+    "ts-jest": "^26.5.6"
+  },
   "scripts": {
     "reset": "rimraf lib *.tsbuildinfo",
     "build": "tsc -b",

desktop/flipper-ui-core/src/.eslintrc.js

@@ -14,7 +14,7 @@ module.exports = {
       {
         // These paths lead to circular import issues in Flipper app and are forbidden
         paths: ['flipper'],
-        patterns: ['app/src/*'],
+        patterns: ['flipper-ui-core/src/*'],
       },
     ],
   },

desktop/flipper-ui-core/src/RenderHost.tsx

@@ -54,6 +54,7 @@ type ChildProcessEvents = {
  */
 export interface RenderHost {
   readonly processId: number;
+  readonly isProduction: boolean;
   readTextFromClipboard(): string | undefined;
   writeTextToClipboard(text: string): void;
   showSaveDialog?: FlipperLib['showSaveDialog'];
@@ -78,24 +79,20 @@ export interface RenderHost {
   env: Partial<Record<ENVIRONMENT_VARIABLES, string>>;
   paths: Record<ENVIRONMENT_PATHS, string>;
   openLink(url: string): void;
+  loadDefaultPlugins(): Record<string, any>;
 }
 
-let renderHostInstance: RenderHost | undefined;
-
 export function getRenderHostInstance(): RenderHost {
-  if (!renderHostInstance) {
+  if (!window.FlipperRenderHostInstance) {
-    throw new Error('setRenderHostInstance was never called');
+    throw new Error('global FlipperRenderHostInstance was never set');
   }
-  return renderHostInstance;
+  return window.FlipperRenderHostInstance;
-}
-
-export function setRenderHostInstance(instance: RenderHost) {
-  renderHostInstance = instance;
 }
 
 if (process.env.NODE_ENV === 'test') {
-  setRenderHostInstance({
+  window.FlipperRenderHostInstance = {
     processId: -1,
+    isProduction: false,
     readTextFromClipboard() {
       return '';
     },
@@ -122,5 +119,8 @@ if (process.env.NODE_ENV === 'test') {
       staticPath: path.join(process.cwd(), 'static'),
       tempPath: `/tmp/`,
     },
-  });
+    loadDefaultPlugins() {
+      return {};
+    },
+  };
 }

desktop/flipper-ui-core/src/chrome/ShareSheetExportFile.tsx

@@ -20,7 +20,7 @@ import {
 } from '../utils/exportData';
 import ShareSheetErrorList from './ShareSheetErrorList';
 import ShareSheetPendingDialog from './ShareSheetPendingDialog';
-import {ReactReduxContext} from 'react-redux';
+import {ReactReduxContext, ReactReduxContextValue} from 'react-redux';
 import {MiddlewareAPI} from '../reducers/index';
 import {Modal} from 'antd';
 
@@ -71,7 +71,7 @@ type State = {
 };
 
 export default class ShareSheetExportFile extends Component<Props, State> {
-  static contextType = ReactReduxContext;
+  static contextType: React.Context<ReactReduxContextValue> = ReactReduxContext;
 
   state: State = {
     fetchMetaDataErrors: null,

desktop/flipper-ui-core/src/chrome/ShareSheetExportUrl.tsx

@@ -9,7 +9,7 @@
 
 import {FlexColumn, styled, Text, FlexRow, Spacer, Input} from '../ui';
 import React, {Component} from 'react';
-import {ReactReduxContext} from 'react-redux';
+import {ReactReduxContext, ReactReduxContextValue} from 'react-redux';
 import {Logger} from 'flipper-common';
 import {IdlerImpl} from '../utils/Idler';
 import {
@@ -70,7 +70,7 @@ type State = {
 };
 
 export default class ShareSheetExportUrl extends Component<Props, State> {
-  static contextType = ReactReduxContext;
+  static contextType: React.Context<ReactReduxContextValue> = ReactReduxContext;
 
   state: State = {
     fetchMetaDataErrors: null,

desktop/flipper-ui-core/src/chrome/plugin-manager/__tests__/__snapshots__/PluginInstaller.node.tsx.snap

@@ -53,74 +53,74 @@ exports[`load PluginInstaller list 1`] = `
       </span>
     </div>
     <div
-      class="css-bgfc37-View-FlexBox-FlexColumn-Container esta8x30"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
-        class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn ecr18to0"
+        class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
       >
         <div
-          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer eig1lcc1"
         >
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="name"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Name
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="version"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Version
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="description"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Description
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="install"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 
               </div>
@@ -129,17 +129,17 @@ exports[`load PluginInstaller list 1`] = `
         </div>
       </div>
       <div
-        class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
+        class="css-p5h61d-View-FlexBox-FlexColumn-Container emab7y20"
       >
         <div
-          class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn ecr18to0"
+          class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
         >
           <div
-            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer e1pvjj0s1"
             data-key="flipper-plugin-hello"
           >
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -150,7 +150,7 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -161,7 +161,7 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -178,7 +178,7 @@ exports[`load PluginInstaller list 1`] = `
                   href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                 >
                   <div
-                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom ekc8qeh0"
                     color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -187,7 +187,7 @@ exports[`load PluginInstaller list 1`] = `
               </div>
             </div>
             <div
-              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -202,11 +202,11 @@ exports[`load PluginInstaller list 1`] = `
             </div>
           </div>
           <div
-            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer e1pvjj0s1"
             data-key="flipper-plugin-world"
           >
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -217,7 +217,7 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -228,7 +228,7 @@ exports[`load PluginInstaller list 1`] = `
               </span>
             </div>
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -245,7 +245,7 @@ exports[`load PluginInstaller list 1`] = `
                   href="https://yarnpkg.com/en/package/flipper-plugin-world"
                 >
                   <div
-                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom ekc8qeh0"
                     color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -254,7 +254,7 @@ exports[`load PluginInstaller list 1`] = `
               </div>
             </div>
             <div
-              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -275,33 +275,33 @@ exports[`load PluginInstaller list 1`] = `
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
-        class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
+        class="css-1spj5hr-View-FlexBox-FlexRow-Container ev83mp62"
       >
         <input
-          class="css-sli06x-Input-FileInputBox ersmi540"
+          class="css-sli06x-Input-FileInputBox ev83mp60"
           placeholder="Specify path to a Flipper package or just drag and drop it here..."
           type="text"
           value=""
         />
         <div
-          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ev83mp61"
         >
           <img
             alt="dots-3-circle"
-            class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
+            class="ev83mp63 css-6iptsk-ColoredIconBlack-CenteredGlyph ekc8qeh1"
             size="16"
             src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
             title="Open file selection dialog"
           />
         </div>
         <div
-          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ev83mp61"
         >
           <div
-            class="css-auhar3-TooltipContainer e1abcqbd0"
+            class="css-auhar3-TooltipContainer e1m67rki0"
           >
             <div
-              class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
+              class="ev83mp63 css-1qsl9s4-ColoredIconCustom-CenteredGlyph ekc8qeh0"
               color="#D79651"
               size="16"
               src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -310,10 +310,10 @@ exports[`load PluginInstaller list 1`] = `
         </div>
       </div>
       <div
-        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
+        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer eguixfz1"
       >
         <div
-          class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
+          class="css-wospjg-View-FlexBox-FlexRow ek54xq0"
         >
           <button
             class="ant-btn ant-btn-primary"
@@ -325,7 +325,7 @@ exports[`load PluginInstaller list 1`] = `
             </span>
           </button>
           <div
-            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
+            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer eguixfz0"
           />
         </div>
       </div>
@@ -387,74 +387,74 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       </span>
     </div>
     <div
-      class="css-bgfc37-View-FlexBox-FlexColumn-Container esta8x30"
+      class="css-bgfc37-View-FlexBox-FlexColumn-Container emab7y20"
       tabindex="0"
     >
       <div
-        class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn ecr18to0"
+        class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
       >
         <div
-          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer ejga3101"
+          class="css-1otvu18-View-FlexBox-FlexRow-TableHeadContainer eig1lcc1"
         >
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="name"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Name
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="version"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Version
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="description"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 Description
               </div>
             </div>
           </div>
           <div
-            class="css-mpoiz3-TableHeadColumnContainer ejga3100"
+            class="css-mpoiz3-TableHeadColumnContainer eig1lcc0"
             title="install"
             width="0"
           >
             <div
-              class="ejga3103 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
+              class="eig1lcc3 css-x4q70f-InteractiveContainer-TableHeaderColumnInteractive e14xwmxq0"
               style="z-index: auto; right: 0px; bottom: 0px; width: 100%; height: 100%;"
             >
               <div
-                class="css-1054ash-TableHeaderColumnContainer ejga3102"
+                class="css-1054ash-TableHeaderColumnContainer eig1lcc2"
               >
                 
               </div>
@@ -463,17 +463,17 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
         </div>
       </div>
       <div
-        class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
+        class="css-p5h61d-View-FlexBox-FlexColumn-Container emab7y20"
       >
         <div
-          class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn ecr18to0"
+          class="ant-dropdown-trigger css-18abd42-View-FlexBox-FlexColumn e1e47qlf0"
         >
           <div
-            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer e1pvjj0s1"
             data-key="flipper-plugin-hello"
           >
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -484,7 +484,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -495,7 +495,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -512,7 +512,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
                   href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                 >
                   <div
-                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom ekc8qeh0"
                     color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -521,7 +521,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </div>
             </div>
             <div
-              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -536,11 +536,11 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             </div>
           </div>
           <div
-            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer ehuguum1"
+            class="css-hg3ptm-View-FlexBox-FlexRow-TableBodyRowContainer e1pvjj0s1"
             data-key="flipper-plugin-world"
           >
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -551,7 +551,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-pfp0fy-TableBodyColumnContainer ehuguum0"
+              class="css-pfp0fy-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -562,7 +562,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </span>
             </div>
             <div
-              class="css-yt4330-TableBodyColumnContainer ehuguum0"
+              class="css-yt4330-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -579,7 +579,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
                   href="https://yarnpkg.com/en/package/flipper-plugin-world"
                 >
                   <div
-                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    class="css-1kmzf9v-ColoredIconCustom ekc8qeh0"
                     color="var(--light-color-button-active)"
                     size="16"
                     src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -588,7 +588,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
               </div>
             </div>
             <div
-              class="css-16v1lq1-TableBodyColumnContainer ehuguum0"
+              class="css-16v1lq1-TableBodyColumnContainer e1pvjj0s0"
               title=""
               width="0"
             >
@@ -609,33 +609,33 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
       class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
     >
       <div
-        class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
+        class="css-1spj5hr-View-FlexBox-FlexRow-Container ev83mp62"
       >
         <input
-          class="css-sli06x-Input-FileInputBox ersmi540"
+          class="css-sli06x-Input-FileInputBox ev83mp60"
           placeholder="Specify path to a Flipper package or just drag and drop it here..."
           type="text"
           value=""
         />
         <div
-          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ev83mp61"
         >
           <img
             alt="dots-3-circle"
-            class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
+            class="ev83mp63 css-6iptsk-ColoredIconBlack-CenteredGlyph ekc8qeh1"
             size="16"
             src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
             title="Open file selection dialog"
           />
         </div>
         <div
-          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ev83mp61"
         >
           <div
-            class="css-auhar3-TooltipContainer e1abcqbd0"
+            class="css-auhar3-TooltipContainer e1m67rki0"
           >
             <div
-              class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
+              class="ev83mp63 css-1qsl9s4-ColoredIconCustom-CenteredGlyph ekc8qeh0"
               color="#D79651"
               size="16"
               src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
@@ -644,10 +644,10 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
         </div>
       </div>
       <div
-        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
+        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer eguixfz1"
       >
         <div
-          class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
+          class="css-wospjg-View-FlexBox-FlexRow ek54xq0"
         >
           <button
             class="ant-btn ant-btn-primary"
@@ -659,7 +659,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
             </span>
           </button>
           <div
-            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
+            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer eguixfz0"
           />
         </div>
       </div>

desktop/flipper-ui-core/src/deprecated-exports.tsx

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export {default as styled} from '@emotion/styled';
+export {keyframes} from '@emotion/css';
+export {produce} from 'immer';
+
+export * from './ui/index';
+export {textContent, sleep} from 'flipper-plugin';
+export * from './utils/jsonTypes';
+export {default as GK, loadGKs, loadDistilleryGK} from './fb-stubs/GK';
+export {default as createPaste} from './fb-stubs/createPaste';
+export {
+  internGraphGETAPIRequest,
+  internGraphPOSTAPIRequest,
+  graphQLQuery,
+  isLoggedIn,
+  getUser,
+} from './fb-stubs/user';
+export {FlipperPlugin, FlipperDevicePlugin, BaseAction} from './plugin';
+export {PluginClient, Props, KeyboardActions} from './plugin';
+export {default as Client} from './Client';
+export {reportUsage} from 'flipper-common';
+export {default as promiseTimeout} from './utils/promiseTimeout';
+export {bufferToBlob} from './utils/screenshot';
+export {getPluginKey} from './utils/pluginKey';
+export {Notification, Idler} from 'flipper-plugin';
+export {IdlerImpl} from './utils/Idler';
+export {Store, State as ReduxState} from './reducers/index';
+export {default as BaseDevice} from './devices/BaseDevice';
+export {default as isProduction} from './utils/isProduction';
+export {DetailSidebar} from 'flipper-plugin';
+export {default as Device} from './devices/BaseDevice';
+export {default as ArchivedDevice} from './devices/ArchivedDevice';
+export {DeviceOS as OS} from 'flipper-plugin';
+export {default as Button} from './ui/components/Button';
+export {default as ToggleButton} from './ui/components/ToggleSwitch';
+export {default as ButtonGroup} from './ui/components/ButtonGroup';
+export {colors, brandColors} from './ui/components/colors';
+export {default as Glyph} from './ui/components/Glyph';
+export {default as LoadingIndicator} from './ui/components/LoadingIndicator';
+export {
+  TableColumns,
+  TableRows,
+  TableBodyColumn,
+  TableBodyRow,
+  TableHighlightedRows,
+  TableRowSortOrder,
+  TableColumnOrder,
+  TableColumnSizes,
+} from './ui/components/table/types';
+export {default as ManagedTable} from './ui/components/table/ManagedTable';
+export {ManagedTableProps} from './ui/components/table/ManagedTable';
+export {
+  DataInspectorExpanded,
+  DataDescriptionType,
+  MarkerTimeline,
+} from 'flipper-plugin';
+export {DataInspector as ManagedDataInspector} from 'flipper-plugin';
+export {HighlightManager} from 'flipper-plugin';
+export {default as Tabs} from './ui/components/Tabs';
+export {default as Tab} from './ui/components/Tab';
+export {default as Input} from './ui/components/Input';
+export {default as Textarea} from './ui/components/Textarea';
+export {default as Select} from './ui/components/Select';
+export {default as Checkbox} from './ui/components/Checkbox';
+export {default as Orderable} from './ui/components/Orderable';
+export {Component, PureComponent} from 'react';
+export {default as ContextMenu} from './ui/components/ContextMenu';
+export {FileListFiles} from './ui/components/FileList';
+export {default as FileList} from './ui/components/FileList';
+export {default as View} from './ui/components/View';
+export {default as Sidebar} from './ui/components/Sidebar';
+export {default as FlexBox} from './ui/components/FlexBox';
+export {default as FlexRow} from './ui/components/FlexRow';
+export {default as FlexColumn} from './ui/components/FlexColumn';
+export {default as FlexCenter} from './ui/components/FlexCenter';
+export {Toolbar} from 'flipper-plugin';
+export {Spacer} from './ui/components/Toolbar';
+export {default as ToolbarIcon} from './ui/components/ToolbarIcon';
+export {default as Panel} from './ui/components/Panel';
+export {default as Text} from './ui/components/Text';
+export {default as Link} from './ui/components/Link';
+export {default as Tooltip} from './ui/components/Tooltip';
+export {default as StatusIndicator} from './ui/components/StatusIndicator';
+export {default as HorizontalRule} from './ui/components/HorizontalRule';
+export {default as Label} from './ui/components/Label';
+export {default as Heading} from './ui/components/Heading';
+export * from './utils/pathUtils';
+export {Filter} from './ui/components/filter/types';
+export {default as StackTrace} from './ui/components/StackTrace';
+export {
+  SearchBox,
+  SearchInput,
+  SearchIcon,
+  SearchableProps,
+  default as Searchable,
+} from './ui/components/searchable/Searchable';
+export {
+  default as SearchableTable,
+  filterRowsFactory,
+} from './ui/components/searchable/SearchableTable';
+export {
+  ElementsInspector,
+  ElementsInspectorElement as Element,
+  // TODO: clean up or create namespace
+  ElementsInspectorProps,
+  ElementAttribute,
+  ElementData,
+  ElementSearchResultSet,
+  ElementID,
+} from 'flipper-plugin';
+export {ElementFramework} from './ui/components/elements-inspector/ElementFramework';
+export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';
+export {default as FileSelector} from './ui/components/FileSelector';
+export {getFlipperMediaCDN, appendAccessTokenToUrl} from './fb-stubs/user';
+export {Rect} from './utils/geometry';
+export {Logger} from 'flipper-common';
+export {getLogger} from 'flipper-common';
+export {callVSCode} from './utils/vscodeUtils';
+export {IDEFileResolver, IDEType} from './fb-stubs/IDEFileResolver';
+export {renderMockFlipperWithPlugin} from './test-utils/createMockFlipperWithPlugin';
+export {Tracked} from 'flipper-plugin'; // To be able to use it in legacy plugins
+export {RequireLogin} from './ui/components/RequireLogin';
+export {TestDevice} from './test-utils/TestDevice';
+export {connect} from 'react-redux';

desktop/flipper-ui-core/src/dispatcher/__tests__/plugins.node.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-jest.mock('../../defaultPlugins');
+jest.mock('../../../../app/src/defaultPlugins');
 jest.mock('../../utils/loadDynamicPlugins');
 import dispatcher, {
   getDynamicPlugins,

desktop/flipper-ui-core/src/dispatcher/pluginManager.tsx

@@ -98,6 +98,7 @@ export function processPluginCommandsQueue(
   store: Store,
 ) {
   for (const command of queue) {
+    try {
       switch (command.type) {
         case 'LOAD_PLUGIN':
           loadPlugin(store, command.payload);
@@ -115,6 +116,11 @@ export function processPluginCommandsQueue(
           console.error('Unexpected plugin command', command);
           break;
       }
+    } catch (e) {
+      // make sure that upon failure the command is still marked processed to avoid
+      // unending loops!
+      console.error('Failed to process command', command);
+    }
   }
   store.dispatch(pluginCommandsProcessed(queue.length));
 }

desktop/flipper-ui-core/src/dispatcher/plugins.tsx

@@ -46,13 +46,12 @@ import * as antdesign_icons from '@ant-design/icons';
 // @ts-ignore
 import * as crc32 from 'crc32';
 
-// eslint-disable-next-line import/no-unresolved
-import getDefaultPluginsIndex from '../utils/getDefaultPluginsIndex';
 import {isDevicePluginDefinition} from '../utils/pluginUtils';
 import isPluginCompatible from '../utils/isPluginCompatible';
 import isPluginVersionMoreRecent from '../utils/isPluginVersionMoreRecent';
 import {getStaticPath} from '../utils/pathUtils';
 import {createSandyPluginWrapper} from '../utils/createSandyPluginWrapper';
+import {getRenderHostInstance} from '../RenderHost';
 let defaultPluginsIndex: any = null;
 
 export default async (store: Store, _logger: Logger) => {
@@ -62,7 +61,7 @@ export default async (store: Store, _logger: Logger) => {
   // this list should match `replace-flipper-requires.tsx` and the `builtInModules` in `desktop/.eslintrc`
   globalObject.React = React;
   globalObject.ReactDOM = ReactDOM;
-  globalObject.Flipper = require('../index');
+  globalObject.Flipper = require('../deprecated-exports');
   globalObject.adbkit = adbkit;
   globalObject.FlipperPlugin = FlipperPluginSDK;
   globalObject.Immer = Immer;
@@ -75,7 +74,7 @@ export default async (store: Store, _logger: Logger) => {
   const disabledPlugins: Array<ActivatablePluginDetails> = [];
   const failedPlugins: Array<[ActivatablePluginDetails, string]> = [];
 
-  defaultPluginsIndex = getDefaultPluginsIndex();
+  defaultPluginsIndex = getRenderHostInstance().loadDefaultPlugins();
 
   const marketplacePlugins = selectCompatibleMarketplaceVersions(
     store.getState().plugins.marketplacePlugins,