@legendapp/state 3.0.0-beta.19 → 3.0.0-beta.20

package/config/enableReactTracking.d.mts

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

package/config/enableReactTracking.d.ts

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

package/config/enableReactTracking.js

@@ -6,9 +6,9 @@ var react$1 = require('@legendapp/state/react');
 var react = require('react');
 
 // src/config/enableReactTracking.ts
-function enableReactTracking({ auto, warnUnobserved, warnGet }) {
+function enableReactTracking({ auto, warnUnobserved, warnMissingUse }) {
   const { get } = state.internal;
-  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnGet)) {
+  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnMissingUse)) {
     const ReactRenderContext = react.createContext(0);
     const isInRender = () => {
       try {
@@ -21,8 +21,11 @@ function enableReactTracking({ auto, warnUnobserved, warnGet }) {
       }
       return false;
     };
+    const isObserved = () => {
+      return !!state.tracking.current;
+    };
     const needsSelector = () => {
-      if (!state.tracking.current) {
+      if (!isObserved()) {
         return isInRender();
       }
       return false;
@@ -30,11 +33,17 @@ function enableReactTracking({ auto, warnUnobserved, warnGet }) {
     configureLegendState.configureLegendState({
       observableFunctions: {
         get: (node, options) => {
-          if (process.env.NODE_ENV === "development" && warnUnobserved) {
+          if (process.env.NODE_ENV === "development" && warnMissingUse) {
             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$"
-              );
+              if (isObserved()) {
+                console.warn(
+                  "[legend-state] Detected a `get()` call in an observer 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 {
+                console.warn(
+                  "[legend-state] Detected a `get()` call in a component. You likely want to use the `use$` hook to be reactive to it changing, or change `get()` to `peek()` to get the value without tracking: https://legendapp.com/open-source/state/v3/react/react-api/#use$"
+                );
+              }
             }
           } else if (needsSelector()) {
             if (auto) {

package/config/enableReactTracking.mjs

@@ -4,9 +4,9 @@ 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, warnGet }) {
+function enableReactTracking({ auto, warnUnobserved, warnMissingUse }) {
   const { get } = internal;
-  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnGet)) {
+  if (auto || process.env.NODE_ENV === "development" && (warnUnobserved || warnMissingUse)) {
     const ReactRenderContext = createContext(0);
     const isInRender = () => {
       try {
@@ -19,8 +19,11 @@ function enableReactTracking({ auto, warnUnobserved, warnGet }) {
       }
       return false;
     };
+    const isObserved = () => {
+      return !!tracking.current;
+    };
     const needsSelector = () => {
-      if (!tracking.current) {
+      if (!isObserved()) {
         return isInRender();
       }
       return false;
@@ -28,11 +31,17 @@ function enableReactTracking({ auto, warnUnobserved, warnGet }) {
     configureLegendState({
       observableFunctions: {
         get: (node, options) => {
-          if (process.env.NODE_ENV === "development" && warnUnobserved) {
+          if (process.env.NODE_ENV === "development" && warnMissingUse) {
             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$"
-              );
+              if (isObserved()) {
+                console.warn(
+                  "[legend-state] Detected a `get()` call in an observer 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 {
+                console.warn(
+                  "[legend-state] Detected a `get()` call in a component. You likely want to use the `use$` hook to be reactive to it changing, or change `get()` to `peek()` to get the value without tracking: https://legendapp.com/open-source/state/v3/react/react-api/#use$"
+                );
+              }
             }
           } else if (needsSelector()) {
             if (auto) {

package/index.js

@@ -1565,7 +1565,9 @@ var proxyHandler = {
     if (isObservable(thisArg)) {
       thisArg = thisArg.peek();
     }
-    return Reflect.apply(target.lazyFn || target, thisArg, argArray);
+    const fnRaw = getNodeValue(target);
+    const fn = isFunction(fnRaw) ? fnRaw : target.lazyFn || target;
+    return Reflect.apply(fn, thisArg, argArray);
   }
 };
 function set(node, newValue) {
@@ -2313,7 +2315,14 @@ function syncState(obs) {
         syncCount: 0,
         resetPersistence: void 0,
         reset: () => Promise.resolve(),
-        sync: () => Promise.resolve(),
+        sync: () => {
+          var _a;
+          obs.peek();
+          if ((_a = node.state) == null ? void 0 : _a.isGetting.peek()) {
+            return when(node.state.isLoaded);
+          }
+          return Promise.resolve();
+        },
         getPendingChanges: () => ({}),
         // TODOV3 remove
         clearPersist: void 0

package/index.mjs

@@ -1563,7 +1563,9 @@ var proxyHandler = {
     if (isObservable(thisArg)) {
       thisArg = thisArg.peek();
     }
-    return Reflect.apply(target.lazyFn || target, thisArg, argArray);
+    const fnRaw = getNodeValue(target);
+    const fn = isFunction(fnRaw) ? fnRaw : target.lazyFn || target;
+    return Reflect.apply(fn, thisArg, argArray);
   }
 };
 function set(node, newValue) {
@@ -2311,7 +2313,14 @@ function syncState(obs) {
         syncCount: 0,
         resetPersistence: void 0,
         reset: () => Promise.resolve(),
-        sync: () => Promise.resolve(),
+        sync: () => {
+          var _a;
+          obs.peek();
+          if ((_a = node.state) == null ? void 0 : _a.isGetting.peek()) {
+            return when(node.state.isLoaded);
+          }
+          return Promise.resolve();
+        },
         getPendingChanges: () => ({}),
         // TODOV3 remove
         clearPersist: void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.19",
+  "version": "3.0.0-beta.20",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,
@@ -69,6 +69,16 @@
       "require": "./react.js",
       "types": "./react.d.ts"
     },
+    "./react-native": {
+      "import": "./react-native.mjs",
+      "require": "./react-native.js",
+      "types": "./react-native.d.ts"
+    },
+    "./react-web": {
+      "import": "./react-web.mjs",
+      "require": "./react-web.js",
+      "types": "./react-web.d.ts"
+    },
     "./trace": {
       "import": "./trace.mjs",
       "require": "./trace.js",
@@ -79,6 +89,11 @@
       "require": "./react-reactive/enableReactive.js",
       "types": "./react-reactive/enableReactive.d.ts"
     },
+    "./react-reactive/Components": {
+      "import": "./react-reactive/Components.mjs",
+      "require": "./react-reactive/Components.js",
+      "types": "./react-reactive/Components.d.ts"
+    },
     "./react-reactive/enableReactComponents": {
       "import": "./react-reactive/enableReactComponents.mjs",
       "require": "./react-reactive/enableReactComponents.js",

package/react-native.d.mts

@@ -0,0 +1,4 @@
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View } from './react-reactive/Components.mjs';
+import 'react';
+import '@legendapp/state/react';
+import 'react-native';

package/react-native.d.ts

@@ -0,0 +1,4 @@
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View } from './react-reactive/Components.js';
+import 'react';
+import '@legendapp/state/react';
+import 'react-native';

package/react-native.js

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

package/react-native.mjs

@@ -0,0 +1,40 @@
+import { reactive, use$ } from '@legendapp/state/react';
+import { useRef } from 'react';
+import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+// src/react-reactive/Components.ts
+var $ActivityIndicator = reactive(ActivityIndicator);
+var $Button = reactive(Button);
+var $FlatList = reactive(FlatList, void 0, {
+  data: {
+    selector: (propsOut, p) => {
+      const state = useRef(0);
+      const [renderNum, value] = use$(() => [state.current++, p.get(true)]);
+      propsOut.extraData = renderNum;
+      return value;
+    }
+  }
+});
+var $Image = reactive(Image);
+var $Pressable = reactive(Pressable);
+var $ScrollView = reactive(ScrollView);
+var $SectionList = reactive(SectionList);
+var $Switch = reactive(Switch, void 0, {
+  value: {
+    handler: "onValueChange",
+    getValue: (e) => e,
+    defaultValue: false
+  }
+});
+var $Text = reactive(Text);
+var $TextInput = reactive(TextInput, void 0, {
+  value: {
+    handler: "onChange",
+    getValue: (e) => e.nativeEvent.text,
+    defaultValue: ""
+  }
+});
+var $TouchableWithoutFeedback = reactive(TouchableWithoutFeedback);
+var $View = reactive(View);
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.d.mts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as _legendapp_state_react from '@legendapp/state/react';
+import * as react_native from 'react-native';
+import { View } from 'react-native';
+
+declare const $ActivityIndicator: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ActivityIndicatorProps>, any>;
+declare const $Button: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ButtonProps>, any>;
+declare const $FlatList: React.FC<_legendapp_state_react.ShapeWith$<react_native.FlatListProps<unknown>>>;
+declare const $Image: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ImageProps>, any>;
+declare const $Pressable: React.ForwardRefExoticComponent<_legendapp_state_react.ShapeWith$<react_native.PressableProps & React.RefAttributes<View>>>;
+declare const $ScrollView: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ScrollViewProps>, any>;
+declare const $SectionList: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.SectionListProps<unknown, unknown>>, any>;
+declare const $Switch: React.FC<_legendapp_state_react.ShapeWith$<react_native.SwitchProps>>;
+declare const $Text: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TextProps>, any>;
+declare const $TextInput: React.FC<_legendapp_state_react.ShapeWith$<react_native.TextInputProps>>;
+declare const $TouchableWithoutFeedback: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TouchableWithoutFeedbackProps>, any>;
+declare const $View: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ViewProps>, any>;
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as _legendapp_state_react from '@legendapp/state/react';
+import * as react_native from 'react-native';
+import { View } from 'react-native';
+
+declare const $ActivityIndicator: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ActivityIndicatorProps>, any>;
+declare const $Button: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ButtonProps>, any>;
+declare const $FlatList: React.FC<_legendapp_state_react.ShapeWith$<react_native.FlatListProps<unknown>>>;
+declare const $Image: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ImageProps>, any>;
+declare const $Pressable: React.ForwardRefExoticComponent<_legendapp_state_react.ShapeWith$<react_native.PressableProps & React.RefAttributes<View>>>;
+declare const $ScrollView: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ScrollViewProps>, any>;
+declare const $SectionList: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.SectionListProps<unknown, unknown>>, any>;
+declare const $Switch: React.FC<_legendapp_state_react.ShapeWith$<react_native.SwitchProps>>;
+declare const $Text: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TextProps>, any>;
+declare const $TextInput: React.FC<_legendapp_state_react.ShapeWith$<react_native.TextInputProps>>;
+declare const $TouchableWithoutFeedback: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.TouchableWithoutFeedbackProps>, any>;
+declare const $View: React.ComponentClass<_legendapp_state_react.ShapeWith$<react_native.ViewProps>, any>;
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-reactive/Components.js

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

package/react-reactive/Components.mjs

@@ -0,0 +1,40 @@
+import { reactive, use$ } from '@legendapp/state/react';
+import { useRef } from 'react';
+import { ActivityIndicator, Button, FlatList, Image, Pressable, ScrollView, SectionList, Switch, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+// src/react-reactive/Components.ts
+var $ActivityIndicator = reactive(ActivityIndicator);
+var $Button = reactive(Button);
+var $FlatList = reactive(FlatList, void 0, {
+  data: {
+    selector: (propsOut, p) => {
+      const state = useRef(0);
+      const [renderNum, value] = use$(() => [state.current++, p.get(true)]);
+      propsOut.extraData = renderNum;
+      return value;
+    }
+  }
+});
+var $Image = reactive(Image);
+var $Pressable = reactive(Pressable);
+var $ScrollView = reactive(ScrollView);
+var $SectionList = reactive(SectionList);
+var $Switch = reactive(Switch, void 0, {
+  value: {
+    handler: "onValueChange",
+    getValue: (e) => e,
+    defaultValue: false
+  }
+});
+var $Text = reactive(Text);
+var $TextInput = reactive(TextInput, void 0, {
+  value: {
+    handler: "onChange",
+    getValue: (e) => e.nativeEvent.text,
+    defaultValue: ""
+  }
+});
+var $TouchableWithoutFeedback = reactive(TouchableWithoutFeedback);
+var $View = reactive(View);
+
+export { $ActivityIndicator, $Button, $FlatList, $Image, $Pressable, $ScrollView, $SectionList, $Switch, $Text, $TextInput, $TouchableWithoutFeedback, $View };

package/react-web.d.mts

@@ -0,0 +1,6 @@
+import { FCReactiveObject } from '@legendapp/state/react';
+
+type IReactive = FCReactiveObject<JSX.IntrinsicElements>;
+declare const $React: IReactive;
+
+export { $React };

package/react-web.d.ts

@@ -0,0 +1,6 @@
+import { FCReactiveObject } from '@legendapp/state/react';
+
+type IReactive = FCReactiveObject<JSX.IntrinsicElements>;
+declare const $React: IReactive;
+
+export { $React };

package/react-web.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var state = require('@legendapp/state');
+var react$1 = require('@legendapp/state/react');
+var react = require('react');
+
+// src/react-web/$React.tsx
+var bindInfoOneWay = {
+  value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+};
+var bindInfoInput = Object.assign(
+  { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+  bindInfoOneWay
+);
+var binders = /* @__PURE__ */ new Map([
+  ["input", bindInfoInput],
+  ["textarea", bindInfoOneWay],
+  ["select", bindInfoOneWay]
+]);
+var $React = new Proxy(
+  {},
+  {
+    get(target, p) {
+      if (!target[p]) {
+        const render = react.forwardRef((props, ref) => {
+          const propsOut = { ...props };
+          if (ref && (state.isFunction(ref) || !state.isEmpty(ref))) {
+            propsOut.ref = ref;
+          }
+          return react.createElement(p, propsOut);
+        });
+        target[p] = react$1.reactive(render, [], binders.get(p));
+      }
+      return target[p];
+    }
+  }
+);
+
+exports.$React = $React;

package/react-web.mjs

@@ -0,0 +1,37 @@
+import { isFunction, isEmpty } from '@legendapp/state';
+import { reactive } from '@legendapp/state/react';
+import { forwardRef, createElement } from 'react';
+
+// src/react-web/$React.tsx
+var bindInfoOneWay = {
+  value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+};
+var bindInfoInput = Object.assign(
+  { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
+  bindInfoOneWay
+);
+var binders = /* @__PURE__ */ new Map([
+  ["input", bindInfoInput],
+  ["textarea", bindInfoOneWay],
+  ["select", bindInfoOneWay]
+]);
+var $React = new Proxy(
+  {},
+  {
+    get(target, p) {
+      if (!target[p]) {
+        const render = forwardRef((props, ref) => {
+          const propsOut = { ...props };
+          if (ref && (isFunction(ref) || !isEmpty(ref))) {
+            propsOut.ref = ref;
+          }
+          return createElement(p, propsOut);
+        });
+        target[p] = reactive(render, [], binders.get(p));
+      }
+      return target[p];
+    }
+  }
+);
+
+export { $React };

package/react.d.mts

@@ -1,19 +1,11 @@
 import * as React from 'react';
-import { ReactNode, ReactElement, NamedExoticComponent, FC, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
+import { ReactNode, ReactElement, FC, NamedExoticComponent, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, GetOptions, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
-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;
@@ -115,10 +107,12 @@ type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
 };
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
+declare function reactive<T extends object>(component: React.ComponentClass<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactive<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
 declare function reactive<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>): React.ComponentClass<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
@@ -183,4 +177,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, useSelector as use$, 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,19 +1,11 @@
 import * as React from 'react';
-import { ReactNode, ReactElement, NamedExoticComponent, FC, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
+import { ReactNode, ReactElement, FC, NamedExoticComponent, LegacyRef, DependencyList, ReducerWithoutAction, ReducerStateWithoutAction, DispatchWithoutAction, Reducer, ReducerState, Dispatch, ReducerAction, ComponentClass } from 'react';
 import { ObservableParam, Observable, ObservableBoolean, Selector, GetOptions, RecursiveValueOrFunction, ObserveOptions, ObserveEvent, ObserveEventCallback } from '@legendapp/state';
-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;
@@ -115,10 +107,12 @@ type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
 };
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
+declare function reactive<T extends object>(component: React.ComponentClass<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactive<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
 declare function reactive<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactive<T extends object>(component: React.ComponentClass<T>): React.ComponentClass<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
 declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
@@ -183,4 +177,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, useSelector as use$, 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

@@ -101,12 +101,24 @@ function createSelectorFunctions(options, isPaused$) {
     }
   };
 }
+function doSuspense(selector) {
+  const vProm = state.when(selector);
+  if (React__default.default.use) {
+    React__default.default.use(vProm);
+  } else {
+    throw vProm;
+  }
+}
 function useSelector(selector, options) {
   var _a;
+  let value;
   if (reactGlobals.inObserver && state.isObservable(selector) && !(options == null ? void 0 : options.suspense)) {
-    return state.computeSelector(selector, options);
+    value = state.computeSelector(selector, options);
+    if ((options == null ? void 0 : options.suspense) && value === void 0) {
+      doSuspense(selector);
+    }
+    return value;
   }
-  let value;
   try {
     const isPaused$ = React.useContext(getPauseContext());
     const selectorFn = React.useMemo(() => createSelectorFunctions(options, isPaused$), []);
@@ -121,16 +133,8 @@ function useSelector(selector, options) {
     }
     throw err;
   }
-  if (options == null ? void 0 : options.suspense) {
-    const isProm = state.isPromise(value);
-    if (state.isPromise(value) || !value && state.isObservable(selector)) {
-      const vProm = isProm ? value : state.when(selector);
-      if (React__default.default.use) {
-        React__default.default.use(vProm);
-      } else {
-        throw vProm;
-      }
-    }
+  if ((options == null ? void 0 : options.suspense) && value === void 0) {
+    doSuspense(selector);
   }
   return value;
 }
@@ -139,25 +143,6 @@ 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) {
@@ -285,42 +270,7 @@ function reactiveComponents(components) {
   );
 }
 
-// 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];
-  }
-});
+// src/react/For.tsx
 var { findIDKey, getNode, optimized } = state.internal;
 var autoMemoCache = /* @__PURE__ */ new Map();
 function For({
@@ -395,10 +345,31 @@ function For({
   }
   return out;
 }
-var Memo2 = React.memo(
+var Memo = React.memo(
   Computed,
   (prev, next) => next.scoped ? prev.children === next.children : 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 Reactive = new Proxy(
   {},
   {
@@ -607,10 +578,9 @@ function useWhenReady(predicate, effect) {
   return React.useMemo(() => state.whenReady(predicate, effect), []);
 }
 
-exports.$ = $;
 exports.Computed = Computed;
 exports.For = For;
-exports.Memo = Memo2;
+exports.Memo = Memo;
 exports.Reactive = Reactive;
 exports.Show = Show;
 exports.Switch = Switch;

package/react.mjs

@@ -1,4 +1,4 @@
-import { isFunction, isEmpty, observable, isPromise, isObservable, when, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
+import { isFunction, isEmpty, observable, computeSelector, isArray, isMap, isObservableValueReady, linked, isPromise, observe, when, whenReady, internal, trackSelector, isPrimitive, isObservable } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
@@ -95,12 +95,24 @@ function createSelectorFunctions(options, isPaused$) {
     }
   };
 }
+function doSuspense(selector) {
+  const vProm = when(selector);
+  if (React.use) {
+    React.use(vProm);
+  } else {
+    throw vProm;
+  }
+}
 function useSelector(selector, options) {
   var _a;
+  let value;
   if (reactGlobals.inObserver && isObservable(selector) && !(options == null ? void 0 : options.suspense)) {
-    return computeSelector(selector, options);
+    value = computeSelector(selector, options);
+    if ((options == null ? void 0 : options.suspense) && value === void 0) {
+      doSuspense(selector);
+    }
+    return value;
   }
-  let value;
   try {
     const isPaused$ = useContext(getPauseContext());
     const selectorFn = useMemo(() => createSelectorFunctions(options, isPaused$), []);
@@ -115,16 +127,8 @@ function useSelector(selector, options) {
     }
     throw err;
   }
-  if (options == null ? void 0 : options.suspense) {
-    const isProm = isPromise(value);
-    if (isPromise(value) || !value && isObservable(selector)) {
-      const vProm = isProm ? value : when(selector);
-      if (React.use) {
-        React.use(vProm);
-      } else {
-        throw vProm;
-      }
-    }
+  if ((options == null ? void 0 : options.suspense) && value === void 0) {
+    doSuspense(selector);
   }
   return value;
 }
@@ -133,25 +137,6 @@ 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) {
@@ -279,42 +264,7 @@ function reactiveComponents(components) {
   );
 }
 
-// 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];
-  }
-});
+// src/react/For.tsx
 var { findIDKey, getNode, optimized } = internal;
 var autoMemoCache = /* @__PURE__ */ new Map();
 function For({
@@ -389,10 +339,31 @@ function For({
   }
   return out;
 }
-var Memo2 = memo(
+var Memo = memo(
   Computed,
   (prev, next) => next.scoped ? prev.children === next.children : 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 Reactive = new Proxy(
   {},
   {
@@ -601,4 +572,4 @@ function useWhenReady(predicate, effect) {
   return useMemo(() => whenReady(predicate, effect), []);
 }
 
-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 };
+export { Computed, For, 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.d.mts

@@ -3,17 +3,23 @@ import { SyncedGetParams, SyncedErrorParams, SyncedOptions, SyncedSetParams, Syn
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
+interface SyncedCrudPropsNoRead<TLocal, TAsOption extends CrudAsOption> {
+    get?: never | undefined;
+    list?: never | undefined;
+    initial?: InitialValue<TLocal, TAsOption>;
+    as?: TAsOption;
+}
 interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
-    get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    get: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
     list?: never | undefined;
-    initial?: InitialValue<TLocal, 'value'>;
+    initial?: InitialValue<Partial<NoInfer<TLocal>>, 'value'>;
     as?: never | 'value';
 }
 interface SyncedCrudPropsMany<TRemote extends object, TLocal, TAsOption extends CrudAsOption> {
-    list?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+    list: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
     get?: never | undefined;
     as?: TAsOption;
-    initial?: InitialValue<TLocal, TAsOption>;
+    initial?: InitialValue<Partial<NoInfer<TLocal>>, TAsOption>;
 }
 interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
     saved: TLocal;
@@ -52,8 +58,9 @@ type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption ex
 } ? number : string, TLocal> : TAsOption extends 'object' ? Record<TLocal extends {
     id: number;
 } ? number : string, TLocal> : TAsOption extends 'value' ? TLocal : TLocal[];
+declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsNoRead<TRemote, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote>(props: SyncedCrudPropsSingle<TRemote, TLocal> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsMany<TRemote, TLocal, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: (SyncedCrudPropsSingle<TRemote, TLocal> | SyncedCrudPropsMany<TRemote, TLocal, TAsOption>) & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 
-export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };
+export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsNoRead, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.d.ts

@@ -3,17 +3,23 @@ import { SyncedGetParams, SyncedErrorParams, SyncedOptions, SyncedSetParams, Syn
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
+interface SyncedCrudPropsNoRead<TLocal, TAsOption extends CrudAsOption> {
+    get?: never | undefined;
+    list?: never | undefined;
+    initial?: InitialValue<TLocal, TAsOption>;
+    as?: TAsOption;
+}
 interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
-    get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    get: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
     list?: never | undefined;
-    initial?: InitialValue<TLocal, 'value'>;
+    initial?: InitialValue<Partial<NoInfer<TLocal>>, 'value'>;
     as?: never | 'value';
 }
 interface SyncedCrudPropsMany<TRemote extends object, TLocal, TAsOption extends CrudAsOption> {
-    list?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+    list: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
     get?: never | undefined;
     as?: TAsOption;
-    initial?: InitialValue<TLocal, TAsOption>;
+    initial?: InitialValue<Partial<NoInfer<TLocal>>, TAsOption>;
 }
 interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
     saved: TLocal;
@@ -52,8 +58,9 @@ type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption ex
 } ? number : string, TLocal> : TAsOption extends 'object' ? Record<TLocal extends {
     id: number;
 } ? number : string, TLocal> : TAsOption extends 'value' ? TLocal : TLocal[];
+declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsNoRead<TRemote, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote>(props: SyncedCrudPropsSingle<TRemote, TLocal> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsMany<TRemote, TLocal, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: (SyncedCrudPropsSingle<TRemote, TLocal> | SyncedCrudPropsMany<TRemote, TLocal, TAsOption>) & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 
-export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };
+export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsNoRead, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.js

@@ -189,7 +189,7 @@ function syncedCrud(props) {
           /*deep*/
           true
         ),
-        itemValue[fieldId] ? { [fieldId]: itemValue[fieldId] } : {}
+        !state.isNullOrUndefined(itemValue[fieldId]) ? { [fieldId]: itemValue[fieldId] } : {}
       ) : itemValue;
     };
     changes.forEach((change) => {
@@ -198,10 +198,10 @@ function syncedCrud(props) {
         if (value) {
           let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (!id && generateId) {
+          if (!state.isNullOrUndefined(id) && generateId) {
             id = ensureId(value, fieldId, generateId);
           }
-          if (id) {
+          if (!state.isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
               isCreate = false;
@@ -304,7 +304,7 @@ function syncedCrud(props) {
         let saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
         const isChild = itemKey !== "undefined" && asType !== "value";
         const currentPeeked = state.getNodeValue(node);
-        const currentValue = isChild ? (_a = asType === "array" && state.isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : currentPeeked[itemKey] : currentPeeked;
+        const currentValue = isChild ? (_a = asType === "array" && state.isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : asType === "Map" ? currentPeeked.get(itemKey) : currentPeeked[itemKey] : currentPeeked;
         if (saved && !state.isNullOrUndefined(currentValue)) {
           if (onSaved) {
             const ret = onSaved({

package/sync-plugins/crud.mjs

@@ -1,4 +1,4 @@
-import { isPromise, applyChanges, isNullOrUndefined, setAtPath, symbolDelete, isArray, internal, getNodeValue } from '@legendapp/state';
+import { isPromise, isNullOrUndefined, applyChanges, setAtPath, symbolDelete, isArray, internal, getNodeValue } from '@legendapp/state';
 import { synced, deepEqual, internal as internal$1, diffObjects } from '@legendapp/state/sync';
 
 // src/sync-plugins/crud.ts
@@ -187,7 +187,7 @@ function syncedCrud(props) {
           /*deep*/
           true
         ),
-        itemValue[fieldId] ? { [fieldId]: itemValue[fieldId] } : {}
+        !isNullOrUndefined(itemValue[fieldId]) ? { [fieldId]: itemValue[fieldId] } : {}
       ) : itemValue;
     };
     changes.forEach((change) => {
@@ -196,10 +196,10 @@ function syncedCrud(props) {
         if (value) {
           let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (!id && generateId) {
+          if (!isNullOrUndefined(id) && generateId) {
             id = ensureId(value, fieldId, generateId);
           }
-          if (id) {
+          if (!isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
               isCreate = false;
@@ -302,7 +302,7 @@ function syncedCrud(props) {
         let saved = (transform == null ? void 0 : transform.load) ? await transform.load(data, "set") : data;
         const isChild = itemKey !== "undefined" && asType !== "value";
         const currentPeeked = getNodeValue(node);
-        const currentValue = isChild ? (_a = asType === "array" && isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : currentPeeked[itemKey] : currentPeeked;
+        const currentValue = isChild ? (_a = asType === "array" && isArray(currentPeeked) ? currentPeeked.find((v) => v[fieldId] === itemKey) : void 0) != null ? _a : asType === "Map" ? currentPeeked.get(itemKey) : currentPeeked[itemKey] : currentPeeked;
         if (saved && !isNullOrUndefined(currentValue)) {
           if (onSaved) {
             const ret = onSaved({

package/sync-plugins/keel.d.mts

@@ -98,8 +98,8 @@ interface SyncedKeelPropsBase<TRemote extends {
     create?: (i: NoInfer<Partial<TRemote>>) => Promise<APIResult<NoInfer<TRemote>>>;
     update?: (params: {
         where: any;
-        values?: NoInfer<Partial<TRemote>>;
-    }) => Promise<APIResult<NoInfer<TRemote>>>;
+        values?: Partial<NoInfer<TRemote>>;
+    }) => Promise<APIResult<TRemote>>;
     delete?: (params: {
         id: string;
     }) => Promise<APIResult<string>>;

package/sync-plugins/keel.d.ts

@@ -98,8 +98,8 @@ interface SyncedKeelPropsBase<TRemote extends {
     create?: (i: NoInfer<Partial<TRemote>>) => Promise<APIResult<NoInfer<TRemote>>>;
     update?: (params: {
         where: any;
-        values?: NoInfer<Partial<TRemote>>;
-    }) => Promise<APIResult<NoInfer<TRemote>>>;
+        values?: Partial<NoInfer<TRemote>>;
+    }) => Promise<APIResult<TRemote>>;
     delete?: (params: {
         id: string;
     }) => Promise<APIResult<string>>;

package/sync-plugins/supabase.js

@@ -140,25 +140,28 @@ function syncedSupabase(props) {
       });
     }
   } : void 0;
-  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? deleteParam ? wrapSupabaseFn(deleteParam, "delete") : async (input, params) => {
-    const { onError } = params;
-    const id = input.id;
-    const res = await client.from(collection).delete().eq("id", id).select();
-    const { data, error } = res;
-    if (data) {
-      const created = data[0];
-      return created;
-    } else if (error) {
-      handleSupabaseError(error, onError, {
-        setParams: params,
-        source: "delete",
-        type: "set",
-        retry: params,
-        input,
-        revert: sync.createRevertChanges(params.value$, params.changes)
-      });
+  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? (
+    // prettier-ignore
+    deleteParam ? wrapSupabaseFn(deleteParam, "delete") : async (input, params) => {
+      const { onError } = params;
+      const id = input.id;
+      const res = await client.from(collection).delete().eq("id", id).select();
+      const { data, error } = res;
+      if (data) {
+        const created = data[0];
+        return created;
+      } else if (error) {
+        handleSupabaseError(error, onError, {
+          setParams: params,
+          source: "delete",
+          type: "set",
+          retry: params,
+          input,
+          revert: sync.createRevertChanges(params.value$, params.changes)
+        });
+      }
     }
-  } : void 0;
+  ) : void 0;
   const subscribe = realtime ? ({ node, value$, update: update2 }) => {
     const { filter: filter2, schema: schema2 } = state.isObject(realtime) ? realtime : {};
     const channel = client.channel(`LS_${node.key || ""}${channelNum++}`).on(

package/sync-plugins/supabase.mjs

@@ -138,25 +138,28 @@ function syncedSupabase(props) {
       });
     }
   } : void 0;
-  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? deleteParam ? wrapSupabaseFn(deleteParam, "delete") : async (input, params) => {
-    const { onError } = params;
-    const id = input.id;
-    const res = await client.from(collection).delete().eq("id", id).select();
-    const { data, error } = res;
-    if (data) {
-      const created = data[0];
-      return created;
-    } else if (error) {
-      handleSupabaseError(error, onError, {
-        setParams: params,
-        source: "delete",
-        type: "set",
-        retry: params,
-        input,
-        revert: createRevertChanges(params.value$, params.changes)
-      });
+  const deleteFn = !fieldDeleted && (!actions || actions.includes("delete")) ? (
+    // prettier-ignore
+    deleteParam ? wrapSupabaseFn(deleteParam, "delete") : async (input, params) => {
+      const { onError } = params;
+      const id = input.id;
+      const res = await client.from(collection).delete().eq("id", id).select();
+      const { data, error } = res;
+      if (data) {
+        const created = data[0];
+        return created;
+      } else if (error) {
+        handleSupabaseError(error, onError, {
+          setParams: params,
+          source: "delete",
+          type: "set",
+          retry: params,
+          input,
+          revert: createRevertChanges(params.value$, params.changes)
+        });
+      }
     }
-  } : void 0;
+  ) : void 0;
   const subscribe = realtime ? ({ node, value$, update: update2 }) => {
     const { filter: filter2, schema: schema2 } = isObject(realtime) ? realtime : {};
     const channel = client.channel(`LS_${node.key || ""}${channelNum++}`).on(