@legendapp/state 3.0.0-alpha.8 → 3.0.0-beta.0

package/react-reactive/enableReactNativeComponents.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+exports.enableReactNativeComponents = enableReactNativeComponents;

package/react-reactive/enableReactNativeComponents.mjs

@@ -0,0 +1,51 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/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) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+export { enableReactNativeComponents };

package/react-reactive/enableReactive.d.mts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(config: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.d.ts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(config: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.js

@@ -0,0 +1,24 @@
+'use strict';
+
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.ts
+function enableReactive(config) {
+  enableReactComponents(config);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.mjs

@@ -0,0 +1,22 @@
+// src/react-reactive/enableReactComponents.ts
+function enableReactComponents(config) {
+  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfoInput = Object.assign(
+    { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+    bindInfo
+  );
+  config({
+    binders: {
+      input: bindInfoInput,
+      textarea: bindInfo,
+      select: bindInfo
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.ts
+function enableReactive(config) {
+  enableReactComponents(config);
+}
+
+export { enableReactive };

package/react-reactive/enableReactive.native.d.mts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.native.d.ts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.native.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.native.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.native.mjs

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/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) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.native.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+export { enableReactive };

package/react-reactive/enableReactive.web.d.mts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.web.d.ts

@@ -0,0 +1,5 @@
+import { configureReactive } from '@legendapp/state/react';
+
+declare function enableReactive(configure: typeof configureReactive): void;
+
+export { enableReactive };

package/react-reactive/enableReactive.web.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@legendapp/state/react');
+var reactNative = require('react-native');
+
+// src/react-reactive/enableReactNativeComponents.ts
+function enableReactNativeComponents(configure) {
+  configure({
+    components: {
+      ActivityIndicator: reactNative.ActivityIndicator,
+      Button: reactNative.Button,
+      FlatList: reactNative.FlatList,
+      Image: reactNative.Image,
+      Pressable: reactNative.Pressable,
+      ScrollView: reactNative.ScrollView,
+      SectionList: reactNative.SectionList,
+      Switch: reactNative.Switch,
+      Text: reactNative.Text,
+      TextInput: reactNative.TextInput,
+      TouchableWithoutFeedback: reactNative.TouchableWithoutFeedback,
+      View: reactNative.View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = react.useRef(0);
+            const [renderNum, value] = react$1.useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.web.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+exports.enableReactive = enableReactive;

package/react-reactive/enableReactive.web.mjs

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { useSelector } from '@legendapp/state/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) {
+  configure({
+    components: {
+      ActivityIndicator,
+      Button,
+      FlatList,
+      Image,
+      Pressable,
+      ScrollView,
+      SectionList,
+      Switch,
+      Text,
+      TextInput,
+      TouchableWithoutFeedback,
+      View
+    },
+    binders: {
+      TextInput: {
+        value: {
+          handler: "onChange",
+          getValue: (e) => e.nativeEvent.text,
+          defaultValue: ""
+        }
+      },
+      Switch: {
+        value: {
+          handler: "onValueChange",
+          getValue: (e) => e,
+          defaultValue: false
+        }
+      },
+      FlatList: {
+        data: {
+          selector: (propsOut, p) => {
+            const state = useRef(0);
+            const [renderNum, value] = useSelector(() => [state.current++, p.get(true)]);
+            propsOut.extraData = renderNum;
+            return value;
+          }
+        }
+      }
+    }
+  });
+}
+
+// src/react-reactive/enableReactive.web.ts
+function enableReactive(configure) {
+  enableReactNativeComponents(configure);
+}
+
+export { enableReactive };

package/react.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
-import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
+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';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -28,36 +28,9 @@ declare function usePauseProvider(): {
 
 declare const Memo: react.MemoExoticComponent<typeof Computed>;
 
-type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & {
-    children?: Selector<ReactNode>;
-};
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
-    defaultValue?: any;
-    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
-}
-type BindKeys<P = any> = Record<keyof P, 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 {
-    suspense?: boolean;
-    skipCheck?: boolean;
-}
-
 interface IReactive {
 }
 declare const Reactive: IReactive;
-declare function configureReactive({ components, binders, }: {
-    components?: Record<string, FC | ComponentClass<any>>;
-    binders?: Record<string, BindKeys>;
-}): void;
 
 interface PropsIf<T> {
     if: Selector<T>;
@@ -69,6 +42,7 @@ interface PropsIfReady<T> {
 }
 interface PropsBase<T> {
     else?: ReactNode | (() => ReactNode);
+    $value?: Observable<T>;
     wrap?: FC;
     children: ReactNode | ((value?: T) => ReactNode);
 }
@@ -92,6 +66,29 @@ declare function Switch<T>({ value, children, }: {
     children: Partial<Record<'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 
+type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
+    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+} & {
+    children?: Selector<ReactNode>;
+};
+interface BindKey<P> {
+    handler?: keyof P;
+    getValue?: (e: any) => any;
+    defaultValue?: any;
+    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
+}
+type BindKeys<P = any> = Record<keyof P, 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 {
+    suspense?: boolean;
+    skipCheck?: boolean;
+}
+
 type ShapeWithPick$<T, T2 extends keyof T = keyof T> = Partial<T> & {
     [K in T2 as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
 };
@@ -140,11 +137,14 @@ declare function useObservableReducer<R extends Reducer<any, any>, I>(reducer: R
 declare function useObservableReducer<R extends Reducer<any, any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerState<R>): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
 declare function useObservableReducer<R extends Reducer<any, any>>(reducer: R, initialState: ReducerState<R>, initializer?: undefined): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
 
-declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): () => void;
-declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: ObserveOptions): () => void;
+interface UseObserveOptions extends ObserveOptions {
+    deps?: any[];
+}
+declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): () => void;
+declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): () => void;
 
-declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): void;
-declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: ObserveOptions): void;
+declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): void;
+declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): void;
 
 declare function useSelector<T>(selector: Selector<T>, options?: UseSelectorOptions): T;
 
@@ -154,4 +154,9 @@ 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>;
 
-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 UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+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 };

package/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
-import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveEvent, ObserveOptions, ObserveEventCallback } from '@legendapp/state';
+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';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -28,36 +28,9 @@ declare function usePauseProvider(): {
 
 declare const Memo: react.MemoExoticComponent<typeof Computed>;
 
-type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
-    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
-} & {
-    children?: Selector<ReactNode>;
-};
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
-    defaultValue?: any;
-    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
-}
-type BindKeys<P = any> = Record<keyof P, 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 {
-    suspense?: boolean;
-    skipCheck?: boolean;
-}
-
 interface IReactive {
 }
 declare const Reactive: IReactive;
-declare function configureReactive({ components, binders, }: {
-    components?: Record<string, FC | ComponentClass<any>>;
-    binders?: Record<string, BindKeys>;
-}): void;
 
 interface PropsIf<T> {
     if: Selector<T>;
@@ -69,6 +42,7 @@ interface PropsIfReady<T> {
 }
 interface PropsBase<T> {
     else?: ReactNode | (() => ReactNode);
+    $value?: Observable<T>;
     wrap?: FC;
     children: ReactNode | ((value?: T) => ReactNode);
 }
@@ -92,6 +66,29 @@ declare function Switch<T>({ value, children, }: {
     children: Partial<Record<'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 
+type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
+    [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
+} & {
+    children?: Selector<ReactNode>;
+};
+interface BindKey<P> {
+    handler?: keyof P;
+    getValue?: (e: any) => any;
+    defaultValue?: any;
+    selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
+}
+type BindKeys<P = any> = Record<keyof P, 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 {
+    suspense?: boolean;
+    skipCheck?: boolean;
+}
+
 type ShapeWithPick$<T, T2 extends keyof T = keyof T> = Partial<T> & {
     [K in T2 as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
 };
@@ -140,11 +137,14 @@ declare function useObservableReducer<R extends Reducer<any, any>, I>(reducer: R
 declare function useObservableReducer<R extends Reducer<any, any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerState<R>): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
 declare function useObservableReducer<R extends Reducer<any, any>>(reducer: R, initialState: ReducerState<R>, initializer?: undefined): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
 
-declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): () => void;
-declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: ObserveOptions): () => void;
+interface UseObserveOptions extends ObserveOptions {
+    deps?: any[];
+}
+declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): () => void;
+declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): () => void;
 
-declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): void;
-declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: ObserveOptions): void;
+declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): void;
+declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): void;
 
 declare function useSelector<T>(selector: Selector<T>, options?: UseSelectorOptions): T;
 
@@ -154,4 +154,9 @@ 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>;
 
-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 UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+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 };