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-server/src/index.tsx

@@ -7,14 +7,15 @@
  * @format
  */
 
+import chalk from 'chalk';
+import path from 'path';
 // TODO: currently flipper-server is only suitable for development,
 // needs to be come independently runnable, prebundled, distributed, etc!
 // in future require conditionally
 import {startWebServerDev} from './startWebServerDev';
 import {startFlipperServer} from './startFlipperServer';
 import {startBaseServer} from './startBaseServer';
-import chalk from 'chalk';
-import path from 'path';
+import {startSocketServer} from './startSocketServer';
 
 const PORT = 52342;
 const rootDir = path.resolve(__dirname, '..', '..');
@@ -27,10 +28,12 @@ async function start() {
     entry: 'index.web.dev.html',
   });
 
-  return Promise.all([
+  const [flipperServer] = await Promise.all([
     startFlipperServer(rootDir, staticDir),
     startWebServerDev(app, server, socket, rootDir),
   ]);
+
+  startSocketServer(flipperServer, socket);
 }
 
 start()

desktop/flipper-server/src/startBaseServer.tsx

@@ -64,12 +64,7 @@ function startAssetServer(
 }
 
 function addWebsocket(server: http.Server) {
-  const io = new socketio.Server(server); // 3.1.0 socket.io doesn't have type definitions
-
-  io.on('connection', (client) => {
-    console.log(chalk.green(`Client connected ${client.id}`));
-  });
-
+  const io = new socketio.Server(server);
   return io;
 }
 

desktop/flipper-server/src/startFlipperServer.tsx

@@ -24,7 +24,10 @@ import {
 import path from 'path';
 import fs from 'fs';
 
-export async function startFlipperServer(rootDir: string, staticDir: string) {
+export async function startFlipperServer(
+  rootDir: string,
+  staticDir: string,
+): Promise<FlipperServerImpl> {
   if (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
@@ -90,6 +93,7 @@ export async function startFlipperServer(rootDir: string, staticDir: string) {
   );
 
   await flipperServer.connect();
+  return flipperServer;
 }
 
 function createLogger(): Logger {
@@ -103,7 +107,7 @@ function createLogger(): Logger {
       // console.warn('(skipped trackTimeSince)', args);
     },
     debug(..._args: any[]) {
-      // TODO: only if verbose console.debug(...args);
+      // TODO: only if double verbose console.debug(...args);
     },
     error(...args: any[]) {
       console.error(...args);
@@ -113,8 +117,9 @@ function createLogger(): Logger {
       console.warn(...args);
       console.warn('(skipped error reporting)');
     },
-    info(...args: any[]) {
-      console.info(...args);
+    info(..._args: any[]) {
+      // TODO: only if  verbose console.debug(...args);
+      // console.info(...args);
     },
   };
 }

desktop/flipper-server/src/startSocketServer.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 chalk from 'chalk';
+import {FlipperServerImpl} from 'flipper-server-core';
+import socketio from 'socket.io';
+
+export function startSocketServer(
+  flipperServer: FlipperServerImpl,
+  socket: socketio.Server,
+) {
+  socket.on('connection', (client) => {
+    console.log(chalk.green(`Client connected ${client.id}`));
+
+    let connected = true;
+
+    function onServerEvent(event: string, payoad: any) {
+      client.emit('event', event, payoad);
+    }
+
+    flipperServer.onAny(onServerEvent);
+
+    client.on('exec', (id, command, args) => {
+      console.log(id, command, args);
+      flipperServer
+        .exec(command, ...args)
+        .then((result: any) => {
+          if (connected) {
+            client.emit('exec-response', id, result);
+          }
+        })
+        .catch((error: any) => {
+          if (connected) {
+            client.emit('exec-response-error', id, error.toString());
+          }
+        });
+    });
+
+    client.on('disconnect', () => {
+      console.log(chalk.red(`Client disconnected ${client.id}`));
+      connected = false;
+      flipperServer.offAny(onServerEvent);
+    });
+  });
+}

desktop/flipper-server/src/startWebServerDev.tsx

@@ -76,15 +76,20 @@ async function startMetroServer(
     watchFolders,
     transformer: {
       ...baseConfig.transformer,
-      babelTransformerPath: path.join(babelTransformationsDir, 'transform-app'),
+      babelTransformerPath: path.join(
+        babelTransformationsDir,
+        'transform-browser',
+      ),
     },
     resolver: {
       ...baseConfig.resolver,
-      resolverMainFields: ['flipperBundlerEntry', 'module', 'main'],
+      resolverMainFields: ['flipperBundlerEntry', 'browser', 'module', 'main'],
       blacklistRE: /\.native\.js$/,
       sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json', 'mjs', 'cjs'],
     },
     watch: true,
+    // only needed when medling with babel transforms
+    // cacheVersion: Math.random(), // only cache for current run
   });
   const connectMiddleware = await Metro.createConnectMiddleware(config);
   app.use(connectMiddleware.middleware);