JS apps support 1/n

Summary:
### Connecting Flipper with JS apps by using electron's BrowserWindow and IPC

1. UI: there is a menu item in Devices tab which opens JS Emulator Launcher Sheet. Here we can configure URL to open and initial size of the window.
2. BrowserWindow, preloaded js: there is SupportJSClientPreload.js which initialize communication between flipper and app via electron's ipc
3. On flipper's side there is src/utils/js-client/serverUtils.tsx which contains most of JS emulator related code
4. Extracting of FlipperClientConnection: since we don't use RScocket to communicate with JS app I extracted needed methods to FlipperClientConnection (located in Client) and partly implemented them in JSClientFlipperConnection (requestResponse is just send a message now, doesn't return actual result)

Reviewed By: jknoxville

Differential Revision: D18572882

fbshipit-source-id: 56d1ca1a60ed2e51329b917021a09382cbb1ceec

src/utils/js-client/serverUtils.tsx

@@ -0,0 +1,210 @@
+/**
+ * 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 Client, {ClientQuery} from '../../Client';
+import {FlipperClientConnection} from '../../Client';
+import {ipcRenderer, remote} from 'electron';
+import JSDevice from '../../devices/JSDevice';
+import {Store} from 'src/reducers';
+import {Logger} from 'src/fb-interfaces/Logger';
+
+import {Payload, ConnectionStatus, ISubscriber} from 'rsocket-types';
+import {Flowable, Single} from 'rsocket-flowable';
+import Server from 'src/server';
+
+const connections: Map<number, JSClientFlipperConnection<any>> = new Map();
+
+const availablePlugins: Map<number, Array<string>> = new Map();
+
+function jsDeviceId(windowId: number): string {
+  return 'test_js_device' + windowId;
+}
+
+export function initJsEmulatorIPC(
+  store: Store,
+  logger: Logger,
+  flipperServer: Server,
+  flipperConnections: Map<
+    string,
+    {
+      connection: FlipperClientConnection<any, any> | null | undefined;
+      client: Client;
+    }
+  >,
+) {
+  ipcRenderer.on('from-js-emulator-init-client', (_event, message) => {
+    const {windowId} = message;
+    const {plugins, appName} = message.payload;
+    store.dispatch({
+      type: 'REGISTER_DEVICE',
+      payload: new JSDevice(jsDeviceId(windowId), 'jsEmulator', windowId),
+    });
+
+    const connection = new JSClientFlipperConnection(windowId);
+    connections.set(windowId, connection);
+    availablePlugins.set(windowId, plugins);
+
+    const query: ClientQuery = {
+      app: appName,
+      os: 'JSWebApp',
+      device: 'jsEmulator',
+      device_id: jsDeviceId(windowId),
+      sdk_version: 2, // hack to bybass callbacks in Client, will be fixed when JS Connection will be fully implemented
+    };
+    const clientId = `${query.app}#${query.os}#${query.device}#${query.device_id}`;
+
+    const client = new Client(
+      clientId,
+      query,
+      connection,
+      logger,
+      store,
+      plugins,
+    );
+
+    flipperConnections.set(clientId, {connection: connection, client: client});
+
+    connection.connectionStatus().subscribe({
+      onNext(payload) {
+        if (payload.kind == 'ERROR' || payload.kind == 'CLOSED') {
+          console.debug(`Device disconnected ${client.id}`, 'server');
+          flipperServer.removeConnection(client.id);
+          const toUnregister = new Set<string>();
+          toUnregister.add(jsDeviceId(windowId));
+          store.dispatch({
+            type: 'UNREGISTER_DEVICES',
+            payload: toUnregister,
+          });
+          connections.delete(windowId);
+          availablePlugins.delete(windowId);
+        }
+      },
+      onSubscribe(subscription) {
+        subscription.request(Number.MAX_SAFE_INTEGER);
+      },
+    });
+
+    client.init().then(() => {
+      console.log(client);
+      flipperServer.emit('new-client', client);
+      flipperServer.emit('clients-change');
+      client.emit('plugins-change');
+
+      ipcRenderer.on('from-js-emulator', (_event, message) => {
+        const {command, payload} = message;
+        if (command === 'sendFlipperObject') {
+          client.onMessage(
+            JSON.stringify({
+              params: {
+                api: payload.api,
+                method: payload.method,
+                params: JSON.parse(payload.params),
+              },
+              method: 'execute',
+            }),
+          );
+        }
+      });
+    });
+  });
+}
+
+export function launchJsEmulator(url: string, height: number, width: number) {
+  const BrowserWindow = remote.BrowserWindow;
+  const win = new BrowserWindow({
+    height: height,
+    width: width,
+    webPreferences: {
+      preload: require('path').join(
+        remote.app.getAppPath(),
+        'SupportJSClientPreload.js',
+      ),
+      nodeIntegration: false,
+      contextIsolation: false,
+      allowRunningInsecureContent: true,
+    },
+  });
+
+  win.webContents.on('preload-error', (_event, path, error) => {
+    console.log(path, error);
+  });
+
+  win.loadURL(url);
+
+  win.webContents.on('did-finish-load', () => {
+    win.webContents.send('parent-window-id', remote.getCurrentWebContents().id);
+
+    const childWindowId = win.webContents.id;
+    win.on('closed', () => {
+      connections.get(childWindowId)?.close();
+    });
+  });
+}
+
+export class JSClientFlipperConnection<M>
+  implements FlipperClientConnection<string, M> {
+  webContentsId: number;
+  connStatusSubscribers: Set<ISubscriber<ConnectionStatus>> = new Set();
+  connStatus: ConnectionStatus;
+
+  constructor(webContentsId: number) {
+    this.webContentsId = webContentsId;
+    this.connStatus = {kind: 'CONNECTED'};
+  }
+
+  connectionStatus(): Flowable<ConnectionStatus> {
+    return new Flowable<ConnectionStatus>(subscriber => {
+      subscriber.onSubscribe({
+        cancel: () => {
+          this.connStatusSubscribers.delete(subscriber);
+        },
+        request: _ => {
+          this.connStatusSubscribers.add(subscriber);
+          subscriber.onNext(this.connStatus);
+        },
+      });
+    });
+  }
+
+  close(): void {
+    this.connStatus = {kind: 'CLOSED'};
+    this.connStatusSubscribers.forEach(subscriber => {
+      subscriber.onNext(this.connStatus);
+    });
+  }
+
+  fireAndForget(payload: Payload<string, M>): void {
+    ipcRenderer.sendTo(
+      this.webContentsId,
+      'message-to-plugin',
+      JSON.parse(payload.data != null ? payload.data : '{}'),
+    );
+  }
+
+  // TODO: fully implement and return actual result
+  requestResponse(payload: Payload<string, M>): Single<Payload<string, M>> {
+    return new Single(subscriber => {
+      const method =
+        payload.data != null ? JSON.parse(payload.data).method : 'not-defined';
+      if (method != 'getPlugins') {
+        this.fireAndForget(payload);
+      }
+      subscriber.onSubscribe(() => {});
+      subscriber.onComplete(
+        method == 'getPlugins'
+          ? {
+              data: JSON.stringify({
+                success: {plugins: availablePlugins.get(this.webContentsId)},
+              }),
+            }
+          : {data: JSON.stringify({success: null})},
+      );
+    });
+  }
+}