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

package/react.mjs

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

package/sync-plugins/crud.d.mts

@@ -1,5 +1,5 @@
 import { WaitForSetFnParams, ObservableParam, ObservableEvent } from '@legendapp/state';
-import { SyncedGetParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
+import { SyncedGetParams, SyncedErrorParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
@@ -25,7 +25,11 @@ interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
 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'> {
+interface CrudErrorParams extends Omit<SyncedErrorParams, 'source'> {
+    source: 'list' | 'get' | 'create' | 'update' | 'delete' | 'unknown';
+}
+type CrudOnErrorFn = (error: Error, params: CrudErrorParams) => void;
+interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial' | 'subscribe' | 'waitForSet' | 'onError'> {
     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>;
@@ -40,6 +44,7 @@ interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends
     generateId?: () => string | number;
     subscribe?: (params: SyncedSubscribeParams<TRemote[]>) => (() => void) | void;
     waitForSet?: ((params: WaitForSetCrudFnParams<TLocal>) => any) | Promise<any> | ObservableParam<any> | ObservableEvent;
+    onError?: (error: Error, params: CrudErrorParams) => void;
 }
 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 {
@@ -51,4 +56,4 @@ declare function syncedCrud<TRemote extends object, TLocal = TRemote>(props: Syn
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsMany<TRemote, TLocal, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: (SyncedCrudPropsSingle<TRemote, TLocal> | SyncedCrudPropsMany<TRemote, TLocal, TAsOption>) & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 
-export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };
+export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.d.ts

@@ -1,5 +1,5 @@
 import { WaitForSetFnParams, ObservableParam, ObservableEvent } from '@legendapp/state';
-import { SyncedGetParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
+import { SyncedGetParams, SyncedErrorParams, SyncedOptions, SyncedSetParams, SyncedSubscribeParams } from '@legendapp/state/sync';
 
 type CrudAsOption = 'Map' | 'object' | 'value' | 'array';
 type CrudResult<T> = T;
@@ -25,7 +25,11 @@ interface SyncedCrudOnSavedParams<TRemote extends object, TLocal> {
 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'> {
+interface CrudErrorParams extends Omit<SyncedErrorParams, 'source'> {
+    source: 'list' | 'get' | 'create' | 'update' | 'delete' | 'unknown';
+}
+type CrudOnErrorFn = (error: Error, params: CrudErrorParams) => void;
+interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends Omit<SyncedOptions<TRemote, TLocal>, 'get' | 'set' | 'initial' | 'subscribe' | 'waitForSet' | 'onError'> {
     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>;
@@ -40,6 +44,7 @@ interface SyncedCrudPropsBase<TRemote extends object, TLocal = TRemote> extends
     generateId?: () => string | number;
     subscribe?: (params: SyncedSubscribeParams<TRemote[]>) => (() => void) | void;
     waitForSet?: ((params: WaitForSetCrudFnParams<TLocal>) => any) | Promise<any> | ObservableParam<any> | ObservableEvent;
+    onError?: (error: Error, params: CrudErrorParams) => void;
 }
 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 {
@@ -51,4 +56,4 @@ declare function syncedCrud<TRemote extends object, TLocal = TRemote>(props: Syn
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: SyncedCrudPropsMany<TRemote, TLocal, TAsOption> & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'value'>>;
 declare function syncedCrud<TRemote extends object, TLocal = TRemote, TAsOption extends CrudAsOption = 'object'>(props: (SyncedCrudPropsSingle<TRemote, TLocal> | SyncedCrudPropsMany<TRemote, TLocal, TAsOption>) & SyncedCrudPropsBase<TRemote, TLocal>): SyncedCrudReturnType<TLocal, TAsOption>;
 
-export { type CrudAsOption, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };
+export { type CrudAsOption, type CrudErrorParams, type CrudOnErrorFn, type CrudResult, type SyncedCrudOnSavedParams, type SyncedCrudPropsBase, type SyncedCrudPropsMany, type SyncedCrudPropsSingle, type SyncedCrudReturnType, type WaitForSetCrudFnParams, syncedCrud };

package/sync-plugins/crud.js

@@ -5,7 +5,7 @@ var sync = require('@legendapp/state/sync');
 
 // src/sync-plugins/crud.ts
 var { clone } = state.internal;
-var { waitForSet } = sync.internal;
+var { waitForSet, runWithRetry } = sync.internal;
 function transformOut(data, transform) {
   return transform ? transform(clone(data)) : data;
 }
@@ -25,6 +25,39 @@ function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   }
   return newLastSync;
 }
+var queuedRetries = {
+  create: /* @__PURE__ */ new Map(),
+  update: /* @__PURE__ */ new Map(),
+  delete: /* @__PURE__ */ new Map()
+};
+function retrySet(params, retry, action, itemKey, itemValue, actionFn, saveResult) {
+  if (action === "delete") {
+    if (queuedRetries.create.has(itemKey)) {
+      queuedRetries.create.delete(itemKey);
+    }
+    if (queuedRetries.update.has(itemKey)) {
+      queuedRetries.update.delete(itemKey);
+    }
+  } else {
+    if (queuedRetries.delete.has(itemKey)) {
+      queuedRetries.delete.delete(itemKey);
+    }
+  }
+  const queuedRetry = queuedRetries[action].get(itemKey);
+  if (queuedRetry) {
+    itemValue = Object.assign(queuedRetry, itemValue);
+  }
+  queuedRetries[action].set(itemKey, itemValue);
+  return runWithRetry(
+    params,
+    retry,
+    "create_" + itemKey,
+    () => actionFn(itemValue, params).then((result) => {
+      queuedRetries[action].delete(itemKey);
+      return saveResult(itemKey, itemValue, result, true);
+    })
+  );
+}
 function syncedCrud(props) {
   const {
     get: getFn,
@@ -45,6 +78,7 @@ function syncedCrud(props) {
     changesSince,
     generateId,
     waitForSet: waitForSetParam,
+    retry,
     ...rest
   } = props;
   const fieldId = fieldIdProp || "id";
@@ -77,63 +111,68 @@ function syncedCrud(props) {
     return out;
   };
   const transformRows = (data) => {
-    return Promise.all(
+    return data.length ? Promise.all(
       data.map(
         (value) => (
           // Skip transforming any children with symbolDelete or fieldDeleted because they'll get deleted by resultsToOutType
           value[state.symbolDelete] || fieldDeleted && value[fieldDeleted] || fieldDeletedList && value[fieldDeletedList] ? value : transform.load(value, "get")
         )
       )
-    );
+    ) : [];
   };
   const get = getFn || listFn ? (getParams) => {
-    const { updateLastSync, lastSync, value } = getParams;
-    if (listFn) {
-      const isLastSyncMode = changesSince === "last-sync";
-      if (isLastSyncMode && lastSync) {
-        getParams.mode = modeParam || (asType === "array" ? "append" : asType === "value" ? "set" : "assign");
-      }
-      const listPromise = listFn(getParams);
-      const toOut = (transformed) => {
-        var _a;
-        if (asType === "value") {
-          return transformed.length > 0 ? transformed[0] : (_a = (isLastSyncMode && lastSync || fieldDeleted) && value) != null ? _a : null;
-        } else {
-          return resultsToOutType(transformed);
+    return runWithRetry(getParams, retry, getFn || listFn, () => {
+      const { updateLastSync, lastSync, value } = getParams;
+      if (listFn) {
+        const isLastSyncMode = changesSince === "last-sync";
+        if (isLastSyncMode && lastSync) {
+          getParams.mode = modeParam || (asType === "array" ? "append" : asType === "value" ? "set" : "assign");
         }
-      };
-      const processResults = (data) => {
-        data || (data = []);
-        if (fieldUpdatedAt) {
-          const newLastSync = computeLastSync(data, fieldUpdatedAt, fieldCreatedAt);
-          if (newLastSync && newLastSync !== lastSync) {
-            updateLastSync(newLastSync);
+        const listPromise = listFn(getParams);
+        const toOut = (transformed) => {
+          if (asType === "value") {
+            if (transformed.length > 0) {
+              return transformed[0];
+            } else {
+              return value ? void 0 : null;
+            }
+          } else {
+            return resultsToOutType(transformed);
           }
-        }
-        let transformed = data;
-        if (transform == null ? void 0 : transform.load) {
-          transformed = transformRows(data);
-        }
-        return state.isPromise(transformed) ? transformed.then(toOut) : toOut(transformed);
-      };
-      return state.isPromise(listPromise) ? listPromise.then(processResults) : processResults(listPromise);
-    } else if (getFn) {
-      const dataPromise = getFn(getParams);
-      const processData = (data) => {
-        let transformed = data;
-        if (data) {
-          const newLastSync = data[fieldUpdatedAt] || data[fieldCreatedAt];
-          if (newLastSync && newLastSync !== lastSync) {
-            updateLastSync(newLastSync);
+        };
+        const processResults = (data) => {
+          data || (data = []);
+          if (fieldUpdatedAt) {
+            const newLastSync = computeLastSync(data, fieldUpdatedAt, fieldCreatedAt);
+            if (newLastSync && newLastSync !== lastSync) {
+              updateLastSync(newLastSync);
+            }
           }
+          let transformed = data;
           if (transform == null ? void 0 : transform.load) {
-            transformed = transform.load(data, "get");
+            transformed = transformRows(data);
           }
-        }
-        return transformed;
-      };
-      return state.isPromise(dataPromise) ? dataPromise.then(processData) : processData(dataPromise);
-    }
+          return state.isPromise(transformed) ? transformed.then(toOut) : toOut(transformed);
+        };
+        return state.isPromise(listPromise) ? listPromise.then(processResults) : processResults(listPromise);
+      } else if (getFn) {
+        const dataPromise = getFn(getParams);
+        const processData = (data) => {
+          let transformed = data;
+          if (data) {
+            const newLastSync = data[fieldUpdatedAt] || data[fieldCreatedAt];
+            if (newLastSync && newLastSync !== lastSync) {
+              updateLastSync(newLastSync);
+            }
+            if (transform == null ? void 0 : transform.load) {
+              transformed = transform.load(data, "get");
+            }
+          }
+          return transformed;
+        };
+        return state.isPromise(dataPromise) ? dataPromise.then(processData) : processData(dataPromise);
+      }
+    });
   } : void 0;
   const set = createFn || updateFn || deleteFn ? async (params) => {
     const { value, changes, update, retryAsCreate, node } = params;
@@ -285,59 +324,84 @@ function syncedCrud(props) {
               delete saved[key];
             }
           });
-          const createdAt = fieldCreatedAt ? saved[fieldCreatedAt] : void 0;
-          const updatedAt = fieldUpdatedAt ? saved[fieldUpdatedAt] : void 0;
-          const value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: saved } : saved;
-          update({
-            value: value2,
-            lastSync: updatedAt || createdAt ? +new Date(updatedAt || createdAt) : void 0,
-            mode: "merge"
-          });
+          let value2;
+          if (asType === "array") {
+            const index = currentPeeked.findIndex(
+              (cur) => cur[fieldId] === itemKey
+            );
+            if (index < 0) {
+              console.warn("[legend-state] Item saved that does not exist in array", saved);
+            } else {
+              value2 = { [index < 0 ? 0 : index]: saved };
+            }
+          } else {
+            value2 = itemKey !== "undefined" && asType !== "value" ? { [itemKey]: saved } : saved;
+          }
+          if (value2 !== void 0) {
+            update({
+              value: value2,
+              mode: "merge"
+            });
+          }
         }
       }
     };
     return Promise.all([
+      // Handle creates
       ...Array.from(creates).map(async ([itemKey, itemValue]) => {
         if (waitForSetParam) {
           await waitForSet(waitForSetParam, changes, itemValue, { type: "create" });
         }
         const createObj = await transformOut(itemValue, transform == null ? void 0 : transform.save);
-        return createFn(createObj, params).then((result) => {
-          return saveResult(itemKey, createObj, result, true);
-        }).finally(() => {
-          pendingCreates.delete(itemKey);
-        });
+        return retrySet(params, retry, "create", itemKey, createObj, createFn, saveResult).then(
+          () => {
+            pendingCreates.delete(itemKey);
+          }
+        );
       }),
+      // Handle updates
       ...Array.from(updates).map(async ([itemKey, itemValue]) => {
         if (waitForSetParam) {
           await waitForSet(waitForSetParam, changes, itemValue, { type: "update" });
         }
-        const toSave = itemValue;
-        const changed = await transformOut(toSave, transform == null ? void 0 : transform.save);
+        const changed = await transformOut(itemValue, transform == null ? void 0 : transform.save);
         if (Object.keys(changed).length > 0) {
-          return updateFn(changed, params).then(
-            (result) => result && saveResult(itemKey, changed, result, false)
-          );
+          return retrySet(params, retry, "update", itemKey, changed, updateFn, saveResult);
         }
       }),
-      ...Array.from(deletes).map(async (valuePrevious) => {
-        if (valuePrevious !== state.symbolDelete) {
-          if (waitForSetParam) {
-            await waitForSet(waitForSetParam, changes, valuePrevious, { type: "delete" });
-          }
-          if (deleteFn) {
-            deleteFn(valuePrevious, params);
-          } else if (fieldDeleted && updateFn) {
-            const valueId = valuePrevious[fieldId];
-            if (valueId) {
-              updateFn({ ...{ [fieldId]: valueId }, [fieldDeleted]: true }, params);
-            } else {
-              console.error("[legend-state]: deleting item without an id");
-            }
-          } else {
-            console.warn("[legend-state] missing delete function");
-          }
+      // Handle deletes
+      ...Array.from(deletes).filter((val) => val !== state.symbolDelete).map(async (valuePrevious) => {
+        if (waitForSetParam) {
+          await waitForSet(waitForSetParam, changes, valuePrevious, { type: "delete" });
+        }
+        const valueId = valuePrevious[fieldId];
+        if (!valueId) {
+          console.error("[legend-state]: deleting item without an id");
+          return;
+        }
+        if (deleteFn) {
+          return retrySet(
+            params,
+            retry,
+            "delete",
+            valueId,
+            valuePrevious,
+            deleteFn,
+            saveResult
+          );
+        }
+        if (fieldDeleted && updateFn) {
+          return retrySet(
+            params,
+            retry,
+            "delete",
+            valueId,
+            { [fieldId]: valueId, [fieldDeleted]: true },
+            updateFn,
+            saveResult
+          );
         }
+        console.warn("[legend-state] missing delete function");
       })
     ]);
   } : void 0;