Factored out ipcRender.send

Summary: Delegate sending events over IPC from the render process to the main process over the RenderHost interface. This basically removes all our direct usages of `ipcRenderer`.

Reviewed By: timur-valiev, aigoncharov

Differential Revision: D31828580

fbshipit-source-id: 9c1333ae55620d36c2af70aa7abc5403c2f4907c

desktop/app/src/RenderHost.tsx

@@ -9,6 +9,7 @@
 
 import {NotificationEvents} from './dispatcher/notifications';
 import {PluginNotification} from './reducers/notifications';
+import type {NotificationConstructorOptions} from 'electron';
 
 // Events that are emitted from the main.ts ovr the IPC process bridge in Electron
 type MainProcessEvents = {
@@ -23,6 +24,20 @@ type MainProcessEvents = {
   getLaunchTime: [launchStartTime: number];
 };
 
+// Events that are emitted by the child process, to the main process
+type ChildProcessEvents = {
+  setTheme: [theme: 'dark' | 'light' | 'system'];
+  sendNotification: [
+    {
+      payload: NotificationConstructorOptions;
+      pluginNotification: PluginNotification;
+      closeAfter?: number;
+    },
+  ];
+  getLaunchTime: [];
+  componentDidMount: [];
+};
+
 /**
  * Utilities provided by the render host, e.g. Electron, the Browser, etc
  */
@@ -36,6 +51,10 @@ export interface RenderHost {
     event: Event,
     callback: (...arg: MainProcessEvents[Event]) => void,
   ): void;
+  sendIpcEvent<Event extends keyof ChildProcessEvents>(
+    event: Event,
+    ...args: ChildProcessEvents[Event]
+  ): void;
 }
 
 let renderHostInstance: RenderHost | undefined;
@@ -62,5 +81,6 @@ if (process.env.NODE_ENV === 'test') {
       return true;
     },
     onIpcEvent() {},
+    sendIpcEvent() {},
   });
 }

desktop/app/src/dispatcher/notifications.tsx

@@ -10,7 +10,7 @@
 import {Store} from '../reducers/index';
 import {Logger} from 'flipper-common';
 import {PluginNotification} from '../reducers/notifications';
-import {ipcRenderer} from 'electron';
+import reactElementToJSXString from 'react-element-to-jsx-string';
 import {
   updatePluginBlocklist,
   updateCategoryBlocklist,
@@ -123,10 +123,10 @@ export default (store: Store, logger: Logger) => {
               return;
             }
             const plugin = getPlugin(n.pluginId);
-            ipcRenderer.send('sendNotification', {
+            getRenderHostInstance().sendIpcEvent('sendNotification', {
               payload: {
                 title: n.notification.title,
-                body: n.notification.message,
+                body: reactElementToJSXString(n.notification.message),
                 actions: [
                   {
                     type: 'button',

desktop/app/src/init.tsx

@@ -57,7 +57,7 @@ import {
   GK as flipperCommonGK,
 } from 'flipper-common';
 import {internGraphPOSTAPIRequest} from './fb-stubs/user';
-import {setRenderHostInstance} from './RenderHost';
+import {getRenderHostInstance, setRenderHostInstance} from './RenderHost';
 import {clipboard} from 'electron';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
@@ -249,7 +249,7 @@ function init() {
       (
         document.getElementById('flipper-theme-import') as HTMLLinkElement
       ).href = `themes/${result.shouldUseDarkMode ? 'dark' : 'light'}.css`;
-      ipcRenderer.send('setTheme', result.theme);
+      getRenderHostInstance().sendIpcEvent('setTheme', result.theme);
     },
   );
 }
@@ -302,5 +302,8 @@ function initializeFlipperForElectron() {
         callback(...(args as any));
       });
     },
+    sendIpcEvent(event, ...args: any[]) {
+      ipcRenderer.send(event, ...args);
+    },
   });
 }

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -18,7 +18,6 @@ import {
 } from 'flipper-plugin';
 import {Link, styled} from '../ui';
 import {theme} from 'flipper-plugin';
-import {ipcRenderer} from 'electron';
 import {Logger} from 'flipper-common';
 
 import {LeftRail} from './LeftRail';
@@ -215,17 +214,11 @@ function registerStartupTime(logger: Logger) {
   // track time since launch
   const [s, ns] = process.hrtime();
   const launchEndTime = s * 1e3 + ns / 1e6;
-  getRenderHostInstance().onIpcEvent(
+  const renderHost = getRenderHostInstance();
-    'getLaunchTime',
+  renderHost.onIpcEvent('getLaunchTime', (launchStartTime: number) => {
-    (launchStartTime: number) => {
+    logger.track('performance', 'launchTime', launchEndTime - launchStartTime);
-      logger.track(
+  });
-        'performance',
-        'launchTime',
-        launchEndTime - launchStartTime,
-      );
-    },
-  );
 
-  ipcRenderer.send('getLaunchTime');
+  renderHost.sendIpcEvent('getLaunchTime');
-  ipcRenderer.send('componentDidMount');
+  renderHost.sendIpcEvent('componentDidMount');
 }