@legendapp/state 2.2.0-next.75 → 2.2.0-next.76

package/src/sync/syncObservable.ts

@@ -5,6 +5,7 @@ import type {
     NodeValue,
     Observable,
     ObservableObject,
+    ObservableOnChangeParams,
     ObservableParam,
     ObservablePersistPlugin,
     ObservableSyncClass,
@@ -15,6 +16,7 @@ import type {
     Synced,
     SyncedOptions,
     TypeAtPath,
+    UpdateFnParams,
 } from '@legendapp/state';
 import {
     beginBatch,
@@ -863,6 +865,82 @@ export function syncObservable<T>(
 
             if (get) {
                 const runGet = () => {
+                    const onChange = async ({ value, mode, lastSync }: UpdateFnParams) => {
+                        mode = mode || syncOptions.mode || 'set';
+                        if (value !== undefined) {
+                            value = transformLoadData(value, syncOptions, true);
+                            if (isPromise(value)) {
+                                value = await (value as Promise<T>);
+                            }
+
+                            const pending = localState.pendingChanges;
+                            const currentValue = obs$.peek();
+                            if (pending) {
+                                let didChangeMetadata = false;
+                                Object.keys(pending).forEach((key) => {
+                                    const p = key.split('/').filter((p) => p !== '');
+                                    const { v, t } = pending[key];
+
+                                    if (t.length === 0 || !value) {
+                                        if (isObject(value) && isObject(v)) {
+                                            Object.assign(value, v);
+                                        } else {
+                                            value = v;
+                                        }
+                                    } else if ((value as any)[p[0]] !== undefined) {
+                                        const curValue = getValueAtPath(currentValue as object, p);
+                                        const newValue = getValueAtPath(value as object, p);
+                                        if (JSON.stringify(curValue) === JSON.stringify(newValue)) {
+                                            delete pending[key];
+                                            didChangeMetadata = true;
+                                        } else {
+                                            (value as any) = setAtPath(
+                                                value as any,
+                                                p,
+                                                t,
+                                                v,
+                                                'merge',
+                                                obs$.peek(),
+                                                (path: string[], value: any) => {
+                                                    delete pending[key];
+                                                    pending[path.join('/')] = {
+                                                        p: null,
+                                                        v: value,
+                                                        t: t.slice(0, path.length),
+                                                    };
+                                                },
+                                            );
+                                        }
+                                    }
+                                });
+
+                                if (didChangeMetadata) {
+                                    updateMetadata(obs$, localState, syncState, syncOptions, {
+                                        pending,
+                                    });
+                                }
+                            }
+
+                            onChangeRemote(() => {
+                                if (mode === 'assign' && isObject(value)) {
+                                    (obs$ as unknown as Observable<object>).assign(value);
+                                } else if (mode === 'append' && isArray(value)) {
+                                    (obs$ as unknown as Observable<any[]>).push(...value);
+                                } else if (mode === 'prepend' && isArray(value)) {
+                                    (obs$ as unknown as Observable<any[]>).splice(0, 0, ...value);
+                                } else if (mode === 'merge') {
+                                    mergeIntoObservable(obs$, value);
+                                } else {
+                                    obs$.set(value);
+                                }
+                            });
+                        }
+                        if (lastSync && syncOptions.persist) {
+                            updateMetadata(obs$, localState, syncState, syncOptions, {
+                                lastSync,
+                            });
+                        }
+                    };
                     get({
                         state: syncState,
                         obs: obs$,
@@ -873,87 +951,24 @@ export function syncObservable<T>(
                             syncOptions.onGetError?.(error);
                         },
                         onGet: () => {
+                            const isFirstLoad = !node.state!.isLoaded.peek();
                             node.state!.assign({
                                 isLoaded: true,
                                 error: undefined,
                             });
-                        },
-                        onChange: async ({ value, mode, lastSync }) => {
-                            mode = mode || syncOptions.mode || 'set';
-                            if (value !== undefined) {
-                                value = transformLoadData(value, syncOptions, true);
-                                if (isPromise(value)) {
-                                    value = await (value as Promise<T>);
-                                }
-
-                                const pending = localState.pendingChanges;
-                                const currentValue = obs$.peek();
-                                if (pending) {
-                                    let didChangeMetadata = false;
-                                    Object.keys(pending).forEach((key) => {
-                                        const p = key.split('/').filter((p) => p !== '');
-                                        const { v, t } = pending[key];
-
-                                        if (t.length === 0 || !value) {
-                                            if (isObject(value) && isObject(v)) {
-                                                Object.assign(value, v);
-                                            } else {
-                                                value = v;
-                                            }
-                                        } else if ((value as any)[p[0]] !== undefined) {
-                                            const curValue = getValueAtPath(currentValue as object, p);
-                                            const newValue = getValueAtPath(value as object, p);
-                                            if (JSON.stringify(curValue) === JSON.stringify(newValue)) {
-                                                delete pending[key];
-                                                didChangeMetadata = true;
-                                            } else {
-                                                (value as any) = setAtPath(
-                                                    value as any,
-                                                    p,
-                                                    t,
-                                                    v,
-                                                    'merge',
-                                                    obs$.peek(),
-                                                    (path: string[], value: any) => {
-                                                        delete pending[key];
-                                                        pending[path.join('/')] = {
-                                                            p: null,
-                                                            v: value,
-                                                            t: t.slice(0, path.length),
-                                                        };
-                                                    },
-                                                );
-                                            }
-                                        }
-                                    });
 
-                                    if (didChangeMetadata) {
-                                        updateMetadata(obs$, localState, syncState, syncOptions, {
-                                            pending,
-                                        });
-                                    }
-                                }
-
-                                onChangeRemote(() => {
-                                    if (mode === 'assign' && isObject(value)) {
-                                        (obs$ as unknown as Observable<object>).assign(value);
-                                    } else if (mode === 'append' && isArray(value)) {
-                                        (obs$ as unknown as Observable<any[]>).push(...value);
-                                    } else if (mode === 'prepend' && isArray(value)) {
-                                        (obs$ as unknown as Observable<any[]>).splice(0, 0, ...value);
-                                    } else if (mode === 'merge') {
-                                        mergeIntoObservable(obs$, value);
-                                    } else {
-                                        obs$.set(value);
-                                    }
-                                });
-                            }
-                            if (lastSync && syncOptions.persist) {
-                                updateMetadata(obs$, localState, syncState, syncOptions, {
-                                    lastSync,
+                            if (isFirstLoad && syncOptions.subscribe) {
+                                syncOptions.subscribe({
+                                    node,
+                                    update: (params: ObservableOnChangeParams) => {
+                                        params.mode ||= syncOptions.mode || 'merge';
+                                        onChange(params);
+                                    },
+                                    refresh: sync,
                                 });
                             }
                         },
+                        onChange,
                     });
                 };
                 runGet();

package/src/sync-plugins/crud.ts

@@ -14,54 +14,55 @@ import { synced, diffObjects } from '@legendapp/state/sync';
 
 const { clone } = internal;
 
-export type CrudAsOption = 'Map' | 'object' | 'first' | 'array';
+export type CrudAsOption = 'Map' | 'object' | 'first';
 
 export type CrudResult<T> = T;
 
-export interface SyncedCrudPropsSingle<TGet> {
-    get?: (params: SyncedGetParams) => Promise<CrudResult<TGet | null>> | CrudResult<TGet | null>;
-    initial?: TGet;
+export interface SyncedCrudPropsSingle<TRemote, TLocal> {
+    get?: (params: SyncedGetParams) => Promise<CrudResult<TRemote | null>> | CrudResult<TRemote | null>;
+    initial?: InitialValue<TLocal, 'first'>;
+    as?: never | 'first';
 }
-export interface SyncedCrudPropsMany<TGet, TOption extends CrudAsOption> {
-    list?: (params: SyncedGetParams) => Promise<CrudResult<TGet[]>> | CrudResult<TGet[]>;
-    as?: TOption;
-    initial?: InitialValue<TGet, TOption>;
+export interface SyncedCrudPropsMany<TRemote, TLocal, TAsOption extends CrudAsOption> {
+    list?: (params: SyncedGetParams) => Promise<CrudResult<TRemote[] | null>> | CrudResult<TRemote[] | null>;
+    as?: TAsOption;
+    initial?: InitialValue<TLocal, TAsOption>;
 }
-export interface SyncedCrudPropsBase<TGet extends { id: string }, TSet = TGet, TOut = TGet>
-    extends Omit<SyncedOptions<TGet>, 'get' | 'set' | 'subscribe' | 'transform' | 'initial'> {
-    generateId?: () => string;
-    create?: (input: TSet, params: SyncedSetParams<TSet>) => Promise<CrudResult<TGet>>;
-    update?: (input: Partial<TGet>, params: SyncedSetParams<TSet>) => Promise<CrudResult<Partial<TGet>>>;
-    delete?: (input: TGet, params: SyncedSetParams<TSet>) => Promise<CrudResult<any>>;
-    onSaved?: (saved: Partial<TGet>, input: Partial<TGet>, isCreate: boolean) => Partial<TGet>;
-    transform?: SyncTransform<TOut, TGet>;
+export interface SyncedCrudPropsBase<TRemote extends { id: string | number }, TLocal = TRemote>
+    extends Omit<SyncedOptions<TLocal>, 'get' | 'set' | 'transform' | '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: TRemote, params: SyncedSetParams<TRemote>): Promise<CrudResult<any>>;
+    onSaved?(saved: TLocal, input: TRemote, isCreate: boolean): Partial<TLocal> | void;
+    transform?: SyncTransform<TLocal, TRemote>;
     fieldUpdatedAt?: string;
+    fieldCreatedAt?: string;
     updatePartial?: boolean;
+    changesSince?: 'all' | 'last-sync';
 }
 
-type OutputType<TGet, TSet> = [TSet] extends [unknown] ? TGet : Partial<TGet> & TSet;
-
-type InitialValue<T, TOption extends CrudAsOption> = TOption extends 'Map'
+type InitialValue<T, TAsOption extends CrudAsOption> = TAsOption extends 'Map'
     ? Map<string, T>
-    : TOption extends 'object'
+    : TAsOption extends 'object'
     ? Record<string, T>
-    : TOption extends 'first'
+    : TAsOption extends 'first'
     ? T
     : T[];
 
-export type SyncedCrudReturnType<TGet, TSet, TOption extends CrudAsOption> = Promise<
-    TOption extends 'Map'
-        ? Map<string, OutputType<TGet, TSet>>
-        : TOption extends 'object'
-        ? Record<string, OutputType<TGet, TSet>>
-        : TOption extends 'first'
-        ? OutputType<TGet, TSet>
-        : TGet[]
-> & {};
+export type SyncedCrudReturnType<TLocal, TAsOption extends CrudAsOption> = TAsOption extends 'Map'
+    ? Map<string, TLocal>
+    : TAsOption extends 'object'
+    ? Record<string, TLocal>
+    : TAsOption extends 'first'
+    ? TLocal
+    : TLocal[];
 
 let _asOption: CrudAsOption;
 
-function transformOut<T>(data: T, transform: undefined | ((value: T) => T)) {
+function transformOut<T1, T2>(data: T1, transform: undefined | ((value: T1) => T2)) {
     return transform ? transform(clone(data)) : data;
 }
 
@@ -132,25 +133,24 @@ export function combineTransforms<T, T2>(
     };
 }
 
-export function syncedCrud<TGet extends { id: string }, TSet = TGet, TOut = TGet>(
-    props: SyncedCrudPropsBase<TGet, TSet, TOut> & SyncedCrudPropsSingle<TGet>,
-): SyncedCrudReturnType<TOut, TSet, 'first'>;
+export function syncedCrud<TRemote extends { id: string | number }, TLocal = TRemote>(
+    props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsSingle<TRemote, TLocal>,
+): SyncedCrudReturnType<TLocal, 'first'>;
 export function syncedCrud<
-    TGet extends { id: string },
-    TSet = TGet,
-    TOut = TGet,
-    TOption extends CrudAsOption = 'object',
+    TRemote extends { id: string | number },
+    TLocal = TRemote,
+    TAsOption extends CrudAsOption = 'object',
 >(
-    props: SyncedCrudPropsBase<TGet, TSet, TOut> & SyncedCrudPropsMany<TGet, TOption>,
-): SyncedCrudReturnType<TOut, TSet, Exclude<TOption, 'first'>>;
+    props: SyncedCrudPropsBase<TRemote, TLocal> & SyncedCrudPropsMany<TRemote, TLocal, TAsOption>,
+): SyncedCrudReturnType<TLocal, Exclude<TAsOption, 'first'>>;
 export function syncedCrud<
-    TGet extends { id: string },
-    TSet = TGet,
-    TOut = TGet,
-    TOption extends CrudAsOption = 'object',
+    TRemote extends { id: string | number },
+    TLocal = TRemote,
+    TAsOption extends CrudAsOption = 'object',
 >(
-    props: SyncedCrudPropsBase<TGet, TSet, TOut> & (SyncedCrudPropsSingle<TGet> & SyncedCrudPropsMany<TGet, TOption>),
-): SyncedCrudReturnType<TOut, TSet, TOption> {
+    props: SyncedCrudPropsBase<TRemote, TLocal> &
+        (SyncedCrudPropsSingle<TRemote, TLocal> & SyncedCrudPropsMany<TRemote, TLocal, TAsOption>),
+): SyncedCrudReturnType<TLocal, TAsOption> {
     const {
         get: getFn,
         list: listFn,
@@ -158,38 +158,37 @@ export function syncedCrud<
         update: updateFn,
         delete: deleteFn,
         transform,
+        fieldCreatedAt,
         fieldUpdatedAt,
-        generateId,
         updatePartial,
         onSaved,
         mode: modeParam,
+        changesSince,
         ...rest
     } = props;
 
-    let asType = props.as;
+    let asType = props.as as TAsOption;
 
     if (!asType) {
-        asType = (getFn ? 'first' : _asOption || 'array') as CrudAsOption as TOption;
+        asType = (getFn ? 'first' : _asOption || 'object') as CrudAsOption as TAsOption;
     }
 
     const asMap = asType === 'Map';
 
-    const ensureId = (obj: { id: string }) => obj.id || (obj.id = generateId!());
-
-    const get: undefined | ((params: SyncedGetParams) => Promise<TOut>) =
+    const get: undefined | ((params: SyncedGetParams) => Promise<TLocal>) =
         getFn || listFn
             ? async (getParams: SyncedGetParams) => {
                   const { updateLastSync, lastSync } = getParams;
                   if (listFn) {
-                      if (lastSync) {
-                          getParams.mode =
-                              modeParam || (asType === 'array' ? 'append' : asType === 'first' ? 'set' : 'assign');
+                      if (changesSince === 'last-sync' && lastSync) {
+                          getParams.mode = modeParam || (asType === 'first' ? 'set' : 'assign');
                       }
 
-                      let data = await listFn(getParams);
+                      const data = (await listFn(getParams)) || [];
                       let newLastSync = 0;
                       for (let i = 0; i < data.length; i++) {
-                          const updated = (data[i] as any)[fieldUpdatedAt as any];
+                          const updated =
+                              (data[i] as any)[fieldUpdatedAt as any] || (data[i] as any)[fieldCreatedAt as any];
                           if (updated) {
                               newLastSync = Math.max(newLastSync, +new Date(updated));
                           }
@@ -197,35 +196,36 @@ export function syncedCrud<
                       if (newLastSync && newLastSync !== lastSync) {
                           updateLastSync(newLastSync);
                       }
+                      let transformed = data as unknown as TLocal[];
                       if (transform?.load) {
-                          data = data.map(transform.load) as any;
+                          transformed = await Promise.all(data.map(transform.load));
                       }
                       if (asType === 'first') {
-                          return data.length > 0 ? data[0] : lastSync ? {} : null;
-                      } else if (asType === 'array') {
-                          return data;
+                          return transformed.length > 0 ? transformed[0] : null;
                       } else {
                           const out: Record<string, any> = asMap ? new Map() : {};
-                          data.forEach((result: any) => {
+                          transformed.forEach((result: any) => {
                               const value = result.__deleted ? internal.symbolDelete : result;
                               asMap ? (out as Map<any, any>).set(result.id, value) : (out[result.id] = value);
                           });
                           return out;
                       }
                   } else if (getFn) {
-                      let data = await getFn(getParams);
+                      const data = await getFn(getParams);
 
+                      let transformed = data as unknown as TLocal;
                       if (data) {
-                          const newLastSync = (data as any)[fieldUpdatedAt as any];
+                          const newLastSync =
+                              (data as any)[fieldUpdatedAt as any] || (data as any)[fieldCreatedAt as any];
                           if (newLastSync && newLastSync !== lastSync) {
                               updateLastSync(newLastSync);
                           }
                           if (transform?.load) {
-                              data = transform.load(data as any) as any;
+                              transformed = await transform.load(data);
                           }
                       }
 
-                      return data as any;
+                      return transformed as any;
                   }
               }
             : undefined;
@@ -234,27 +234,30 @@ export function syncedCrud<
         createFn || updateFn || deleteFn
             ? async (params: SyncedSetParams<any> & { retryAsCreate?: boolean }) => {
                   const { value, changes, update, retryAsCreate, valuePrevious } = params;
-                  const creates = new Map<string, TSet>();
+                  const creates = new Map<string, TLocal>();
                   const updates = new Map<string, object>();
                   const deletes = new Map<string, object>();
 
                   changes.forEach(({ path, prevAtPath, valueAtPath }) => {
                       if (asType === 'first') {
                           if (value) {
-                              let id = value?.id;
-                              const isCreate = fieldUpdatedAt ? !value[fieldUpdatedAt!] : !prevAtPath;
-                              if (isCreate || retryAsCreate) {
-                                  id = ensureId(value);
-                                  creates.set(id, value);
-                              } else if (path.length === 0) {
-                                  if (valueAtPath) {
-                                      updates.set(id, valueAtPath);
-                                  } else if (prevAtPath) {
-                                      deletes.set(prevAtPath?.id, prevAtPath);
+                              const id = value?.id;
+                              if (id) {
+                                  const isCreate = fieldCreatedAt ? !value[fieldCreatedAt!] : !prevAtPath;
+                                  if (isCreate || retryAsCreate) {
+                                      creates.set(id, value);
+                                  } else if (path.length === 0) {
+                                      if (valueAtPath) {
+                                          updates.set(id, valueAtPath);
+                                      } else if (prevAtPath) {
+                                          deletes.set(prevAtPath?.id, prevAtPath);
+                                      }
+                                  } else {
+                                      const key = path[0];
+                                      updates.set(id, Object.assign(updates.get(id) || { id }, { [key]: value[key] }));
                                   }
                               } else {
-                                  const key = path[0];
-                                  updates.set(id, Object.assign(updates.get(id) || { id }, { [key]: value[key] }));
+                                  console.error('[legend-state]: added item without an id');
                               }
                           } else if (path.length === 0) {
                               const id = prevAtPath?.id;
@@ -267,7 +270,7 @@ export function syncedCrud<
                           let isCreateGuess: boolean;
                           if (path.length === 0) {
                               isCreateGuess =
-                                  !fieldUpdatedAt &&
+                                  !(fieldCreatedAt || fieldUpdatedAt) &&
                                   !(
                                       (asMap
                                           ? Array.from((valueAtPath as Map<any, any>).values())
@@ -284,7 +287,7 @@ export function syncedCrud<
                           } else {
                               const itemKey = path[0];
                               const itemValue = asMap ? value.get(itemKey) : value[itemKey];
-                              isCreateGuess = !fieldUpdatedAt && path.length === 1 && !prevAtPath;
+                              isCreateGuess = !(fieldCreatedAt || fieldUpdatedAt) && path.length === 1 && !prevAtPath;
                               if (!itemValue) {
                                   if (path.length === 1 && prevAtPath) {
                                       if (deleteFn) {
@@ -298,8 +301,11 @@ export function syncedCrud<
                               }
                           }
                           itemsChanged?.forEach((item) => {
-                              ensureId(item);
-                              const isCreate = fieldUpdatedAt ? !item[fieldUpdatedAt!] : isCreateGuess;
+                              const isCreate = fieldCreatedAt
+                                  ? !item[fieldCreatedAt!]
+                                  : fieldUpdatedAt
+                                  ? !item[fieldUpdatedAt]
+                                  : isCreateGuess;
                               if (isCreate) {
                                   if (createFn) {
                                       creates.set(item.id, item);
@@ -319,39 +325,43 @@ export function syncedCrud<
 
                   const saveResult = async (
                       itemKey: string,
-                      input: object,
-                      data: CrudResult<TSet>,
+                      input: TRemote,
+                      data: CrudResult<TRemote>,
                       isCreate: boolean,
                   ) => {
                       if (data && onSaved) {
-                          const dataLoaded: TGet = (transform?.load ? transform.load(data as any) : data) as any;
+                          const dataLoaded: TLocal = (transform?.load ? transform.load(data as any) : data) as any;
 
                           const savedOut = onSaved(dataLoaded, input, isCreate);
 
-                          const updatedAt = fieldUpdatedAt ? savedOut[fieldUpdatedAt as keyof TGet] : undefined;
+                          if (savedOut) {
+                              const createdAt = fieldCreatedAt ? savedOut[fieldCreatedAt as keyof TLocal] : undefined;
+                              const updatedAt = fieldUpdatedAt ? savedOut[fieldUpdatedAt as keyof TLocal] : undefined;
 
-                          const value =
-                              itemKey !== 'undefined' && asType !== 'first' ? { [itemKey]: savedOut } : savedOut;
-                          update({
-                              value,
-                              lastSync: updatedAt ? +new Date(updatedAt as any) : undefined,
-                              mode: 'merge',
-                          });
+                              const value =
+                                  itemKey !== 'undefined' && asType !== 'first' ? { [itemKey]: savedOut } : savedOut;
+                              update({
+                                  value,
+                                  lastSync:
+                                      updatedAt || createdAt ? +new Date(updatedAt || (createdAt as any)) : undefined,
+                                  mode: 'merge',
+                              });
+                          }
                       }
                   };
 
                   return Promise.all([
                       ...Array.from(creates).map(([itemKey, itemValue]) => {
-                          const createObj = transformOut(itemValue, transform?.save as any);
+                          const createObj = transformOut(itemValue, transform?.save) as TRemote;
                           return createFn!(createObj, params).then((result) =>
-                              saveResult(itemKey, createObj as object, result as any, true),
+                              saveResult(itemKey, createObj, result as any, true),
                           );
                       }),
                       ...Array.from(updates).map(([itemKey, itemValue]) => {
                           const toSave = updatePartial
                               ? diffObjects(asType === 'first' ? valuePrevious : valuePrevious[itemKey], itemValue)
                               : itemValue;
-                          const changed = transformOut(toSave as TGet, transform?.save as any);
+                          const changed = transformOut(toSave as TLocal, transform?.save) as TRemote;
 
                           if (Object.keys(changed).length > 0) {
                               return updateFn!(changed, params).then((result) =>
@@ -360,7 +370,7 @@ export function syncedCrud<
                           }
                       }),
                       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                      ...Array.from(deletes).map(([_, itemValue]) => deleteFn!(itemValue as TGet, params)),
+                      ...Array.from(deletes).map(([_, itemValue]) => deleteFn!(itemValue as TRemote, params)),
                   ]);
               }
             : undefined;
@@ -368,6 +378,7 @@ export function syncedCrud<
     return synced<any>({
         set,
         get,
+        mode: modeParam,
         ...rest,
     });
 }