[menu-bar] Bump electron to 33.2.0 and react to 18.3.1 (#218)

* [menu-bar] Bump electron and react

* Add changelog entry

* bump TS

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Upgrade `react-native` to 0.76.1. ([#217](https://github.com/expo/orbit/pull/217) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Upgrade to `expo` SDK 52. ([#217](https://github.com/expo/orbit/pull/217) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Upgrade `react-native-svg` to 15.8.0. ([#217](https://github.com/expo/orbit/pull/217) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Upgrade `electron` to 33.2.0. ([#218](https://github.com/expo/orbit/pull/218) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ## 1.2.1— 2024-11-05
 

apps/cli/package.json

@@ -33,6 +33,6 @@
     "@graphql-codegen/typescript-graphql-request": "^6.1.0",
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "pkg": "^5.8.1",
-    "typescript": "4.9.4"
+    "typescript": "^5.3.0"
   }
 }

apps/menu-bar/electron/package.json

@@ -12,29 +12,30 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@electron-forge/cli": "^7.2.0",
-    "@electron-forge/maker-deb": "^7.2.0",
-    "@electron-forge/maker-rpm": "^7.2.0",
-    "@electron-forge/maker-squirrel": "^7.2.0",
-    "@electron-forge/maker-zip": "^7.2.0",
-    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
-    "@electron-forge/plugin-vite": "^7.2.0",
+    "@electron-forge/cli": "^7.5.0",
+    "@electron-forge/maker-deb": "^7.5.0",
+    "@electron-forge/maker-rpm": "^7.5.0",
+    "@electron-forge/maker-squirrel": "^7.5.0",
+    "@electron-forge/maker-zip": "^7.5.0",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.5.0",
+    "@electron-forge/plugin-vite": "^7.5.0",
     "@types/express": "^4.17.21",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "electron": "28.2.0",
+    "electron": "33.2.0",
     "eslint": "^8.48.0",
     "eslint-plugin-import": "^2.25.0",
     "ts-node": "^10.0.0",
-    "typescript": "~4.9.4",
-    "vite-plugin-static-copy": "^1.0.1"
+    "typescript": "^5.3.0",
+    "vite": "^5.0.12",
+    "vite-plugin-static-copy": "^2.1.0"
   },
   "dependencies": {
     "@expo/json-file": "^8.2.37",
     "common-types": "../../../packages/common-types",
     "debug": "^4.3.4",
-    "electron-squirrel-startup": "^1.0.0",
-    "electron-store": "^8.1.0",
+    "electron-squirrel-startup": "^1.0.1",
+    "electron-store": "^8.2.0",
     "express": "^4.18.2",
     "react-native-electron-modules": "../../../packages/react-native-electron-modules",
     "uuid": "9.0.0"

apps/menu-bar/electron/src/main.ts

@@ -51,6 +51,11 @@ const createMainWindow = () => {
     mainWindow.loadURL(`file://${path.join(__dirname, '../../../app/dist/index.html')}`);
   }
 
+  mainWindow.webContents.once('dom-ready', () => {
+    // Only keep the current session in the logs
+    mainWindow.webContents.executeJavaScript("localStorage.setItem('logs', '[]')");
+  });
+
   return mainWindow;
 };
 

apps/menu-bar/metro.config.js

@@ -39,7 +39,7 @@ module.exports = {
     babelTransformerPath: require.resolve('react-native-svg-transformer'),
     getTransformOptions: async () => ({
       transform: {
-        experimentalImportSupport: false,
+        experimentalImportSupport: true,
         inlineRequires: true,
       },
     }),

apps/menu-bar/modules/auto-updater/electron/Updater.ts

@@ -100,7 +100,7 @@ export default class Updater extends EventEmitter {
     this.platform.init();
     this.setupWindowFunctions();
 
-    if (process.argv.some((arg) => arg === '--squirrel-firstrun')) {
+    if (process.argv.some((arg: string) => arg === '--squirrel-firstrun')) {
       this.logger.info('auto update is disabled because this is the first launch');
       return this;
     }

apps/menu-bar/modules/auto-updater/electron/utils/file.ts

@@ -9,6 +9,7 @@ export function calcSha256Hash(filePath: string): Promise<string> {
 
   return new Promise((resolve, reject) => {
     stream
+      //@ts-ignore
       .on('data', (data) => shaSum.update(data))
       .on('end', () => resolve(shaSum.digest('hex')))
       .on('error', reject);

apps/menu-bar/modules/auto-updater/electron/utils/options.ts

@@ -19,7 +19,7 @@ export class Options {
 
   constructor() {
     this.autoDownload = false;
-    this.build = this.makeBuildString(process);
+    this.build = this.makeBuildString(process as unknown as NodeJS.Process);
     this.http = {};
     this.version = '';
     this.url = '';

apps/menu-bar/modules/menu-bar/index.ts

@@ -2,10 +2,10 @@ import { CodedError } from 'expo-modules-core';
 
 import MenuBarModule, { emitter } from './src/MenuBarModule';
 import Alert from '../../src/modules/Alert';
+import { Logs } from '../../src/modules/Storage';
 import { convertCliErrorObjectToError } from '../../src/utils/helpers';
 
-export type Log = { command: string; info: string };
-const logs: Log[] = [];
+const logs = new Logs();
 
 let hasShownCliErrorAlert = false;
 let listenerCounter = 0;

apps/menu-bar/modules/menu-bar/src/MenuBarModule.ts

@@ -1,9 +1,9 @@
-import { requireNativeModule, EventEmitter } from 'expo-modules-core';
+import { requireNativeModule, LegacyEventEmitter } from 'expo-modules-core';
 import { NativeModule } from 'react-native';
 
 import { NativeMenuBarModule } from './types';
 
 const MenuBarModule = requireNativeModule<NativeModule & NativeMenuBarModule>('MenuBar');
-export const emitter = new EventEmitter(MenuBarModule);
+export const emitter = new LegacyEventEmitter(MenuBarModule);
 
 export default MenuBarModule;

apps/menu-bar/modules/progress-indicator/src/ProgressIndicatorView.web.tsx

@@ -1,4 +1,4 @@
-import { ProgressBar } from '@fluentui/react-components';
+import { ProgressBar } from '@fluentui/react-progress';
 import * as React from 'react';
 
 import { ProgressIndicatorViewProps } from './ProgressIndicator.types';

apps/menu-bar/package.json

@@ -19,25 +19,27 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
-    "@expo/metro-config": "~0.18.11",
-    "@expo/metro-runtime": "~3.2.3",
+    "@expo/metro-runtime": "~4.0.0",
     "@expo/styleguide-native": "^1.0.1",
-    "@fluentui/react-components": "^9.46.4",
+    "@fluentui/react-checkbox": "^9.2.40",
     "@fluentui/react-icons": "^2.0.227",
+    "@fluentui/react-progress": "^9.1.90",
+    "@fluentui/react-provider": "^9.18.0",
+    "@fluentui/react-switch": "^9.1.97",
+    "@fluentui/react-theme": "^9.1.22",
     "@react-native-clipboard/clipboard": "^1.13.1",
     "@react-native-community/cli": "^15.1.0",
     "apollo3-cache-persist": "^0.14.1",
     "common-types": "1.0.0",
     "expo": "52.0.0-preview.23",
     "graphql": "^16.8.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-native": "0.76.1",
     "react-native-macos": "0.76.0",
     "react-native-mmkv": "^2.10.2",
     "react-native-svg": "15.8.0",
     "react-native-url-polyfill": "^2.0.0",
-    "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.19.6",
     "rudder-sdk-js": "^2.48.1"
   },
@@ -55,7 +57,6 @@
     "@react-native/typescript-config": "^0.75.2",
     "@types/jest": "^29.2.1",
     "@types/react": "18.0.24",
-    "@types/react-native-vector-icons": "^6.4.13",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "electron-store": "^8.1.0",

apps/menu-bar/src/App.tsx

@@ -13,7 +13,7 @@ type Props = {
   isDevWindow: boolean;
 };
 
-function App(props: Props) {
+function App(props: Props = { isDevWindow: false }) {
   useEffect(() => {
     Analytics.track(Event.APP_OPENED);
   }, []);
@@ -34,10 +34,6 @@ function App(props: Props) {
   );
 }
 
-App.defaultProps = {
-  isDevWindow: false,
-};
-
 export default App;
 
 const styles = StyleSheet.create({

apps/menu-bar/src/components/Checkbox/NativeCheckbox.web.tsx

@@ -1,4 +1,4 @@
-import { Checkbox as FluentCheckbox } from '@fluentui/react-components';
+import { Checkbox as FluentCheckbox } from '@fluentui/react-checkbox';
 import React from 'react';
 
 import { CheckboxChangeEvent, NativeCheckboxProps } from './types';

apps/menu-bar/src/components/DebugLogs/DebugLogRow.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
 
 import { ObjectInspector } from './ObjectInspector';
-import type { Log } from '../../../modules/menu-bar/index';
+import { Log } from '../../modules/Storage';
 import { Text } from '../Text';
 import { View, Row } from '../View';
 

apps/menu-bar/src/components/DebugLogs/index.tsx

@@ -24,7 +24,7 @@ export const DebugLogs = () => {
         <Text style={{ marginRight: 40 }}>Command: </Text>
         <Text style={{ flex: 1 }}>Extra info:</Text>
       </Row>
-      {MenuBarModule.logs.map((log, index) => {
+      {MenuBarModule.logs.get().map((log, index) => {
         return (
           <DebugLogRow
             log={log}

apps/menu-bar/src/components/DeviceItem.tsx

@@ -55,8 +55,8 @@ const DeviceItem = ({ device, onPress, onPressLaunch, selected }: Props) => {
                 backgroundColor: selected
                   ? PlatformColor('selectedContentBackground')
                   : currentTheme === 'dark'
-                  ? 'rgba(255,255,255,.23)'
-                  : 'rgba(0,0,0,.16)',
+                    ? 'rgba(255,255,255,.23)'
+                    : 'rgba(0,0,0,.16)',
               },
             ]}>
             <IphoneIcon
@@ -66,8 +66,8 @@ const DeviceItem = ({ device, onPress, onPressLaunch, selected }: Props) => {
                 selected
                   ? palette.dark.white
                   : currentTheme === 'dark'
-                  ? palette.dark.gray['900']
-                  : theme.text.default
+                    ? palette.dark.gray['900']
+                    : theme.text.default
               }
             />
           </View>

apps/menu-bar/src/components/Switch/index.web.tsx

@@ -1,4 +1,4 @@
-import { Switch as FluentSwitch } from '@fluentui/react-components';
+import { Switch as FluentSwitch } from '@fluentui/react-switch';
 import { SwitchProps } from 'react-native';
 
 export function Switch({ onValueChange, value, disabled }: SwitchProps) {

apps/menu-bar/src/modules/Storage.ts

@@ -112,3 +112,22 @@ export function resetApolloStore() {
   apolloClient.resetStore();
   storage.delete('apollo-cache-persist');
 }
+
+export type Log = { command: string; info: string };
+export class Logs {
+  private logs = this.get();
+
+  push(log: Log) {
+    this.logs.push(log);
+    if (Platform.OS === 'web') {
+      localStorage.setItem('logs', JSON.stringify(this.logs));
+    }
+  }
+
+  get(): Log[] {
+    if (Platform.OS === 'web') {
+      return JSON.parse(localStorage.getItem('logs') ?? '[]');
+    }
+    return this.logs ?? [];
+  }
+}

apps/menu-bar/src/popover/Core.tsx

@@ -50,9 +50,8 @@ type Props = {
 };
 
 function Core(props: Props) {
-  const [selectedDevicesIds, setSelectedDevicesIds] = useState<SelectedDevicesIds>(
-    getSelectedDevicesIds()
-  );
+  const [selectedDevicesIds, setSelectedDevicesIds] =
+    useState<SelectedDevicesIds>(getSelectedDevicesIds());
 
   const { apps, refetch: refetchApps } = useGetPinnedApps();
   usePopoverFocusEffect(

apps/menu-bar/src/providers/FluentProvider/index.web.tsx

@@ -1,9 +1,5 @@
-import {
-  FluentProvider as ReactFluentProvider,
-  webLightTheme,
-  webDarkTheme,
-  Theme,
-} from '@fluentui/react-components';
+import { FluentProvider as ReactFluentProvider } from '@fluentui/react-provider';
+import { webLightTheme, webDarkTheme, Theme } from '@fluentui/react-theme';
 import { CSSProperties, ComponentType, ReactElement } from 'react';
 import { useColorScheme } from 'react-native';
 

packages/common-types/package.json

@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "eslint-config-universe": "^11.3.0",
-    "typescript": "4.9.4"
+    "typescript": "^5.3.0"
   }
 }

packages/eas-shared/package.json

@@ -26,7 +26,7 @@
     "@types/uuid": "^9.0.1",
     "eslint-config-universe": "^11.3.0",
     "expo-manifests": "^0.13.1",
-    "typescript": "4.9.4"
+    "typescript": "^5.3.0"
   },
   "dependencies": {
     "@expo/config": "^8.1.2",