feat: brownie packaging as XCFramework (#185)

* feat: package brownie as xcframework

feat: native code generation

feat: integrate into tester app

feat: create BrownieFollyConvert.h

feat: docs

fix: popspec improvements

fix: compile time issues

* feat: docs

* fix: bump down deployment targets

* fix: codegen before packaging

Author: okwasniewski

apps/AppleApp/Brownfield Apple App.xcodeproj/project.pbxproj

@@ -13,6 +13,8 @@
 		798DE8DB2F0EC98F00CFC6F3 /* hermesvm.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 79A9BC7F2EF5781F009EC2E3 /* hermesvm.xcframework */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
 		798DE8DC2F0EC99000CFC6F3 /* ReactBrownfield.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = 79A9BC802EF5781F009EC2E3 /* ReactBrownfield.xcframework */; };
 		798DE8DD2F0EC99000CFC6F3 /* ReactBrownfield.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 79A9BC802EF5781F009EC2E3 /* ReactBrownfield.xcframework */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+		79A9BC812EF5781F009EC2E3 /* Brownie.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = 79A9BC822EF5781F009EC2E3 /* Brownie.xcframework */; };
+		79A9BC832EF5781F009EC2E3 /* Brownie.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 79A9BC822EF5781F009EC2E3 /* Brownie.xcframework */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -25,6 +27,7 @@
 				798DE8DB2F0EC98F00CFC6F3 /* hermesvm.xcframework in Embed Frameworks */,
 				798DE8DD2F0EC99000CFC6F3 /* ReactBrownfield.xcframework in Embed Frameworks */,
 				798DE8D82F0EC98E00CFC6F3 /* BrownfieldLib.xcframework in Embed Frameworks */,
+				79A9BC832EF5781F009EC2E3 /* Brownie.xcframework in Embed Frameworks */,
 			);
 			name = "Embed Frameworks";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -36,6 +39,7 @@
 		79A9BC7E2EF5781F009EC2E3 /* BrownfieldLib.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = BrownfieldLib.xcframework; path = ../RNApp/ios/.brownfield/package/BrownfieldLib.xcframework; sourceTree = SOURCE_ROOT; };
 		79A9BC7F2EF5781F009EC2E3 /* hermesvm.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = hermesvm.xcframework; path = ../RNApp/ios/.brownfield/package/hermesvm.xcframework; sourceTree = SOURCE_ROOT; };
 		79A9BC802EF5781F009EC2E3 /* ReactBrownfield.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = ReactBrownfield.xcframework; path = ../RNApp/ios/.brownfield/package/ReactBrownfield.xcframework; sourceTree = SOURCE_ROOT; };
+		79A9BC822EF5781F009EC2E3 /* Brownie.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = Brownie.xcframework; path = ../RNApp/ios/.brownfield/package/Brownie.xcframework; sourceTree = SOURCE_ROOT; };
 /* End PBXFileReference section */
 
 /* Begin PBXFileSystemSynchronizedRootGroup section */
@@ -54,6 +58,7 @@
 				798DE8DA2F0EC98F00CFC6F3 /* hermesvm.xcframework in Frameworks */,
 				798DE8DC2F0EC99000CFC6F3 /* ReactBrownfield.xcframework in Frameworks */,
 				798DE8D72F0EC98E00CFC6F3 /* BrownfieldLib.xcframework in Frameworks */,
+				79A9BC812EF5781F009EC2E3 /* Brownie.xcframework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -64,6 +69,7 @@
 			isa = PBXGroup;
 			children = (
 				79A9BC7E2EF5781F009EC2E3 /* BrownfieldLib.xcframework */,
+				79A9BC822EF5781F009EC2E3 /* Brownie.xcframework */,
 				79A9BC7F2EF5781F009EC2E3 /* hermesvm.xcframework */,
 				79A9BC802EF5781F009EC2E3 /* ReactBrownfield.xcframework */,
 				793C76A92EEBF938008A2A34 /* Brownfield Apple App */,
@@ -300,10 +306,10 @@
 				"INFOPLIST_KEY_UIStatusBarStyle[sdk=iphonesimulator*]" = UIStatusBarStyleDefault;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				IPHONEOS_DEPLOYMENT_TARGET = 26.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = "@executable_path/Frameworks";
 				"LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks";
-				MACOSX_DEPLOYMENT_TARGET = 15.6;
+				MACOSX_DEPLOYMENT_TARGET = 14.0;
 				MARKETING_VERSION = 1.0;
 				PRODUCT_BUNDLE_IDENTIFIER = "com.callstack.brownfield.ios.example.Brownfield-iOS-App";
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -317,7 +323,7 @@
 				SWIFT_UPCOMING_FEATURE_MEMBER_IMPORT_VISIBILITY = YES;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2,7";
-				XROS_DEPLOYMENT_TARGET = 26.1;
+				XROS_DEPLOYMENT_TARGET = 2.0;
 			};
 			name = Debug;
 		};
@@ -343,10 +349,10 @@
 				"INFOPLIST_KEY_UIStatusBarStyle[sdk=iphonesimulator*]" = UIStatusBarStyleDefault;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				IPHONEOS_DEPLOYMENT_TARGET = 26.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = "@executable_path/Frameworks";
 				"LD_RUNPATH_SEARCH_PATHS[sdk=macosx*]" = "@executable_path/../Frameworks";
-				MACOSX_DEPLOYMENT_TARGET = 15.6;
+				MACOSX_DEPLOYMENT_TARGET = 14.0;
 				MARKETING_VERSION = 1.0;
 				PRODUCT_BUNDLE_IDENTIFIER = "com.callstack.brownfield.ios.example.Brownfield-iOS-App";
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -360,7 +366,7 @@
 				SWIFT_UPCOMING_FEATURE_MEMBER_IMPORT_VISIBILITY = YES;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2,7";
-				XROS_DEPLOYMENT_TARGET = 26.1;
+				XROS_DEPLOYMENT_TARGET = 2.0;
 			};
 			name = Release;
 		};

apps/AppleApp/Brownfield Apple App/BrownfieldAppleApp.swift

@@ -1,4 +1,5 @@
 import BrownfieldLib
+import Brownie
 import ReactBrownfield
 import SwiftUI
 
@@ -15,6 +16,8 @@ struct BrownfieldAppleApp: App {
         ReactNativeBrownfield.shared.startReactNative {
             print("React Native has been loaded")
         }
+        
+        _ = Store(initialState, key: BrownfieldStore.storeName)
     }
 
     var body: some Scene {

apps/AppleApp/Brownfield Apple App/ContentView.swift

@@ -1,6 +1,12 @@
 import ReactBrownfield
+import Brownie
 import SwiftUI
 
+let initialState = BrownfieldStore(
+  counter: 0,
+  user: User(name: "Username")
+)
+
 struct ContentView: View {
     var body: some View {
         NavigationView {
@@ -27,7 +33,7 @@ struct MainScreen: View {
 
 struct GreetingCard: View {
     let name: String
-    @State private var counter: Int = 0
+    @UseStore(\BrownfieldStore.counter) var counter
 
     var body: some View {
         VStack(spacing: 12) {
@@ -36,13 +42,13 @@ struct GreetingCard: View {
                 .multilineTextAlignment(.center)
 
             Text(
-                "You clicked the button \(counter) time\(counter == 1 ? "" : "s")"
+                "You clicked the button \(Int(counter)) time\(counter == 1 ? "" : "s")"
             )
             .multilineTextAlignment(.center)
             .font(.body)
 
             Button("Increment counter") {
-                counter += 1
+                $counter.set { $0 + 1 }
             }
             .buttonStyle(.borderedProminent)
         }

apps/RNApp/App.tsx

@@ -1,5 +1,7 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { StyleSheet, Text, View, Button } from 'react-native';
+import { useStore } from '@callstack/brownie';
+import './BrownfieldStore.brownie';
 import {
   createNativeStackNavigator,
   type NativeStackScreenProps,
@@ -26,6 +28,7 @@ type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;
 
 function HomeScreen({ navigation, route }: Props) {
   const colors = route.params?.theme || getRandomTheme();
+  const [counter, setState] = useStore('BrownfieldStore', (s) => s.counter);
 
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
@@ -41,6 +44,16 @@ function HomeScreen({ navigation, route }: Props) {
         React Native Screen
       </Text>
 
+      <Text style={[styles.text, { color: colors.secondary }]}>
+        Count: {counter}
+      </Text>
+
+      <Button
+        onPress={() => setState((prev) => ({ counter: prev.counter + 1 }))}
+        color={colors.secondary}
+        title="Increment"
+      />
+
       <Button
         onPress={() => {
           navigation.push('Home', {

apps/RNApp/BrownfieldStore.brownie.ts

@@ -0,0 +1,21 @@
+import type { BrownieStore } from '@callstack/brownie';
+
+interface BrownfieldStore extends BrownieStore {
+  counter: number;
+  user: {
+    name: string;
+  };
+}
+
+interface SettingsStore extends BrownieStore {
+  theme: 'light' | 'dark';
+  notificationsEnabled: boolean;
+  privacyMode: boolean;
+}
+
+declare module '@callstack/brownie' {
+  interface BrownieStores {
+    BrownfieldStore: BrownfieldStore;
+    SettingsStore: SettingsStore;
+  }
+}

apps/RNApp/android/BrownfieldLib/src/main/java/com/rnapp/brownfieldlib/Generated/BrownfieldStore.kt

@@ -0,0 +1,14 @@
+package com.rnapp.brownfieldlib
+
+data class BrownfieldStore (
+    val counter: Double,
+    val user: User
+) {
+    companion object {
+        const val STORE_NAME = "BrownfieldStore"
+    }
+}
+
+data class User (
+    val name: String
+)

apps/RNApp/android/BrownfieldLib/src/main/java/com/rnapp/brownfieldlib/Generated/SettingsStore.kt

@@ -0,0 +1,16 @@
+package com.rnapp.brownfieldlib
+
+data class SettingsStore (
+    val notificationsEnabled: Boolean,
+    val privacyMode: Boolean,
+    val theme: Theme
+) {
+    companion object {
+        const val STORE_NAME = "SettingsStore"
+    }
+}
+
+enum class Theme {
+    Dark,
+    Light
+}

apps/RNApp/ios/BrownfieldLib/BrownfieldLib.swift

@@ -1,5 +1,6 @@
 // Export helpers from @callstack/react-native-brownfield library
 @_exported import ReactBrownfield
+@_exported import Brownie
 // Initializes a Bundle instance that points at the framework target.
 public let ReactNativeBundle = Bundle(for: InternalClassForBundle.self)
 class InternalClassForBundle {}

apps/RNApp/ios/Podfile.lock

@@ -1,5 +1,33 @@
 PODS:
   - boost (1.84.0)
+  - Brownie (0.0.1):
+    - 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-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - DoubleConversion (1.1.6)
   - fast_float (8.0.0)
   - FBLazyVector (0.82.1)
@@ -2502,6 +2530,7 @@ PODS:
 
 DEPENDENCIES:
   - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
+  - "Brownie (from `../node_modules/@callstack/brownie`)"
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - fast_float (from `../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
@@ -2587,6 +2616,8 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   boost:
     :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
+  Brownie:
+    :path: "../node_modules/@callstack/brownie"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   fast_float:
@@ -2741,6 +2772,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
+  Brownie: 6d3a2e0ddd7d92e80f53220569f42357436ef269
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: 0aa6183b9afe3c31fc65b5d1eeef1f3c19b63bfa

apps/RNApp/metro.config.js

@@ -1,16 +1,8 @@
 const path = require('node:path');
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { getDefaultConfig } = require('@react-native/metro-config');
+const { withMetroConfig } = require('react-native-monorepo-config');
 
-const root = path.resolve(__dirname, '..', '..');
-
-/**
- * Metro configuration
- * https://reactnative.dev/docs/metro
- *
- * @type {import('@react-native/metro-config').MetroConfig}
- */
-const config = {
-  watchFolders: [root],
-};
-
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = withMetroConfig(getDefaultConfig(__dirname), {
+  root: path.resolve(__dirname, '../..'),
+  dirname: __dirname,
+});