feat: make DX of defining your store better

Author: okwasniewski

apps/example/App.tsx

@@ -1,18 +1,16 @@
 import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
 import { useBrownieStore, setState } from '@callstack/brownie';
-import type { BrownfieldStore } from './brownfield-store.schema';
-
-const STORE_KEY = 'BrownfieldStore';
+import './BrownfieldStore.brownie';
 
 function HomeScreen() {
-  const state = useBrownieStore<BrownfieldStore>(STORE_KEY);
+  const state = useBrownieStore('SettingsStore');
 
   const handleIncrement = () => {
-    setState<BrownfieldStore>(STORE_KEY, { counter: state.counter + 1 });
+    setState('BrownfieldStore', { counter: state.counter + 1 });
   };
 
   const handleSetHasError = () => {
-    setState<BrownfieldStore>(STORE_KEY, { hasError: !state.hasError });
+    setState('BrownfieldStore', { hasError: !state.hasError });
   };
 
   return (
@@ -26,9 +24,7 @@ function HomeScreen() {
       <TextInput
         style={styles.input}
         value={state.user}
-        onChangeText={(text) =>
-          setState<BrownfieldStore>(STORE_KEY, { user: text })
-        }
+        onChangeText={(text) => setState('BrownfieldStore', { user: text })}
         placeholder="User name"
       />
 

apps/example/BrownfieldStore.brownie.ts

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

apps/example/brownfield-store.schema.ts

@@ -34,14 +34,8 @@
     "node": ">=20"
   },
   "brownie": {
-    "stores": [
-      {
-        "schema": "./brownfield-store.schema.ts",
-        "typeName": "BrownfieldStore",
-        "swift": "./swift/Generated/BrownfieldStore.swift",
-        "kotlin": "./kotlin/app/src/main/java/com/callstack/kotlinexample/Generated/BrownfieldStore.kt",
-        "kotlinPackageName": "com.callstack.kotlinexample"
-      }
-    ]
+    "swift": "./swift/Generated",
+    "kotlin": "./kotlin/app/src/main/java/com/callstack/kotlinexample/Generated",
+    "kotlinPackageName": "com.callstack.kotlinexample"
   }
 }

apps/example/package.json

@@ -15,7 +15,7 @@ struct MyApp: App {
     let state = Store(initialState)
     StoreManager.shared.register(
       store: state,
-      for: BrownfieldStore.self
+      key: BrownfieldStore.storeName
     )
   }
 
@@ -40,8 +40,8 @@ struct MyApp: App {
   }
 
   struct NativeView: View {
-    @UseStore<BrownfieldStore, String>(\.user) var user
-    @UseStore<BrownfieldStore, Double>(\.counter) var counter
+    @UseStore<BrownfieldStore, String>(\.user, key: BrownfieldStore.storeName) var user
+    @UseStore<BrownfieldStore, Double>(\.counter, key: BrownfieldStore.storeName) var counter
 
     var body: some View {
       VStack {

apps/example/swift/App.swift

@@ -3,8 +3,5 @@
   "references": [
     { "path": "../../packages/brownie" },
     { "path": "../../packages/react-native-brownfield" }
-  ],
-  "compilerOptions": {
-    "rootDir": "."
-  }
+  ]
 }

apps/example/tsconfig.json

@@ -24,20 +24,10 @@ protocol StateSettable {
     stores[key] = store
   }
 
-  public func register<State>(store: Store<State>, for type: State.Type) {
-    let key = String(describing: type)
-    stores[key] = store
-  }
-  
   public func store<State>(key: String, as type: State.Type) -> Store<State>? {
     return stores[key] as? Store<State>
   }
 
-  public func store<State>(for type: State.Type) -> Store<State>? {
-    let key = String(describing: type)
-    return stores[key] as? Store<State>
-  }
-  
   public func removeStore(key: String) {
     stores.removeValue(forKey: key)
   }
@@ -56,10 +46,6 @@ protocol StateSettable {
 }
 
 public extension StoreManager {
-  static func get<State>(_ type: State.Type) -> Store<State>? {
-    shared.store(for: type)
-  }
-  
   static func get<State>(key: String, as type: State.Type) -> Store<State>? {
     shared.store(key: key, as: type)
   }
@@ -82,10 +68,10 @@ public struct UseStore<State: Codable, Value>: DynamicProperty {
   private let keyPath: KeyPath<State, Value>
   @StateObject private var store: Store<State>
 
-  public init(_ keyPath: KeyPath<State, Value>) {
+  public init(_ keyPath: KeyPath<State, Value>, key: String) {
     self.keyPath = keyPath
-    let foundStore = StoreManager.shared.store(for: State.self)
-    guard let foundStore else { fatalError("Store not found for \(State.self)") }
+    let foundStore = StoreManager.shared.store(key: key, as: State.self)
+    guard let foundStore else { fatalError("Store not found for key: \(key)") }
     self._store = StateObject(wrappedValue: foundStore)
   }
 

packages/brownie/ios/BrownieStore.swift

@@ -15,6 +15,7 @@
   "react-native": "src/index",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": {
         "types": "./lib/typescript/module/src/index.d.ts",
         "default": "./lib/module/index.js"
@@ -61,7 +62,8 @@
   },
   "dependencies": {
     "quicktype-core": "^23.0.170",
-    "quicktype-typescript-input": "^23.0.170"
+    "quicktype-typescript-input": "^23.0.170",
+    "ts-morph": "^25.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/brownie/package.json

@@ -0,0 +1,10 @@
+type SecondStore = {
+  theme: string;
+  enabled: boolean;
+};
+
+declare module '@callstack/brownie' {
+  interface BrownieStores {
+    SecondStore: SecondStore;
+  }
+}

packages/brownie/scripts/__fixtures__/SecondStore.brownie.ts

@@ -0,0 +1,11 @@
+type TestStore = {
+  counter: number;
+  name: string;
+  isActive: boolean;
+};
+
+declare module '@callstack/brownie' {
+  interface BrownieStores {
+    TestStore: TestStore;
+  }
+}