@legendapp/state 3.0.0-beta.11 → 3.0.0-beta.13

package/config/enableReactComponents.js

@@ -4,7 +4,9 @@ var react = require('@legendapp/state/react');
 
 // src/config/enableReactComponents.ts
 function enableReactComponents() {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/config/enableReactComponents.mjs

@@ -2,7 +2,9 @@ import { configureReactive } from '@legendapp/state/react';
 
 // src/config/enableReactComponents.ts
 function enableReactComponents() {
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/index.d.mts

@@ -108,6 +108,7 @@ declare function getNode(value$: ObservableParam): NodeInfo;
 declare function setNodeValue(node: NodeInfo, newValue: any): {
     prevValue: any;
     newValue: any;
+    parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
 declare function ensureNodeValue(node: NodeInfo): any;

package/index.d.ts

@@ -108,6 +108,7 @@ declare function getNode(value$: ObservableParam): NodeInfo;
 declare function setNodeValue(node: NodeInfo, newValue: any): {
     prevValue: any;
     newValue: any;
+    parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
 declare function ensureNodeValue(node: NodeInfo): any;

package/index.js

@@ -181,7 +181,7 @@ function setNodeValue(node, newValue) {
       parentNode.isSetting--;
     }
   }
-  return { prevValue, newValue };
+  return { prevValue, newValue, parentValue };
 }
 var arrNodeKeys = [];
 function getNodeValue(node) {
@@ -1588,7 +1588,7 @@ function setKey(node, key, newValue, level) {
   if (isObservable(newValue)) {
     setToObservable(childNode, newValue);
   } else {
-    const { newValue: savedValue, prevValue } = setNodeValue(childNode, newValue);
+    const { newValue: savedValue, prevValue, parentValue } = setNodeValue(childNode, newValue);
     const isPrim = isPrimitive(savedValue) || savedValue instanceof Date;
     if (!isPrim) {
       let parent = childNode;
@@ -1600,7 +1600,17 @@ function setKey(node, key, newValue, level) {
     const notify2 = !equals(savedValue, prevValue);
     const forceNotify = !notify2 && childNode.isComputing && !isPrim;
     if (notify2 || forceNotify) {
-      updateNodesAndNotify(node, savedValue, prevValue, childNode, isPrim, isRoot, level, forceNotify);
+      updateNodesAndNotify(
+        node,
+        savedValue,
+        prevValue,
+        childNode,
+        parentValue,
+        isPrim,
+        isRoot,
+        level,
+        forceNotify
+      );
     }
     extractFunctionOrComputed(node, key, savedValue);
   }
@@ -1707,7 +1717,7 @@ function handlerMapSet(node, p, value) {
     };
   }
 }
-function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRoot, level, forceNotify) {
+function updateNodesAndNotify(node, newValue, prevValue, childNode, parentValue, isPrim, isRoot, level, forceNotify) {
   if (!childNode)
     childNode = node;
   beginBatch();
@@ -1716,15 +1726,29 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
   }
   let hasADiff = forceNotify || isPrim;
   let whenOptimizedOnlyIf = false;
+  let valueAsArr;
+  let valueAsMap;
   if (!isPrim || prevValue && !isPrimitive(prevValue)) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && typeof __devUpdateNodes !== "undefined") {
       __devUpdateNodes.clear();
     }
     hasADiff = hasADiff || updateNodes(childNode, newValue, prevValue);
     if (isArray(newValue)) {
-      whenOptimizedOnlyIf = (newValue == null ? void 0 : newValue.length) !== (prevValue == null ? void 0 : prevValue.length);
+      valueAsArr = newValue;
+    } else if (isMap(newValue) || isSet(newValue)) {
+      valueAsMap = newValue;
     }
   }
+  if (isArray(parentValue)) {
+    valueAsArr = parentValue;
+  } else if (isMap(parentValue) || isSet(parentValue)) {
+    valueAsMap = parentValue;
+  }
+  if (valueAsArr) {
+    whenOptimizedOnlyIf = (valueAsArr == null ? void 0 : valueAsArr.length) !== (prevValue == null ? void 0 : prevValue.length);
+  } else if (valueAsMap) {
+    whenOptimizedOnlyIf = (valueAsMap == null ? void 0 : valueAsMap.size) !== (prevValue == null ? void 0 : prevValue.size);
+  }
   if (isPrim || !newValue || isEmpty(newValue) && !isEmpty(prevValue) ? newValue !== prevValue : hasADiff) {
     notify(
       isPrim && isRoot ? node : childNode,

package/index.mjs

@@ -179,7 +179,7 @@ function setNodeValue(node, newValue) {
       parentNode.isSetting--;
     }
   }
-  return { prevValue, newValue };
+  return { prevValue, newValue, parentValue };
 }
 var arrNodeKeys = [];
 function getNodeValue(node) {
@@ -1586,7 +1586,7 @@ function setKey(node, key, newValue, level) {
   if (isObservable(newValue)) {
     setToObservable(childNode, newValue);
   } else {
-    const { newValue: savedValue, prevValue } = setNodeValue(childNode, newValue);
+    const { newValue: savedValue, prevValue, parentValue } = setNodeValue(childNode, newValue);
     const isPrim = isPrimitive(savedValue) || savedValue instanceof Date;
     if (!isPrim) {
       let parent = childNode;
@@ -1598,7 +1598,17 @@ function setKey(node, key, newValue, level) {
     const notify2 = !equals(savedValue, prevValue);
     const forceNotify = !notify2 && childNode.isComputing && !isPrim;
     if (notify2 || forceNotify) {
-      updateNodesAndNotify(node, savedValue, prevValue, childNode, isPrim, isRoot, level, forceNotify);
+      updateNodesAndNotify(
+        node,
+        savedValue,
+        prevValue,
+        childNode,
+        parentValue,
+        isPrim,
+        isRoot,
+        level,
+        forceNotify
+      );
     }
     extractFunctionOrComputed(node, key, savedValue);
   }
@@ -1705,7 +1715,7 @@ function handlerMapSet(node, p, value) {
     };
   }
 }
-function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRoot, level, forceNotify) {
+function updateNodesAndNotify(node, newValue, prevValue, childNode, parentValue, isPrim, isRoot, level, forceNotify) {
   if (!childNode)
     childNode = node;
   beginBatch();
@@ -1714,15 +1724,29 @@ function updateNodesAndNotify(node, newValue, prevValue, childNode, isPrim, isRo
   }
   let hasADiff = forceNotify || isPrim;
   let whenOptimizedOnlyIf = false;
+  let valueAsArr;
+  let valueAsMap;
   if (!isPrim || prevValue && !isPrimitive(prevValue)) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && typeof __devUpdateNodes !== "undefined") {
       __devUpdateNodes.clear();
     }
     hasADiff = hasADiff || updateNodes(childNode, newValue, prevValue);
     if (isArray(newValue)) {
-      whenOptimizedOnlyIf = (newValue == null ? void 0 : newValue.length) !== (prevValue == null ? void 0 : prevValue.length);
+      valueAsArr = newValue;
+    } else if (isMap(newValue) || isSet(newValue)) {
+      valueAsMap = newValue;
     }
   }
+  if (isArray(parentValue)) {
+    valueAsArr = parentValue;
+  } else if (isMap(parentValue) || isSet(parentValue)) {
+    valueAsMap = parentValue;
+  }
+  if (valueAsArr) {
+    whenOptimizedOnlyIf = (valueAsArr == null ? void 0 : valueAsArr.length) !== (prevValue == null ? void 0 : prevValue.length);
+  } else if (valueAsMap) {
+    whenOptimizedOnlyIf = (valueAsMap == null ? void 0 : valueAsMap.size) !== (prevValue == null ? void 0 : prevValue.size);
+  }
   if (isPrim || !newValue || isEmpty(newValue) && !isEmpty(prevValue) ? newValue !== prevValue : hasADiff) {
     notify(
       isPrim && isRoot ? node : childNode,

package/package.json

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

package/react-reactive/enableReactComponents.js

@@ -7,7 +7,9 @@ function enableReactComponents_(config) {
     return;
   }
   isEnabled = true;
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/react-reactive/enableReactComponents.mjs

@@ -5,7 +5,9 @@ function enableReactComponents_(config) {
     return;
   }
   isEnabled = true;
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/react-reactive/enableReactive.js

@@ -7,7 +7,9 @@ function enableReactComponents_(config) {
     return;
   }
   isEnabled = true;
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/react-reactive/enableReactive.mjs

@@ -5,7 +5,9 @@ function enableReactComponents_(config) {
     return;
   }
   isEnabled = true;
-  const bindInfo = { value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" } };
+  const bindInfo = {
+    value: { handler: "onChange", getValue: (e) => e.target.value, defaultValue: "" }
+  };
   const bindInfoInput = Object.assign(
     { checked: { handler: "onChange", getValue: (e) => e.target.checked } },
     bindInfo

package/react.d.mts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+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';
 
@@ -22,11 +22,11 @@ declare function For<T, TProps>({ each, optimized: isOptimized, item, itemProps,
 declare function usePauseProvider(): {
     PauseProvider: ({ children }: {
         children: ReactNode;
-    }) => react.FunctionComponentElement<react.ProviderProps<ObservableBoolean>>;
+    }) => React.FunctionComponentElement<React.ProviderProps<ObservableBoolean>>;
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: react.MemoExoticComponent<typeof Computed>;
+declare const Memo: React.MemoExoticComponent<typeof Computed>;
 
 interface IReactive {
 }
@@ -71,13 +71,13 @@ type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
 } & {
     children?: Selector<ReactNode>;
 };
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
+interface BindKey<P, K extends keyof P = keyof P> {
+    handler?: K;
+    getValue?: P[K] extends infer T ? T extends (...args: any) => any ? (params: Parameters<T>[0]) => any : (e: any) => any : (e: any) => any;
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Partial<Record<keyof P, BindKey<P>>>;
+type BindKeys<P = any, K extends keyof P = keyof P> = Partial<Record<K, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
@@ -99,12 +99,23 @@ type ObjectShapeWith$<T> = {
     [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
 };
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
+type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: Selector<T[P]>;
+};
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function 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.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
@@ -161,4 +172,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$, 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, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+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';
 
@@ -22,11 +22,11 @@ declare function For<T, TProps>({ each, optimized: isOptimized, item, itemProps,
 declare function usePauseProvider(): {
     PauseProvider: ({ children }: {
         children: ReactNode;
-    }) => react.FunctionComponentElement<react.ProviderProps<ObservableBoolean>>;
+    }) => React.FunctionComponentElement<React.ProviderProps<ObservableBoolean>>;
     isPaused$: ObservableBoolean;
 };
 
-declare const Memo: react.MemoExoticComponent<typeof Computed>;
+declare const Memo: React.MemoExoticComponent<typeof Computed>;
 
 interface IReactive {
 }
@@ -71,13 +71,13 @@ type ShapeWithNew$<T> = Partial<Omit<T, 'children'>> & {
 } & {
     children?: Selector<ReactNode>;
 };
-interface BindKey<P> {
-    handler?: keyof P;
-    getValue?: (e: any) => any;
+interface BindKey<P, K extends keyof P = keyof P> {
+    handler?: K;
+    getValue?: P[K] extends infer T ? T extends (...args: any) => any ? (params: Parameters<T>[0]) => any : (e: any) => any : (e: any) => any;
     defaultValue?: any;
     selector?: (propsOut: Record<string, any>, p: Observable<any>) => any;
 }
-type BindKeys<P = any> = Partial<Record<keyof P, BindKey<P>>>;
+type BindKeys<P = any, K extends keyof P = keyof P> = Partial<Record<K, BindKey<P>>>;
 type FCReactiveObject<T> = {
     [K in keyof T]: FC<ShapeWithNew$<T[K]>>;
 };
@@ -99,12 +99,23 @@ type ObjectShapeWith$<T> = {
     [K in keyof T]: T[K] extends FC<infer P> ? FC<ShapeWith$<P>> : T[K];
 };
 type ExtractFCPropsType<T> = T extends FC<infer P> ? P : never;
+type ReactifyProps<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]: Selector<T[P]>;
+};
 declare const hasSymbol: false | ((key: string) => symbol);
 declare function observer<P extends FC<any>>(component: P): P;
-declare function reactive<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactive<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
-declare function reactiveObserver<T extends FC<any>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWith$<ExtractFCPropsType<T>>>;
-declare function reactiveObserver<T extends FC<any>, T2 extends keyof ExtractFCPropsType<T>>(component: T, bindKeys?: BindKeys<ExtractFCPropsType<T>>): T & FC<ShapeWithPick$<ExtractFCPropsType<T>, T2>>;
+declare function 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.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactive<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>, keys: undefined | null, bindKeys?: BindKeys<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.FC<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.FC<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object, K extends keyof T>(component: React.ForwardRefExoticComponent<T>, keys: K[] | (keyof T)[], bindKeys?: BindKeys<T, K>): React.ForwardRefExoticComponent<ReactifyProps<T, K>>;
+declare function reactiveObserver<T extends object>(component: React.FC<T>): React.FC<ShapeWith$<T>>;
+declare function reactiveObserver<T extends object>(component: React.ForwardRefExoticComponent<T>): React.ForwardRefExoticComponent<ShapeWith$<T>>;
 declare function reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
@@ -161,4 +172,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$, 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, useComputed, useEffectOnce, useIsMounted, useMount, useMountOnce, useObservable, useObservableReducer, useObserve, useObserveEffect, usePauseProvider, useSelector, useUnmount, useUnmountOnce, useWhen, useWhenReady };

package/react.js

@@ -140,7 +140,7 @@ function Computed({ children }) {
 }
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
 var didWarnProps = false;
-function createReactiveComponent(component, observe3, reactive2, bindKeys) {
+function createReactiveComponent(component, observe3, reactive2, keysReactive, bindKeys) {
   const ReactForwardRefSymbol = hasSymbol ? Symbol.for("react.forward_ref") : (
     // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
     typeof React.forwardRef === "function" && React.forwardRef((props) => null)["$$typeof"]
@@ -165,6 +165,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
       throw new Error(`[legend-state] \`render\` property of ForwardRef was not a function`);
     }
   }
+  const keysReactiveSet = keysReactive ? new Set(keysReactive) : void 0;
   const proxyHandler = {
     apply(target, thisArg, argArray) {
       if (reactive2) {
@@ -174,9 +175,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
         for (let i = 0; i < keys.length; i++) {
           const key = keys[i];
           const p = props[key];
+          const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
           if (key === "children" && (state.isFunction(p) || state.isObservable(p))) {
             props[key] = useSelector(p, { skipCheck: true });
-          } else if (key.startsWith("$") || key.endsWith("$")) {
+          } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
             if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
               didWarnProps = true;
               console.warn(
@@ -186,7 +188,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 )}. See https://legendapp.com/open-source/state/migrating for more details.`
               );
             }
-            const k = key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
+            const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
             const bind = bindKeys == null ? void 0 : bindKeys[k];
             const shouldBind = bind && state.isObservable(p);
             propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : useSelector(p);
@@ -204,7 +206,9 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 process.env.NODE_ENV === "development" ? handlerFn : React.useCallback(handlerFn, [props[bind.handler], bindKeys]);
               }
             }
-            delete propsOut[key];
+            if (!isReactiveKey) {
+              delete propsOut[key];
+            }
           } else if (propsOut[key] === void 0) {
             propsOut[key] = p;
           }
@@ -241,11 +245,11 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
 function observer(component) {
   return createReactiveComponent(component, true);
 }
-function reactive(component, bindKeys) {
-  return createReactiveComponent(component, false, true, bindKeys);
+function reactive(component, keys, bindKeys) {
+  return createReactiveComponent(component, false, true, keys, bindKeys);
 }
-function reactiveObserver(component, bindKeys) {
-  return createReactiveComponent(component, true, true, bindKeys);
+function reactiveObserver(component, keys, bindKeys) {
+  return createReactiveComponent(component, true, true, keys, bindKeys);
 }
 function reactiveComponents(components) {
   return new Proxy(
@@ -371,7 +375,7 @@ var Reactive = new Proxy(
           }
           return React.createElement(Component, propsOut);
         });
-        target[p] = reactive(render, ReactiveFnBinders.get(p));
+        target[p] = reactive(render, [], ReactiveFnBinders.get(p));
       }
       return target[p];
     }

package/react.mjs

@@ -134,7 +134,7 @@ function Computed({ children }) {
 }
 var hasSymbol = typeof Symbol === "function" && Symbol.for;
 var didWarnProps = false;
-function createReactiveComponent(component, observe3, reactive2, bindKeys) {
+function createReactiveComponent(component, observe3, reactive2, keysReactive, bindKeys) {
   const ReactForwardRefSymbol = hasSymbol ? Symbol.for("react.forward_ref") : (
     // eslint-disable-next-line react/display-name, @typescript-eslint/no-unused-vars
     typeof forwardRef === "function" && forwardRef((props) => null)["$$typeof"]
@@ -159,6 +159,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
       throw new Error(`[legend-state] \`render\` property of ForwardRef was not a function`);
     }
   }
+  const keysReactiveSet = keysReactive ? new Set(keysReactive) : void 0;
   const proxyHandler = {
     apply(target, thisArg, argArray) {
       if (reactive2) {
@@ -168,9 +169,10 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
         for (let i = 0; i < keys.length; i++) {
           const key = keys[i];
           const p = props[key];
+          const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
           if (key === "children" && (isFunction(p) || isObservable(p))) {
             props[key] = useSelector(p, { skipCheck: true });
-          } else if (key.startsWith("$") || key.endsWith("$")) {
+          } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
             if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
               didWarnProps = true;
               console.warn(
@@ -180,7 +182,7 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 )}. See https://legendapp.com/open-source/state/migrating for more details.`
               );
             }
-            const k = key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
+            const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
             const bind = bindKeys == null ? void 0 : bindKeys[k];
             const shouldBind = bind && isObservable(p);
             propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : useSelector(p);
@@ -198,7 +200,9 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
                 process.env.NODE_ENV === "development" ? handlerFn : useCallback(handlerFn, [props[bind.handler], bindKeys]);
               }
             }
-            delete propsOut[key];
+            if (!isReactiveKey) {
+              delete propsOut[key];
+            }
           } else if (propsOut[key] === void 0) {
             propsOut[key] = p;
           }
@@ -235,11 +239,11 @@ function createReactiveComponent(component, observe3, reactive2, bindKeys) {
 function observer(component) {
   return createReactiveComponent(component, true);
 }
-function reactive(component, bindKeys) {
-  return createReactiveComponent(component, false, true, bindKeys);
+function reactive(component, keys, bindKeys) {
+  return createReactiveComponent(component, false, true, keys, bindKeys);
 }
-function reactiveObserver(component, bindKeys) {
-  return createReactiveComponent(component, true, true, bindKeys);
+function reactiveObserver(component, keys, bindKeys) {
+  return createReactiveComponent(component, true, true, keys, bindKeys);
 }
 function reactiveComponents(components) {
   return new Proxy(
@@ -365,7 +369,7 @@ var Reactive = new Proxy(
           }
           return createElement(Component, propsOut);
         });
-        target[p] = reactive(render, ReactiveFnBinders.get(p));
+        target[p] = reactive(render, [], ReactiveFnBinders.get(p));
       }
       return target[p];
     }

package/sync-plugins/crud.d.mts

@@ -5,11 +5,13 @@ type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
 interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
     get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    list?: never | undefined;
     initial?: InitialValue<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>;
+    get?: never | undefined;
     as?: TAsOption;
     initial?: InitialValue<TLocal, TAsOption>;
 }
@@ -45,7 +47,8 @@ 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>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
-declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsMany<TRemote, TLocal, TAsOption>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
+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 CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.d.ts

@@ -5,11 +5,13 @@ type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
 interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
     get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    list?: never | undefined;
     initial?: InitialValue<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>;
+    get?: never | undefined;
     as?: TAsOption;
     initial?: InitialValue<TLocal, TAsOption>;
 }
@@ -45,7 +47,8 @@ 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>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
-declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsMany<TRemote, TLocal, TAsOption>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
+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 CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/keel.js

@@ -274,6 +274,7 @@ function syncedKeel(props) {
   } : subscribeParam;
   return crud.syncedCrud({
     ...rest,
+    // Workaround for type errors
     as: asType,
     mode: mode || "merge",
     list,
@@ -299,7 +300,6 @@ function syncedKeel(props) {
     updatePartial: true,
     subscribe,
     generateId: generateKeelId,
-    // @ts-expect-error This errors because of the get/list union type
     get
   });
 }

package/sync-plugins/keel.mjs

@@ -268,6 +268,7 @@ function syncedKeel(props) {
   } : subscribeParam;
   return syncedCrud({
     ...rest,
+    // Workaround for type errors
     as: asType,
     mode: mode || "merge",
     list,
@@ -293,7 +294,6 @@ function syncedKeel(props) {
     updatePartial: true,
     subscribe,
     generateId: generateKeelId,
-    // @ts-expect-error This errors because of the get/list union type
     get
   });
 }