@legendapp/state 3.0.0-beta.4 → 3.0.0-beta.41

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 {
 }
@@ -43,7 +46,9 @@ interface PropsIfReady<T> {
 interface PropsBase<T> {
     else?: ReactNode | (() => ReactNode);
     $value?: Observable<T>;
-    wrap?: FC;
+    wrap?: FC<{
+        children: ReactNode;
+    }>;
     children: ReactNode | ((value?: T) => ReactNode);
 }
 type Props<T> = PropsBase<T> & (PropsIf<T> | PropsIfReady<T>);
@@ -54,11 +59,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,41 +76,59 @@ 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> = Partial<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;
 }
 
-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]>;
-};
-type ShapeWith$<T> = Partial<T> & {
+type WithSelectorChildren<T> = T extends any ? T extends {
+    children?: infer C;
+} ? Omit<T, 'children'> & {
+    children?: C | Selector<C>;
+} : T extends {
+    children: infer C;
+} ? Omit<T, 'children'> & {
+    children: C | Selector<C>;
+} : T : never;
+type ShapeWith$<T> = WithSelectorChildren<Partial<T>> & {
     [K in keyof T as K extends `$${string & K}` ? K : `$${string & K}`]?: Selector<T[K]>;
 };
 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> = T & {
+    [P in K as `$${string & P}`]?: 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>;
@@ -140,23 +163,33 @@ declare function useObservableReducer<R extends Reducer<any, any>>(reducer: R, i
 interface UseObserveOptions extends ObserveOptions {
     deps?: any[];
 }
+declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void): () => void;
+declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, deps?: any[]): () => void;
 declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): () => void;
+declare function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions, deps?: any[]): () => void;
 declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): () => void;
+declare function useObserve<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions, deps?: any[]): () => void;
 
+declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void): void;
+declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, deps?: any[]): void;
 declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions): void;
+declare function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: UseObserveOptions, deps?: any[]): void;
 declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions): void;
+declare function useObserveEffect<T>(selector: Selector<T>, reaction?: (e: ObserveEventCallback<T>) => any, options?: UseObserveOptions, deps?: any[]): void;
 
 declare function useSelector<T>(selector: Selector<T>, options?: UseSelectorOptions): T;
 
 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 FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useObservable as useLocalObservable, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useSelector as useValue, useWhen, useWhenReady };

package/react.js

@@ -45,6 +45,7 @@ function createSelectorFunctions(options, isPaused$) {
     } = state.trackSelector(
       _selector,
       _update,
+      options,
       void 0,
       void 0,
       /*createResubscribe*/
@@ -100,12 +101,24 @@ function createSelectorFunctions(options, isPaused$) {
     }
   };
 }
+function doSuspense(selector) {
+  const vProm = state.when(selector);
+  if (React__default.default.use) {
+    React__default.default.use(vProm);
+  } else {
+    throw vProm;
+  }
+}
 function useSelector(selector, options) {
   var _a;
+  let value;
   if (reactGlobals.inObserver && state.isObservable(selector) && !(options == null ? void 0 : options.suspense)) {
-    return state.computeSelector(selector);
+    value = state.computeSelector(selector, options);
+    if ((options == null ? void 0 : options.suspense) && value === void 0) {
+      doSuspense(selector);
+    }
+    return value;
   }
-  let value;
   try {
     const isPaused$ = React.useContext(getPauseContext());
     const selectorFn = React.useMemo(() => createSelectorFunctions(options, isPaused$), []);
@@ -120,16 +133,8 @@ function useSelector(selector, options) {
     }
     throw err;
   }
-  if (options == null ? void 0 : options.suspense) {
-    const isProm = state.isPromise(value);
-    if (state.isPromise(value) || !value && state.isObservable(selector)) {
-      const vProm = isProm ? value : state.when(selector);
-      if (React__default.default.use) {
-        React__default.default.use(vProm);
-      } else {
-        throw vProm;
-      }
-    }
+  if ((options == null ? void 0 : options.suspense) && value === void 0) {
+    doSuspense(selector);
   }
   return value;
 }
@@ -140,7 +145,7 @@ function Computed({ children }) {
 }
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
 var didWarnProps = false;
-function createReactiveComponent(component, observe3, reactive2, bindKeys) {
+function createReactiveComponent(component, observe3, reactive2, keysReactive, bindKeys) {
   const ReactForwardRefSymbol = hasSymbol ? Symbol.for("react.forward_ref") : (
     // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
     typeof React.forwardRef === "function" && React.forwardRef((props) => null)["$$typeof"]
@@ -165,6 +170,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
       throw new Error(`[legend-state] \`render\` property of ForwardRef was not a function`);
     }
   }
+  const keysReactiveSet = keysReactive ? new Set(keysReactive) : void 0;
   const proxyHandler = {
     apply(target, thisArg, argArray) {
       if (reactive2) {
@@ -174,9 +180,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
         for (let i = 0; i < keys.length; i++) {
           const key = keys[i];
           const p = props[key];
+          const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
           if (key === "children" && (state.isFunction(p) || state.isObservable(p))) {
-            props[key] = useSelector(p, { skipCheck: true });
-          } else if (key.startsWith("$") || key.endsWith("$")) {
+            propsOut[key] = useSelector(p, { skipCheck: true });
+          } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
             if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
               didWarnProps = true;
               console.warn(
@@ -186,7 +193,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 )}. See https://legendapp.com/open-source/state/migrating for more details.`
               );
             }
-            const k = key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
+            const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
             const bind = bindKeys == null ? void 0 : bindKeys[k];
             const shouldBind = bind && state.isObservable(p);
             propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : useSelector(p);
@@ -204,7 +211,9 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 process.env.NODE_ENV === "development" ? handlerFn : React.useCallback(handlerFn, [props[bind.handler], bindKeys]);
               }
             }
-            delete propsOut[key];
+            if (!isReactiveKey) {
+              delete propsOut[key];
+            }
           } else if (propsOut[key] === void 0) {
             propsOut[key] = p;
           }
@@ -241,11 +250,11 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
 function observer(component) {
   return createReactiveComponent(component, true);
 }
-function reactive(component, bindKeys) {
-  return createReactiveComponent(component, false, true, bindKeys);
+function reactive(component, keys, bindKeys) {
+  return createReactiveComponent(component, false, true, keys, bindKeys);
 }
-function reactiveObserver(component, bindKeys) {
-  return createReactiveComponent(component, true, true, bindKeys);
+function reactiveObserver(component, keys, bindKeys) {
+  return createReactiveComponent(component, true, true, keys, bindKeys);
 }
 function reactiveComponents(components) {
   return new Proxy(
@@ -336,7 +345,10 @@ function For({
   }
   return out;
 }
-var Memo = React.memo(Computed, () => true);
+var Memo = React.memo(
+  Computed,
+  (prev, next) => next.scoped ? prev.children === next.children : true
+);
 
 // src/react/configureReactive.ts
 var ReactiveFns = /* @__PURE__ */ new Map();
@@ -371,7 +383,7 @@ var Reactive = new Proxy(
           }
           return React.createElement(Component, propsOut);
         });
-        target[p] = reactive(render, ReactiveFnBinders.get(p));
+        target[p] = reactive(render, [], ReactiveFnBinders.get(p));
       }
       return target[p];
     }
@@ -399,38 +411,6 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useObservable(initialValue, deps) {
-  var _a;
-  const ref = React.useRef({});
-  ref.current.value = initialValue;
-  const depsObs$ = deps ? useObservable(deps) : void 0;
-  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
-    const value = depsObs$ ? state.isFunction(initialValue) && initialValue.length === 1 ? (p) => {
-      depsObs$.get();
-      return ref.current.value(p);
-    } : () => {
-      depsObs$.get();
-      return state.computeSelector(ref.current.value);
-    } : initialValue;
-    ref.current.obs$ = state.observable(value);
-  }
-  if (depsObs$) {
-    depsObs$.set(deps);
-  }
-  return ref.current.obs$;
-}
-
-// src/react/useComputed.ts
-function useComputed(get, set, deps) {
-  if (!deps && state.isArray(set)) {
-    deps = set;
-    set = void 0;
-  }
-  return useObservable(
-    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
-    deps
-  );
-}
 var useEffectOnce = (effect, deps) => {
   if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
     const refDispose = React.useRef({ num: 0 });
@@ -459,6 +439,8 @@ var useEffectOnce = (effect, deps) => {
     React.useEffect(effect, deps);
   }
 };
+
+// src/react/useMount.ts
 function useMount(fn) {
   return useEffectOnce(() => {
     const ret = fn();
@@ -469,6 +451,54 @@ function useMount(fn) {
 }
 var useMountOnce = useMount;
 
+// src/react/useUnmount.ts
+function useUnmount(fn) {
+  return useMount(() => fn);
+}
+var useUnmountOnce = useUnmount;
+
+// src/react/useObservable.ts
+var { deactivateNode } = state.internal;
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = React.useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? state.isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
+      depsObs$.get();
+      return state.computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = state.observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  useUnmount(() => {
+    const obs = ref.current.obs$;
+    if (obs) {
+      const node = state.getNode(obs);
+      deactivateNode(node);
+    }
+  });
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
+  if (!deps && state.isArray(set)) {
+    deps = set;
+    set = void 0;
+  }
+  return useObservable(
+    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
+  );
+}
+
 // src/react/useIsMounted.ts
 function useIsMounted() {
   const obs = useObservable(false);
@@ -480,43 +510,50 @@ function useIsMounted() {
   return obs;
 }
 function useObservableReducer(reducer, initializerArg, initializer) {
-  const obs = useObservable(
-    () => initializerArg !== void 0 && state.isFunction(initializerArg) ? initializer(initializerArg) : initializerArg
-  );
+  const obs = useObservable(() => {
+    if (initializer) {
+      return initializer(initializerArg);
+    }
+    if (state.isFunction(initializerArg)) {
+      return initializerArg();
+    }
+    return initializerArg;
+  });
   const dispatch = (action) => {
     obs.set(reducer(obs.get(), action));
   };
   return [obs, dispatch];
 }
-
-// src/react/useUnmount.ts
-function useUnmount(fn) {
-  return useMount(() => fn);
-}
-var useUnmountOnce = useUnmount;
-
-// src/react/useObserve.ts
-function useObserve(selector, reactionOrOptions, options) {
+function useObserve(selector, reactionOrOptionsOrDeps, options, deps) {
   let reaction;
-  if (state.isFunction(reactionOrOptions)) {
-    reaction = reactionOrOptions;
+  if (state.isFunction(reactionOrOptionsOrDeps)) {
+    reaction = reactionOrOptionsOrDeps;
+  } else if (Array.isArray(reactionOrOptionsOrDeps)) {
+    deps = reactionOrOptionsOrDeps;
+    options = void 0;
   } else {
-    options = reactionOrOptions;
+    options = reactionOrOptionsOrDeps;
   }
-  const deps = options == null ? void 0 : options.deps;
+  if (reaction && Array.isArray(options)) {
+    deps = options;
+    options = void 0;
+  }
+  deps = deps || (options == null ? void 0 : options.deps);
   const depsObs$ = deps ? useObservable(deps) : void 0;
+  const ref = React.useRef({});
+  ref.current.selector = selector;
+  ref.current.reaction = reaction;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = React.useRef({});
-  ref.current.selector = deps ? () => {
-    depsObs$ == null ? void 0 : depsObs$.get();
-    return state.computeSelector(selector);
-  } : selector;
-  ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = state.observe(
-      (e) => state.computeSelector(ref.current.selector, e),
+      (e) => {
+        var _a;
+        depsObs$ == null ? void 0 : depsObs$.get();
+        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+        return state.computeSelector(selector2, void 0, e);
+      },
       (e) => {
         var _a, _b;
         return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
@@ -530,26 +567,35 @@ function useObserve(selector, reactionOrOptions, options) {
   });
   return ref.current.dispose;
 }
-function useObserveEffect(selector, reactionOrOptions, options) {
+function useObserveEffect(selector, reactionOrOptionsOrDeps, options, deps) {
   let reaction;
-  if (state.isFunction(reactionOrOptions)) {
-    reaction = reactionOrOptions;
+  if (state.isFunction(reactionOrOptionsOrDeps)) {
+    reaction = reactionOrOptionsOrDeps;
+  } else if (Array.isArray(reactionOrOptionsOrDeps)) {
+    deps = reactionOrOptionsOrDeps;
+    options = void 0;
   } else {
-    options = reactionOrOptions;
+    options = reactionOrOptionsOrDeps;
   }
-  const deps = options == null ? void 0 : options.deps;
+  if (reaction && Array.isArray(options)) {
+    deps = options;
+    options = void 0;
+  }
+  deps = deps || (options == null ? void 0 : options.deps);
+  const ref = React.useRef({});
   const depsObs$ = deps ? useObservable(deps) : void 0;
+  ref.current.selector = selector;
+  ref.current.reaction = reaction;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = React.useRef({ selector });
-  ref.current = { selector, reaction };
   useMountOnce(
     () => state.observe(
       (e) => {
-        const { selector: selector2 } = ref.current;
+        var _a;
         depsObs$ == null ? void 0 : depsObs$.get();
-        return state.isFunction(selector2) ? selector2(e) : selector2;
+        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+        return state.computeSelector(selector2, void 0, e);
       },
       (e) => {
         var _a, _b;
@@ -578,9 +624,11 @@ exports.observer = observer;
 exports.reactive = reactive;
 exports.reactiveComponents = reactiveComponents;
 exports.reactiveObserver = reactiveObserver;
+exports.use$ = useSelector;
 exports.useComputed = useComputed;
 exports.useEffectOnce = useEffectOnce;
 exports.useIsMounted = useIsMounted;
+exports.useLocalObservable = useObservable;
 exports.useMount = useMount;
 exports.useMountOnce = useMountOnce;
 exports.useObservable = useObservable;
@@ -591,5 +639,6 @@ exports.usePauseProvider = usePauseProvider;
 exports.useSelector = useSelector;
 exports.useUnmount = useUnmount;
 exports.useUnmountOnce = useUnmountOnce;
+exports.useValue = useSelector;
 exports.useWhen = useWhen;
 exports.useWhenReady = useWhenReady;