@legendapp/state 3.0.0-alpha.4 → 3.0.0-alpha.41

package/react.js

@@ -3,6 +3,7 @@
 var state = require('@legendapp/state');
 var React = require('react');
 var index_js = require('use-sync-external-store/shim/index.js');
+var enableReactive = require('@legendapp/state/react-reactive/enableReactive');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -111,15 +112,6 @@ function useSelector(selector, options) {
     const { subscribe, getVersion, run } = selectorFn;
     value = run(selector);
     index_js.useSyncExternalStore(subscribe, getVersion, getVersion);
-    if (options == null ? void 0 : options.suspense) {
-      if (state.isPromise(value) || !value && state.isObservable(selector) && state.syncState(selector).isLoaded.get() === false) {
-        if (React__default.default.use) {
-          React__default.default.use(value);
-        } else {
-          throw value;
-        }
-      }
-    }
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
       console.warn(
@@ -128,6 +120,17 @@ function useSelector(selector, options) {
     }
     throw err;
   }
+  if (options == null ? void 0 : options.suspense) {
+    const isProm = state.isPromise(value);
+    if (state.isPromise(value) || !value && state.isObservable(selector)) {
+      const vProm = isProm ? value : state.when(selector);
+      if (React__default.default.use) {
+        React__default.default.use(vProm);
+      } else {
+        throw vProm;
+      }
+    }
+  }
   return value;
 }
 
@@ -334,8 +337,27 @@ 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 Reactive = new Proxy(
   {},
   {
@@ -355,26 +377,14 @@ var Reactive = new Proxy(
     }
   }
 );
-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]);
-    }
-  }
+if (process.env.NODE_ENV !== "test") {
+  enableReactive.enableReactive(configureReactive);
 }
-function Show({ if: if_, ifReady, else: else_, wrap, children }) {
+function Show({ if: if_, ifReady, else: else_, $value, wrap, children }) {
   const value = useSelector(if_ != null ? if_ : ifReady);
   const show = ifReady !== void 0 ? state.isObservableValueReady(value) : value;
   const child = useSelector(
-    show ? state.isFunction(children) ? () => children(value) : children : else_ != null ? else_ : null,
+    show ? state.isFunction(children) ? () => children($value ? $value.get() : value) : children : else_ != null ? else_ : null,
     { skipCheck: true }
   );
   return wrap ? React.createElement(wrap, void 0, child) : child;
@@ -395,7 +405,10 @@ function useObservable(initialValue, deps) {
   ref.current.value = initialValue;
   const depsObs$ = deps ? useObservable(deps) : void 0;
   if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
-    const value = depsObs$ ? () => {
+    const value = depsObs$ ? state.isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
       depsObs$.get();
       return state.computeSelector(ref.current.value);
     } : initialValue;
@@ -490,8 +503,16 @@ function useObserve(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = React.useRef({});
-  ref.current.selector = selector;
+  ref.current.selector = deps ? () => {
+    depsObs$ == null ? void 0 : depsObs$.get();
+    return state.computeSelector(selector);
+  } : selector;
   ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = state.observe(
@@ -516,12 +537,18 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = React.useRef({ selector });
   ref.current = { selector, reaction };
   useMountOnce(
     () => state.observe(
       (e) => {
         const { selector: selector2 } = ref.current;
+        depsObs$ == null ? void 0 : depsObs$.get();
         return state.isFunction(selector2) ? selector2(e) : selector2;
       },
       (e) => {

package/react.mjs

@@ -1,6 +1,7 @@
-import { isFunction, isEmpty, observable, isPromise, isObservable, syncState, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, when, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
+import { isFunction, isEmpty, observable, isPromise, isObservable, when, computeSelector, isArray, isMap, isObservableValueReady, linked, observe, whenReady, internal, trackSelector, isPrimitive } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
 
 // src/react/Computed.tsx
 
@@ -105,15 +106,6 @@ function useSelector(selector, options) {
     const { subscribe, getVersion, run } = selectorFn;
     value = run(selector);
     useSyncExternalStore(subscribe, getVersion, getVersion);
-    if (options == null ? void 0 : options.suspense) {
-      if (isPromise(value) || !value && isObservable(selector) && syncState(selector).isLoaded.get() === false) {
-        if (React.use) {
-          React.use(value);
-        } else {
-          throw value;
-        }
-      }
-    }
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
       console.warn(
@@ -122,6 +114,17 @@ function useSelector(selector, options) {
     }
     throw err;
   }
+  if (options == null ? void 0 : options.suspense) {
+    const isProm = isPromise(value);
+    if (isPromise(value) || !value && isObservable(selector)) {
+      const vProm = isProm ? value : when(selector);
+      if (React.use) {
+        React.use(vProm);
+      } else {
+        throw vProm;
+      }
+    }
+  }
   return value;
 }
 
@@ -328,8 +331,27 @@ 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 Reactive = new Proxy(
   {},
   {
@@ -349,26 +371,14 @@ var Reactive = new Proxy(
     }
   }
 );
-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]);
-    }
-  }
+if (process.env.NODE_ENV !== "test") {
+  enableReactive(configureReactive);
 }
-function Show({ if: if_, ifReady, else: else_, wrap, children }) {
+function Show({ if: if_, ifReady, else: else_, $value, wrap, children }) {
   const value = useSelector(if_ != null ? if_ : ifReady);
   const show = ifReady !== void 0 ? isObservableValueReady(value) : value;
   const child = useSelector(
-    show ? isFunction(children) ? () => children(value) : children : else_ != null ? else_ : null,
+    show ? isFunction(children) ? () => children($value ? $value.get() : value) : children : else_ != null ? else_ : null,
     { skipCheck: true }
   );
   return wrap ? createElement(wrap, void 0, child) : child;
@@ -389,7 +399,10 @@ function useObservable(initialValue, deps) {
   ref.current.value = initialValue;
   const depsObs$ = deps ? useObservable(deps) : void 0;
   if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
-    const value = depsObs$ ? () => {
+    const value = depsObs$ ? isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
       depsObs$.get();
       return computeSelector(ref.current.value);
     } : initialValue;
@@ -484,8 +497,16 @@ function useObserve(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = useRef({});
-  ref.current.selector = selector;
+  ref.current.selector = deps ? () => {
+    depsObs$ == null ? void 0 : depsObs$.get();
+    return computeSelector(selector);
+  } : selector;
   ref.current.reaction = reaction;
   if (!ref.current.dispose) {
     ref.current.dispose = observe(
@@ -510,12 +531,18 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const deps = options == null ? void 0 : options.deps;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   const ref = useRef({ selector });
   ref.current = { selector, reaction };
   useMountOnce(
     () => observe(
       (e) => {
         const { selector: selector2 } = ref.current;
+        depsObs$ == null ? void 0 : depsObs$.get();
         return isFunction(selector2) ? selector2(e) : selector2;
       },
       (e) => {

package/sync-plugins/crud.d.mts

@@ -1,42 +1,43 @@
-import { SyncedGetParams, SyncedOptions, SyncedSetParams } from '@legendapp/state/sync';
+import { WaitForSetFnParams, ObservableParam, ObservableEvent } from '@legendapp/state';
+import { SyncedGetParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
-interface SyncedCrudPropsSingle<TRemote, TLocal> {
-    get?: (params: SyncedGetParams) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
+    get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
     initial?: InitialValue<TLocal, 'value'>;
     as?: never | 'value';
 }
-interface SyncedCrudPropsMany<TRemote, TLocal, TAsOption extends CrudAsOption> {
-    list?: (params: SyncedGetParams) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+interface SyncedCrudPropsMany<TRemote extends object, TLocal, TAsOption extends CrudAsOption> {
+    list?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
     as?: TAsOption;
     initial?: InitialValue<TLocal, TAsOption>;
 }
-interface SyncedCrudOnSavedParams<TRemote extends {
-    id: string | number;
-}, TLocal> {
+interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
     saved: TLocal;
     input: TRemote;
     currentValue: TLocal;
     isCreate: boolean;
     props: SyncedCrudPropsBase<TRemote, TLocal>;
 }
-interface SyncedCrudPropsBase<TRemote extends {
-    id: string | number;
-}, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial'> {
-    create?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<TRemote> | null | undefined>;
-    update?(input: Partial<TRemote>, params: SyncedSetParams<TRemote>): Promise<CrudResult<Partial<TRemote> | null | undefined>>;
-    delete?(input: {
-        id: TRemote['id'];
-    }, params: SyncedSetParams<TRemote>): Promise<CrudResult<any>>;
+interface WaitForSetCrudFnParams<T> extends WaitForSetFnParams<T> {
+    type: 'create' | 'update' | 'delete';
+}
+interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial' | 'subscribe' | 'waitForSet'> {
+    create?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<TRemote> | null | undefined | void>;
+    update?(input: Partial<TRemote>, params: SyncedSetParams<TRemote>): Promise<CrudResult<Partial<TRemote> | null | undefined | void>>;
+    delete?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<any>;
     onSaved?(params: SyncedCrudOnSavedParams<TRemote, TLocal>): Partial<TLocal> | void;
-    onSavedUpdate?: 'createdUpdatedAt';
+    fieldId?: string;
     fieldUpdatedAt?: string;
     fieldCreatedAt?: string;
     fieldDeleted?: string;
+    fieldDeletedList?: string;
     updatePartial?: boolean;
     changesSince?: 'all' | 'last-sync';
     generateId?: () => string | number;
+    subscribe?: (params: SyncedSubscribeParams<TRemote[]>) => (() => void) | void;
+    waitForSet?: ((params: WaitForSetCrudFnParams<TLocal>) => any) | Promise<any> | ObservableParam<any> | ObservableEvent;
 }
 type InitialValue<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<string | number, TLocal> : TAsOption extends 'object' ? Record<string | number, TLocal> : TAsOption extends 'value' ? TLocal : TLocal[];
 type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<TLocal extends {
@@ -44,11 +45,7 @@ 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 {
-    id: string | number;
-}, TLocal = TRemote>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
-declare function syncedCrud<TRemote extends {
-    id: string | number;
-}, 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: 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'>>;
 
-export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, syncedCrud };
+export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.d.ts

@@ -1,42 +1,43 @@
-import { SyncedGetParams, SyncedOptions, SyncedSetParams } from '@legendapp/state/sync';
+import { WaitForSetFnParams, ObservableParam, ObservableEvent } from '@legendapp/state';
+import { SyncedGetParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
-interface SyncedCrudPropsSingle<TRemote, TLocal> {
-    get?: (params: SyncedGetParams) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+interface SyncedCrudPropsSingle<TRemote extends object, TLocal> {
+    get?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
     initial?: InitialValue<TLocal, 'value'>;
     as?: never | 'value';
 }
-interface SyncedCrudPropsMany<TRemote, TLocal, TAsOption extends CrudAsOption> {
-    list?: (params: SyncedGetParams) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+interface SyncedCrudPropsMany<TRemote extends object, TLocal, TAsOption extends CrudAsOption> {
+    list?: (params: SyncedGetParams<TRemote>) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
     as?: TAsOption;
     initial?: InitialValue<TLocal, TAsOption>;
 }
-interface SyncedCrudOnSavedParams<TRemote extends {
-    id: string | number;
-}, TLocal> {
+interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
     saved: TLocal;
     input: TRemote;
     currentValue: TLocal;
     isCreate: boolean;
     props: SyncedCrudPropsBase<TRemote, TLocal>;
 }
-interface SyncedCrudPropsBase<TRemote extends {
-    id: string | number;
-}, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial'> {
-    create?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<TRemote> | null | undefined>;
-    update?(input: Partial<TRemote>, params: SyncedSetParams<TRemote>): Promise<CrudResult<Partial<TRemote> | null | undefined>>;
-    delete?(input: {
-        id: TRemote['id'];
-    }, params: SyncedSetParams<TRemote>): Promise<CrudResult<any>>;
+interface WaitForSetCrudFnParams<T> extends WaitForSetFnParams<T> {
+    type: 'create' | 'update' | 'delete';
+}
+interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial' | 'subscribe' | 'waitForSet'> {
+    create?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<TRemote> | null | undefined | void>;
+    update?(input: Partial<TRemote>, params: SyncedSetParams<TRemote>): Promise<CrudResult<Partial<TRemote> | null | undefined | void>>;
+    delete?(input: TRemote, params: SyncedSetParams<TRemote>): Promise<any>;
     onSaved?(params: SyncedCrudOnSavedParams<TRemote, TLocal>): Partial<TLocal> | void;
-    onSavedUpdate?: 'createdUpdatedAt';
+    fieldId?: string;
     fieldUpdatedAt?: string;
     fieldCreatedAt?: string;
     fieldDeleted?: string;
+    fieldDeletedList?: string;
     updatePartial?: boolean;
     changesSince?: 'all' | 'last-sync';
     generateId?: () => string | number;
+    subscribe?: (params: SyncedSubscribeParams<TRemote[]>) => (() => void) | void;
+    waitForSet?: ((params: WaitForSetCrudFnParams<TLocal>) => any) | Promise<any> | ObservableParam<any> | ObservableEvent;
 }
 type InitialValue<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<string | number, TLocal> : TAsOption extends 'object' ? Record<string | number, TLocal> : TAsOption extends 'value' ? TLocal : TLocal[];
 type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map' ? Map<TLocal extends {
@@ -44,11 +45,7 @@ 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 {
-    id: string | number;
-}, TLocal = TRemote>(props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>): SyncedCrudReturnType<TLocal, 'value'>;
-declare function syncedCrud<TRemote extends {
-    id: string | number;
-}, 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: 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'>>;
 
-export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, syncedCrud };
+export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };