@legendapp/state 3.0.0-beta.31 → 3.0.0-beta.33

package/README.md

@@ -72,7 +72,7 @@ Legend-State includes a powerful [sync and persistence system](../../usage/persi
 Local persistence plugins for the browser and React Native are included, with sync plugins for [Keel](https://www.keel.so), [Supabase](https://www.supabase.com), [TanStack Query](https://tanstack.com/query), and `fetch`.
 
 ```js
-const state$ = observable(
+const state$ = observable({
     users: syncedKeel({
         list: queries.getUsers,
         create: mutations.createUsers,
@@ -87,7 +87,7 @@ const state$ = observable(
     }),
     // direct link to my user within the users observable
     me: () => state$.users['myuid']
-)
+})
 
 observe(() => {
     // get() activates through to state$.users and starts syncing.

package/index.d.mts

@@ -1,13 +1,13 @@
-type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
+type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date | OpaqueObject<unknown>;
 type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
 type RemoveIndex<T> = {
     [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
 };
-type BuiltIns = String | Boolean | Number | Date | Error | RegExp | Array<any> | Function | Promise<any>;
+type BuiltIns = String | Boolean | Number | Date | Error | RegExp | Array<any> | Function | Promise<any> | OpaqueObject<any>;
 type IsUserDefinedObject<T> = T extends Function | BuiltIns | any[] ? false : T extends object ? true : false;
 type RemoveObservables<T> = T extends ImmutableObservableBase<infer t> ? t : T extends ImmutableObservableBase<infer t>[] ? t[] : IsUserDefinedObject<T> extends true ? {
     [K in keyof T]: RemoveObservables<T[K]>;
-} : T extends ImmutableObservableBase<infer TObs> ? TObs : T extends () => infer TRet ? RemoveObservables<TRet> & T : T extends (key: infer TKey extends string | number) => infer TRet ? Record<TKey, RemoveObservables<TRet>> & T : T;
+} : T extends ImmutableObservableBase<infer TObs> ? TObs : T extends () => infer TRet ? RemoveObservables<TRet> & T : T extends (key: infer TKey extends string | number) => infer TRet ? Record<TKey, RemoveObservables<TRet>> & T : T extends OpaqueObject<infer TObj> ? TObj : T;
 interface ObservableArray<T, U> extends ObservablePrimitive<T>, Pick<Array<Observable<U>>, ArrayOverrideFnNames>, Omit<RemoveIndex<Array<U>>, ArrayOverrideFnNames> {
 }
 interface ObservableObjectFns<T> {
@@ -111,6 +111,7 @@ declare function setNodeValue(node: NodeInfo, newValue: any): {
     parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
+declare function getChildNode(node: NodeInfo, key: string, asFunction?: Function): NodeInfo;
 declare function ensureNodeValue(node: NodeInfo): any;
 declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | ((value: any) => string) | undefined;
 declare function getKeys(obj: Record<any, any> | Array<any> | undefined, isArr: boolean, isMap: boolean, isSet: boolean): string[];
@@ -261,6 +262,9 @@ type Linked<T> = T;
 interface ObserveOptions {
     immediate?: boolean;
 }
+interface ObservableSyncStateOptions {
+    resetLastSync?: boolean;
+}
 interface ObservableSyncStateBase {
     isPersistLoaded: boolean;
     isPersistEnabled: boolean;
@@ -271,7 +275,7 @@ interface ObservableSyncStateBase {
     isSetting?: boolean;
     numPendingGets?: number;
     numPendingSets?: number;
-    sync: () => Promise<void>;
+    sync: (options?: ObservableSyncStateOptions) => Promise<void>;
     getPendingChanges: () => Record<string, {
         p: any;
         v?: any;
@@ -418,6 +422,7 @@ declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;
@@ -459,4 +464,4 @@ declare const internal: {
     };
 };
 
-export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };
+export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableSyncStateOptions, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };

package/index.d.ts

@@ -1,13 +1,13 @@
-type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date;
+type Primitive$1 = string | number | boolean | symbol | bigint | undefined | null | Date | OpaqueObject<unknown>;
 type ArrayOverrideFnNames = 'find' | 'findIndex' | 'every' | 'some' | 'filter' | 'reduce' | 'reduceRight' | 'forEach' | 'map' | 'sort';
 type RemoveIndex<T> = {
     [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
 };
-type BuiltIns = String | Boolean | Number | Date | Error | RegExp | Array<any> | Function | Promise<any>;
+type BuiltIns = String | Boolean | Number | Date | Error | RegExp | Array<any> | Function | Promise<any> | OpaqueObject<any>;
 type IsUserDefinedObject<T> = T extends Function | BuiltIns | any[] ? false : T extends object ? true : false;
 type RemoveObservables<T> = T extends ImmutableObservableBase<infer t> ? t : T extends ImmutableObservableBase<infer t>[] ? t[] : IsUserDefinedObject<T> extends true ? {
     [K in keyof T]: RemoveObservables<T[K]>;
-} : T extends ImmutableObservableBase<infer TObs> ? TObs : T extends () => infer TRet ? RemoveObservables<TRet> & T : T extends (key: infer TKey extends string | number) => infer TRet ? Record<TKey, RemoveObservables<TRet>> & T : T;
+} : T extends ImmutableObservableBase<infer TObs> ? TObs : T extends () => infer TRet ? RemoveObservables<TRet> & T : T extends (key: infer TKey extends string | number) => infer TRet ? Record<TKey, RemoveObservables<TRet>> & T : T extends OpaqueObject<infer TObj> ? TObj : T;
 interface ObservableArray<T, U> extends ObservablePrimitive<T>, Pick<Array<Observable<U>>, ArrayOverrideFnNames>, Omit<RemoveIndex<Array<U>>, ArrayOverrideFnNames> {
 }
 interface ObservableObjectFns<T> {
@@ -111,6 +111,7 @@ declare function setNodeValue(node: NodeInfo, newValue: any): {
     parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
+declare function getChildNode(node: NodeInfo, key: string, asFunction?: Function): NodeInfo;
 declare function ensureNodeValue(node: NodeInfo): any;
 declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | ((value: any) => string) | undefined;
 declare function getKeys(obj: Record<any, any> | Array<any> | undefined, isArr: boolean, isMap: boolean, isSet: boolean): string[];
@@ -261,6 +262,9 @@ type Linked<T> = T;
 interface ObserveOptions {
     immediate?: boolean;
 }
+interface ObservableSyncStateOptions {
+    resetLastSync?: boolean;
+}
 interface ObservableSyncStateBase {
     isPersistLoaded: boolean;
     isPersistEnabled: boolean;
@@ -271,7 +275,7 @@ interface ObservableSyncStateBase {
     isSetting?: boolean;
     numPendingGets?: number;
     numPendingSets?: number;
-    sync: () => Promise<void>;
+    sync: (options?: ObservableSyncStateOptions) => Promise<void>;
     getPendingChanges: () => Record<string, {
         p: any;
         v?: any;
@@ -418,6 +422,7 @@ declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;
@@ -459,4 +464,4 @@ declare const internal: {
     };
 };
 
-export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };
+export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableSyncStateOptions, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };

package/index.js

@@ -1557,7 +1557,8 @@ var proxyHandler = {
     }
     if (isNullOrUndefined(value) && vProp === void 0 && (ArrayModifiers.has(p) || ArrayLoopers.has(p))) {
       value = [];
-      setNodeValue(node, value);
+      if (ArrayModifiers.has(p))
+        setNodeValue(node, value);
       vProp = value[p];
     }
     if (isFunction(vProp)) {
@@ -2434,10 +2435,13 @@ function syncState(obs) {
         syncCount: 0,
         resetPersistence: void 0,
         reset: () => Promise.resolve(),
-        sync: () => {
-          var _a;
+        sync: (options) => {
+          var _a, _b;
+          if (options == null ? void 0 : options.resetLastSync) {
+            (_a = node.state) == null ? void 0 : _a.lastSync.set(void 0);
+          }
           obs.peek();
-          if ((_a = node.state) == null ? void 0 : _a.isGetting.peek()) {
+          if ((_b = node.state) == null ? void 0 : _b.isGetting.peek()) {
             return when(node.state.isLoaded);
           }
           return Promise.resolve();
@@ -2460,6 +2464,7 @@ var internal = {
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,

package/index.mjs

@@ -1555,7 +1555,8 @@ var proxyHandler = {
     }
     if (isNullOrUndefined(value) && vProp === void 0 && (ArrayModifiers.has(p) || ArrayLoopers.has(p))) {
       value = [];
-      setNodeValue(node, value);
+      if (ArrayModifiers.has(p))
+        setNodeValue(node, value);
       vProp = value[p];
     }
     if (isFunction(vProp)) {
@@ -2432,10 +2433,13 @@ function syncState(obs) {
         syncCount: 0,
         resetPersistence: void 0,
         reset: () => Promise.resolve(),
-        sync: () => {
-          var _a;
+        sync: (options) => {
+          var _a, _b;
+          if (options == null ? void 0 : options.resetLastSync) {
+            (_a = node.state) == null ? void 0 : _a.lastSync.set(void 0);
+          }
           obs.peek();
-          if ((_a = node.state) == null ? void 0 : _a.isGetting.peek()) {
+          if ((_b = node.state) == null ? void 0 : _b.isGetting.peek()) {
             return when(node.state.isLoaded);
           }
           return Promise.resolve();
@@ -2458,6 +2462,7 @@ var internal = {
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.31",
+  "version": "3.0.0-beta.33",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,

package/react.d.mts

@@ -158,11 +158,19 @@ 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;
 

package/react.d.ts

@@ -158,11 +158,19 @@ 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;
 

package/react.js

@@ -182,7 +182,7 @@ function createReactiveComponent(component, observe3, reactive2, keysReactive, b
           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 });
+            propsOut[key] = useSelector(p, { skipCheck: true });
           } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
             if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
               didWarnProps = true;
@@ -518,27 +518,36 @@ function useObservableReducer(reducer, initializerArg, initializer) {
   };
   return [obs, dispatch];
 }
-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, void 0, 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);
@@ -552,26 +561,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;
+  }
+  if (reaction && Array.isArray(options)) {
+    deps = options;
+    options = void 0;
   }
-  const deps = options == null ? void 0 : options.deps;
+  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;

package/react.mjs

@@ -176,7 +176,7 @@ function createReactiveComponent(component, observe3, reactive2, keysReactive, b
           const p = props[key];
           const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
           if (key === "children" && (isFunction(p) || isObservable(p))) {
-            props[key] = useSelector(p, { skipCheck: true });
+            propsOut[key] = useSelector(p, { skipCheck: true });
           } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
             if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
               didWarnProps = true;
@@ -512,27 +512,36 @@ function useObservableReducer(reducer, initializerArg, initializer) {
   };
   return [obs, dispatch];
 }
-function useObserve(selector, reactionOrOptions, options) {
+function useObserve(selector, reactionOrOptionsOrDeps, options, deps) {
   let reaction;
-  if (isFunction(reactionOrOptions)) {
-    reaction = reactionOrOptions;
+  if (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 = useRef({});
+  ref.current.selector = selector;
+  ref.current.reaction = reaction;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = useRef({});
-  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(
-      (e) => computeSelector(ref.current.selector, void 0, e),
+      (e) => {
+        var _a;
+        depsObs$ == null ? void 0 : depsObs$.get();
+        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+        return computeSelector(selector2, void 0, e);
+      },
       (e) => {
         var _a, _b;
         return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
@@ -546,26 +555,35 @@ function useObserve(selector, reactionOrOptions, options) {
   });
   return ref.current.dispose;
 }
-function useObserveEffect(selector, reactionOrOptions, options) {
+function useObserveEffect(selector, reactionOrOptionsOrDeps, options, deps) {
   let reaction;
-  if (isFunction(reactionOrOptions)) {
-    reaction = reactionOrOptions;
+  if (isFunction(reactionOrOptionsOrDeps)) {
+    reaction = reactionOrOptionsOrDeps;
+  } else if (Array.isArray(reactionOrOptionsOrDeps)) {
+    deps = reactionOrOptionsOrDeps;
+    options = void 0;
   } else {
-    options = reactionOrOptions;
+    options = reactionOrOptionsOrDeps;
+  }
+  if (reaction && Array.isArray(options)) {
+    deps = options;
+    options = void 0;
   }
-  const deps = options == null ? void 0 : options.deps;
+  deps = deps || (options == null ? void 0 : options.deps);
+  const ref = useRef({});
   const depsObs$ = deps ? useObservable(deps) : void 0;
+  ref.current.selector = selector;
+  ref.current.reaction = reaction;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = useRef({ selector });
-  ref.current = { selector, reaction };
   useMountOnce(
     () => observe(
       (e) => {
-        const { selector: selector2 } = ref.current;
+        var _a;
         depsObs$ == null ? void 0 : depsObs$.get();
-        return isFunction(selector2) ? selector2(e) : selector2;
+        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+        return computeSelector(selector2, void 0, e);
       },
       (e) => {
         var _a, _b;

package/sync-plugins/crud.js

@@ -4,16 +4,18 @@ var state = require('@legendapp/state');
 var sync = require('@legendapp/state/sync');
 
 // src/sync-plugins/crud.ts
-var { clone, getKeys } = state.internal;
+var { clone, getKeys, setNodeValue, getChildNode } = state.internal;
 var { waitForSet, runWithRetry } = sync.internal;
 function transformOut(data, transform) {
   return transform ? transform(clone(data)) : data;
 }
-function ensureId(obj, fieldId, generateId) {
+function ensureId(obj, fieldId, generateId, node) {
   if (!obj[fieldId]) {
     obj[fieldId] = generateId();
+    if (node) {
+      setNodeValue(node, obj);
+    }
   }
-  return obj[fieldId];
 }
 function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   let newLastSync = 0;
@@ -210,11 +212,11 @@ function syncedCrud(props) {
       const { path, prevAtPath, valueAtPath, pathTypes } = change;
       if (asType === "value") {
         if (value) {
-          let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (state.isNullOrUndefined(id) && generateId) {
-            id = ensureId(value, fieldId, generateId);
+          if (state.isNullOrUndefined(value[fieldId]) && generateId) {
+            ensureId(value, fieldId, generateId, node);
           }
+          const id = value[fieldId];
           if (!state.isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
@@ -253,6 +255,14 @@ function syncedCrud(props) {
       } else {
         let itemsChanged = [];
         if (path.length === 0) {
+          if (asArray && generateId) {
+            for (let i = 0; i < valueAtPath.length; i++) {
+              const value2 = valueAtPath[i];
+              if (value2 && !value2[fieldId]) {
+                ensureId(value2, fieldId, generateId, getChildNode(node, i + ""));
+              }
+            }
+          }
           const valueAsObject = asArray ? arrayToRecord(valueAtPath, fieldId) : valueAtPath;
           const prevAsObject = asArray ? arrayToRecord(prevAtPath, fieldId) : prevAtPath;
           const keys = getKeys(valueAsObject, false, asMap, false);
@@ -289,6 +299,9 @@ function syncedCrud(props) {
               changesById.set(prevAtPath[fieldId], change);
             }
           } else {
+            if (generateId) {
+              ensureId(itemValue, fieldId, generateId, getChildNode(node, itemKey + ""));
+            }
             const previous = state.setAtPath(
               clone(itemValue),
               path.slice(1),
@@ -301,9 +314,6 @@ function syncedCrud(props) {
         itemsChanged == null ? void 0 : itemsChanged.forEach(([item, prev, fullValue]) => {
           const isCreate = !pendingCreates.has(item[fieldId]) && (fieldCreatedAt ? !item[fieldCreatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : fieldUpdatedAt ? !item[fieldUpdatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : state.isNullOrUndefined(prev));
           if (isCreate) {
-            if (generateId) {
-              ensureId(item, fieldId, generateId);
-            }
             if (!item[fieldId]) {
               console.error("[legend-state]: added item without an id");
             }

package/sync-plugins/crud.mjs

@@ -2,16 +2,18 @@ import { isPromise, isNullOrUndefined, applyChanges, setAtPath, symbolDelete, is
 import { synced, deepEqual, internal as internal$1, diffObjects } from '@legendapp/state/sync';
 
 // src/sync-plugins/crud.ts
-var { clone, getKeys } = internal;
+var { clone, getKeys, setNodeValue, getChildNode } = internal;
 var { waitForSet, runWithRetry } = internal$1;
 function transformOut(data, transform) {
   return transform ? transform(clone(data)) : data;
 }
-function ensureId(obj, fieldId, generateId) {
+function ensureId(obj, fieldId, generateId, node) {
   if (!obj[fieldId]) {
     obj[fieldId] = generateId();
+    if (node) {
+      setNodeValue(node, obj);
+    }
   }
-  return obj[fieldId];
 }
 function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   let newLastSync = 0;
@@ -208,11 +210,11 @@ function syncedCrud(props) {
       const { path, prevAtPath, valueAtPath, pathTypes } = change;
       if (asType === "value") {
         if (value) {
-          let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (isNullOrUndefined(id) && generateId) {
-            id = ensureId(value, fieldId, generateId);
+          if (isNullOrUndefined(value[fieldId]) && generateId) {
+            ensureId(value, fieldId, generateId, node);
           }
+          const id = value[fieldId];
           if (!isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
@@ -251,6 +253,14 @@ function syncedCrud(props) {
       } else {
         let itemsChanged = [];
         if (path.length === 0) {
+          if (asArray && generateId) {
+            for (let i = 0; i < valueAtPath.length; i++) {
+              const value2 = valueAtPath[i];
+              if (value2 && !value2[fieldId]) {
+                ensureId(value2, fieldId, generateId, getChildNode(node, i + ""));
+              }
+            }
+          }
           const valueAsObject = asArray ? arrayToRecord(valueAtPath, fieldId) : valueAtPath;
           const prevAsObject = asArray ? arrayToRecord(prevAtPath, fieldId) : prevAtPath;
           const keys = getKeys(valueAsObject, false, asMap, false);
@@ -287,6 +297,9 @@ function syncedCrud(props) {
               changesById.set(prevAtPath[fieldId], change);
             }
           } else {
+            if (generateId) {
+              ensureId(itemValue, fieldId, generateId, getChildNode(node, itemKey + ""));
+            }
             const previous = setAtPath(
               clone(itemValue),
               path.slice(1),
@@ -299,9 +312,6 @@ function syncedCrud(props) {
         itemsChanged == null ? void 0 : itemsChanged.forEach(([item, prev, fullValue]) => {
           const isCreate = !pendingCreates.has(item[fieldId]) && (fieldCreatedAt ? !item[fieldCreatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : fieldUpdatedAt ? !item[fieldUpdatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : isNullOrUndefined(prev));
           if (isCreate) {
-            if (generateId) {
-              ensureId(item, fieldId, generateId);
-            }
             if (!item[fieldId]) {
               console.error("[legend-state]: added item without an id");
             }

package/sync.js

@@ -283,7 +283,7 @@ function transformLoadData(value, { transform }, doUserTransform, method) {
   }
   return value;
 }
-async function updateMetadataImmediate(value$, localState, syncState2, syncOptions, newMetadata) {
+async function updateMetadataImmediate(value$, localState, syncState$, syncOptions, newMetadata) {
   const saves = Array.from(promisesLocalSaves);
   if (saves.length > 0) {
     await Promise.all(saves);
@@ -298,7 +298,7 @@ async function updateMetadataImmediate(value$, localState, syncState2, syncOptio
     await pluginPersist.setMetadata(table, metadata, config);
   }
   if (lastSync) {
-    syncState2.assign({
+    syncState$.assign({
       lastSync
     });
   }
@@ -935,8 +935,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   };
   const { get, subscribe } = syncOptions;
   if (get || subscribe) {
-    sync = async () => {
-      var _a;
+    sync = async (options) => {
       if (isSynced && (!getNodeValue(getNode(syncState$)).isSyncEnabled || state.shouldIgnoreUnobserved(node, sync))) {
         if (unsubscribe) {
           isSubscribed = false;
@@ -945,11 +944,16 @@ function syncObservable(obs$, syncOptionsOrSynced) {
         }
         return;
       }
-      const lastSync = (_a = metadatas.get(obs$)) == null ? void 0 : _a.lastSync;
+      const metadata = metadatas.get(obs$);
+      if (metadata && (options == null ? void 0 : options.resetLastSync)) {
+        metadata.lastSync = void 0;
+        syncState$.lastSync.set(void 0);
+      }
+      const lastSync = metadata == null ? void 0 : metadata.lastSync;
       const pending = localState.pendingChanges;
       const { waitFor } = syncOptions;
       const runGet = () => {
-        var _a2;
+        var _a;
         const onChange = async ({ value, mode, lastSync: lastSync2 }) => {
           mode = mode || syncOptions.mode || "set";
           if (value !== void 0) {
@@ -1065,7 +1069,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   }
                 );
               },
-              refresh: () => state.when(syncState$.isLoaded, sync),
+              refresh: () => state.when(syncState$.isLoaded, () => sync()),
               onError: (error) => onGetError(error, {
                 source: "subscribe",
                 subscribeParams,
@@ -1120,14 +1124,14 @@ function syncObservable(obs$, syncOptionsOrSynced) {
               });
             },
             resetCache: () => {
-              var _a3;
+              var _a2;
               modeBeforeReset = getParams.mode;
               getParams.mode = "set";
-              return (_a3 = syncStateValue.resetPersistence) == null ? void 0 : _a3.call(syncStateValue);
+              return (_a2 = syncStateValue.resetPersistence) == null ? void 0 : _a2.call(syncStateValue);
             },
             cancel: false
           };
-          (_a2 = syncOptions.onBeforeGet) == null ? void 0 : _a2.call(syncOptions, beforeGetParams);
+          (_a = syncOptions.onBeforeGet) == null ? void 0 : _a.call(syncOptions, beforeGetParams);
           if (!beforeGetParams.cancel) {
             syncState$.assign({
               numPendingGets: (syncStateValue.numPendingGets || 0) + 1,
@@ -1175,9 +1179,9 @@ function syncObservable(obs$, syncOptionsOrSynced) {
         }
       };
       if (waitFor) {
-        state.whenReady(waitFor, () => state.trackSelector(runGet, sync));
+        state.whenReady(waitFor, () => state.trackSelector(runGet, () => sync()));
       } else {
-        state.trackSelector(runGet, sync);
+        state.trackSelector(runGet, () => sync());
       }
       if (!isSynced) {
         isSynced = true;
@@ -1201,7 +1205,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     if (metadata) {
       Object.assign(metadata, { lastSync: void 0, pending: void 0 });
     }
-    Object.assign(syncStateValue, {
+    const newState = {
       isPersistEnabled: false,
       isSyncEnabled: false,
       lastSync: void 0,
@@ -1211,7 +1215,8 @@ function syncObservable(obs$, syncOptionsOrSynced) {
       isSetting: false,
       numPendingSets: 0,
       syncCount: 0
-    });
+    };
+    Object.assign(syncStateValue, newState);
     isSynced = false;
     isSubscribed = false;
     unsubscribe == null ? void 0 : unsubscribe();

package/sync.mjs

@@ -281,7 +281,7 @@ function transformLoadData(value, { transform }, doUserTransform, method) {
   }
   return value;
 }
-async function updateMetadataImmediate(value$, localState, syncState2, syncOptions, newMetadata) {
+async function updateMetadataImmediate(value$, localState, syncState$, syncOptions, newMetadata) {
   const saves = Array.from(promisesLocalSaves);
   if (saves.length > 0) {
     await Promise.all(saves);
@@ -296,7 +296,7 @@ async function updateMetadataImmediate(value$, localState, syncState2, syncOptio
     await pluginPersist.setMetadata(table, metadata, config);
   }
   if (lastSync) {
-    syncState2.assign({
+    syncState$.assign({
       lastSync
     });
   }
@@ -933,8 +933,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   };
   const { get, subscribe } = syncOptions;
   if (get || subscribe) {
-    sync = async () => {
-      var _a;
+    sync = async (options) => {
       if (isSynced && (!getNodeValue(getNode(syncState$)).isSyncEnabled || shouldIgnoreUnobserved(node, sync))) {
         if (unsubscribe) {
           isSubscribed = false;
@@ -943,11 +942,16 @@ function syncObservable(obs$, syncOptionsOrSynced) {
         }
         return;
       }
-      const lastSync = (_a = metadatas.get(obs$)) == null ? void 0 : _a.lastSync;
+      const metadata = metadatas.get(obs$);
+      if (metadata && (options == null ? void 0 : options.resetLastSync)) {
+        metadata.lastSync = void 0;
+        syncState$.lastSync.set(void 0);
+      }
+      const lastSync = metadata == null ? void 0 : metadata.lastSync;
       const pending = localState.pendingChanges;
       const { waitFor } = syncOptions;
       const runGet = () => {
-        var _a2;
+        var _a;
         const onChange = async ({ value, mode, lastSync: lastSync2 }) => {
           mode = mode || syncOptions.mode || "set";
           if (value !== void 0) {
@@ -1063,7 +1067,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   }
                 );
               },
-              refresh: () => when(syncState$.isLoaded, sync),
+              refresh: () => when(syncState$.isLoaded, () => sync()),
               onError: (error) => onGetError(error, {
                 source: "subscribe",
                 subscribeParams,
@@ -1118,14 +1122,14 @@ function syncObservable(obs$, syncOptionsOrSynced) {
               });
             },
             resetCache: () => {
-              var _a3;
+              var _a2;
               modeBeforeReset = getParams.mode;
               getParams.mode = "set";
-              return (_a3 = syncStateValue.resetPersistence) == null ? void 0 : _a3.call(syncStateValue);
+              return (_a2 = syncStateValue.resetPersistence) == null ? void 0 : _a2.call(syncStateValue);
             },
             cancel: false
           };
-          (_a2 = syncOptions.onBeforeGet) == null ? void 0 : _a2.call(syncOptions, beforeGetParams);
+          (_a = syncOptions.onBeforeGet) == null ? void 0 : _a.call(syncOptions, beforeGetParams);
           if (!beforeGetParams.cancel) {
             syncState$.assign({
               numPendingGets: (syncStateValue.numPendingGets || 0) + 1,
@@ -1173,9 +1177,9 @@ function syncObservable(obs$, syncOptionsOrSynced) {
         }
       };
       if (waitFor) {
-        whenReady(waitFor, () => trackSelector(runGet, sync));
+        whenReady(waitFor, () => trackSelector(runGet, () => sync()));
       } else {
-        trackSelector(runGet, sync);
+        trackSelector(runGet, () => sync());
       }
       if (!isSynced) {
         isSynced = true;
@@ -1199,7 +1203,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
     if (metadata) {
       Object.assign(metadata, { lastSync: void 0, pending: void 0 });
     }
-    Object.assign(syncStateValue, {
+    const newState = {
       isPersistEnabled: false,
       isSyncEnabled: false,
       lastSync: void 0,
@@ -1209,7 +1213,8 @@ function syncObservable(obs$, syncOptionsOrSynced) {
       isSetting: false,
       numPendingSets: 0,
       syncCount: 0
-    });
+    };
+    Object.assign(syncStateValue, newState);
     isSynced = false;
     isSubscribed = false;
     unsubscribe == null ? void 0 : unsubscribe();