@legendapp/state 3.0.0-beta.0 → 3.0.0-beta.11

package/index.d.mts

@@ -187,6 +187,7 @@ interface BaseNodeInfo {
     numListenersRecursive: number;
     state?: Observable<ObservableSyncState>;
     activated?: boolean;
+    isPlain?: boolean;
     recursivelyAutoActivated?: boolean;
     activationState?: LinkedOptions & {
         onError?: () => void;
@@ -288,6 +289,7 @@ interface RetryOptions {
 declare const ObservableHint: {
     opaque: <T extends object>(value: T) => OpaqueObject<T>;
     plain: <T extends object>(value: T) => PlainObject<T>;
+    function: <T extends object>(value: T) => PlainObject<T>;
 };
 
 declare function getProxy(node: NodeInfo, p?: string, asFunction?: Function): Observable;

package/index.d.ts

@@ -187,6 +187,7 @@ interface BaseNodeInfo {
     numListenersRecursive: number;
     state?: Observable<ObservableSyncState>;
     activated?: boolean;
+    isPlain?: boolean;
     recursivelyAutoActivated?: boolean;
     activationState?: LinkedOptions & {
         onError?: () => void;
@@ -288,6 +289,7 @@ interface RetryOptions {
 declare const ObservableHint: {
     opaque: <T extends object>(value: T) => OpaqueObject<T>;
     plain: <T extends object>(value: T) => PlainObject<T>;
+    function: <T extends object>(value: T) => PlainObject<T>;
 };
 
 declare function getProxy(node: NodeInfo, p?: string, asFunction?: Function): Observable;

package/index.js

@@ -276,6 +276,9 @@ var ObservableHint = {
   },
   plain: function plainObject(value) {
     return addSymbol(value, symbolPlain);
+  },
+  function: function plainObject2(value) {
+    return addSymbol(value, symbolPlain);
   }
 };
 
@@ -384,7 +387,7 @@ function _mergeIntoObservable(target, source, levelsDeep) {
   const isSourceSet = isSet(source);
   if (isSourceSet && isSet(targetValue)) {
     target.set(/* @__PURE__ */ new Set([...source, ...targetValue]));
-  } else if (isTargetObj && isObject(source) && !isEmpty(targetValue) || isTargetArr && targetValue.length > 0) {
+  } else if (isTargetObj && isObject(source) || isTargetArr && targetValue.length > 0) {
     const keys = isSourceMap || isSourceSet ? Array.from(source.keys()) : Object.keys(source);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
@@ -1788,7 +1791,7 @@ function peek(node) {
 }
 var isFlushing = false;
 function peekInternal(node, activateRecursive) {
-  var _a;
+  var _a, _b;
   isFlushing = true;
   if (activateRecursive && ((_a = node.dirtyChildren) == null ? void 0 : _a.size)) {
     const dirty = Array.from(node.dirtyChildren);
@@ -1803,7 +1806,10 @@ function peekInternal(node, activateRecursive) {
   }
   isFlushing = false;
   let value = getNodeValue(node);
-  if (!globalState.isLoadingLocal) {
+  if (((_b = node.parent) == null ? void 0 : _b.isPlain) || isHintPlain(value)) {
+    node.isPlain = true;
+  }
+  if (!globalState.isLoadingLocal && !node.isPlain) {
     value = checkLazy(node, value, !!activateRecursive);
   }
   return value;

package/index.mjs

@@ -274,6 +274,9 @@ var ObservableHint = {
   },
   plain: function plainObject(value) {
     return addSymbol(value, symbolPlain);
+  },
+  function: function plainObject2(value) {
+    return addSymbol(value, symbolPlain);
   }
 };
 
@@ -382,7 +385,7 @@ function _mergeIntoObservable(target, source, levelsDeep) {
   const isSourceSet = isSet(source);
   if (isSourceSet && isSet(targetValue)) {
     target.set(/* @__PURE__ */ new Set([...source, ...targetValue]));
-  } else if (isTargetObj && isObject(source) && !isEmpty(targetValue) || isTargetArr && targetValue.length > 0) {
+  } else if (isTargetObj && isObject(source) || isTargetArr && targetValue.length > 0) {
     const keys = isSourceMap || isSourceSet ? Array.from(source.keys()) : Object.keys(source);
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
@@ -1786,7 +1789,7 @@ function peek(node) {
 }
 var isFlushing = false;
 function peekInternal(node, activateRecursive) {
-  var _a;
+  var _a, _b;
   isFlushing = true;
   if (activateRecursive && ((_a = node.dirtyChildren) == null ? void 0 : _a.size)) {
     const dirty = Array.from(node.dirtyChildren);
@@ -1801,7 +1804,10 @@ function peekInternal(node, activateRecursive) {
   }
   isFlushing = false;
   let value = getNodeValue(node);
-  if (!globalState.isLoadingLocal) {
+  if (((_b = node.parent) == null ? void 0 : _b.isPlain) || isHintPlain(value)) {
+    node.isPlain = true;
+  }
+  if (!globalState.isLoadingLocal && !node.isPlain) {
     value = checkLazy(node, value, !!activateRecursive);
   }
   return value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.11",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -48,6 +48,12 @@
     "./types/babel": {
       "types": "./types/babel.d.ts"
     },
+    "./types/reactive-web": {
+      "types": "./types/reactive-web.d.ts"
+    },
+    "./types/reactive-native": {
+      "types": "./types/reactive-native.d.ts"
+    },
     ".": {
       "import": "./index.mjs",
       "require": "./index.js",

package/persist-plugins/async-storage.js

@@ -21,7 +21,10 @@ var ObservablePersistAsyncStorage = class {
         if (preload === true) {
           tables = await AsyncStorage.getAllKeys();
         } else if (state.isArray(preload)) {
-          tables = preload;
+          const metadataTables = preload.map(
+            (table) => table.endsWith(MetadataSuffix) ? void 0 : table + MetadataSuffix
+          );
+          tables = [...preload, ...metadataTables.filter(Boolean)];
         }
         if (tables) {
           const values = await AsyncStorage.multiGet(tables);
@@ -38,14 +41,19 @@ var ObservablePersistAsyncStorage = class {
   }
   loadTable(table) {
     if (this.data[table] === void 0) {
-      try {
-        return (async () => {
-          const value = await AsyncStorage.getItem(table);
-          this.data[table] = value ? safeParse(value) : void 0;
-        })();
-      } catch (e) {
-        console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table);
-      }
+      return AsyncStorage.multiGet([table, table + MetadataSuffix]).then((values) => {
+        try {
+          values.forEach(([table2, value]) => {
+            this.data[table2] = value ? safeParse(value) : void 0;
+          });
+        } catch (err) {
+          console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table, err);
+        }
+      }).catch((err) => {
+        if ((err == null ? void 0 : err.message) !== "window is not defined") {
+          console.error("[legend-state] AsyncStorage.multiGet failed", table, err);
+        }
+      });
     }
   }
   // Gets

package/persist-plugins/async-storage.mjs

@@ -19,7 +19,10 @@ var ObservablePersistAsyncStorage = class {
         if (preload === true) {
           tables = await AsyncStorage.getAllKeys();
         } else if (isArray(preload)) {
-          tables = preload;
+          const metadataTables = preload.map(
+            (table) => table.endsWith(MetadataSuffix) ? void 0 : table + MetadataSuffix
+          );
+          tables = [...preload, ...metadataTables.filter(Boolean)];
         }
         if (tables) {
           const values = await AsyncStorage.multiGet(tables);
@@ -36,14 +39,19 @@ var ObservablePersistAsyncStorage = class {
   }
   loadTable(table) {
     if (this.data[table] === void 0) {
-      try {
-        return (async () => {
-          const value = await AsyncStorage.getItem(table);
-          this.data[table] = value ? safeParse(value) : void 0;
-        })();
-      } catch (e) {
-        console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table);
-      }
+      return AsyncStorage.multiGet([table, table + MetadataSuffix]).then((values) => {
+        try {
+          values.forEach(([table2, value]) => {
+            this.data[table2] = value ? safeParse(value) : void 0;
+          });
+        } catch (err) {
+          console.error("[legend-state] ObservablePersistLocalAsyncStorage failed to parse", table, err);
+        }
+      }).catch((err) => {
+        if ((err == null ? void 0 : err.message) !== "window is not defined") {
+          console.error("[legend-state] AsyncStorage.multiGet failed", table, err);
+        }
+      });
     }
   }
   // Gets

package/react-reactive/enableReactComponents.d.mts

@@ -1,9 +1,10 @@
 import { FCReactiveObject, configureReactive } from '@legendapp/state/react';
 
-declare function enableReactComponents(config: typeof configureReactive): void;
+declare function enableReactComponents_(config: typeof configureReactive): void;
+
 declare module '@legendapp/state/react' {
     interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
     }
 }
 
-export { enableReactComponents };
+export { enableReactComponents_ };

package/react-reactive/enableReactComponents.d.ts

@@ -1,9 +1,10 @@
 import { FCReactiveObject, configureReactive } from '@legendapp/state/react';
 
-declare function enableReactComponents(config: typeof configureReactive): void;
+declare function enableReactComponents_(config: typeof configureReactive): void;
+
 declare module '@legendapp/state/react' {
     interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
     }
 }
 
-export { enableReactComponents };
+export { enableReactComponents_ };

package/react-reactive/enableReactComponents.js

@@ -1,7 +1,12 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -16,4 +21,4 @@ function enableReactComponents(config) {
   });
 }
 
-exports.enableReactComponents = enableReactComponents;
+exports.enableReactComponents_ = enableReactComponents_;

package/react-reactive/enableReactComponents.mjs

@@ -1,5 +1,10 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -14,4 +19,4 @@ function enableReactComponents(config) {
   });
 }
 
-export { enableReactComponents };
+export { enableReactComponents_ };

package/react-reactive/enableReactNativeComponents.d.mts

@@ -1,22 +1,5 @@
-import { FCReactiveObject, FCReactive, configureReactive } from '@legendapp/state/react';
-import { ActivityIndicator, ActivityIndicatorProps, Button, ButtonProps, FlatList, FlatListProps, Image, ImageProps, Pressable, PressableProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, Switch, SwitchProps, Text, TextProps, TextInput, TextInputProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps, View, ViewProps } from 'react-native';
+import { configureReactive } from '@legendapp/state/react';
 
-declare function enableReactNativeComponents(configure: typeof configureReactive): void;
-declare module '@legendapp/state/react' {
-    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
-        ActivityIndicator: FCReactive<ActivityIndicator, ActivityIndicatorProps>;
-        Button: FCReactive<Button, ButtonProps>;
-        FlatList: FCReactive<FlatList, FlatListProps<any>>;
-        Image: FCReactive<Image, ImageProps>;
-        Pressable: FCReactive<typeof Pressable, PressableProps>;
-        ScrollView: FCReactive<ScrollView, ScrollViewProps>;
-        SectionList: FCReactive<SectionList, SectionListProps<any>>;
-        Switch: FCReactive<Switch, SwitchProps>;
-        Text: FCReactive<Text, TextProps>;
-        TextInput: FCReactive<TextInput, TextInputProps>;
-        TouchableWithoutFeedback: FCReactive<TouchableWithoutFeedback, TouchableWithoutFeedbackProps>;
-        View: FCReactive<View, ViewProps>;
-    }
-}
+declare function enableReactNativeComponents_(configure: typeof configureReactive): void;
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactNativeComponents.d.ts

@@ -1,22 +1,5 @@
-import { FCReactiveObject, FCReactive, configureReactive } from '@legendapp/state/react';
-import { ActivityIndicator, ActivityIndicatorProps, Button, ButtonProps, FlatList, FlatListProps, Image, ImageProps, Pressable, PressableProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, Switch, SwitchProps, Text, TextProps, TextInput, TextInputProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps, View, ViewProps } from 'react-native';
+import { configureReactive } from '@legendapp/state/react';
 
-declare function enableReactNativeComponents(configure: typeof configureReactive): void;
-declare module '@legendapp/state/react' {
-    interface IReactive extends FCReactiveObject<JSX.IntrinsicElements> {
-        ActivityIndicator: FCReactive<ActivityIndicator, ActivityIndicatorProps>;
-        Button: FCReactive<Button, ButtonProps>;
-        FlatList: FCReactive<FlatList, FlatListProps<any>>;
-        Image: FCReactive<Image, ImageProps>;
-        Pressable: FCReactive<typeof Pressable, PressableProps>;
-        ScrollView: FCReactive<ScrollView, ScrollViewProps>;
-        SectionList: FCReactive<SectionList, SectionListProps<any>>;
-        Switch: FCReactive<Switch, SwitchProps>;
-        Text: FCReactive<Text, TextProps>;
-        TextInput: FCReactive<TextInput, TextInputProps>;
-        TouchableWithoutFeedback: FCReactive<TouchableWithoutFeedback, TouchableWithoutFeedbackProps>;
-        View: FCReactive<View, ViewProps>;
-    }
-}
+declare function enableReactNativeComponents_(configure: typeof configureReactive): void;
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactNativeComponents.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -50,4 +55,4 @@ function enableReactNativeComponents(configure) {
   });
 }
 
-exports.enableReactNativeComponents = enableReactNativeComponents;
+exports.enableReactNativeComponents_ = enableReactNativeComponents_;

package/react-reactive/enableReactNativeComponents.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from 'react';
 import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -48,4 +53,4 @@ function enableReactNativeComponents(configure) {
   });
 }
 
-export { enableReactNativeComponents };
+export { enableReactNativeComponents_ };

package/react-reactive/enableReactive.js

@@ -1,7 +1,12 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -18,7 +23,7 @@ function enableReactComponents(config) {
 
 // src/react-reactive/enableReactive.ts
 function enableReactive(config) {
-  enableReactComponents(config);
+  enableReactComponents_(config);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.mjs

@@ -1,5 +1,10 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
+var isEnabled = false;
+function enableReactComponents_(config) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
@@ -16,7 +21,7 @@ function enableReactComponents(config) {
 
 // src/react-reactive/enableReactive.ts
 function enableReactive(config) {
-  enableReactComponents(config);
+  enableReactComponents_(config);
 }
 
 export { enableReactive };

package/react-reactive/enableReactive.native.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -52,7 +57,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.native.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.native.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from 'react';
 import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -50,7 +55,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.native.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 export { enableReactive };

package/react-reactive/enableReactive.web.js

@@ -1,11 +1,16 @@
 'use strict';
 
-var react = require('react');
 var react$1 = require('@legendapp/state/react');
+var react = require('react');
 var reactNative = require('react-native');
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator: reactNative.ActivityIndicator,
@@ -52,7 +57,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.web.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.web.mjs

@@ -1,9 +1,14 @@
-import { useRef } from 'react';
 import { useSelector } from '@legendapp/state/react';
+import { useRef } from 'react';
 import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
 
 // src/react-reactive/enableReactNativeComponents.ts
-function enableReactNativeComponents(configure) {
+var isEnabled = false;
+function enableReactNativeComponents_(configure) {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
   configure({
     components: {
       ActivityIndicator,
@@ -50,7 +55,7 @@ function enableReactNativeComponents(configure) {
 
 // src/react-reactive/enableReactive.web.ts
 function enableReactive(configure) {
-  enableReactNativeComponents(configure);
+  enableReactNativeComponents_(configure);
 }
 
 export { enableReactive };

package/react.d.mts

@@ -77,7 +77,7 @@ interface BindKey<P> {
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type BindKeys<P = any> = Partial<Record<keyof P, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
@@ -101,10 +101,10 @@ type ObjectShapeWith$<T> = {
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
@@ -151,8 +151,10 @@ declare function useSelector<T>(selector: Selector<T>, options?: UseSelectorOpti
 declare function useUnmount(fn: () => void): void;
 declare const useUnmountOnce: typeof useUnmount;
 
-declare function useWhen<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
-declare function useWhenReady<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
+declare function useWhen<T>(predicate: Selector<T>): Promise<T>;
+declare function useWhen<T, T2>(predicate: Selector<T>, effect: (value: T) => T2): Promise<T2>;
+declare function useWhenReady<T>(predicate: Selector<T>): Promise<T>;
+declare function useWhenReady<T, T2>(predicate: Selector<T>, effect: (value: T) => T2 | (() => T2)): Promise<T2>;
 
 declare function configureReactive({ components, binders, }: {
     components?: Record<string, FC | ComponentClass<any>>;

package/react.d.ts

@@ -77,7 +77,7 @@ interface BindKey<P> {
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type BindKeys<P = any> = Partial<Record<keyof P, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
@@ -101,10 +101,10 @@ type ObjectShapeWith$<T> = {
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T | FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
+declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
@@ -151,8 +151,10 @@ declare function useSelector<T>(selector: Selector<T>, options?: UseSelectorOpti
 declare function useUnmount(fn: () => void): void;
 declare const useUnmountOnce: typeof useUnmount;
 
-declare function useWhen<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
-declare function useWhenReady<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)): Promise<any>;
+declare function useWhen<T>(predicate: Selector<T>): Promise<T>;
+declare function useWhen<T, T2>(predicate: Selector<T>, effect: (value: T) => T2): Promise<T2>;
+declare function useWhenReady<T>(predicate: Selector<T>): Promise<T>;
+declare function useWhenReady<T, T2>(predicate: Selector<T>, effect: (value: T) => T2 | (() => T2)): Promise<T2>;
 
 declare function configureReactive({ components, binders, }: {
     components?: Record<string, FC | ComponentClass<any>>;