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

package/config/enableReactTracking.d.mts

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

package/config/enableReactTracking.d.ts

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

package/config/enableReactTracking.js

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

package/config/enableReactTracking.mjs

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

package/index.d.mts

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

package/index.d.ts

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

package/index.js

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

package/index.mjs

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

package/package.json

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

package/react.d.mts

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

package/react.d.ts

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

package/react.js

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

package/react.mjs

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

package/sync-plugins/crud.js

@@ -240,7 +240,7 @@ function syncedCrud(props) {
           const changed = asMap ? Array.from(valueAtPath.entries()) : Object.entries(valueAtPath);
           for (let i = 0; i < changed.length; i++) {
             const [key, value2] = changed[i];
-            const prev = asMap ? prevAtPath.get(key) : prevAtPath[key];
+            const prev = prevAtPath ? asMap ? prevAtPath.get(key) : prevAtPath[key] : void 0;
             if (state.isNullOrUndefined(value2) && !state.isNullOrUndefined(prev)) {
               deletes.add(prev);
               return false;

package/sync-plugins/crud.mjs

@@ -238,7 +238,7 @@ function syncedCrud(props) {
           const changed = asMap ? Array.from(valueAtPath.entries()) : Object.entries(valueAtPath);
           for (let i = 0; i < changed.length; i++) {
             const [key, value2] = changed[i];
-            const prev = asMap ? prevAtPath.get(key) : prevAtPath[key];
+            const prev = prevAtPath ? asMap ? prevAtPath.get(key) : prevAtPath[key] : void 0;
             if (isNullOrUndefined(value2) && !isNullOrUndefined(prev)) {
               deletes.add(prev);
               return false;

package/sync-plugins/keel.d.mts

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

package/sync-plugins/keel.d.ts

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

package/sync-plugins/keel.js

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

package/sync-plugins/keel.mjs

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