[menu-bar] Move WindowsManager to its own package

apps/menu-bar/electron/modules/WindowManager/main.ts

@@ -1,11 +1,10 @@
 import { app, BrowserWindow } from 'electron';
 import path from 'path';
-
 import {
-  WindowOptions,
-  WindowsManagerType,
   WindowStyleMask,
-} from '../../../src/modules/WindowManager/types';
+  type WindowOptions,
+  type WindowsManagerType,
+} from 'react-native-multi-window';
 
 const _windowsMap: { [key: string]: BrowserWindow } = {};
 

apps/menu-bar/macos/ExpoMenuBar-macOS/AppDelegate.swift

@@ -33,6 +33,12 @@ class AppDelegate: RCTAppDelegate, NSUserNotificationCenterDelegate {
     let rootViewController = NSViewController()
     rootViewController.view = rootView
 
+    // Configure react-native-multi-window
+    RNMultiWindowNavigator.setRootViewFactory(self.rootViewFactory())
+    if let bridge = self.bridge {
+      RNMultiWindowNavigator.setBridge(bridge)
+    }
+
     popoverManager = PopoverManager.initializeShared(delegate: self)
     popoverManager.setContentViewController(rootViewController)
 

apps/menu-bar/macos/ExpoMenuBar-macOS/ExpoMenuBar-macOS-Bridging-Header.h

@@ -1,2 +1,3 @@
+#import <react-native-multi-window/RNMultiWindowNavigator.h>
+
 #import "DragDropStatusItemView.h"
-#import "WindowNavigator.h"

apps/menu-bar/macos/ExpoMenuBar-macOS/PopoverManager.swift

@@ -98,7 +98,7 @@ class PopoverManager: NSObject {
   // MARK: - Actions
 
   @objc private func settingsAction() {
-    WindowNavigator.shared().openWindow(
+    RNMultiWindowNavigator.shared().openWindow(
       "Settings",
       options: [
         "windowStyle": ["titlebarAppearsTransparent": true, "height": 680.0, "width": 500.0]

apps/menu-bar/macos/ExpoMenuBar.xcodeproj/project.pbxproj

@@ -18,8 +18,6 @@
 		C032EDB72A1FE6F300FBC597 /* orbit-cli-arm64 in Resources */ = {isa = PBXBuildFile; fileRef = C032EDB62A1FE6F300FBC597 /* orbit-cli-arm64 */; };
 		C051E6B62A83577800C6D615 /* orbit-cli-x64 in Resources */ = {isa = PBXBuildFile; fileRef = C051E6B52A83577800C6D615 /* orbit-cli-x64 */; };
 		C051EC0E2AA227C600C6D615 /* SwifterWrapper.swift in Sources */ = {isa = PBXBuildFile; fileRef = C051EC0D2AA227C600C6D615 /* SwifterWrapper.swift */; };
-		C0523ECC2A550983003371AF /* WindowManager.m in Sources */ = {isa = PBXBuildFile; fileRef = C0523ECB2A550983003371AF /* WindowManager.m */; };
-		C0523ED02A55980D003371AF /* WindowWithDeallocCallback.m in Sources */ = {isa = PBXBuildFile; fileRef = C0523ECF2A55980D003371AF /* WindowWithDeallocCallback.m */; };
 		C061C79E2A251E0C00A53D8D /* DevViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = C061C79D2A251E0C00A53D8D /* DevViewController.m */; };
 		C061C7A12A26B21C00A53D8D /* AutoResizerRootViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = C061C7A02A26B21C00A53D8D /* AutoResizerRootViewManager.m */; };
 		C061C7A42A26B50200A53D8D /* AutoResizerRootView.m in Sources */ = {isa = PBXBuildFile; fileRef = C061C7A32A26B50200A53D8D /* AutoResizerRootView.m */; };
@@ -30,7 +28,6 @@
 		C08E652E2A5C42950079E3A9 /* main.swift in Sources */ = {isa = PBXBuildFile; fileRef = C08E652D2A5C42950079E3A9 /* main.swift */; };
 		C08E65302A5C44870079E3A9 /* AutoLauncher.app in CopyFiles */ = {isa = PBXBuildFile; fileRef = C08E651E2A5C411D0079E3A9 /* AutoLauncher.app */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
 		C08E65322A5C44B90079E3A9 /* ServiceManagement.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C08E65312A5C44B90079E3A9 /* ServiceManagement.framework */; };
-		C08E65342A5D04910079E3A9 /* WindowNavigator.m in Sources */ = {isa = PBXBuildFile; fileRef = C08E65332A5D04910079E3A9 /* WindowNavigator.m */; };
 		C0B36EA22A65E25A004F2D8C /* Checkbox.m in Sources */ = {isa = PBXBuildFile; fileRef = C0B36E9F2A65E25A004F2D8C /* Checkbox.m */; };
 		C0B36EA32A65E25A004F2D8C /* CheckboxManager.m in Sources */ = {isa = PBXBuildFile; fileRef = C0B36EA12A65E25A004F2D8C /* CheckboxManager.m */; };
 		C0D4407A2DDB9B9E006B7C16 /* PopoverManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = C0D440792DDB9B9E006B7C16 /* PopoverManager.swift */; };
@@ -74,10 +71,6 @@
 		C051E6B52A83577800C6D615 /* orbit-cli-x64 */ = {isa = PBXFileReference; lastKnownFileType = "compiled.mach-o.executable"; name = "orbit-cli-x64"; path = "../../cli/orbit-cli-x64"; sourceTree = "<group>"; };
 		C051EC0C2AA227C600C6D615 /* ExpoMenuBar-macOS-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "ExpoMenuBar-macOS-Bridging-Header.h"; sourceTree = "<group>"; };
 		C051EC0D2AA227C600C6D615 /* SwifterWrapper.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SwifterWrapper.swift; sourceTree = "<group>"; };
-		C0523ECB2A550983003371AF /* WindowManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = WindowManager.m; sourceTree = "<group>"; };
-		C0523ECD2A550A04003371AF /* WindowManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = WindowManager.h; sourceTree = "<group>"; };
-		C0523ECE2A5597FF003371AF /* WindowWithDeallocCallback.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = WindowWithDeallocCallback.h; sourceTree = "<group>"; };
-		C0523ECF2A55980D003371AF /* WindowWithDeallocCallback.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = WindowWithDeallocCallback.m; sourceTree = "<group>"; };
 		C061C79D2A251E0C00A53D8D /* DevViewController.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = DevViewController.m; sourceTree = "<group>"; };
 		C061C79F2A251E3500A53D8D /* DevViewController.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DevViewController.h; sourceTree = "<group>"; };
 		C061C7A02A26B21C00A53D8D /* AutoResizerRootViewManager.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AutoResizerRootViewManager.m; sourceTree = "<group>"; };
@@ -95,8 +88,6 @@
 		C08E65292A5C411E0079E3A9 /* AutoLauncher.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = AutoLauncher.entitlements; sourceTree = "<group>"; };
 		C08E652D2A5C42950079E3A9 /* main.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = main.swift; sourceTree = "<group>"; };
 		C08E65312A5C44B90079E3A9 /* ServiceManagement.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = ServiceManagement.framework; path = Platforms/MacOSX.platform/Developer/SDKs/MacOSX14.0.sdk/System/Library/Frameworks/ServiceManagement.framework; sourceTree = DEVELOPER_DIR; };
-		C08E65332A5D04910079E3A9 /* WindowNavigator.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = WindowNavigator.m; sourceTree = "<group>"; };
-		C08E65352A5D0A580079E3A9 /* WindowNavigator.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = WindowNavigator.h; sourceTree = "<group>"; };
 		C0B36E9E2A65E25A004F2D8C /* Checkbox.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = Checkbox.h; sourceTree = "<group>"; };
 		C0B36E9F2A65E25A004F2D8C /* Checkbox.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = Checkbox.m; sourceTree = "<group>"; };
 		C0B36EA02A65E25A004F2D8C /* CheckboxManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CheckboxManager.h; sourceTree = "<group>"; };
@@ -188,12 +179,6 @@
 				C061C7A62A26DD8C00A53D8D /* SystemIconViewManager.h */,
 				C061C7A72A26DD9A00A53D8D /* SystemIconViewManager.m */,
 				C061C7A92A26EDB800A53D8D /* RCTImageView+Private.h */,
-				C0523ECB2A550983003371AF /* WindowManager.m */,
-				C0523ECD2A550A04003371AF /* WindowManager.h */,
-				C0523ECE2A5597FF003371AF /* WindowWithDeallocCallback.h */,
-				C0523ECF2A55980D003371AF /* WindowWithDeallocCallback.m */,
-				C08E65332A5D04910079E3A9 /* WindowNavigator.m */,
-				C08E65352A5D0A580079E3A9 /* WindowNavigator.h */,
 				C051EC0D2AA227C600C6D615 /* SwifterWrapper.swift */,
 				C051EC0C2AA227C600C6D615 /* ExpoMenuBar-macOS-Bridging-Header.h */,
 				C06B8F8F2AAB77D0009F2BB5 /* DragDropStatusItemView.m */,
@@ -519,14 +504,11 @@
 				C0B36EA22A65E25A004F2D8C /* Checkbox.m in Sources */,
 				C0D4407A2DDB9B9E006B7C16 /* PopoverManager.swift in Sources */,
 				C061C7A82A26DD9A00A53D8D /* SystemIconViewManager.m in Sources */,
-				C0523ED02A55980D003371AF /* WindowWithDeallocCallback.m in Sources */,
 				C06B8F902AAB77D0009F2BB5 /* DragDropStatusItemView.m in Sources */,
 				C0B36EA32A65E25A004F2D8C /* CheckboxManager.m in Sources */,
 				C051EC0E2AA227C600C6D615 /* SwifterWrapper.swift in Sources */,
-				C0523ECC2A550983003371AF /* WindowManager.m in Sources */,
 				C0D4407C2DDBD86F006B7C16 /* AppDelegate.swift in Sources */,
 				C061C7A42A26B50200A53D8D /* AutoResizerRootView.m in Sources */,
-				C08E65342A5D04910079E3A9 /* WindowNavigator.m in Sources */,
 				C061C79E2A251E0C00A53D8D /* DevViewController.m in Sources */,
 				C061C7A12A26B21C00A53D8D /* AutoResizerRootViewManager.m in Sources */,
 				77818F2A6E488E8B68D317B2 /* ExpoModulesProvider.swift in Sources */,

apps/menu-bar/macos/Podfile.lock

@@ -1864,6 +1864,36 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
+  - react-native-multi-window (0.0.2):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTAppDelegate
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactAppDependencyProvider
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - React-NativeModulesApple (0.81.1):
     - boost
     - DoubleConversion
@@ -2438,6 +2468,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../../../node_modules/react-native-macos/ReactCommon`)
   - React-microtasksnativemodule (from `../../../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks`)
   - react-native-mmkv (from `../../../node_modules/react-native-mmkv`)
+  - react-native-multi-window (from `../../../packages/react-native-multi-window`)
   - React-NativeModulesApple (from `../../../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-oscompat (from `../../../node_modules/react-native-macos/ReactCommon/oscompat`)
   - React-perflogger (from `../../../node_modules/react-native-macos/ReactCommon/reactperflogger`)
@@ -2594,6 +2625,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-macos/ReactCommon/react/nativemodule/microtasks"
   react-native-mmkv:
     :path: "../../../node_modules/react-native-mmkv"
+  react-native-multi-window:
+    :path: "../../../packages/react-native-multi-window"
   React-NativeModulesApple:
     :path: "../../../node_modules/react-native-macos/ReactCommon/react/nativemodule/core/platform/ios"
   React-oscompat:
@@ -2720,6 +2753,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 15d41cf2e5215c37e0cccea3d5c4493b7bf856f2
   React-microtasksnativemodule: 86204a62d73dfbd29d1e2ed93d1db2a424ade491
   react-native-mmkv: df237ae1b10c6deec66787c73498b58c6264c1a6
+  react-native-multi-window: 094099c56ec73a9615c730039e4930ed26f86aac
   React-NativeModulesApple: 7a688e1516c692afbae4ffdf3cf5d3b04cc1450d
   React-oscompat: 8a27536d4ae736ce0fe2c7f96c22421c31889761
   React-perflogger: 269feff6b4867de2ec6fb080ccdbf52c1a2dbf0c

apps/menu-bar/package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
+    "react-native-multi-window": "*",
     "@expo/metro-runtime": "~6.1.2",
     "@expo/styleguide-native": "^1.0.1",
     "@fluentui/react-checkbox": "^9.2.40",

apps/menu-bar/src/windows/Onboarding.tsx

@@ -1,6 +1,7 @@
 import { CliCommands } from 'common-types';
 import { useCallback, useRef, useState } from 'react';
 import { Image, Platform, ScrollView, StyleSheet } from 'react-native';
+import { useWindowFocusEffect } from 'react-native-multi-window';
 
 import { WindowsNavigator } from './index';
 import AndroidStudio from '../assets/images/android-studio.png';
@@ -13,7 +14,6 @@ import Button from '../components/Button';
 import CommandCheckItem from '../components/CommandCheckItem';
 import MenuBarModule from '../modules/MenuBarModule';
 import { storage } from '../modules/Storage';
-import { useWindowFocusEffect } from '../modules/WindowManager/useWindowFocus';
 import { useExpoTheme } from '../utils/useExpoTheme';
 
 export const hasSeenOnboardingStorageKey = 'has-seen-onboarding';

apps/menu-bar/src/windows/index.ts

@@ -1,41 +1,54 @@
+import {
+  WindowStyleMask,
+  createWindowsNavigator,
+  withWindowProvider,
+} from 'react-native-multi-window';
+
 import DebugMenu from './DebugMenu';
 import Onboarding from './Onboarding';
 import Settings from './Settings';
-import { WindowStyleMask, createWindowsNavigator } from '../modules/WindowManager';
+import { withFluentProvider } from '../providers/FluentProvider';
+import { withThemeProvider } from '../utils/useExpoTheme';
+
+const wrapComponent = (Component: React.ComponentType<any>, id: string) =>
+  withWindowProvider(withFluentProvider(withThemeProvider(Component)), id);
 
-export const WindowsNavigator = createWindowsNavigator({
-  Settings: {
-    component: Settings,
-    options: {
-      title: 'Settings',
-      windowStyle: {
-        mask: [WindowStyleMask.Titled, WindowStyleMask.Closable],
-        titlebarAppearsTransparent: true,
-        height: 680,
-        width: 500,
+export const WindowsNavigator = createWindowsNavigator(
+  {
+    Settings: {
+      component: Settings,
+      options: {
+        title: 'Settings',
+        windowStyle: {
+          mask: [WindowStyleMask.Titled, WindowStyleMask.Closable],
+          titlebarAppearsTransparent: true,
+          height: 680,
+          width: 500,
+        },
       },
     },
-  },
-  Onboarding: {
-    component: Onboarding,
-    options: {
-      title: '',
-      windowStyle: {
-        mask: [WindowStyleMask.Titled, WindowStyleMask.FullSizeContentView],
-        titlebarAppearsTransparent: true,
-        height: 618,
-        width: 400,
+    Onboarding: {
+      component: Onboarding,
+      options: {
+        title: '',
+        windowStyle: {
+          mask: [WindowStyleMask.Titled, WindowStyleMask.FullSizeContentView],
+          titlebarAppearsTransparent: true,
+          height: 618,
+          width: 400,
+        },
       },
     },
-  },
-  DebugMenu: {
-    component: DebugMenu,
-    options: {
-      title: 'Debug Menu',
-      windowStyle: {
-        height: 600,
-        width: 800,
+    DebugMenu: {
+      component: DebugMenu,
+      options: {
+        title: 'Debug Menu',
+        windowStyle: {
+          height: 600,
+          width: 800,
+        },
       },
     },
   },
-});
+  wrapComponent
+);

packages/react-native-multi-window/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: 'universe/node',
+  ignorePatterns: ['build/**', 'node_modules/**'],
+};

packages/react-native-multi-window/macos/RNMultiWindow.h

@@ -0,0 +1,5 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RNMultiWindow : NSObject <RCTBridgeModule>
+
+@end