[menu-bar][electron] Implement MenuBar runCli status update (#191)

* [menu-bar][electron] Implement MenuBar runCli status update * Add changelog entry
expo · Mar 12, 2024 · a58f7a6 · a58f7a6
1 parent f61e5f5
commit a58f7a6
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@
 
 ### 🎉 New features
 
-- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161), [#165](https://github.com/expo/orbit/pull/165), [#170](https://github.com/expo/orbit/pull/170), [#171](https://github.com/expo/orbit/pull/171), [#172](https://github.com/expo/orbit/pull/172), [#173](https://github.com/expo/orbit/pull/173), [#174](https://github.com/expo/orbit/pull/174), [#175](https://github.com/expo/orbit/pull/175), [#177](https://github.com/expo/orbit/pull/177), [#178](https://github.com/expo/orbit/pull/178), [#180](https://github.com/expo/orbit/pull/180), [#181](https://github.com/expo/orbit/pull/181), [#182](https://github.com/expo/orbit/pull/182), [#185](https://github.com/expo/orbit/pull/185) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161), [#165](https://github.com/expo/orbit/pull/165), [#170](https://github.com/expo/orbit/pull/170), [#171](https://github.com/expo/orbit/pull/171), [#172](https://github.com/expo/orbit/pull/172), [#173](https://github.com/expo/orbit/pull/173), [#174](https://github.com/expo/orbit/pull/174), [#175](https://github.com/expo/orbit/pull/175), [#177](https://github.com/expo/orbit/pull/177), [#178](https://github.com/expo/orbit/pull/178), [#180](https://github.com/expo/orbit/pull/180), [#181](https://github.com/expo/orbit/pull/181), [#182](https://github.com/expo/orbit/pull/182), [#185](https://github.com/expo/orbit/pull/185), [#191](https://github.com/expo/orbit/pull/191) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 🐛 Bug fixes
 

diff --git a/apps/menu-bar/modules/menu-bar/electron/main.ts b/apps/menu-bar/modules/menu-bar/electron/main.ts
@@ -1,11 +1,11 @@
 import JsonFile from '@expo/json-file';
 import { StorageUtils } from 'common-types';
-import { app, dialog } from 'electron';
+import { app, dialog, BrowserWindow } from 'electron';
 import os from 'os';
 import path from 'path';
 
 import spawnCliAsync from './spawnCliAsync';
-import { NativeMenuBarModule } from '../src/types';
+import { ElectronMainMenuBarModule } from '../src/types';
 
 function getUserSettingsJsonFile() {
   return new JsonFile<StorageUtils.UserSettingsData>(StorageUtils.userSettingsFile(os.homedir()), {
@@ -14,16 +14,34 @@ function getUserSettingsJsonFile() {
   });
 }
 
-const runCli = async (command: string, args: string[], listenerId: number) => {
+const runCli = async (
+  command: string,
+  args: string[],
+  listenerId: number,
+  event: Electron.IpcMainInvokeEvent
+) => {
+  const webContents = BrowserWindow.getAllWindows().find(
+    (window) => window.webContents === event.sender
+  )?.webContents;
+
   const cliPath = path.join(__dirname, './cli/index.js');
 
   const userSettingsJsonFile = getUserSettingsJsonFile();
   const { envVars } = await userSettingsJsonFile.readAsync();
-  const commandOutput = await spawnCliAsync(cliPath, command, args, listenerId, envVars);
+  const commandOutput = await spawnCliAsync(
+    cliPath,
+    command,
+    args,
+    listenerId,
+    envVars,
+    (event) => {
+      webContents?.postMessage('onCLIOutput', event);
+    }
+  );
   return commandOutput;
 };
 
-const MenuBarModule: Partial<NativeMenuBarModule> & { name: string } = {
+const MenuBarModule: ElectronMainMenuBarModule = {
   name: 'MenuBar',
   appVersion: app.getVersion(),
   runCli,

diff --git a/apps/menu-bar/modules/menu-bar/electron/preload.ts b/apps/menu-bar/modules/menu-bar/electron/preload.ts
@@ -1,6 +1,9 @@
-import { ipcRenderer } from 'electron';
+import { IpcRendererEvent, ipcRenderer } from 'electron';
+import { EmitterSubscription } from 'react-native';
 
-const MenuBarModule = {
+import { ElectronPreloadMenuBarModule } from '../src/types';
+
+const MenuBarModule: ElectronPreloadMenuBarModule = {
   name: 'MenuBar',
   initialScreenSize: {
     height: globalThis.screen?.height || 0,
@@ -12,6 +15,18 @@ const MenuBarModule = {
   closePopover: () => {
     ipcRenderer.invoke('close-popover');
   },
+  addListener: (event: string, callback: (...args: string[]) => void) => {
+    const listener = (event: IpcRendererEvent, ...args: any[]) => {
+      callback(...args);
+    };
+    ipcRenderer.on(event, listener);
+
+    return {
+      remove: () => {
+        ipcRenderer.removeListener(event, listener);
+      },
+    } as EmitterSubscription;
+  },
 };
 
 export default MenuBarModule;
diff --git a/apps/menu-bar/modules/menu-bar/electron/spawnCliAsync.ts b/apps/menu-bar/modules/menu-bar/electron/spawnCliAsync.ts
@@ -5,7 +5,8 @@ function spawnCliAsync(
   command: string,
   args: string[] = [],
   listenerId: number,
-  envVars: Record<string, string> = {}
+  envVars: Record<string, string> = {},
+  callback?: (event: { listenerId: number; output: any }) => void
 ) {
   let child: ChildProcess;
   let hasReachedReturnOutput = false;
@@ -38,7 +39,7 @@ function spawnCliAsync(
             listenerId,
             output,
           };
-          console.log('sendEventWithName', eventData);
+          callback?.(eventData);
         }
       }
     }

diff --git a/apps/menu-bar/modules/menu-bar/index.ts b/apps/menu-bar/modules/menu-bar/index.ts
@@ -1,11 +1,9 @@
-import { EventEmitter, CodedError } from 'expo-modules-core';
+import { CodedError } from 'expo-modules-core';
 
-import MenuBarModule from './src/MenuBarModule';
+import MenuBarModule, { emitter } from './src/MenuBarModule';
 import Alert from '../../src/modules/Alert';
 import { convertCliErrorObjectToError } from '../../src/utils/helpers';
 
-const emitter = new EventEmitter(MenuBarModule);
-
 let hasShownCliErrorAlert = false;
 let listenerCounter = 0;
 async function runCli(command: string, args: string[], callback?: (status: string) => void) {

diff --git a/apps/menu-bar/modules/menu-bar/src/MenuBarModule.ts b/apps/menu-bar/modules/menu-bar/src/MenuBarModule.ts
@@ -1,6 +1,9 @@
-import { requireNativeModule } from 'expo-modules-core';
+import { requireNativeModule, EventEmitter } from 'expo-modules-core';
 import { NativeModule } from 'react-native';
 
 import { NativeMenuBarModule } from './types';
 
-export default requireNativeModule<NativeModule & NativeMenuBarModule>('MenuBar');
+const MenuBarModule = requireNativeModule<NativeModule & NativeMenuBarModule>('MenuBar');
+export const emitter = new EventEmitter(MenuBarModule);
+
+export default MenuBarModule;
diff --git a/apps/menu-bar/modules/menu-bar/src/MenuBarModule.web.ts b/apps/menu-bar/modules/menu-bar/src/MenuBarModule.web.ts
@@ -1,8 +1,18 @@
 import { requireElectronModule } from 'react-native-electron-modules/build/requireElectronModule';
 
-import { NativeMenuBarModule } from './types';
+import { ElectronMainMenuBarModule, ElectronPreloadMenuBarModule } from './types';
+
+const MenuBar = requireElectronModule<ElectronMainMenuBarModule & ElectronPreloadMenuBarModule>(
+  'MenuBar'
+);
+
+class EventEmitter {
+  addListener<T>(eventName: string, listener: (event: T) => void) {
+    return MenuBar.addListener(eventName, listener);
+  }
+}
+export const emitter = new EventEmitter();
 
-const MenuBar = requireElectronModule<NativeMenuBarModule>('MenuBar');
 export default {
   ...MenuBar,
   async runCli(...args) {

diff --git a/apps/menu-bar/modules/menu-bar/src/types.ts b/apps/menu-bar/modules/menu-bar/src/types.ts
@@ -1,3 +1,6 @@
+import { EmitterSubscription } from 'react-native';
+import { ElectronModule } from 'react-native-electron-modules/build/types';
+
 export interface NativeMenuBarModule {
   readonly appVersion: string;
   readonly buildVersion: string;
@@ -13,3 +16,30 @@ export interface NativeMenuBarModule {
   openPopover(): void;
   closePopover(): void;
 }
+
+type PreloadKeys = 'initialScreenSize' | 'closePopover' | 'openPopover';
+
+export interface ElectronMainMenuBarModule
+  extends Omit<
+      NativeMenuBarModule,
+      | PreloadKeys
+      | 'runCli'
+      | 'buildVersion'
+      | 'homedir'
+      | 'runCommand'
+      | 'openSystemSettingsLoginItems'
+    >,
+    ElectronModule {
+  name: string;
+  runCli: (
+    command: string,
+    args: string[],
+    listenerId: number,
+    event: Electron.IpcMainInvokeEvent
+  ) => Promise<string>;
+}
+
+export interface ElectronPreloadMenuBarModule extends Pick<NativeMenuBarModule, PreloadKeys> {
+  name: string;
+  addListener(type: string, listener: (data: any) => void): EmitterSubscription;
+}