@legendapp/state 3.0.0-beta.16 → 3.0.0-beta.18

package/config/enableReactTracking.d.mts

@@ -1,7 +1,8 @@
 interface ReactTrackingOptions {
     auto?: boolean;
     warnUnobserved?: boolean;
+    warnGet?: boolean;
 }
-declare function enableReactTracking({ auto, warnUnobserved }: ReactTrackingOptions): void;
+declare function enableReactTracking({ auto, warnUnobserved, warnGet }: ReactTrackingOptions): void;
 
 export { enableReactTracking };

package/config/enableReactTracking.d.ts

@@ -1,7 +1,8 @@
 interface ReactTrackingOptions {
     auto?: boolean;
     warnUnobserved?: boolean;
+    warnGet?: boolean;
 }
-declare function enableReactTracking({ auto, warnUnobserved }: ReactTrackingOptions): void;
+declare function enableReactTracking({ auto, warnUnobserved, warnGet }: ReactTrackingOptions): void;
 
 export { enableReactTracking };

package/config/enableReactTracking.js

@@ -6,32 +6,42 @@ var react$1 = require('@legendapp/state/react');
 var react = require('react');
 
 // src/config/enableReactTracking.ts
-function enableReactTracking({ auto, warnUnobserved }) {
+function enableReactTracking({ auto, warnUnobserved, warnGet }) {
   const { get } = state.internal;
-  if (auto || process.env.NODE_ENV === "development" && warnUnobserved) {
+  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnGet)) {
     const ReactRenderContext = react.createContext(0);
+    const isInRender = () => {
+      try {
+        const dispatcher = react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+        if (dispatcher) {
+          react.useContext(ReactRenderContext);
+          return true;
+        }
+      } catch (e) {
+      }
+      return false;
+    };
     const needsSelector = () => {
       if (!state.tracking.current) {
-        try {
-          const dispatcher = react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
-          if (dispatcher) {
-            react.useContext(ReactRenderContext);
-            return true;
-          }
-        } catch (e) {
-        }
+        return isInRender();
       }
       return false;
     };
     configureLegendState.configureLegendState({
       observableFunctions: {
         get: (node, options) => {
-          if (needsSelector()) {
+          if (process.env.NODE_ENV === "development" && warnUnobserved) {
+            if (isInRender()) {
+              console.warn(
+                "[legend-state] Detected a `get()` call in a React component. It is recommended to use the `use$` hook instead to be compatible with React Compiler: https://legendapp.com/open-source/state/v3/react/react-api/#use$"
+              );
+            }
+          } else if (needsSelector()) {
             if (auto) {
               return react$1.useSelector(() => get(node, options), state.isObject(options) ? options : void 0);
             } else if (process.env.NODE_ENV === "development" && warnUnobserved) {
               console.warn(
-                "[legend-state] Detected a `get()` call in an unobserved component. You may want to wrap it in observer: https://legendapp.com/open-source/state/react-api/#observer-hoc"
+                "[legend-state] Detected a `get()` call in an unobserved component. You may want to wrap it in observer: https://legendapp.com/open-source/state/v3/react/react-api/#observer"
               );
             }
           }

package/config/enableReactTracking.mjs

@@ -4,32 +4,42 @@ import { useSelector } from '@legendapp/state/react';
 import { createContext, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, useContext } from 'react';
 
 // src/config/enableReactTracking.ts
-function enableReactTracking({ auto, warnUnobserved }) {
+function enableReactTracking({ auto, warnUnobserved, warnGet }) {
   const { get } = internal;
-  if (auto || process.env.NODE_ENV === "development" && warnUnobserved) {
+  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnGet)) {
     const ReactRenderContext = createContext(0);
+    const isInRender = () => {
+      try {
+        const dispatcher = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+        if (dispatcher) {
+          useContext(ReactRenderContext);
+          return true;
+        }
+      } catch (e) {
+      }
+      return false;
+    };
     const needsSelector = () => {
       if (!tracking.current) {
-        try {
-          const dispatcher = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
-          if (dispatcher) {
-            useContext(ReactRenderContext);
-            return true;
-          }
-        } catch (e) {
-        }
+        return isInRender();
       }
       return false;
     };
     configureLegendState({
       observableFunctions: {
         get: (node, options) => {
-          if (needsSelector()) {
+          if (process.env.NODE_ENV === "development" && warnUnobserved) {
+            if (isInRender()) {
+              console.warn(
+                "[legend-state] Detected a `get()` call in a React component. It is recommended to use the `use$` hook instead to be compatible with React Compiler: https://legendapp.com/open-source/state/v3/react/react-api/#use$"
+              );
+            }
+          } else if (needsSelector()) {
             if (auto) {
               return useSelector(() => get(node, options), isObject(options) ? options : void 0);
             } else if (process.env.NODE_ENV === "development" && warnUnobserved) {
               console.warn(
-                "[legend-state] Detected a `get()` call in an unobserved component. You may want to wrap it in observer: https://legendapp.com/open-source/state/react-api/#observer-hoc"
+                "[legend-state] Detected a `get()` call in an unobserved component. You may want to wrap it in observer: https://legendapp.com/open-source/state/v3/react/react-api/#observer"
               );
             }
           }

package/index.d.mts

@@ -116,7 +116,7 @@ declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | (
 
 type TrackingType = undefined | true | symbol;
 interface GetOptions {
-    shallow: boolean;
+    shallow?: boolean;
 }
 type OpaqueObject<T> = T & {
     [symbolOpaque]: true;
@@ -315,7 +315,7 @@ declare function computed<T, T2 = T>(get: (() => RecursiveValueOrFunction<T>) |
 
 declare function event(): ObservableEvent;
 
-declare function computeSelector<T>(selector: Selector<T>, e?: ObserveEvent<T>, retainObservable?: boolean): T;
+declare function computeSelector<T>(selector: Selector<T>, getOptions?: GetOptions, e?: ObserveEvent<T>, retainObservable?: boolean): T;
 declare function getObservableIndex(value$: ObservableParam): number;
 declare function opaqueObject<T extends object>(value: T): OpaqueObject<T>;
 declare function getValueAtPath(obj: Record<string, any>, path: string[]): any;
@@ -365,7 +365,7 @@ declare function proxy<T>(get: (key: string) => T): Observable<Record<string, T>
 
 declare function syncState(obs: ObservableParam): Observable<ObservableSyncState>;
 
-declare function trackSelector<T>(selector: Selector<T>, update: (params: ListenerParams) => void, observeEvent?: ObserveEvent<T>, observeOptions?: ObserveOptions, createResubscribe?: boolean): {
+declare function trackSelector<T>(selector: Selector<T>, update: (params: ListenerParams) => void, getOptions?: GetOptions, observeEvent?: ObserveEvent<T>, observeOptions?: ObserveOptions, createResubscribe?: boolean): {
     nodes: Map<NodeInfo, TrackingNode> | undefined;
     value: T;
     dispose: (() => void) | undefined;

package/index.d.ts

@@ -116,7 +116,7 @@ declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | (
 
 type TrackingType = undefined | true | symbol;
 interface GetOptions {
-    shallow: boolean;
+    shallow?: boolean;
 }
 type OpaqueObject<T> = T & {
     [symbolOpaque]: true;
@@ -315,7 +315,7 @@ declare function computed<T, T2 = T>(get: (() => RecursiveValueOrFunction<T>) |
 
 declare function event(): ObservableEvent;
 
-declare function computeSelector<T>(selector: Selector<T>, e?: ObserveEvent<T>, retainObservable?: boolean): T;
+declare function computeSelector<T>(selector: Selector<T>, getOptions?: GetOptions, e?: ObserveEvent<T>, retainObservable?: boolean): T;
 declare function getObservableIndex(value$: ObservableParam): number;
 declare function opaqueObject<T extends object>(value: T): OpaqueObject<T>;
 declare function getValueAtPath(obj: Record<string, any>, path: string[]): any;
@@ -365,7 +365,7 @@ declare function proxy<T>(get: (key: string) => T): Observable<Record<string, T>
 
 declare function syncState(obs: ObservableParam): Observable<ObservableSyncState>;
 
-declare function trackSelector<T>(selector: Selector<T>, update: (params: ListenerParams) => void, observeEvent?: ObserveEvent<T>, observeOptions?: ObserveOptions, createResubscribe?: boolean): {
+declare function trackSelector<T>(selector: Selector<T>, update: (params: ListenerParams) => void, getOptions?: GetOptions, observeEvent?: ObserveEvent<T>, observeOptions?: ObserveOptions, createResubscribe?: boolean): {
     nodes: Map<NodeInfo, TrackingNode> | undefined;
     value: T;
     dispose: (() => void) | undefined;

package/index.js

@@ -283,12 +283,12 @@ var ObservableHint = {
 };
 
 // src/helpers.ts
-function computeSelector(selector, e, retainObservable) {
+function computeSelector(selector, getOptions, e, retainObservable) {
   let c = selector;
   if (!isObservable(c) && isFunction(c)) {
     c = e ? c(e) : c();
   }
-  return isObservable(c) && !retainObservable ? c.get() : c;
+  return isObservable(c) && !retainObservable ? c.get(getOptions) : c;
 }
 function getObservableIndex(value$) {
   const node = getNode(value$);
@@ -972,13 +972,13 @@ function updateTracking(node, track) {
 }
 
 // src/trackSelector.ts
-function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
+function trackSelector(selector, update, getOptions, observeEvent, observeOptions, createResubscribe) {
   var _a;
   let dispose;
   let resubscribe;
   let updateFn = update;
   beginTracking();
-  const value = selector ? computeSelector(selector, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
+  const value = selector ? computeSelector(selector, getOptions, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
   const tracker = tracking.current;
   const nodes = tracker.nodes;
   endTracking();
@@ -1026,7 +1026,11 @@ function observe(selectorOrRun, reactionOrOptions, options) {
     beginBatch();
     delete e.value;
     dispose == null ? void 0 : dispose();
-    const { dispose: _dispose, value, nodes } = trackSelector(selectorOrRun, update, e, options);
+    const {
+      dispose: _dispose,
+      value,
+      nodes
+    } = trackSelector(selectorOrRun, update, void 0, e, options);
     dispose = _dispose;
     e.value = value;
     e.nodes = nodes;
@@ -1071,10 +1075,13 @@ function _when(predicate, effect, checkReady) {
       let isOk = true;
       if (isArray(ret)) {
         for (let i = 0; i < ret.length; i++) {
-          if (isObservable(ret[i])) {
-            ret[i] = computeSelector(ret[i]);
+          let item = ret[i];
+          if (isObservable(item)) {
+            item = computeSelector(item);
+          } else if (isFunction(item)) {
+            item = item();
           }
-          isOk = isOk && !!(checkReady ? isObservableValueReady(ret[i]) : ret[i]);
+          isOk = isOk && !!(checkReady ? isObservableValueReady(item) : item);
         }
       } else {
         isOk = checkReady ? isObservableValueReady(ret) : ret;

package/index.mjs

@@ -281,12 +281,12 @@ var ObservableHint = {
 };
 
 // src/helpers.ts
-function computeSelector(selector, e, retainObservable) {
+function computeSelector(selector, getOptions, e, retainObservable) {
   let c = selector;
   if (!isObservable(c) && isFunction(c)) {
     c = e ? c(e) : c();
   }
-  return isObservable(c) && !retainObservable ? c.get() : c;
+  return isObservable(c) && !retainObservable ? c.get(getOptions) : c;
 }
 function getObservableIndex(value$) {
   const node = getNode(value$);
@@ -970,13 +970,13 @@ function updateTracking(node, track) {
 }
 
 // src/trackSelector.ts
-function trackSelector(selector, update, observeEvent, observeOptions, createResubscribe) {
+function trackSelector(selector, update, getOptions, observeEvent, observeOptions, createResubscribe) {
   var _a;
   let dispose;
   let resubscribe;
   let updateFn = update;
   beginTracking();
-  const value = selector ? computeSelector(selector, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
+  const value = selector ? computeSelector(selector, getOptions, observeEvent, observeOptions == null ? void 0 : observeOptions.fromComputed) : selector;
   const tracker = tracking.current;
   const nodes = tracker.nodes;
   endTracking();
@@ -1024,7 +1024,11 @@ function observe(selectorOrRun, reactionOrOptions, options) {
     beginBatch();
     delete e.value;
     dispose == null ? void 0 : dispose();
-    const { dispose: _dispose, value, nodes } = trackSelector(selectorOrRun, update, e, options);
+    const {
+      dispose: _dispose,
+      value,
+      nodes
+    } = trackSelector(selectorOrRun, update, void 0, e, options);
     dispose = _dispose;
     e.value = value;
     e.nodes = nodes;
@@ -1069,10 +1073,13 @@ function _when(predicate, effect, checkReady) {
       let isOk = true;
       if (isArray(ret)) {
         for (let i = 0; i < ret.length; i++) {
-          if (isObservable(ret[i])) {
-            ret[i] = computeSelector(ret[i]);
+          let item = ret[i];
+          if (isObservable(item)) {
+            item = computeSelector(item);
+          } else if (isFunction(item)) {
+            item = item();
           }
-          isOk = isOk && !!(checkReady ? isObservableValueReady(ret[i]) : ret[i]);
+          isOk = isOk && !!(checkReady ? isObservableValueReady(item) : item);
         }
       } else {
         isOk = checkReady ? isObservableValueReady(ret) : ret;

package/package.json

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

package/react.d.mts

@@ -1,11 +1,19 @@
 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 { ReactNode, ReactElement, NamedExoticComponent, FC, 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';
+import { IReactive as IReactive$1 } from '@legendapp/state/react';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
 }): ReactElement;
 
+declare const Memo$1: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
+type ReactiveProxy = typeof Memo$1 & IReactive$1;
+declare const $: ReactiveProxy;
+
 type ForItemProps<T, TProps = {}> = {
     item$: Observable<T>;
     id?: string;
@@ -26,7 +34,10 @@ declare function usePauseProvider(): {
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: React.MemoExoticComponent<typeof Computed>;
+declare const Memo: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
 
 interface IReactive {
 }
@@ -84,7 +95,7 @@ type FCReactiveObject<T> = {
 type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
     ref?: LegacyRef<P> | undefined;
 }>;
-interface UseSelectorOptions {
+interface UseSelectorOptions extends GetOptions {
     suspense?: boolean;
     skipCheck?: boolean;
 }
@@ -172,4 +183,4 @@ declare function configureReactive({ components, binders, }: {
     binders?: Record<string, BindKeys>;
 }): void;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { $, type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.d.ts

@@ -1,11 +1,19 @@
 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 { ReactNode, ReactElement, NamedExoticComponent, FC, 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';
+import { IReactive as IReactive$1 } from '@legendapp/state/react';
 
 declare function Computed({ children }: {
     children: ObservableParam | (() => ReactNode);
 }): ReactElement;
 
+declare const Memo$1: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
+type ReactiveProxy = typeof Memo$1 & IReactive$1;
+declare const $: ReactiveProxy;
+
 type ForItemProps<T, TProps = {}> = {
     item$: Observable<T>;
     id?: string;
@@ -26,7 +34,10 @@ declare function usePauseProvider(): {
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: React.MemoExoticComponent<typeof Computed>;
+declare const Memo: NamedExoticComponent<{
+    children: any;
+    scoped?: boolean;
+}>;
 
 interface IReactive {
 }
@@ -84,7 +95,7 @@ type FCReactiveObject<T> = {
 type FCReactive<P, P2> = P & FC<ShapeWithNew$<P2> & {
     ref?: LegacyRef<P> | undefined;
 }>;
-interface UseSelectorOptions {
+interface UseSelectorOptions extends GetOptions {
     suspense?: boolean;
     skipCheck?: boolean;
 }
@@ -172,4 +183,4 @@ declare function configureReactive({ components, binders, }: {
     binders?: Record<string, BindKeys>;
 }): void;
 
-export { type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { $, type BindKey, type BindKeys, Computed, type ExtractFCPropsType, type FCReactive, type FCReactiveObject, For, type IReactive, Memo, type ObjectShapeWith$, type ReactifyProps, Reactive, type ShapeWith$, type ShapeWithNew$, type ShapeWithPick$, Show, Switch, type UseObserveOptions, type UseSelectorOptions, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.js

@@ -45,6 +45,7 @@ function createSelectorFunctions(options, isPaused$) {
     } = state.trackSelector(
       _selector,
       _update,
+      options,
       void 0,
       void 0,
       /*createResubscribe*/
@@ -103,7 +104,7 @@ function createSelectorFunctions(options, isPaused$) {
 function useSelector(selector, options) {
   var _a;
   if (reactGlobals.inObserver && state.isObservable(selector) && !(options == null ? void 0 : options.suspense)) {
-    return state.computeSelector(selector);
+    return state.computeSelector(selector, options);
   }
   let value;
   try {
@@ -138,6 +139,25 @@ function useSelector(selector, options) {
 function Computed({ children }) {
   return useSelector(() => state.computeSelector(state.computeSelector(children)), { skipCheck: true });
 }
+
+// src/react/configureReactive.ts
+var ReactiveFns = /* @__PURE__ */ new Map();
+var ReactiveFnBinders = /* @__PURE__ */ new Map();
+function configureReactive({
+  components,
+  binders
+}) {
+  if (components) {
+    for (const key in components) {
+      ReactiveFns.set(key, components[key]);
+    }
+  }
+  if (binders) {
+    for (const key in binders) {
+      ReactiveFnBinders.set(key, binders[key]);
+    }
+  }
+}
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
 var didWarnProps = false;
 function createReactiveComponent(component, observe3, reactive2, keysReactive, bindKeys) {
@@ -265,7 +285,42 @@ function reactiveComponents(components) {
   );
 }
 
-// src/react/For.tsx
+// src/react/$.tsx
+var Memo = React.memo(
+  Computed,
+  (prev, next) => next.scoped ? prev.children === next.children : true
+);
+var setReactProps = /* @__PURE__ */ new Set([
+  "$$typeof",
+  "defaultProps",
+  "propTypes",
+  "tag",
+  "PropTypes",
+  "displayName",
+  "getDefaultProps",
+  "type",
+  "compare"
+]);
+var reactives = {};
+var $ = new Proxy(Memo, {
+  get(target, p) {
+    if (Object.hasOwn(target, p) || setReactProps.has(p)) {
+      return target[p];
+    }
+    if (!reactives[p]) {
+      const Component = ReactiveFns.get(p) || p;
+      const render = React.forwardRef((props, ref) => {
+        const propsOut = { ...props };
+        if (ref && (state.isFunction(ref) || !state.isEmpty(ref))) {
+          propsOut.ref = ref;
+        }
+        return React.createElement(Component, propsOut);
+      });
+      reactives[p] = reactive(render, [], ReactiveFnBinders.get(p));
+    }
+    return reactives[p];
+  }
+});
 var { findIDKey, getNode, optimized } = state.internal;
 var autoMemoCache = /* @__PURE__ */ new Map();
 function For({
@@ -340,28 +395,10 @@ function For({
   }
   return out;
 }
-var Memo = React.memo(Computed, () => true);
-
-// src/react/configureReactive.ts
-var ReactiveFns = /* @__PURE__ */ new Map();
-var ReactiveFnBinders = /* @__PURE__ */ new Map();
-function configureReactive({
-  components,
-  binders
-}) {
-  if (components) {
-    for (const key in components) {
-      ReactiveFns.set(key, components[key]);
-    }
-  }
-  if (binders) {
-    for (const key in binders) {
-      ReactiveFnBinders.set(key, binders[key]);
-    }
-  }
-}
-
-// src/react/Reactive.tsx
+var Memo2 = React.memo(
+  Computed,
+  (prev, next) => next.scoped ? prev.children === next.children : true
+);
 var Reactive = new Proxy(
   {},
   {
@@ -520,7 +557,7 @@ function useObserve(selector, reactionOrOptions, options) {
   ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = state.observe(
-      (e) => state.computeSelector(ref.current.selector, e),
+      (e) => state.computeSelector(ref.current.selector, void 0, e),
       (e) => {
         var _a, _b;
         return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
@@ -570,9 +607,10 @@ function useWhenReady(predicate, effect) {
   return React.useMemo(() => state.whenReady(predicate, effect), []);
 }
 
+exports.$ = $;
 exports.Computed = Computed;
 exports.For = For;
-exports.Memo = Memo;
+exports.Memo = Memo2;
 exports.Reactive = Reactive;
 exports.Show = Show;
 exports.Switch = Switch;
@@ -582,6 +620,7 @@ exports.observer = observer;
 exports.reactive = reactive;
 exports.reactiveComponents = reactiveComponents;
 exports.reactiveObserver = reactiveObserver;
+exports.use$ = useSelector;
 exports.useComputed = useComputed;
 exports.useEffectOnce = useEffectOnce;
 exports.useIsMounted = useIsMounted;

package/react.mjs

@@ -39,6 +39,7 @@ function createSelectorFunctions(options, isPaused$) {
     } = trackSelector(
       _selector,
       _update,
+      options,
       void 0,
       void 0,
       /*createResubscribe*/
@@ -97,7 +98,7 @@ function createSelectorFunctions(options, isPaused$) {
 function useSelector(selector, options) {
   var _a;
   if (reactGlobals.inObserver && isObservable(selector) && !(options == null ? void 0 : options.suspense)) {
-    return computeSelector(selector);
+    return computeSelector(selector, options);
   }
   let value;
   try {
@@ -132,6 +133,25 @@ function useSelector(selector, options) {
 function Computed({ children }) {
   return useSelector(() => computeSelector(computeSelector(children)), { skipCheck: true });
 }
+
+// src/react/configureReactive.ts
+var ReactiveFns = /* @__PURE__ */ new Map();
+var ReactiveFnBinders = /* @__PURE__ */ new Map();
+function configureReactive({
+  components,
+  binders
+}) {
+  if (components) {
+    for (const key in components) {
+      ReactiveFns.set(key, components[key]);
+    }
+  }
+  if (binders) {
+    for (const key in binders) {
+      ReactiveFnBinders.set(key, binders[key]);
+    }
+  }
+}
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
 var didWarnProps = false;
 function createReactiveComponent(component, observe3, reactive2, keysReactive, bindKeys) {
@@ -259,7 +279,42 @@ function reactiveComponents(components) {
   );
 }
 
-// src/react/For.tsx
+// src/react/$.tsx
+var Memo = memo(
+  Computed,
+  (prev, next) => next.scoped ? prev.children === next.children : true
+);
+var setReactProps = /* @__PURE__ */ new Set([
+  "$$typeof",
+  "defaultProps",
+  "propTypes",
+  "tag",
+  "PropTypes",
+  "displayName",
+  "getDefaultProps",
+  "type",
+  "compare"
+]);
+var reactives = {};
+var $ = new Proxy(Memo, {
+  get(target, p) {
+    if (Object.hasOwn(target, p) || setReactProps.has(p)) {
+      return target[p];
+    }
+    if (!reactives[p]) {
+      const Component = ReactiveFns.get(p) || p;
+      const render = forwardRef((props, ref) => {
+        const propsOut = { ...props };
+        if (ref && (isFunction(ref) || !isEmpty(ref))) {
+          propsOut.ref = ref;
+        }
+        return createElement(Component, propsOut);
+      });
+      reactives[p] = reactive(render, [], ReactiveFnBinders.get(p));
+    }
+    return reactives[p];
+  }
+});
 var { findIDKey, getNode, optimized } = internal;
 var autoMemoCache = /* @__PURE__ */ new Map();
 function For({
@@ -334,28 +389,10 @@ function For({
   }
   return out;
 }
-var Memo = memo(Computed, () => true);
-
-// src/react/configureReactive.ts
-var ReactiveFns = /* @__PURE__ */ new Map();
-var ReactiveFnBinders = /* @__PURE__ */ new Map();
-function configureReactive({
-  components,
-  binders
-}) {
-  if (components) {
-    for (const key in components) {
-      ReactiveFns.set(key, components[key]);
-    }
-  }
-  if (binders) {
-    for (const key in binders) {
-      ReactiveFnBinders.set(key, binders[key]);
-    }
-  }
-}
-
-// src/react/Reactive.tsx
+var Memo2 = memo(
+  Computed,
+  (prev, next) => next.scoped ? prev.children === next.children : true
+);
 var Reactive = new Proxy(
   {},
   {
@@ -514,7 +551,7 @@ function useObserve(selector, reactionOrOptions, options) {
   ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = observe(
-      (e) => computeSelector(ref.current.selector, e),
+      (e) => computeSelector(ref.current.selector, void 0, e),
       (e) => {
         var _a, _b;
         return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
@@ -564,4 +601,4 @@ function useWhenReady(predicate, effect) {
   return useMemo(() => whenReady(predicate, effect), []);
 }
 
-export { Computed, For, Memo, Reactive, Show, Switch, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };
+export { $, Computed, For, Memo2 as Memo, Reactive, Show, Switch, configureReactive, hasSymbol, observer, reactive, reactiveComponents, reactiveObserver, useSelector as use$, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/sync-plugins/crud.js

@@ -25,12 +25,7 @@ function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   }
   return newLastSync;
 }
-var queuedRetries = {
-  create: /* @__PURE__ */ new Map(),
-  update: /* @__PURE__ */ new Map(),
-  delete: /* @__PURE__ */ new Map()
-};
-function retrySet(params, retry, action, itemKey, itemValue, change, actionFn, saveResult) {
+function retrySet(params, retry, action, itemKey, itemValue, change, queuedRetries, actionFn, saveResult) {
   if (action === "delete") {
     if (queuedRetries.create.has(itemKey)) {
       queuedRetries.create.delete(itemKey);
@@ -84,6 +79,11 @@ function syncedCrud(props) {
   } = props;
   const fieldId = fieldIdProp || "id";
   const pendingCreates = /* @__PURE__ */ new Set();
+  const queuedRetries = {
+    create: /* @__PURE__ */ new Map(),
+    update: /* @__PURE__ */ new Map(),
+    delete: /* @__PURE__ */ new Map()
+  };
   let asType = props.as;
   if (!asType) {
     asType = getFn ? "value" : "object";
@@ -240,7 +240,7 @@ function syncedCrud(props) {
           const changed = asMap ? Array.from(valueAtPath.entries()) : Object.entries(valueAtPath);
           for (let i = 0; i < changed.length; i++) {
             const [key, value2] = changed[i];
-            const prev = asMap ? prevAtPath.get(key) : prevAtPath[key];
+            const prev = prevAtPath ? asMap ? prevAtPath.get(key) : prevAtPath[key] : void 0;
             if (state.isNullOrUndefined(value2) && !state.isNullOrUndefined(prev)) {
               deletes.add(prev);
               return false;
@@ -367,6 +367,7 @@ function syncedCrud(props) {
           itemKey,
           createObj,
           changesById.get(itemKey),
+          queuedRetries,
           createFn,
           saveResult
         ).then(() => {
@@ -387,6 +388,7 @@ function syncedCrud(props) {
             itemKey,
             changed,
             changesById.get(itemKey),
+            queuedRetries,
             updateFn,
             saveResult
           );
@@ -410,6 +412,7 @@ function syncedCrud(props) {
             itemKey,
             valuePrevious,
             changesById.get(itemKey),
+            queuedRetries,
             deleteFn,
             saveResult
           );
@@ -422,6 +425,7 @@ function syncedCrud(props) {
             itemKey,
             { [fieldId]: itemKey, [fieldDeleted]: true },
             changesById.get(itemKey),
+            queuedRetries,
             updateFn,
             saveResult
           );

package/sync-plugins/crud.mjs

@@ -23,12 +23,7 @@ function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   }
   return newLastSync;
 }
-var queuedRetries = {
-  create: /* @__PURE__ */ new Map(),
-  update: /* @__PURE__ */ new Map(),
-  delete: /* @__PURE__ */ new Map()
-};
-function retrySet(params, retry, action, itemKey, itemValue, change, actionFn, saveResult) {
+function retrySet(params, retry, action, itemKey, itemValue, change, queuedRetries, actionFn, saveResult) {
   if (action === "delete") {
     if (queuedRetries.create.has(itemKey)) {
       queuedRetries.create.delete(itemKey);
@@ -82,6 +77,11 @@ function syncedCrud(props) {
   } = props;
   const fieldId = fieldIdProp || "id";
   const pendingCreates = /* @__PURE__ */ new Set();
+  const queuedRetries = {
+    create: /* @__PURE__ */ new Map(),
+    update: /* @__PURE__ */ new Map(),
+    delete: /* @__PURE__ */ new Map()
+  };
   let asType = props.as;
   if (!asType) {
     asType = getFn ? "value" : "object";
@@ -238,7 +238,7 @@ function syncedCrud(props) {
           const changed = asMap ? Array.from(valueAtPath.entries()) : Object.entries(valueAtPath);
           for (let i = 0; i < changed.length; i++) {
             const [key, value2] = changed[i];
-            const prev = asMap ? prevAtPath.get(key) : prevAtPath[key];
+            const prev = prevAtPath ? asMap ? prevAtPath.get(key) : prevAtPath[key] : void 0;
             if (isNullOrUndefined(value2) && !isNullOrUndefined(prev)) {
               deletes.add(prev);
               return false;
@@ -365,6 +365,7 @@ function syncedCrud(props) {
           itemKey,
           createObj,
           changesById.get(itemKey),
+          queuedRetries,
           createFn,
           saveResult
         ).then(() => {
@@ -385,6 +386,7 @@ function syncedCrud(props) {
             itemKey,
             changed,
             changesById.get(itemKey),
+            queuedRetries,
             updateFn,
             saveResult
           );
@@ -408,6 +410,7 @@ function syncedCrud(props) {
             itemKey,
             valuePrevious,
             changesById.get(itemKey),
+            queuedRetries,
             deleteFn,
             saveResult
           );
@@ -420,6 +423,7 @@ function syncedCrud(props) {
             itemKey,
             { [fieldId]: itemKey, [fieldDeleted]: true },
             changesById.get(itemKey),
+            queuedRetries,
             updateFn,
             saveResult
           );

package/sync-plugins/keel.d.mts

@@ -13,7 +13,7 @@ type APIError = {
     type: string;
     message: string;
     requestId?: string;
-    error?: Error;
+    error?: unknown;
 };
 type APIResult<T> = Result<T, APIError>;
 type Data<T> = {
@@ -25,7 +25,6 @@ type Err<U> = {
     error: U;
 };
 type Result<T, U> = NonNullable<Data<T> | Err<U>>;
-declare function generateKeelId(): string;
 interface KeelGetParams {
 }
 interface KeelListParams<Where = {}> {
@@ -63,7 +62,7 @@ interface SyncedKeelPropsManyWhere<TRemote extends {
 }, TLocal, AOption extends CrudAsOption, Where extends Record<string, any>> extends SyncedKeelPropsManyBase<TRemote, TLocal, AOption> {
     list?: (params: KeelListParams<NoInfer<Where>>) => Promise<CrudResult<APIResult<{
         results: TRemote[];
-        pageInfo: any;
+        pageInfo?: any;
     }>>>;
     where?: Where | (() => Where);
 }
@@ -72,7 +71,7 @@ interface SyncedKeelPropsManyNoWhere<TRemote extends {
 }, TLocal, AOption extends CrudAsOption> extends SyncedKeelPropsManyBase<TRemote, TLocal, AOption> {
     list?: (params: KeelListParams<{}>) => Promise<CrudResult<APIResult<{
         results: TRemote[];
-        pageInfo: any;
+        pageInfo?: any;
     }>>>;
     where?: never | {};
 }
@@ -99,8 +98,8 @@ interface SyncedKeelPropsBase<TRemote extends {
     create?: (i: NoInfer<Partial<TRemote>>) => Promise<APIResult<NoInfer<TRemote>>>;
     update?: (params: {
         where: any;
-        values?: Partial<TRemote>;
-    }) => Promise<APIResult<TRemote>>;
+        values?: NoInfer<Partial<TRemote>>;
+    }) => Promise<APIResult<NoInfer<TRemote>>>;
     delete?: (params: {
         id: string;
     }) => Promise<APIResult<string>>;
@@ -119,4 +118,4 @@ declare function syncedKeel<TRemote extends {
     id: string;
 }, TLocal = TRemote, TOption extends CrudAsOption = 'object', Where extends Record<string, any> = {}>(props: SyncedKeelPropsBase<TRemote, TLocal> & SyncedKeelPropsMany<TRemote, TLocal, TOption, Where>): SyncedCrudReturnType<TLocal, Exclude<TOption, 'value'>>;
 
-export { type KeelClient, type KeelErrorParams, type KeelGetParams, type KeelKey, KeelKeys, type KeelListParams, type KeelObjectBase, type KeelRealtimePlugin, type OmitKeelBuiltins, type SyncedKeelPropsBase, generateKeelId, syncedKeel };
+export { type KeelClient, type KeelErrorParams, type KeelGetParams, type KeelKey, KeelKeys, type KeelListParams, type KeelObjectBase, type KeelRealtimePlugin, type OmitKeelBuiltins, type SyncedKeelPropsBase, syncedKeel };

package/sync-plugins/keel.d.ts

@@ -13,7 +13,7 @@ type APIError = {
     type: string;
     message: string;
     requestId?: string;
-    error?: Error;
+    error?: unknown;
 };
 type APIResult<T> = Result<T, APIError>;
 type Data<T> = {
@@ -25,7 +25,6 @@ type Err<U> = {
     error: U;
 };
 type Result<T, U> = NonNullable<Data<T> | Err<U>>;
-declare function generateKeelId(): string;
 interface KeelGetParams {
 }
 interface KeelListParams<Where = {}> {
@@ -63,7 +62,7 @@ interface SyncedKeelPropsManyWhere<TRemote extends {
 }, TLocal, AOption extends CrudAsOption, Where extends Record<string, any>> extends SyncedKeelPropsManyBase<TRemote, TLocal, AOption> {
     list?: (params: KeelListParams<NoInfer<Where>>) => Promise<CrudResult<APIResult<{
         results: TRemote[];
-        pageInfo: any;
+        pageInfo?: any;
     }>>>;
     where?: Where | (() => Where);
 }
@@ -72,7 +71,7 @@ interface SyncedKeelPropsManyNoWhere<TRemote extends {
 }, TLocal, AOption extends CrudAsOption> extends SyncedKeelPropsManyBase<TRemote, TLocal, AOption> {
     list?: (params: KeelListParams<{}>) => Promise<CrudResult<APIResult<{
         results: TRemote[];
-        pageInfo: any;
+        pageInfo?: any;
     }>>>;
     where?: never | {};
 }
@@ -99,8 +98,8 @@ interface SyncedKeelPropsBase<TRemote extends {
     create?: (i: NoInfer<Partial<TRemote>>) => Promise<APIResult<NoInfer<TRemote>>>;
     update?: (params: {
         where: any;
-        values?: Partial<TRemote>;
-    }) => Promise<APIResult<TRemote>>;
+        values?: NoInfer<Partial<TRemote>>;
+    }) => Promise<APIResult<NoInfer<TRemote>>>;
     delete?: (params: {
         id: string;
     }) => Promise<APIResult<string>>;
@@ -119,4 +118,4 @@ declare function syncedKeel<TRemote extends {
     id: string;
 }, TLocal = TRemote, TOption extends CrudAsOption = 'object', Where extends Record<string, any> = {}>(props: SyncedKeelPropsBase<TRemote, TLocal> & SyncedKeelPropsMany<TRemote, TLocal, TOption, Where>): SyncedCrudReturnType<TLocal, Exclude<TOption, 'value'>>;
 
-export { type KeelClient, type KeelErrorParams, type KeelGetParams, type KeelKey, KeelKeys, type KeelListParams, type KeelObjectBase, type KeelRealtimePlugin, type OmitKeelBuiltins, type SyncedKeelPropsBase, generateKeelId, syncedKeel };
+export { type KeelClient, type KeelErrorParams, type KeelGetParams, type KeelKey, KeelKeys, type KeelListParams, type KeelObjectBase, type KeelRealtimePlugin, type OmitKeelBuiltins, type SyncedKeelPropsBase, syncedKeel };

package/sync-plugins/keel.js

@@ -3,17 +3,9 @@
 var state = require('@legendapp/state');
 var sync = require('@legendapp/state/sync');
 var crud = require('@legendapp/state/sync-plugins/crud');
-var ksuid = require('ksuid');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var ksuid__default = /*#__PURE__*/_interopDefault(ksuid);
 
 // src/sync-plugins/keel.ts
 var KeelKeys = ["createdAt", "updatedAt"];
-function generateKeelId() {
-  return ksuid__default.default.randomSync().string;
-}
 var modifiedClients = /* @__PURE__ */ new WeakSet();
 var isAuthed$ = state.observable(false);
 var isAuthing$ = state.observable(false);
@@ -320,11 +312,9 @@ function syncedKeel(props) {
     changesSince,
     updatePartial: true,
     subscribe,
-    generateId: generateKeelId,
     get
   });
 }
 
 exports.KeelKeys = KeelKeys;
-exports.generateKeelId = generateKeelId;
 exports.syncedKeel = syncedKeel;

package/sync-plugins/keel.mjs

@@ -1,13 +1,9 @@
 import { observable, isFunction, when, batch, isEmpty } from '@legendapp/state';
 import { createRevertChanges } from '@legendapp/state/sync';
 import { syncedCrud } from '@legendapp/state/sync-plugins/crud';
-import ksuid from 'ksuid';
 
 // src/sync-plugins/keel.ts
 var KeelKeys = ["createdAt", "updatedAt"];
-function generateKeelId() {
-  return ksuid.randomSync().string;
-}
 var modifiedClients = /* @__PURE__ */ new WeakSet();
 var isAuthed$ = observable(false);
 var isAuthing$ = observable(false);
@@ -314,9 +310,8 @@ function syncedKeel(props) {
     changesSince,
     updatePartial: true,
     subscribe,
-    generateId: generateKeelId,
     get
   });
 }
 
-export { KeelKeys, generateKeelId, syncedKeel };
+export { KeelKeys, syncedKeel };

package/sync.js

@@ -36,12 +36,12 @@ function diffObjects(obj1, obj2, deep = false) {
   return diff;
 }
 function deepEqual(a, b, ignoreFields, nullVsUndefined) {
-  if (a === b) {
+  if (a === b)
     return true;
-  }
-  if (state.isNullOrUndefined(a) !== state.isNullOrUndefined(b)) {
+  if (state.isNullOrUndefined(a) !== state.isNullOrUndefined(b))
     return false;
-  }
+  if (!state.isObject(a) || !state.isObject(b))
+    return a === b;
   if (nullVsUndefined) {
     a = removeNullUndefined(
       a,
@@ -54,8 +54,18 @@ function deepEqual(a, b, ignoreFields, nullVsUndefined) {
       true
     );
   }
-  const replacer = ignoreFields ? (key, value) => ignoreFields.includes(key) ? void 0 : value : void 0;
-  return JSON.stringify(a, replacer) === JSON.stringify(b, replacer);
+  const keysA = Object.keys(a).filter((key) => !(ignoreFields == null ? void 0 : ignoreFields.includes(key)));
+  const keysB = Object.keys(b).filter((key) => !(ignoreFields == null ? void 0 : ignoreFields.includes(key)));
+  if (keysA.length !== keysB.length)
+    return false;
+  return keysA.every((key) => {
+    if (!Object.prototype.hasOwnProperty.call(b, key))
+      return false;
+    if (state.isDate(a[key]) && state.isDate(b[key])) {
+      return a[key].getTime() === b[key].getTime();
+    }
+    return deepEqual(a[key], b[key], ignoreFields, nullVsUndefined);
+  });
 }
 function combineTransforms(...transforms) {
   return {
@@ -309,8 +319,25 @@ function mergeChanges(changes) {
         existing.valueAtPath = change.valueAtPath;
       }
     } else {
-      changesByPath.set(pathStr, change);
-      changesOut.push(change);
+      let found = false;
+      for (let u = 0; u < change.path.length; u++) {
+        const path = change.path.slice(0, u).join("/");
+        if (changesByPath.has(path)) {
+          const remaining = change.path.slice(u);
+          state.setAtPath(
+            changesByPath.get(path).valueAtPath,
+            remaining,
+            change.pathTypes.slice(u),
+            change.valueAtPath
+          );
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        changesByPath.set(pathStr, change);
+        changesOut.push(change);
+      }
     }
   }
   return changesOut;
@@ -860,27 +887,33 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   syncState$.isLoaded.set(!syncState$.numPendingRemoteLoads.peek());
   let isSynced = false;
   let isSubscribed = false;
+  let isApplyingPendingAfterSync = false;
   let unsubscribe = void 0;
   const applyPending = (pending) => {
     if (pending && !state.isEmpty(pending)) {
-      localState.isApplyingPending = true;
       const keys = Object.keys(pending);
+      const value = getNodeValue(node);
       const changes = [];
       for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
         const path = key.split("/").filter((p2) => p2 !== "");
-        const { p, v, t } = pending[key];
-        changes.push({ path, valueAtPath: v, prevAtPath: p, pathTypes: t });
+        const { p, t, v } = pending[key];
+        const valueAtPath = getValueAtPath(value, path);
+        if (isApplyingPendingAfterSync || !deepEqual(valueAtPath, v)) {
+          changes.push({ path, valueAtPath: v, prevAtPath: p, pathTypes: t });
+        }
+      }
+      if (changes.length > 0) {
+        localState.isApplyingPending = true;
+        onObsChange(obs$, syncState$, localState, syncOptions, {
+          value,
+          isFromPersist: false,
+          isFromSync: false,
+          getPrevious: createPreviousHandler(value, changes),
+          changes
+        });
+        localState.isApplyingPending = false;
       }
-      const value = getNodeValue(node);
-      onObsChange(obs$, syncState$, localState, syncOptions, {
-        value,
-        isFromPersist: false,
-        isFromSync: false,
-        getPrevious: createPreviousHandler(value, changes),
-        changes
-      });
-      localState.isApplyingPending = false;
     }
   };
   const { get, subscribe } = syncOptions;
@@ -917,10 +950,10 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   const { v, t } = pending2[key];
                   if (t.length === 0 || !value) {
                     const oldValue = clone2(value);
-                    pending2[key].p = oldValue;
+                    pending2[key].p = key ? oldValue[key] : oldValue;
                     if (state.isObject(value) && state.isObject(v)) {
-                      Object.assign(value, v);
-                    } else {
+                      Object.assign(value, key ? { [key]: v } : v);
+                    } else if (!key) {
                       value = v;
                     }
                   } else if (value[p[0]] !== void 0) {
@@ -932,6 +965,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                     } else {
                       const oldValue = clone2(value);
                       pending2[key].p = getValueAtPath(oldValue, p);
+                      didChangeMetadata = true;
                       value = state.setAtPath(
                         value,
                         p,
@@ -952,7 +986,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   }
                 });
                 if (didChangeMetadata && syncOptions.persist) {
-                  updateMetadata(obs$, localState, syncState$, syncOptions, {
+                  updateMetadataImmediate(obs$, localState, syncState$, syncOptions, {
                     pending: pending2
                   });
                 }
@@ -1129,14 +1163,17 @@ function syncObservable(obs$, syncOptionsOrSynced) {
       }
       if (!isSynced) {
         isSynced = true;
-        await state.when(syncState$.isLoaded);
+        isApplyingPendingAfterSync = true;
         applyPending(pending);
+        isApplyingPendingAfterSync = false;
       }
     };
     syncStateValue.sync = sync;
   } else {
     if (!isSynced) {
+      isApplyingPendingAfterSync = true;
       applyPending(localState.pendingChanges);
+      isApplyingPendingAfterSync = false;
     }
   }
   syncStateValue.reset = async () => {

package/sync.mjs

@@ -34,12 +34,12 @@ function diffObjects(obj1, obj2, deep = false) {
   return diff;
 }
 function deepEqual(a, b, ignoreFields, nullVsUndefined) {
-  if (a === b) {
+  if (a === b)
     return true;
-  }
-  if (isNullOrUndefined(a) !== isNullOrUndefined(b)) {
+  if (isNullOrUndefined(a) !== isNullOrUndefined(b))
     return false;
-  }
+  if (!isObject(a) || !isObject(b))
+    return a === b;
   if (nullVsUndefined) {
     a = removeNullUndefined(
       a,
@@ -52,8 +52,18 @@ function deepEqual(a, b, ignoreFields, nullVsUndefined) {
       true
     );
   }
-  const replacer = ignoreFields ? (key, value) => ignoreFields.includes(key) ? void 0 : value : void 0;
-  return JSON.stringify(a, replacer) === JSON.stringify(b, replacer);
+  const keysA = Object.keys(a).filter((key) => !(ignoreFields == null ? void 0 : ignoreFields.includes(key)));
+  const keysB = Object.keys(b).filter((key) => !(ignoreFields == null ? void 0 : ignoreFields.includes(key)));
+  if (keysA.length !== keysB.length)
+    return false;
+  return keysA.every((key) => {
+    if (!Object.prototype.hasOwnProperty.call(b, key))
+      return false;
+    if (isDate(a[key]) && isDate(b[key])) {
+      return a[key].getTime() === b[key].getTime();
+    }
+    return deepEqual(a[key], b[key], ignoreFields, nullVsUndefined);
+  });
 }
 function combineTransforms(...transforms) {
   return {
@@ -307,8 +317,25 @@ function mergeChanges(changes) {
         existing.valueAtPath = change.valueAtPath;
       }
     } else {
-      changesByPath.set(pathStr, change);
-      changesOut.push(change);
+      let found = false;
+      for (let u = 0; u < change.path.length; u++) {
+        const path = change.path.slice(0, u).join("/");
+        if (changesByPath.has(path)) {
+          const remaining = change.path.slice(u);
+          setAtPath(
+            changesByPath.get(path).valueAtPath,
+            remaining,
+            change.pathTypes.slice(u),
+            change.valueAtPath
+          );
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        changesByPath.set(pathStr, change);
+        changesOut.push(change);
+      }
     }
   }
   return changesOut;
@@ -858,27 +885,33 @@ function syncObservable(obs$, syncOptionsOrSynced) {
   syncState$.isLoaded.set(!syncState$.numPendingRemoteLoads.peek());
   let isSynced = false;
   let isSubscribed = false;
+  let isApplyingPendingAfterSync = false;
   let unsubscribe = void 0;
   const applyPending = (pending) => {
     if (pending && !isEmpty(pending)) {
-      localState.isApplyingPending = true;
       const keys = Object.keys(pending);
+      const value = getNodeValue(node);
       const changes = [];
       for (let i = 0; i < keys.length; i++) {
         const key = keys[i];
         const path = key.split("/").filter((p2) => p2 !== "");
-        const { p, v, t } = pending[key];
-        changes.push({ path, valueAtPath: v, prevAtPath: p, pathTypes: t });
+        const { p, t, v } = pending[key];
+        const valueAtPath = getValueAtPath(value, path);
+        if (isApplyingPendingAfterSync || !deepEqual(valueAtPath, v)) {
+          changes.push({ path, valueAtPath: v, prevAtPath: p, pathTypes: t });
+        }
+      }
+      if (changes.length > 0) {
+        localState.isApplyingPending = true;
+        onObsChange(obs$, syncState$, localState, syncOptions, {
+          value,
+          isFromPersist: false,
+          isFromSync: false,
+          getPrevious: createPreviousHandler(value, changes),
+          changes
+        });
+        localState.isApplyingPending = false;
       }
-      const value = getNodeValue(node);
-      onObsChange(obs$, syncState$, localState, syncOptions, {
-        value,
-        isFromPersist: false,
-        isFromSync: false,
-        getPrevious: createPreviousHandler(value, changes),
-        changes
-      });
-      localState.isApplyingPending = false;
     }
   };
   const { get, subscribe } = syncOptions;
@@ -915,10 +948,10 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   const { v, t } = pending2[key];
                   if (t.length === 0 || !value) {
                     const oldValue = clone2(value);
-                    pending2[key].p = oldValue;
+                    pending2[key].p = key ? oldValue[key] : oldValue;
                     if (isObject(value) && isObject(v)) {
-                      Object.assign(value, v);
-                    } else {
+                      Object.assign(value, key ? { [key]: v } : v);
+                    } else if (!key) {
                       value = v;
                     }
                   } else if (value[p[0]] !== void 0) {
@@ -930,6 +963,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                     } else {
                       const oldValue = clone2(value);
                       pending2[key].p = getValueAtPath(oldValue, p);
+                      didChangeMetadata = true;
                       value = setAtPath(
                         value,
                         p,
@@ -950,7 +984,7 @@ function syncObservable(obs$, syncOptionsOrSynced) {
                   }
                 });
                 if (didChangeMetadata && syncOptions.persist) {
-                  updateMetadata(obs$, localState, syncState$, syncOptions, {
+                  updateMetadataImmediate(obs$, localState, syncState$, syncOptions, {
                     pending: pending2
                   });
                 }
@@ -1127,14 +1161,17 @@ function syncObservable(obs$, syncOptionsOrSynced) {
       }
       if (!isSynced) {
         isSynced = true;
-        await when(syncState$.isLoaded);
+        isApplyingPendingAfterSync = true;
         applyPending(pending);
+        isApplyingPendingAfterSync = false;
       }
     };
     syncStateValue.sync = sync;
   } else {
     if (!isSynced) {
+      isApplyingPendingAfterSync = true;
       applyPending(localState.pendingChanges);
+      isApplyingPendingAfterSync = false;
     }
   }
   syncStateValue.reset = async () => {