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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.21",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -208,6 +208,11 @@
       "require": "./sync-plugins/crud.js",
       "types": "./sync-plugins/crud.d.ts"
     },
+    "./sync-plugins/firebase": {
+      "import": "./sync-plugins/firebase.mjs",
+      "require": "./sync-plugins/firebase.js",
+      "types": "./sync-plugins/firebase.d.ts"
+    },
     "./sync-plugins/tanstack-react-query": {
       "import": "./sync-plugins/tanstack-react-query.mjs",
       "require": "./sync-plugins/tanstack-react-query.js",

package/persist-plugins/async-storage.d.mts

@@ -1,9 +1,9 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistenceConfigLocalGlobalOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistPluginOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private data;
-    initialize(config: ObservablePersistenceConfigLocalGlobalOptions): Promise<void>;
+    initialize(config: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string): void | Promise<void>;
     getTable(table: string, init: object): any;
     getMetadata(table: string): PersistMetadata;

package/persist-plugins/async-storage.d.ts

@@ -1,9 +1,9 @@
 import { Change } from '@legendapp/state';
-import { ObservablePersistPlugin, ObservablePersistenceConfigLocalGlobalOptions, PersistMetadata } from '@legendapp/state/sync';
+import { ObservablePersistPlugin, ObservablePersistPluginOptions, PersistMetadata } from '@legendapp/state/sync';
 
 declare class ObservablePersistAsyncStorage implements ObservablePersistPlugin {
     private data;
-    initialize(config: ObservablePersistenceConfigLocalGlobalOptions): Promise<void>;
+    initialize(config: ObservablePersistPluginOptions): Promise<void>;
     loadTable(table: string): void | Promise<void>;
     getTable(table: string, init: object): any;
     getMetadata(table: string): PersistMetadata;

package/persist-plugins/indexeddb.js

@@ -163,7 +163,7 @@ var ObservablePersistIndexedDB = class {
         pendingTable.items.add(key);
       } else {
         this.tableData[table] = valueAtPath;
-        pendingTable.tablePrev = prev;
+        pendingTable.tablePrev = prev || {};
         break;
       }
     }

package/persist-plugins/indexeddb.mjs

@@ -161,7 +161,7 @@ var ObservablePersistIndexedDB = class {
         pendingTable.items.add(key);
       } else {
         this.tableData[table] = valueAtPath;
-        pendingTable.tablePrev = prev;
+        pendingTable.tablePrev = prev || {};
         break;
       }
     }

package/react.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ReactElement, FC, LegacyRef, ComponentClass, 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, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
 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>(compute: () => T | Promise<T>): Observable<T>;
-declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
 
 declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
  * @see https://www.legendapp.com/dev/state/react/#useObservable
  */
 declare function useObservable<T>(): Observable<T | undefined>;
-declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
-declare function useObservable<T>(value: T): Observable<T>;
-declare function useObservable<T>(value?: T): Observable<any>;
+declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
 
 declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
 declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
@@ -140,11 +140,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 +157,4 @@ 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 };
+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, 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, ComponentClass, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction } from 'react';
+import { ObservableParam, Observable, ObservableBoolean, Selector, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
@@ -110,10 +110,10 @@ declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: Bi
 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>(compute: () => T | Promise<T>): Observable<T>;
-declare function useComputed<T>(compute: () => T | Promise<T>, deps: any[]): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
-declare function useComputed<T, T2 = T>(compute: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
+declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void): Observable<T>;
+declare function useComputed<T, T2 = T>(get: (() => T | Promise<T>) | ObservableParam<T>, set: (value: T2) => void, deps: any[]): Observable<T>;
 
 declare const useEffectOnce: (effect: () => void | (() => void), deps: any[]) => void;
 
@@ -130,9 +130,9 @@ declare const useMountOnce: typeof useMount;
  * @see https://www.legendapp.com/dev/state/react/#useObservable
  */
 declare function useObservable<T>(): Observable<T | undefined>;
-declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>): Observable<T>;
-declare function useObservable<T>(value: T): Observable<T>;
-declare function useObservable<T>(value?: T): Observable<any>;
+declare function useObservable<T>(value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value: T, deps?: DependencyList): Observable<T>;
+declare function useObservable<T>(value?: T, deps?: DependencyList): Observable<any>;
 
 declare function useObservableReducer<R extends ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R>): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
 declare function useObservableReducer<R extends ReducerWithoutAction<any>>(reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
@@ -140,11 +140,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 +157,4 @@ 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 };
+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.js

@@ -111,15 +111,6 @@ function useSelector(selector, options) {
     const { subscribe, getVersion, run } = selectorFn;
     value = run(selector);
     index_js.useSyncExternalStore(subscribe, getVersion, getVersion);
-    if (options == null ? void 0 : options.suspense) {
-      if (state.isPromise(value) || !value && state.isObservable(selector) && state.syncState(selector).isLoaded.get() === false) {
-        if (React__default.default.use) {
-          React__default.default.use(value);
-        } else {
-          throw value;
-        }
-      }
-    }
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
       console.warn(
@@ -128,6 +119,17 @@ 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;
+      }
+    }
+  }
   return value;
 }
 
@@ -149,10 +151,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   if (component["__legend_proxied"])
     return component;
   let useForwardRef = false;
-  let useMemo5 = false;
+  let useMemo4 = false;
   let render = component;
   if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
-    useMemo5 = true;
+    useMemo4 = true;
     render = render["type"];
   }
   if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -233,7 +235,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   } else {
     ret = proxy;
   }
-  return observe3 || useMemo5 ? React.memo(ret) : ret;
+  return observe3 || useMemo4 ? React.memo(ret) : ret;
 }
 function observer(component) {
   return createReactiveComponent(component, true);
@@ -389,20 +391,36 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useComputed(compute, set, deps) {
+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;
   }
-  const ref = React.useRef({});
-  ref.current.compute = compute;
-  ref.current.set = set;
-  return React.useMemo(
-    () => state.computed(
-      () => state.isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
-      set ? (value) => ref.current.set(value) : void 0
-    ),
-    deps || []
+  return useObservable(
+    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
   );
 }
 var useEffectOnce = (effect, deps) => {
@@ -442,13 +460,6 @@ function useMount(fn) {
   }, []);
 }
 var useMountOnce = useMount;
-function useObservable(initialValue) {
-  const ref = React.useRef();
-  if (!ref.current) {
-    ref.current = state.observable(initialValue);
-  }
-  return ref.current;
-}
 
 // src/react/useIsMounted.ts
 function useIsMounted() {
@@ -484,8 +495,16 @@ function useObserve(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = React.useRef({});
-  ref.current.selector = selector;
+  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(
@@ -510,12 +529,18 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = React.useRef({ selector });
   ref.current = { selector, reaction };
   useMountOnce(
     () => state.observe(
       (e) => {
         const { selector: selector2 } = ref.current;
+        depsObs$ == null ? void 0 : depsObs$.get();
         return state.isFunction(selector2) ? selector2(e) : selector2;
       },
       (e) => {

package/react.mjs

@@ -1,4 +1,4 @@
-import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, computed, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
+import { isFunction, isEmpty, observable, isPromise, isObservable, when, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 
@@ -105,15 +105,6 @@ function useSelector(selector, options) {
     const { subscribe, getVersion, run } = selectorFn;
     value = run(selector);
     useSyncExternalStore(subscribe, getVersion, getVersion);
-    if (options == null ? void 0 : options.suspense) {
-      if (isPromise(value) || !value && isObservable(selector) && syncState(selector).isLoaded.get() === false) {
-        if (React.use) {
-          React.use(value);
-        } else {
-          throw value;
-        }
-      }
-    }
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
       console.warn(
@@ -122,6 +113,17 @@ function useSelector(selector, options) {
     }
     throw err;
   }
+  if (options == null ? void 0 : options.suspense) {
+    const isProm = isPromise(value);
+    if (isPromise(value) || !value && isObservable(selector)) {
+      const vProm = isProm ? value : when(selector);
+      if (React.use) {
+        React.use(vProm);
+      } else {
+        throw vProm;
+      }
+    }
+  }
   return value;
 }
 
@@ -143,10 +145,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   if (component["__legend_proxied"])
     return component;
   let useForwardRef = false;
-  let useMemo5 = false;
+  let useMemo4 = false;
   let render = component;
   if (ReactMemoSymbol && render["$$typeof"] === ReactMemoSymbol && render["type"]) {
-    useMemo5 = true;
+    useMemo4 = true;
     render = render["type"];
   }
   if (ReactForwardRefSymbol && render["$$typeof"] === ReactForwardRefSymbol) {
@@ -227,7 +229,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
   } else {
     ret = proxy;
   }
-  return observe3 || useMemo5 ? memo(ret) : ret;
+  return observe3 || useMemo4 ? memo(ret) : ret;
 }
 function observer(component) {
   return createReactiveComponent(component, true);
@@ -383,20 +385,36 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useComputed(compute, set, deps) {
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
+      depsObs$.get();
+      return computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
   if (!deps && isArray(set)) {
     deps = set;
     set = void 0;
   }
-  const ref = useRef({});
-  ref.current.compute = compute;
-  ref.current.set = set;
-  return useMemo(
-    () => computed(
-      () => isFunction(ref.current.compute) ? ref.current.compute() : ref.current.compute,
-      set ? (value) => ref.current.set(value) : void 0
-    ),
-    deps || []
+  return useObservable(
+    set ? linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
   );
 }
 var useEffectOnce = (effect, deps) => {
@@ -436,13 +454,6 @@ function useMount(fn) {
   }, []);
 }
 var useMountOnce = useMount;
-function useObservable(initialValue) {
-  const ref = useRef();
-  if (!ref.current) {
-    ref.current = observable(initialValue);
-  }
-  return ref.current;
-}
 
 // src/react/useIsMounted.ts
 function useIsMounted() {
@@ -478,8 +489,16 @@ function useObserve(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = useRef({});
-  ref.current.selector = selector;
+  ref.current.selector = deps ? () => {
+    depsObs$ == null ? void 0 : depsObs$.get();
+    return computeSelector(selector);
+  } : selector;
   ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = observe(
@@ -504,12 +523,18 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = useRef({ selector });
   ref.current = { selector, reaction };
   useMountOnce(
     () => observe(
       (e) => {
         const { selector: selector2 } = ref.current;
+        depsObs$ == null ? void 0 : depsObs$.get();
         return isFunction(selector2) ? selector2(e) : selector2;
       },
       (e) => {

package/sync-plugins/_transformObjectFields.d.mts

@@ -0,0 +1,31 @@
+import { RecordValue, ArrayValue } from '@legendapp/state';
+import { SyncTransform } from '@legendapp/state/sync';
+
+declare function transformObjectFields(dataIn: Record<string, any>, map: Record<string, any>): any;
+declare function invertFieldMap(obj: Record<string, any>): any;
+declare const fieldTransformToTransform: <T extends object>(fieldTransform: FieldTransforms<T>) => SyncTransform<T>;
+declare type FieldTransforms<T> = (T extends Record<string, Record<string, any>> ? {
+    _dict: FieldTransformsInner<RecordValue<T>>;
+} : never) | FieldTransformsInner<T>;
+declare type FieldTransformsInner<T> = {
+    [K in keyof T]: string;
+} & ({
+    [K in keyof ObjectKeys<T> as `${K}_obj`]?: FieldTransforms<T[K]>;
+} | {
+    [K in keyof DictKeys<T> as `${K}_dict`]?: FieldTransforms<RecordValue<T[K]>>;
+}) & {
+    [K in keyof ArrayKeys<T> as `${K}_arr`]?: FieldTransforms<ArrayValue<T[K]>>;
+} & {
+    [K in keyof ArrayKeys<T> as `${K}_val`]?: FieldTransforms<ArrayValue<T[K]>>;
+};
+declare type ObjectKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string ? T[K] extends Record<string, any> ? T[K] extends any[] ? never : K : never : never;
+}[keyof T]>;
+declare type DictKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string ? (T[K] extends Record<string, Record<string, any>> ? K : never) : never;
+}[keyof T]>;
+declare type ArrayKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string | number ? (T[K] extends any[] ? K : never) : never;
+}[keyof T]>;
+
+export { type FieldTransforms, type FieldTransformsInner, fieldTransformToTransform, invertFieldMap, transformObjectFields };

package/sync-plugins/_transformObjectFields.d.ts

@@ -0,0 +1,31 @@
+import { RecordValue, ArrayValue } from '@legendapp/state';
+import { SyncTransform } from '@legendapp/state/sync';
+
+declare function transformObjectFields(dataIn: Record<string, any>, map: Record<string, any>): any;
+declare function invertFieldMap(obj: Record<string, any>): any;
+declare const fieldTransformToTransform: <T extends object>(fieldTransform: FieldTransforms<T>) => SyncTransform<T>;
+declare type FieldTransforms<T> = (T extends Record<string, Record<string, any>> ? {
+    _dict: FieldTransformsInner<RecordValue<T>>;
+} : never) | FieldTransformsInner<T>;
+declare type FieldTransformsInner<T> = {
+    [K in keyof T]: string;
+} & ({
+    [K in keyof ObjectKeys<T> as `${K}_obj`]?: FieldTransforms<T[K]>;
+} | {
+    [K in keyof DictKeys<T> as `${K}_dict`]?: FieldTransforms<RecordValue<T[K]>>;
+}) & {
+    [K in keyof ArrayKeys<T> as `${K}_arr`]?: FieldTransforms<ArrayValue<T[K]>>;
+} & {
+    [K in keyof ArrayKeys<T> as `${K}_val`]?: FieldTransforms<ArrayValue<T[K]>>;
+};
+declare type ObjectKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string ? T[K] extends Record<string, any> ? T[K] extends any[] ? never : K : never : never;
+}[keyof T]>;
+declare type DictKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string ? (T[K] extends Record<string, Record<string, any>> ? K : never) : never;
+}[keyof T]>;
+declare type ArrayKeys<T> = Pick<T, {
+    [K in keyof T]-?: K extends string | number ? (T[K] extends any[] ? K : never) : never;
+}[keyof T]>;
+
+export { type FieldTransforms, type FieldTransformsInner, fieldTransformToTransform, invertFieldMap, transformObjectFields };