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

package/src/sync/activateSyncedNode.ts

@@ -1,8 +1,6 @@
 import type {
-    GetMode,
     NodeValue,
     Observable,
-    ObservableOnChangeParams,
     ObservablePersistState,
     ObservableSyncFunctions,
     ObservableSyncGetParams,
@@ -11,7 +9,7 @@ import type {
     SyncedSetParams,
     UpdateFn,
 } from '@legendapp/state';
-import { internal, isFunction, isPromise, mergeIntoObservable, when, whenReady } from '@legendapp/state';
+import { internal, isFunction, isPromise, mergeIntoObservable, whenReady } from '@legendapp/state';
 import { syncObservable } from './syncObservable';
 const { getProxy, globalState, runWithRetry, symbolLinked, setNodeValue, getNodeValue } = internal;
 
@@ -20,7 +18,7 @@ export function enableActivateSyncedNode() {
         const obs$ = getProxy(node);
         if (node.activationState) {
             // If it is a Synced
-            const { get, initial, set, subscribe } = node.activationState!;
+            const { get, initial, set } = node.activationState!;
 
             let onChange: UpdateFn | undefined = undefined;
             const pluginRemote: ObservableSyncFunctions = {};
@@ -35,18 +33,21 @@ export function enableActivateSyncedNode() {
                 pluginRemote.get = (params: ObservableSyncGetParams<any>) => {
                     onChange = params.onChange;
                     const updateLastSync = (lastSync: number) => (params.lastSync = lastSync);
-                    const setMode = (mode: GetMode) => (params.mode = mode);
 
                     const existingValue = getNodeValue(node);
                     const value = runWithRetry(node, { attemptNum: 0 }, () => {
-                        return get!({
+                        const paramsToGet = {
                             value:
                                 isFunction(existingValue) || existingValue?.[symbolLinked] ? undefined : existingValue,
                             lastSync: params.lastSync!,
                             updateLastSync,
-                            setMode,
+                            mode: params.mode!,
                             refresh,
-                        });
+                        };
+
+                        const ret = get!(paramsToGet);
+                        params.mode = paramsToGet.mode;
+                        return ret;
                     });
 
                     promiseReturn = value;
@@ -102,23 +103,6 @@ export function enableActivateSyncedNode() {
             // @ts-expect-error TODO fix these types
             syncState = syncObservable(obs$, { ...node.activationState, ...pluginRemote });
 
-            if (subscribe) {
-                when(promiseReturn || true, () => {
-                    subscribe({
-                        node,
-                        update: (params: ObservableOnChangeParams) => {
-                            if (!onChange) {
-                                // TODO: Make this message better
-                                console.log('[legend-state] Cannot update immediately before the first return');
-                            } else {
-                                onChange(params);
-                            }
-                        },
-                        refresh,
-                    });
-                });
-            }
-
             return { update: onChange!, value: newValue };
         } else {
             // If it is not a Synced

package/src/sync/syncHelpers.ts

@@ -1,15 +1,56 @@
-import { isObject } from '@legendapp/state';
-
-export function removeNullUndefined<T extends Record<string, any>>(val: T) {
-    if (val) {
-        Object.keys(val).forEach((key) => {
-            const v = val[key];
-            if (v === null || v === undefined) {
-                delete val[key];
-            } else if (isObject(v)) {
-                removeNullUndefined(v);
+import { isDate, isNullOrUndefined, isObject } from '@legendapp/state';
+
+export function removeNullUndefined<T extends Record<string, any>>(a: T, recursive?: boolean): T {
+    const out: T = {} as T;
+    Object.keys(a).forEach((key: keyof T) => {
+        if (a[key] !== null && a[key] !== undefined) {
+            out[key] = recursive && isObject(a[key]) ? removeNullUndefined(a[key]) : a[key];
+        }
+    });
+
+    return out;
+}
+
+export function diffObjects<T extends Record<string, any>>(obj1: T, obj2: T, deep: boolean = false): Partial<T> {
+    const diff: Partial<T> = {};
+    if (!obj1) return obj2 || diff;
+    if (!obj2) return obj1 || diff;
+
+    const keys = new Set<keyof T>([...Object.keys(obj1), ...Object.keys(obj2)] as (keyof T)[]);
+
+    keys.forEach((key) => {
+        const o1 = obj1[key];
+        const o2 = obj2[key];
+        if (deep ? !deepEqual(o1, o2) : o1 !== o2) {
+            if (!isDate(o1) || !isDate(o2) || o1.getTime() !== o2.getTime()) {
+                diff[key] = o2;
             }
-        });
+        }
+    });
+
+    return diff;
+}
+export function deepEqual<T extends Record<string, any> = any>(
+    a: T,
+    b: T,
+    ignoreFields?: string[],
+    nullVsUndefined?: boolean,
+): boolean {
+    if (a === b) {
+        return true;
+    }
+    if (isNullOrUndefined(a) !== isNullOrUndefined(b)) {
+        return false;
+    }
+
+    if (nullVsUndefined) {
+        a = removeNullUndefined(a, /*recursive*/ true);
+        b = removeNullUndefined(b, /*recursive*/ true);
     }
-    return val;
+
+    const replacer = ignoreFields
+        ? (key: string, value: any) => (ignoreFields.includes(key) ? undefined : value)
+        : undefined;
+
+    return JSON.stringify(a, replacer) === JSON.stringify(b, replacer);
 }

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,
@@ -538,8 +540,7 @@ async function doChangeLocal(changeInfo: PreppedChangeLocal | undefined) {
 
     const persist = syncOptions.persist;
     const { table, config: configLocal } = parseLocalConfig(persist!);
-    const configRemote = syncOptions;
-    const shouldSaveMetadata = persist && configRemote?.offlineBehavior === 'retry';
+    const shouldSaveMetadata = persist?.retrySync;
 
     if (saveRemote && shouldSaveMetadata) {
         // First save pending changes before saving local or remote
@@ -574,9 +575,9 @@ async function doChangeRemote(changeInfo: PreppedChangeRemote | undefined) {
 
     const persist = syncOptions.persist;
     const { table, config: configLocal } = parseLocalConfig(persist!);
-    const { offlineBehavior, allowSetIfGetError, onBeforeSet, onSetError, waitForSet, onAfterSet } =
+    const { allowSetIfGetError, onBeforeSet, onSetError, waitForSet, onAfterSet } =
         syncOptions || ({} as SyncedOptions);
-    const shouldSaveMetadata = persist && offlineBehavior === 'retry';
+    const shouldSaveMetadata = persist?.retrySync;
 
     if (changesRemote.length > 0) {
         // Wait for remote to be ready before saving
@@ -624,11 +625,11 @@ async function doChangeRemote(changeInfo: PreppedChangeRemote | undefined) {
             const pathStrs = Array.from(new Set(changesRemote.map((change) => change.pathStr)));
             const { changes, lastSync } = saved;
             if (pathStrs.length > 0) {
+                let transformedChanges: object | undefined = undefined;
+                const metadata: PersistMetadata = {};
                 if (persist) {
-                    const metadata: PersistMetadata = {};
                     const pendingMetadata = pluginPersist!.getMetadata(table, configLocal)?.pending;
                     const pending = localState.pendingChanges;
-                    let transformedChanges: object | undefined = undefined;
 
                     for (let i = 0; i < pathStrs.length; i++) {
                         const pathStr = pathStrs[i];
@@ -649,37 +650,39 @@ async function doChangeRemote(changeInfo: PreppedChangeRemote | undefined) {
                     if (lastSync) {
                         metadata.lastSync = lastSync;
                     }
+                }
 
-                    // Remote can optionally have data that needs to be merged back into the observable,
-                    // for example Firebase may update dateModified with the server timestamp
-                    if (changes && !isEmpty(changes)) {
-                        transformedChanges = transformLoadData(changes, syncOptions, false);
-                    }
+                // Remote can optionally have data that needs to be merged back into the observable,
+                // for example Firebase may update dateModified with the server timestamp
+                if (changes && !isEmpty(changes)) {
+                    transformedChanges = transformLoadData(changes, syncOptions, false);
+                }
 
-                    if (localState.numSavesOutstanding > 0) {
-                        if (transformedChanges) {
-                            if (!localState.pendingSaveResults) {
-                                localState.pendingSaveResults = [];
-                            }
-                            localState.pendingSaveResults.push(transformedChanges);
+                if (localState.numSavesOutstanding > 0) {
+                    if (transformedChanges) {
+                        if (!localState.pendingSaveResults) {
+                            localState.pendingSaveResults = [];
                         }
-                    } else {
-                        let allChanges = [...(localState.pendingSaveResults || []), transformedChanges].filter(
-                            (v) => v !== undefined,
-                        );
-                        if (allChanges.length > 0) {
-                            if (allChanges.some((change) => isPromise(change))) {
-                                allChanges = await Promise.all(allChanges);
-                            }
-                            onChangeRemote(() => mergeIntoObservable(obs, ...allChanges));
+                        localState.pendingSaveResults.push(transformedChanges);
+                    }
+                } else {
+                    let allChanges = [...(localState.pendingSaveResults || []), transformedChanges].filter(
+                        (v) => v !== undefined,
+                    );
+                    if (allChanges.length > 0) {
+                        if (allChanges.some((change) => isPromise(change))) {
+                            allChanges = await Promise.all(allChanges);
                         }
+                        onChangeRemote(() => mergeIntoObservable(obs, ...allChanges));
+                    }
 
+                    if (persist) {
                         if (shouldSaveMetadata && !isEmpty(metadata)) {
                             updateMetadata(obs, localState, syncState, syncOptions, metadata);
                         }
-
-                        localState.pendingSaveResults = [];
                     }
+
+                    localState.pendingSaveResults = [];
                 }
                 onAfterSet?.();
             }
@@ -862,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$,
@@ -872,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();