Initialise flipper-ui-browser with socket connection

Summary:
This diff sets up the socket connection between flipper-browser and flipper-server, and verifies that the initial UI initialisation work (e.g. `get-config` command works). The initial RenderHost is initialised as well based on the config and browser APIs.

Note that flipper-ui-core itself isn't started yet, as that has still a plethora of node imports, so Metro will correctly refuse to bundle

Not in this diff
* remove Node usage from flipper-ui-core
* implement all RenderHost APIs

Reviewed By: aigoncharov

Differential Revision: D32644074

fbshipit-source-id: 2c8065caf0191771a3867b69a431ca50eeb7a5a3

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 {FlipperServer, FlipperServerConfig} from 'flipper-common';
+
+export function initializeRenderHost(
+  flipperServer: FlipperServer,
+  flipperServerConfig: FlipperServerConfig,
+) {
+  window.FlipperRenderHostInstance = {
+    processId: 0,
+    isProduction: window.flipperConfig.debug !== true,
+    readTextFromClipboard() {
+      // TODO:
+      return undefined;
+    },
+    writeTextToClipboard(_text: string) {
+      // TODO:
+    },
+    async importFile() {
+      throw new Error('Not implemented');
+    },
+    async exportFile() {
+      throw new Error('Not implemented');
+    },
+    openLink(url: string) {
+      window.open(url, '_blank');
+    },
+    registerShortcut(_shortcut, _callback) {
+      // TODO:
+      return () => {};
+    },
+    hasFocus() {
+      return document.hasFocus();
+    },
+    onIpcEvent(event) {
+      console.warn('onIpcEvent not available', event);
+    },
+    sendIpcEvent(event, ..._args: any[]) {
+      console.warn('sendIpcEvent not available', event);
+    },
+    shouldUseDarkColors() {
+      return !!(
+        window.flipperConfig.theme === 'dark' ||
+        (window.flipperConfig.theme === 'system' &&
+          window.matchMedia?.('(prefers-color-scheme: dark)'))
+      );
+    },
+    restartFlipper() {
+      // TODO: restart server as well
+      window.location.reload();
+    },
+    loadDefaultPlugins: getDefaultPluginsIndex,
+    serverConfig: flipperServerConfig,
+    GK(gatekeeper) {
+      return flipperServerConfig.gatekeepers[gatekeeper] ?? false;
+    },
+    flipperServer,
+  };
+}
+
+function getDefaultPluginsIndex() {
+  // TODO:
+  return {};
+  // eslint-disable-next-line import/no-unresolved
+  // const index = require('../defaultPlugins');
+  // return index.default || index;
+}