@legendapp/state 3.0.0-beta.12 → 3.0.0-beta.14

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;
@@ -248,7 +249,11 @@ interface UpdateFnParams<T = any> {
     mode?: GetMode;
     lastSync?: number | undefined;
 }
+interface UpdateSetFnParams<T = any> extends UpdateFnParams<T> {
+    lastSync?: never;
+}
 type UpdateFn<T = any> = (params: UpdateFnParams<T>) => void;
+type UpdateSetFn<T = any> = (params: UpdateSetFnParams<T>) => void;
 type Linked<T> = T;
 interface ObserveOptions {
     immediate?: boolean;
@@ -428,4 +433,4 @@ declare const internal: {
     };
 };
 
-export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };
+export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };

package/index.d.ts

@@ -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;
@@ -248,7 +249,11 @@ interface UpdateFnParams<T = any> {
     mode?: GetMode;
     lastSync?: number | undefined;
 }
+interface UpdateSetFnParams<T = any> extends UpdateFnParams<T> {
+    lastSync?: never;
+}
 type UpdateFn<T = any> = (params: UpdateFnParams<T>) => void;
+type UpdateSetFn<T = any> = (params: UpdateSetFnParams<T>) => void;
 type Linked<T> = T;
 interface ObserveOptions {
     immediate?: boolean;
@@ -428,4 +433,4 @@ declare const internal: {
     };
 };
 
-export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };
+export { type ArrayValue, type Change, type ChildNodeInfo, type ClassConstructor, type GetMode, type GetOptions, type ImmutableObservableBase, type Linked, type LinkedOptions, type ListenerFn, type ListenerParams, type NodeInfo, type NodeListener, type NotPrimitive, type Observable, type ObservableBoolean, type ObservableEvent, ObservableHint, type ObservableListenerDispose, type ObservableMap, type ObservableObject, type ObservableObjectFns, type ObservableParam, type ObservablePrimitive, type ObservableRoot, type ObservableState, type ObservableSyncState, type ObservableSyncStateBase, type ObservableValue, type ObserveEvent, type ObserveEventCallback, type ObserveOptions, type OpaqueObject, type PlainObject, type Primitive, type RecordValue, type RecursiveValueOrFunction, type RemoveObservables, type RetryOptions, type RootNodeInfo, type Selector, type SetParams, type TrackingNode, type TrackingState, type TrackingType, type TypeAtPath, type UpdateFn, type UpdateFnParams, type UpdateSetFn, type UpdateSetFnParams, type WaitForSet, type WaitForSetFnParams, applyChange, applyChanges, batch, beginBatch, computeSelector, computed, constructObjectWithPath, deconstructObjectWithPath, endBatch, event, getObservableIndex, hasOwnProperty, internal, isArray, isBoolean, isDate, isEmpty, isFunction, isMap, isNullOrUndefined, isNumber, isObject, isObservable, isObservableValueReady, isObserved, isPlainObject, isPrimitive, isPromise, isSet, isString, isSymbol, linked, mergeIntoObservable, observable, observablePrimitive, observe, opaqueObject, proxy, setAtPath, setSilently, shouldIgnoreUnobserved, syncState, trackSelector, when, whenReady };

package/index.js

@@ -181,7 +181,7 @@ function setNodeValue(node, newValue) {
       parentNode.isSetting--;
     }
   }
-  return { prevValue, newValue };
+  return { prevValue, newValue, parentValue };
 }
 var arrNodeKeys = [];
 function getNodeValue(node) {
@@ -1173,8 +1173,8 @@ function collectionSetter(node, target, prop, ...args) {
     return ret;
   }
 }
-function getKeys(obj, isArr, isMap2) {
-  return isArr ? void 0 : obj ? isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
+function getKeys(obj, isArr, isMap2, isSet2) {
+  return isArr ? void 0 : obj ? isSet2 ? Array.from(obj) : isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
 }
 function updateNodes(parent, obj, prevValue) {
   var _a, _b, _c;
@@ -1204,9 +1204,11 @@ function updateNodes(parent, obj, prevValue) {
   let prevChildrenById;
   let moved;
   const isCurMap = isMap(obj);
+  const isCurSet = isSet(obj);
   const isPrevMap = isMap(prevValue);
-  const keys = getKeys(obj, isArr, isCurMap);
-  const keysPrev = getKeys(prevValue, isArr, isPrevMap);
+  const isPrevSet = isSet(prevValue);
+  const keys = getKeys(obj, isArr, isCurMap, isCurSet);
+  const keysPrev = getKeys(prevValue, isArr, isPrevMap, isPrevSet);
   const length = ((_a = keys || obj) == null ? void 0 : _a.length) || 0;
   const lengthPrev = ((_b = keysPrev || prevValue) == null ? void 0 : _b.length) || 0;
   let idField;
@@ -1588,7 +1590,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 +1602,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 +1719,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 +1728,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) {
@@ -1171,8 +1171,8 @@ function collectionSetter(node, target, prop, ...args) {
     return ret;
   }
 }
-function getKeys(obj, isArr, isMap2) {
-  return isArr ? void 0 : obj ? isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
+function getKeys(obj, isArr, isMap2, isSet2) {
+  return isArr ? void 0 : obj ? isSet2 ? Array.from(obj) : isMap2 ? Array.from(obj.keys()) : Object.keys(obj) : [];
 }
 function updateNodes(parent, obj, prevValue) {
   var _a, _b, _c;
@@ -1202,9 +1202,11 @@ function updateNodes(parent, obj, prevValue) {
   let prevChildrenById;
   let moved;
   const isCurMap = isMap(obj);
+  const isCurSet = isSet(obj);
   const isPrevMap = isMap(prevValue);
-  const keys = getKeys(obj, isArr, isCurMap);
-  const keysPrev = getKeys(prevValue, isArr, isPrevMap);
+  const isPrevSet = isSet(prevValue);
+  const keys = getKeys(obj, isArr, isCurMap, isCurSet);
+  const keysPrev = getKeys(prevValue, isArr, isPrevMap, isPrevSet);
   const length = ((_a = keys || obj) == null ? void 0 : _a.length) || 0;
   const lengthPrev = ((_b = keysPrev || prevValue) == null ? void 0 : _b.length) || 0;
   let idField;
@@ -1586,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;
@@ -1598,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);
   }
@@ -1705,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();
@@ -1714,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.14",
   "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 {
 }
@@ -54,11 +54,11 @@ declare function Switch<T extends object>({ value, children, }: {
     children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends string | number | symbol>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends boolean>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T>({ value, children, }: {
@@ -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,13 +99,24 @@ 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 reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
+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, any>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
 declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): 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 {
 }
@@ -54,11 +54,11 @@ declare function Switch<T extends object>({ value, children, }: {
     children: Partial<Record<keyof T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends string | number | symbol>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<T | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T extends boolean>({ value, children, }: {
-    value?: Selector<T>;
+    value?: Selector<T | undefined | null>;
     children: Partial<Record<'false' | 'true' | 'null' | 'undefined' | 'default', () => ReactNode>>;
 }): ReactElement | null;
 declare function Switch<T>({ value, children, }: {
@@ -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,13 +99,24 @@ 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 reactiveComponents<P extends Record<string, FC>>(components: P): ObjectShapeWith$<P>;
+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, any>>(components: P): ObjectShapeWith$<P>;
 
 declare function useComputed<T>(get: () => T | Promise<T>): Observable<T>;
 declare function useComputed<T>(get: () => T | Promise<T>, deps: any[]): 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];
     }