@montra-interactive/deepstate-react 0.1.2 → 0.1.4

package/dist/hooks.d.ts

@@ -4,6 +4,12 @@ import type { Observable } from "rxjs";
  * Works with deepstate nodes since they extend Observable.
  */
 type ObservableValue<T> = T extends Observable<infer V> ? V : never;
+/**
+ * Type for object of observables -> object of their values
+ */
+type ObservableObjectValues<T extends Record<string, Observable<unknown>>> = {
+    [K in keyof T]: ObservableValue<T[K]>;
+};
 /**
  * Hook to subscribe to any Observable and get its current value.
  * Re-renders the component whenever the observable emits a new value.
@@ -78,7 +84,7 @@ export declare function useObservable<T>(observable$: Observable<T>, getSnapshot
  */
 export declare function useStateValue<T extends Observable<unknown>>(node: T): ObservableValue<T>;
 /**
- * Hook to derive a value from a deepstate node with a selector function.
+ * Hook to derive a value from one or more deepstate nodes with a selector function.
  * Only re-renders when the derived value changes (using reference equality by default).
  *
  * Use this when you need to compute/transform a value from state.
@@ -86,12 +92,12 @@ export declare function useStateValue<T extends Observable<unknown>>(node: T): O
  *
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
- * @param node - A deepstate node to select from
- * @param selector - Function to derive a value from the node's value
+ * @param node - A deepstate node, array of nodes, or object of nodes to select from
+ * @param selector - Function to derive a value from the node's value(s)
  * @param equalityFn - Optional custom equality function (default: Object.is)
  * @returns The derived value
  *
- * @example
+ * @example Single node
  * ```tsx
  * import { state } from 'deepstate';
  * import { useSelector } from 'deepstate-react';
@@ -101,7 +107,7 @@ export declare function useStateValue<T extends Observable<unknown>>(node: T): O
  *   items: [{ id: 1, price: 10 }, { id: 2, price: 20 }]
  * });
  *
- * // Derive a computed value
+ * // Derive a computed value from a single node
  * function FullName() {
  *   const fullName = useSelector(
  *     store.user,
@@ -109,17 +115,34 @@ export declare function useStateValue<T extends Observable<unknown>>(node: T): O
  *   );
  *   return <span>{fullName}</span>;
  * }
+ * ```
  *
- * // Derive from an array
- * function TotalPrice() {
- *   const total = useSelector(
- *     store.items,
- *     items => items.reduce((sum, item) => sum + item.price, 0)
+ * @example Multiple nodes (array form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as tuple
+ * function Progress() {
+ *   const percentage = useSelector(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
  *   );
- *   return <span>Total: ${total}</span>;
+ *   return <span>{percentage}%</span>;
  * }
+ * ```
  *
- * // With custom equality (e.g., for arrays)
+ * @example Multiple nodes (object form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as object
+ * function Progress() {
+ *   const percentage = useSelector(
+ *     { completed: store.completed, total: store.total },
+ *     ({ completed, total }) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{percentage}%</span>;
+ * }
+ * ```
+ *
+ * @example With custom equality
+ * ```tsx
  * function ItemIds() {
  *   const ids = useSelector(
  *     store.items,
@@ -131,5 +154,10 @@ export declare function useStateValue<T extends Observable<unknown>>(node: T): O
  * ```
  */
 export declare function useSelector<T extends Observable<unknown>, R>(node: T, selector: (value: ObservableValue<T>) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelector<T1 extends Observable<unknown>, T2 extends Observable<unknown>, R>(nodes: [T1, T2], selector: (values: [ObservableValue<T1>, ObservableValue<T2>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelector<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, R>(nodes: [T1, T2, T3], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelector<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, T4 extends Observable<unknown>, R>(nodes: [T1, T2, T3, T4], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelector<T1 extends Observable<unknown>, T2 extends Observable<unknown>, T3 extends Observable<unknown>, T4 extends Observable<unknown>, T5 extends Observable<unknown>, R>(nodes: [T1, T2, T3, T4, T5], selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>, ObservableValue<T5>]) => R, equalityFn?: (a: R, b: R) => boolean): R;
+export declare function useSelector<T extends Record<string, Observable<unknown>>, R>(nodes: T, selector: (values: ObservableObjectValues<T>) => R, equalityFn?: (a: R, b: R) => boolean): R;
 export {};
 //# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAcpE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,EAC1B,WAAW,EAAE,MAAM,CAAC,GACnB,CAAC,CAkBH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,CAAC,OAAO,CAAC,EACzD,IAAI,EAAE,CAAC,GACN,eAAe,CAAC,CAAC,CAAC,CAuBpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,EAC1C,UAAU,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAmB,GAC9C,CAAC,CAuCH"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,9 +1,13 @@
 // src/hooks.ts
 import { useSyncExternalStore, useMemo, useCallback, useRef } from "react";
+import { combineLatest } from "rxjs";
 import { map, distinctUntilChanged } from "rxjs/operators";
 function hasGet(obj) {
   return obj !== null && typeof obj === "object" && "get" in obj && typeof obj.get === "function";
 }
+function isObservable(obj) {
+  return obj !== null && typeof obj === "object" && "subscribe" in obj && typeof obj.subscribe === "function";
+}
 function useObservable(observable$, getSnapshot) {
   const valueRef = useRef(getSnapshot());
   const subscribe = useCallback((onStoreChange) => {
@@ -28,22 +32,59 @@ function useStateValue(node) {
   const getSnapshot = useCallback(() => valueRef.current, []);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
-function useSelector(node, selector, equalityFn = Object.is) {
-  const derived$ = useMemo(() => node.pipe(map((value) => selector(value)), distinctUntilChanged(equalityFn)), [node, selector, equalityFn]);
-  const getInitialValue = () => {
-    if (hasGet(node)) {
-      return selector(node.get());
+function useSelector(nodeOrNodes, selector, equalityFn = Object.is) {
+  const { combined$, getInitialValue } = useMemo(() => {
+    if (Array.isArray(nodeOrNodes)) {
+      const nodes = nodeOrNodes;
+      return {
+        combined$: combineLatest(nodes).pipe(map((values) => selector(values)), distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          const values = nodes.map((n) => hasGet(n) ? n.get() : undefined);
+          return selector(values);
+        }
+      };
+    }
+    if (!isObservable(nodeOrNodes)) {
+      const obj = nodeOrNodes;
+      const keys = Object.keys(obj);
+      const observables = keys.map((k) => obj[k]);
+      return {
+        combined$: combineLatest(observables).pipe(map((values) => {
+          const result = {};
+          keys.forEach((key, i) => {
+            result[key] = values[i];
+          });
+          return selector(result);
+        }), distinctUntilChanged(equalityFn)),
+        getInitialValue: () => {
+          const result = {};
+          keys.forEach((key) => {
+            const node2 = obj[key];
+            result[key] = hasGet(node2) ? node2.get() : undefined;
+          });
+          return selector(result);
+        }
+      };
     }
-    return;
-  };
+    const node = nodeOrNodes;
+    return {
+      combined$: node.pipe(map((value) => selector(value)), distinctUntilChanged(equalityFn)),
+      getInitialValue: () => {
+        if (hasGet(node)) {
+          return selector(node.get());
+        }
+        return;
+      }
+    };
+  }, [nodeOrNodes, selector, equalityFn]);
   const valueRef = useRef(getInitialValue());
   const subscribe = useCallback((onStoreChange) => {
-    const subscription = derived$.subscribe((newValue) => {
+    const subscription = combined$.subscribe((newValue) => {
       valueRef.current = newValue;
       onStoreChange();
     });
     return () => subscription.unsubscribe();
-  }, [derived$]);
+  }, [combined$]);
   const getSnapshot = useCallback(() => valueRef.current, []);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@montra-interactive/deepstate-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React bindings for deepstate - Proxy-based reactive state management with RxJS.",
   "keywords": [
     "react",
@@ -40,7 +40,7 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "rxjs": "^7",
-    "deepstate": "^0.1.0"
+    "@montra-interactive/deepstate": "^0.1.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.1",

package/src/hooks.ts

@@ -1,5 +1,6 @@
 import { useSyncExternalStore, useMemo, useCallback, useRef } from "react";
 import type { Observable } from "rxjs";
+import { combineLatest } from "rxjs";
 import { map, distinctUntilChanged } from "rxjs/operators";
 
 /**
@@ -8,6 +9,20 @@ import { map, distinctUntilChanged } from "rxjs/operators";
  */
 type ObservableValue<T> = T extends Observable<infer V> ? V : never;
 
+/**
+ * Type for array of observables -> tuple of their values
+ */
+type ObservableValues<T extends readonly Observable<unknown>[]> = {
+  [K in keyof T]: ObservableValue<T[K]>;
+};
+
+/**
+ * Type for object of observables -> object of their values
+ */
+type ObservableObjectValues<T extends Record<string, Observable<unknown>>> = {
+  [K in keyof T]: ObservableValue<T[K]>;
+};
+
 /**
  * Interface for deepstate nodes that have a synchronous get() method.
  * This is used internally to detect deepstate nodes vs plain observables.
@@ -20,6 +35,15 @@ function hasGet<T>(obj: unknown): obj is NodeWithGet<T> {
   return obj !== null && typeof obj === "object" && "get" in obj && typeof (obj as NodeWithGet<T>).get === "function";
 }
 
+function isObservable(obj: unknown): obj is Observable<unknown> {
+  return (
+    obj !== null &&
+    typeof obj === "object" &&
+    "subscribe" in obj &&
+    typeof (obj as Record<string, unknown>).subscribe === "function"
+  );
+}
+
 /**
  * Hook to subscribe to any Observable and get its current value.
  * Re-renders the component whenever the observable emits a new value.
@@ -142,7 +166,7 @@ export function useStateValue<T extends Observable<unknown>>(
 }
 
 /**
- * Hook to derive a value from a deepstate node with a selector function.
+ * Hook to derive a value from one or more deepstate nodes with a selector function.
  * Only re-renders when the derived value changes (using reference equality by default).
  *
  * Use this when you need to compute/transform a value from state.
@@ -150,12 +174,12 @@ export function useStateValue<T extends Observable<unknown>>(
  *
  * Uses React 18's useSyncExternalStore for concurrent-mode safety.
  *
- * @param node - A deepstate node to select from
- * @param selector - Function to derive a value from the node's value
+ * @param node - A deepstate node, array of nodes, or object of nodes to select from
+ * @param selector - Function to derive a value from the node's value(s)
  * @param equalityFn - Optional custom equality function (default: Object.is)
  * @returns The derived value
  *
- * @example
+ * @example Single node
  * ```tsx
  * import { state } from 'deepstate';
  * import { useSelector } from 'deepstate-react';
@@ -165,7 +189,7 @@ export function useStateValue<T extends Observable<unknown>>(
  *   items: [{ id: 1, price: 10 }, { id: 2, price: 20 }]
  * });
  *
- * // Derive a computed value
+ * // Derive a computed value from a single node
  * function FullName() {
  *   const fullName = useSelector(
  *     store.user,
@@ -173,17 +197,34 @@ export function useStateValue<T extends Observable<unknown>>(
  *   );
  *   return <span>{fullName}</span>;
  * }
+ * ```
  *
- * // Derive from an array
- * function TotalPrice() {
- *   const total = useSelector(
- *     store.items,
- *     items => items.reduce((sum, item) => sum + item.price, 0)
+ * @example Multiple nodes (array form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as tuple
+ * function Progress() {
+ *   const percentage = useSelector(
+ *     [store.completed, store.total],
+ *     ([completed, total]) => total > 0 ? (completed / total) * 100 : 0
+ *   );
+ *   return <span>{percentage}%</span>;
+ * }
+ * ```
+ *
+ * @example Multiple nodes (object form)
+ * ```tsx
+ * // Combine multiple nodes - receives values as object
+ * function Progress() {
+ *   const percentage = useSelector(
+ *     { completed: store.completed, total: store.total },
+ *     ({ completed, total }) => total > 0 ? (completed / total) * 100 : 0
  *   );
- *   return <span>Total: ${total}</span>;
+ *   return <span>{percentage}%</span>;
  * }
+ * ```
  *
- * // With custom equality (e.g., for arrays)
+ * @example With custom equality
+ * ```tsx
  * function ItemIds() {
  *   const ids = useSelector(
  *     store.items,
@@ -194,43 +235,144 @@ export function useStateValue<T extends Observable<unknown>>(
  * }
  * ```
  */
+// Single node overload
 export function useSelector<T extends Observable<unknown>, R>(
   node: T,
   selector: (value: ObservableValue<T>) => R,
-  equalityFn: (a: R, b: R) => boolean = Object.is
-): R {
-  // Create derived observable that applies selector and dedupes
-  const derived$ = useMemo(
-    () =>
-      node.pipe(
-        map((value) => selector(value as ObservableValue<T>)),
-        distinctUntilChanged(equalityFn)
-      ),
-    [node, selector, equalityFn]
-  );
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Array of nodes overload
+export function useSelector<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+export function useSelector<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+export function useSelector<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  T4 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3, T4],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+export function useSelector<
+  T1 extends Observable<unknown>,
+  T2 extends Observable<unknown>,
+  T3 extends Observable<unknown>,
+  T4 extends Observable<unknown>,
+  T5 extends Observable<unknown>,
+  R
+>(
+  nodes: [T1, T2, T3, T4, T5],
+  selector: (values: [ObservableValue<T1>, ObservableValue<T2>, ObservableValue<T3>, ObservableValue<T4>, ObservableValue<T5>]) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Object of nodes overload
+export function useSelector<T extends Record<string, Observable<unknown>>, R>(
+  nodes: T,
+  selector: (values: ObservableObjectValues<T>) => R,
+  equalityFn?: (a: R, b: R) => boolean
+): R;
+// Implementation
+export function useSelector(
+  nodeOrNodes: Observable<unknown> | Observable<unknown>[] | Record<string, Observable<unknown>>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  selector: (value: any) => any,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  equalityFn: (a: any, b: any) => boolean = Object.is
+): unknown {
+  // Determine the form and create the combined observable
+  const { combined$, getInitialValue } = useMemo(() => {
+    // Array form: [node1, node2, ...]
+    if (Array.isArray(nodeOrNodes)) {
+      const nodes = nodeOrNodes as Observable<unknown>[];
+      return {
+        combined$: combineLatest(nodes).pipe(
+          map((values) => selector(values)),
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          const values = nodes.map((n) => (hasGet<unknown>(n) ? n.get() : undefined));
+          return selector(values);
+        },
+      };
+    }
+
+    // Object form: { a: node1, b: node2, ... }
+    if (!isObservable(nodeOrNodes)) {
+      const obj = nodeOrNodes as Record<string, Observable<unknown>>;
+      const keys = Object.keys(obj);
+      const observables = keys.map((k) => obj[k]);
 
-  // Get initial derived value
-  const getInitialValue = (): R => {
-    if (hasGet<ObservableValue<T>>(node)) {
-      return selector(node.get());
+      return {
+        combined$: combineLatest(observables).pipe(
+          map((values) => {
+            const result: Record<string, unknown> = {};
+            keys.forEach((key, i) => {
+              result[key] = values[i];
+            });
+            return selector(result);
+          }),
+          distinctUntilChanged(equalityFn)
+        ),
+        getInitialValue: (): unknown => {
+          const result: Record<string, unknown> = {};
+          keys.forEach((key) => {
+            const node = obj[key];
+            result[key] = hasGet<unknown>(node) ? node.get() : undefined;
+          });
+          return selector(result);
+        },
+      };
     }
-    return undefined as R;
-  };
+
+    // Single node form
+    const node = nodeOrNodes as Observable<unknown>;
+    return {
+      combined$: node.pipe(
+        map((value) => selector(value)),
+        distinctUntilChanged(equalityFn)
+      ),
+      getInitialValue: (): unknown => {
+        if (hasGet<unknown>(node)) {
+          return selector(node.get());
+        }
+        return undefined;
+      },
+    };
+  }, [nodeOrNodes, selector, equalityFn]);
 
   // Ref to hold the current derived value
-  const valueRef = useRef<R>(getInitialValue());
+  const valueRef = useRef<unknown>(getInitialValue());
 
   // Subscribe callback for useSyncExternalStore
   const subscribe = useCallback(
     (onStoreChange: () => void) => {
-      const subscription = derived$.subscribe((newValue) => {
+      const subscription = combined$.subscribe((newValue) => {
         valueRef.current = newValue;
         onStoreChange();
       });
 
       return () => subscription.unsubscribe();
     },
-    [derived$]
+    [combined$]
   );
 
   // Get snapshot - just returns the ref value