@legendapp/state 3.0.0-beta.2 → 3.0.0-beta.21

package/react-reactive/enableReactComponents.mjs

@@ -1,6 +1,13 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+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 } },
     bindInfo
@@ -14,4 +21,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,8 +1,15 @@
 'use strict';
 
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+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 } },
     bindInfo
@@ -18,7 +25,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,6 +1,13 @@
 // src/react-reactive/enableReactComponents.ts
-function enableReactComponents(config) {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+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 } },
     bindInfo
@@ -16,7 +23,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-web.d.mts

@@ -0,0 +1,6 @@
+import { FCReactiveObject } from '@legendapp/state/react';
+
+type IReactive = FCReactiveObject<JSX.IntrinsicElements>;
+declare const $React: IReactive;
+
+export { $React };

package/react-web.d.ts

@@ -0,0 +1,6 @@
+import { FCReactiveObject } from '@legendapp/state/react';
+
+type IReactive = FCReactiveObject<JSX.IntrinsicElements>;
+declare const $React: IReactive;
+
+export { $React };

package/react-web.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var state = require('@legendapp/state');
+var react$1 = require('@legendapp/state/react');
+var react = require('react');
+
+// src/react-web/$React.tsx
+var bindInfoOneWay = {
+  value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+};
+var bindInfoInput = Object.assign(
+  { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+  bindInfoOneWay
+);
+var binders = /* @__PURE__ */ new Map([
+  ["input", bindInfoInput],
+  ["textarea", bindInfoOneWay],
+  ["select", bindInfoOneWay]
+]);
+var $React = new Proxy(
+  {},
+  {
+    get(target, p) {
+      if (!target[p]) {
+        const render = react.forwardRef((props, ref) => {
+          const propsOut = { ...props };
+          if (ref && (state.isFunction(ref) || !state.isEmpty(ref))) {
+            propsOut.ref = ref;
+          }
+          return react.createElement(p, propsOut);
+        });
+        target[p] = react$1.reactive(render, [], binders.get(p));
+      }
+      return target[p];
+    }
+  }
+);
+
+exports.$React = $React;

package/react-web.mjs

@@ -0,0 +1,37 @@
+import { isFunction, isEmpty } from '@legendapp/state';
+import { reactive } from '@legendapp/state/react';
+import { forwardRef, createElement } from 'react';
+
+// src/react-web/$React.tsx
+var bindInfoOneWay = {
+  value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+};
+var bindInfoInput = Object.assign(
+  { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+  bindInfoOneWay
+);
+var binders = /* @__PURE__ */ new Map([
+  ["input", bindInfoInput],
+  ["textarea", bindInfoOneWay],
+  ["select", bindInfoOneWay]
+]);
+var $React = new Proxy(
+  {},
+  {
+    get(target, p) {
+      if (!target[p]) {
+        const render = forwardRef((props, ref) => {
+          const propsOut = { ...props };
+          if (ref && (isFunction(ref) || !isEmpty(ref))) {
+            propsOut.ref = ref;
+          }
+          return createElement(p, propsOut);
+        });
+        target[p] = reactive(render, [], binders.get(p));
+      }
+      return target[p];
+    }
+  }
+);
+
+export { $React };

package/react.d.mts

@@ -1,6 +1,6 @@
-import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
-import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
+import * as React from 'react';
+import { ReactNode, ReactElement, FC, NamedExoticComponent, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
+import { ObservableParam, Observable, ObservableBoolean, Selector, GetOptions, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -22,11 +22,14 @@ declare function For<T, TProps>({ each, optimized: isOptimized, item, itemProps,
 declare function usePauseProvider(): {
     PauseProvider: ({ children }: {
         children: ReactNode;
-    }) => react.FunctionComponentElement<react.ProviderProps<ObservableBoolean>>;
+    }) => React.FunctionComponentElement<React.ProviderProps<ObservableBoolean>>;
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: react.MemoExoticComponent<typeof Computed>;
+declare const Memo: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
 
 interface IReactive {
 }
@@ -54,11 +57,11 @@ declare function Switch<T extends object>({ value, children, }: {
     children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends string | number | symbol>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends boolean>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T>({ value, children, }: {
@@ -71,20 +74,20 @@ type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
 } & {
     children?: Selector<ReactNode>;
 };
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
+interface BindKey<P, K extends keyof P = keyof P> {
+    handler?: K;
+    getValue?: P[K] extends infer T ? T extends (...args: any) => any ? (params: Parameters<T>[0]) => any : (e: any) => any : (e: any) => any;
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type BindKeys<P = any, K extends keyof P = keyof P> = Partial<Record<K, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
 type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
     ref?: LegacyRef<P> | undefined;
 }>;
-interface UseSelectorOptions {
+interface UseSelectorOptions extends GetOptions {
     suspense?: boolean;
     skipCheck?: boolean;
 }
@@ -99,13 +102,26 @@ type ObjectShapeWith$<T> = {
     [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
 };
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
+type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: Selector<T[P]>;
+};
 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 reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactive<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactive<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>): React.ComponentClass<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveComponents<P extends Record<string, any>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
 declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
@@ -151,12 +167,14 @@ 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>>;
     binders?: Record<string, BindKeys>;
 }): void;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.d.ts

@@ -1,6 +1,6 @@
-import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
-import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
+import * as React from 'react';
+import { ReactNode, ReactElement, FC, NamedExoticComponent, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
+import { ObservableParam, Observable, ObservableBoolean, Selector, GetOptions, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -22,11 +22,14 @@ declare function For<T, TProps>({ each, optimized: isOptimized, item, itemProps,
 declare function usePauseProvider(): {
     PauseProvider: ({ children }: {
         children: ReactNode;
-    }) => react.FunctionComponentElement<react.ProviderProps<ObservableBoolean>>;
+    }) => React.FunctionComponentElement<React.ProviderProps<ObservableBoolean>>;
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: react.MemoExoticComponent<typeof Computed>;
+declare const Memo: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
 
 interface IReactive {
 }
@@ -54,11 +57,11 @@ declare function Switch<T extends object>({ value, children, }: {
     children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends string | number | symbol>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends boolean>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T>({ value, children, }: {
@@ -71,20 +74,20 @@ type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
 } & {
     children?: Selector<ReactNode>;
 };
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
+interface BindKey<P, K extends keyof P = keyof P> {
+    handler?: K;
+    getValue?: P[K] extends infer T ? T extends (...args: any) => any ? (params: Parameters<T>[0]) => any : (e: any) => any : (e: any) => any;
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Record<keyof P, BindKey<P>>;
+type BindKeys<P = any, K extends keyof P = keyof P> = Partial<Record<K, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
 type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
     ref?: LegacyRef<P> | undefined;
 }>;
-interface UseSelectorOptions {
+interface UseSelectorOptions extends GetOptions {
     suspense?: boolean;
     skipCheck?: boolean;
 }
@@ -99,13 +102,26 @@ type ObjectShapeWith$<T> = {
     [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
 };
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
+type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: Selector<T[P]>;
+};
 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 reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactive<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactive<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>): React.ComponentClass<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveComponents<P extends Record<string, any>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
 declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
@@ -151,12 +167,14 @@ 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>>;
     binders?: Record<string, BindKeys>;
 }): void;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };