@legendapp/state 2.2.0-next.8 → 2.2.0-next.80

package/src/react-hooks/useObservableNextRouter.ts

@@ -0,0 +1,137 @@
+import { isEmpty, observable, Observable, setSilently } from '@legendapp/state';
+import Router, { NextRouter, useRouter } from 'next/router';
+
+type ParsedUrlQuery = { [key: string]: string | string[] | undefined };
+
+interface TransitionOptions {
+    shallow?: boolean;
+    locale?: string | false;
+    scroll?: boolean;
+    unstable_skipClientCache?: boolean;
+}
+export interface ObservableNextRouterState {
+    pathname: string;
+    hash: string;
+    query: ParsedUrlQuery;
+}
+type RouteInfo = Partial<ObservableNextRouterState>;
+export interface ParamsUseObservableNextRouterBase {
+    transitionOptions?: TransitionOptions;
+    method?: 'push' | 'replace';
+    subscribe?: boolean;
+}
+export interface ParamsUseObservableNextRouter<T extends object> extends ParamsUseObservableNextRouterBase {
+    compute: (value: ObservableNextRouterState) => T;
+    set: (
+        value: T,
+        previous: T,
+        router: NextRouter,
+    ) => RouteInfo & {
+        transitionOptions?: TransitionOptions;
+        method?: 'push' | 'replace';
+    };
+}
+
+function isShallowEqual(query1: ParsedUrlQuery, query2: ParsedUrlQuery) {
+    if (!query1 !== !query2) {
+        return false;
+    }
+    const keys1 = Object.keys(query1);
+    const keys2 = Object.keys(query2);
+
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+
+    for (const key of keys1) {
+        if (query1[key] !== query2[key]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+const routes$ = observable({});
+let routeParams = {} as ParamsUseObservableNextRouter<any>;
+let router: NextRouter;
+
+routes$.onChange(({ value, getPrevious }) => {
+    // Only run this if being manually changed by the user
+    let setter = routeParams?.set;
+    if (!setter) {
+        if ((value as any).pathname) {
+            setter = () => value;
+        } else {
+            console.error('[legend-state]: Must provide a set method to useObservableNextRouter');
+        }
+    }
+    const setReturn = setter(value, getPrevious(), router);
+    const { pathname, hash, query } = setReturn;
+    let { transitionOptions, method } = setReturn;
+
+    method = method || routeParams?.method;
+    transitionOptions = transitionOptions || routeParams?.transitionOptions;
+
+    const prevHash = router.asPath.split('#')[1] || '';
+
+    const change: RouteInfo = {};
+    // Only include changes that were meant to be changed. For example the user may have
+    // only changed the hash so we don't need to push a pathname change.
+    if (pathname !== undefined && pathname !== router.pathname) {
+        change.pathname = pathname;
+    }
+    if (hash !== undefined && hash !== prevHash) {
+        change.hash = hash;
+    }
+    if (query !== undefined && !isShallowEqual(query, router.query)) {
+        change.query = query;
+    }
+    // Only push if there are changes
+    if (!isEmpty(change)) {
+        const fn = method === 'replace' ? 'replace' : 'push';
+        router[fn](change, undefined, transitionOptions).catch((e) => {
+            // workaround for https://github.com/vercel/next.js/issues/37362
+            if (!e.cancelled) throw e;
+        });
+    }
+});
+
+export function useObservableNextRouter(): Observable<ObservableNextRouterState>;
+export function useObservableNextRouter<T extends object>(params: ParamsUseObservableNextRouter<T>): Observable<T>;
+export function useObservableNextRouter(
+    params: ParamsUseObservableNextRouterBase,
+): Observable<ObservableNextRouterState>;
+export function useObservableNextRouter<T extends object>(
+    params?: ParamsUseObservableNextRouter<T> | ParamsUseObservableNextRouterBase,
+): Observable<T> | Observable<ObservableNextRouterState> {
+    const { subscribe, compute } = (params as ParamsUseObservableNextRouter<T>) || {};
+
+    try {
+        // Use the useRouter hook if we're on the client side and want to subscribe to changes.
+        // Otherwise use the Router object so that this does not subscribe to router changes.
+        router = typeof window !== 'undefined' && !subscribe ? Router : useRouter();
+    } finally {
+        router = router || useRouter();
+    }
+
+    // Update the local state with the new functions and options. This can happen when being run
+    // on a new page or if the user just changes it on the current page.
+    // It's better for performance than creating new observables or hooks for every use, since there may be
+    // many uses of useObservableRouter in the lifecycle of a page.
+    routeParams = params as ParamsUseObservableNextRouter<T>;
+
+    // Get the pathname and hash
+    const { asPath, pathname, query } = router;
+    const hash = asPath.split('#')[1] || '';
+
+    // Run the compute function to get the value of the object
+    const computeParams = { pathname, hash, query };
+    const obj = compute ? compute(computeParams) : computeParams;
+
+    // Set the object without triggering router.push
+    setSilently(routes$, obj);
+
+    // Return the observable with the computed values
+    return routes$ as any;
+}

package/src/react-hooks/useObservableQuery.ts

@@ -0,0 +1,205 @@
+// This is basically just React Query's useBaseQuery with a few changes for Legend-State:
+// 1. Remove the useSyncExternalStore
+// 2. Return an observable that subscribes to the query observer
+// 3. If there is a mutator observe the observable for changes and call mutate
+
+import { observable, observe, type ObservableObject } from '@legendapp/state';
+import {
+    DefaultedQueryObserverOptions,
+    MutationObserver,
+    Query,
+    QueryClient,
+    QueryKey,
+    QueryObserver,
+    QueryObserverResult,
+    UseErrorBoundary,
+    notifyManager,
+} from '@tanstack/query-core';
+import {
+    UseBaseQueryOptions,
+    UseMutationOptions,
+    useIsRestoring,
+    useQueryClient,
+    useQueryErrorResetBoundary,
+    type UseBaseQueryResult,
+} from '@tanstack/react-query';
+import type { QueryErrorResetBoundaryValue } from '@tanstack/react-query/build/lib/QueryErrorResetBoundary';
+import * as React from 'react';
+
+const ensurePreventErrorBoundaryRetry = <TQueryFnData, TError, TData, TQueryData, TQueryKey extends QueryKey>(
+    options: DefaultedQueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
+    errorResetBoundary: QueryErrorResetBoundaryValue,
+) => {
+    if (options.suspense || options.useErrorBoundary) {
+        // Prevent retrying failed query if the error boundary has not been reset yet
+        if (!errorResetBoundary.isReset()) {
+            options.retryOnMount = false;
+        }
+    }
+};
+
+const useClearResetErrorBoundary = (errorResetBoundary: QueryErrorResetBoundaryValue) => {
+    React.useEffect(() => {
+        errorResetBoundary.clearReset();
+    }, [errorResetBoundary]);
+};
+
+function shouldThrowError<T extends (...args: any[]) => boolean>(
+    _useErrorBoundary: boolean | T | undefined,
+    params: Parameters<T>,
+): boolean {
+    // Allow useErrorBoundary function to override throwing behavior on a per-error basis
+    if (typeof _useErrorBoundary === 'function') {
+        return _useErrorBoundary(...params);
+    }
+
+    return !!_useErrorBoundary;
+}
+
+const getHasError = <TData, TError, TQueryFnData, TQueryData, TQueryKey extends QueryKey>({
+    result,
+    errorResetBoundary,
+    useErrorBoundary,
+    query,
+}: {
+    result: QueryObserverResult<TData, TError>;
+    errorResetBoundary: QueryErrorResetBoundaryValue;
+    useErrorBoundary: UseErrorBoundary<TQueryFnData, TError, TQueryData, TQueryKey>;
+    query: Query<TQueryFnData, TError, TQueryData, TQueryKey>;
+}) => {
+    return (
+        result.isError &&
+        !errorResetBoundary.isReset() &&
+        !result.isFetching &&
+        shouldThrowError(useErrorBoundary, [result.error, query])
+    );
+};
+
+export function useObservableQuery<
+    TQueryFnData,
+    TError,
+    TData = TQueryFnData,
+    TQueryData = TQueryFnData,
+    TQueryKey extends QueryKey = QueryKey,
+    TContext = unknown,
+>(
+    options: UseBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey> & { queryClient?: QueryClient },
+    mutationOptions?: UseMutationOptions<TData, TError, void, TContext>,
+): ObservableObject<UseBaseQueryResult<TData, TError>> {
+    const Observer = QueryObserver;
+    const queryClient = options?.queryClient || useQueryClient({ context: options.context });
+    const isRestoring = useIsRestoring();
+    const errorResetBoundary = useQueryErrorResetBoundary();
+    const defaultedOptions = queryClient.defaultQueryOptions(options);
+
+    // Make sure results are optimistically set in fetching state before subscribing or updating options
+    defaultedOptions._optimisticResults = isRestoring ? 'isRestoring' : 'optimistic';
+
+    // Include callbacks in batch renders
+    if (defaultedOptions.onError) {
+        defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+    }
+
+    if (defaultedOptions.onSuccess) {
+        defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+    }
+
+    if (defaultedOptions.onSettled) {
+        defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+    }
+
+    if (defaultedOptions.suspense) {
+        // Always set stale time when using suspense to prevent
+        // fetching again when directly mounting after suspending
+        if (typeof defaultedOptions.staleTime !== 'number') {
+            defaultedOptions.staleTime = 1000;
+        }
+    }
+
+    ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);
+
+    useClearResetErrorBoundary(errorResetBoundary);
+
+    const [observer] = React.useState(
+        () => new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(queryClient, defaultedOptions),
+    );
+
+    const result = observer.getOptimisticResult(defaultedOptions);
+
+    // useSyncExternalStore was here in useBaseQuery but is removed for Legend-State.
+
+    React.useEffect(() => {
+        // Do not notify on updates because of changes in the options because
+        // these changes should already be reflected in the optimistic result.
+        observer.setOptions(defaultedOptions, { listeners: false });
+    }, [defaultedOptions, observer]);
+
+    // Handle suspense
+    if (defaultedOptions.suspense && result.isLoading && result.isFetching && !isRestoring) {
+        throw observer
+            .fetchOptimistic(defaultedOptions)
+            .then(({ data }) => {
+                defaultedOptions.onSuccess?.(data as TData);
+                defaultedOptions.onSettled?.(data, null);
+            })
+            .catch((error) => {
+                errorResetBoundary.clearReset();
+                defaultedOptions.onError?.(error);
+                defaultedOptions.onSettled?.(undefined, error);
+            });
+    }
+
+    // Handle error boundary
+    if (
+        getHasError({
+            result,
+            errorResetBoundary,
+            useErrorBoundary: defaultedOptions.useErrorBoundary,
+            query: observer.getCurrentQuery(),
+        })
+    ) {
+        throw result.error;
+    }
+
+    // Legend-State changes from here down
+    let mutator: MutationObserver<TData, TError, void, TContext>;
+    if (mutationOptions) {
+        [mutator] = React.useState(() => new MutationObserver(queryClient, mutationOptions));
+    }
+
+    const [obs] = React.useState<ObservableObject<UseBaseQueryResult<TData, TError>>>(() => {
+        const obs = observable<any>(observer.getCurrentResult());
+
+        let isSetting = false;
+
+        // If there is a mutator watch for changes as long as they don't come from the the query observer
+        if (mutationOptions) {
+            observe(() => {
+                const data = (obs as any).data.get();
+                // Don't want to call mutate if there's no data or this coming from the query changing
+                if (data && !isSetting) {
+                    mutator.mutate(data);
+                }
+            });
+        }
+
+        // Note: Don't need to worry about unsubscribing because the query observer itself
+        // is scoped to this component
+        observer.subscribe((result) => {
+            isSetting = true;
+
+            try {
+                // Update the observable with the latest value
+                obs.set(result);
+            } finally {
+                // If set causes a crash for some reason we still need to reset isSetting
+                isSetting = false;
+            }
+        });
+
+        return obs as unknown as ObservableObject<UseBaseQueryResult<TData, TError>>;
+    });
+
+    // Return the observable
+    return obs;
+}

package/src/react-hooks/usePersistedObservable.ts

@@ -0,0 +1,25 @@
+import { Observable, ObservableParam, observable } from '@legendapp/state';
+import { LegacyPersistOptions } from '@legendapp/state/sync';
+import { persistObservable } from '@legendapp/state/persist';
+import { useMemo } from 'react';
+
+// TODO: Deprecate this
+
+/**
+ * A React hook that creates a new observable and can optionally listen or persist its state.
+ *
+ * @param initialValue The initial value of the observable or a function that returns the initial value
+ * @param options Persistence options for the observable
+ *
+ * @see https://www.legendapp.com/dev/state/react/#useObservable
+ */
+export function usePersistedObservable<T>(params: {
+    options: LegacyPersistOptions<T>;
+    initialValue?: T | (() => T) | (() => Promise<T>);
+}): Observable<T> {
+    // Create the observable from the default value
+    return useMemo(() => {
+        const obs$ = observable<T>(params.initialValue as any);
+        persistObservable<T>(obs$ as ObservableParam<T>, params.options);
+    }, []) as any;
+}

package/src/retry.ts

@@ -0,0 +1,71 @@
+import { whenReady } from './when';
+import type { NodeValue } from './observableInterfaces';
+import type { RetryOptions } from './sync/syncTypes';
+import { isPromise } from './is';
+
+function calculateRetryDelay(retryOptions: RetryOptions, attemptNum: number): number | null {
+    const { backoff, delay = 1000, infinite, times = 3, maxDelay = 30000 } = retryOptions;
+    if (infinite || attemptNum < times) {
+        const delayTime = Math.min(delay * (backoff === 'constant' ? 1 : 2 ** attemptNum), maxDelay);
+        return delayTime;
+    }
+    return null;
+}
+
+function createRetryTimeout(retryOptions: RetryOptions, attemptNum: number, fn: () => void) {
+    const delayTime = calculateRetryDelay(retryOptions, attemptNum);
+    if (delayTime) {
+        return setTimeout(fn, delayTime);
+    }
+}
+
+export function runWithRetry<T>(
+    node: NodeValue,
+    state: { attemptNum: number; retry: RetryOptions | undefined },
+    fn: (e: { cancel?: boolean }) => T | Promise<T>,
+): T | Promise<T> {
+    const { waitFor } = node.activationState!;
+    const { retry } = state;
+
+    const e = { cancel: false };
+    let value: any = undefined;
+    if (waitFor) {
+        value = whenReady(waitFor, () => {
+            node.activationState!.waitFor = undefined;
+            return fn(e);
+        });
+    } else {
+        value = fn(e);
+    }
+
+    if (isPromise(value) && retry) {
+        let timeoutRetry: any;
+        return new Promise<any>((resolve) => {
+            const run = () => {
+                (value as Promise<any>)
+                    .then((val: any) => {
+                        node.activationState!.persistedRetry = false;
+                        resolve(val);
+                    })
+                    .catch(() => {
+                        state.attemptNum++;
+                        if (timeoutRetry) {
+                            clearTimeout(timeoutRetry);
+                        }
+                        if (!e.cancel) {
+                            timeoutRetry = createRetryTimeout(retry, state.attemptNum, () => {
+                                value = fn(e);
+                                run();
+                            });
+                        }
+                    })
+                    .finally(() => {
+                        node.activationState!.persistedRetry = false;
+                    });
+            };
+            run();
+        });
+    }
+
+    return value;
+}

package/src/setupTracking.ts

@@ -0,0 +1,26 @@
+import type { ListenerFn, NodeValue, TrackingNode } from './observableInterfaces';
+import { onChange } from './onChange';
+
+export function setupTracking(
+    nodes: Map<NodeValue, TrackingNode> | undefined,
+    update: ListenerFn,
+    noArgs?: boolean,
+    immediate?: boolean,
+) {
+    let listeners: (() => void)[] | undefined = [];
+
+    // Listen to tracked nodes
+    nodes?.forEach((tracked) => {
+        const { node, track } = tracked;
+        listeners!.push(onChange(node, update, { trackingType: track, immediate, noArgs }));
+    });
+
+    return () => {
+        if (listeners) {
+            for (let i = 0; i < listeners.length; i++) {
+                listeners[i]();
+            }
+            listeners = undefined;
+        }
+    };
+}

package/src/sync/activateSyncedNode.ts

@@ -0,0 +1,128 @@
+import type { NodeValue, Observable, UpdateFn } from '@legendapp/state';
+import type {
+    ObservableSyncFunctions,
+    ObservableSyncGetParams,
+    ObservableSyncSetParams,
+    SyncedGetParams,
+    SyncedSetParams,
+} from './syncTypes';
+import type { ObservablePersistState } from './persistTypes';
+import { internal, isFunction, isPromise, mergeIntoObservable, whenReady } from '@legendapp/state';
+import { syncObservable } from './syncObservable';
+const { getProxy, globalState, runWithRetry, symbolLinked, setNodeValue, getNodeValue } = internal;
+
+export function enableActivateSyncedNode() {
+    globalState.activateSyncedNode = function activateSyncedNode(node: NodeValue, newValue: any) {
+        const obs$ = getProxy(node);
+        if (node.activationState) {
+            // If it is a Synced
+            const { get, initial, set, retry } = node.activationState!;
+
+            let onChange: UpdateFn | undefined = undefined;
+            const pluginRemote: ObservableSyncFunctions = {};
+            let promiseReturn: any = undefined;
+
+            // Not sure why this disable is needed, but it's needed to make the linter happy
+            // eslint-disable-next-line prefer-const
+            let syncState: Observable<ObservablePersistState>;
+            const refresh = () => syncState?.sync();
+
+            if (get) {
+                pluginRemote.get = (params: ObservableSyncGetParams<any>) => {
+                    onChange = params.onChange;
+                    const updateLastSync = (lastSync: number) => (params.lastSync = lastSync);
+
+                    const existingValue = getNodeValue(node);
+                    const value = runWithRetry(node, { attemptNum: 0, retry: retry || params.options?.retry }, () => {
+                        const paramsToGet = {
+                            value:
+                                isFunction(existingValue) || existingValue?.[symbolLinked] ? undefined : existingValue,
+                            lastSync: params.lastSync!,
+                            updateLastSync,
+                            mode: params.mode!,
+                            refresh,
+                        };
+
+                        const ret = get!(paramsToGet);
+                        params.mode = paramsToGet.mode;
+                        return ret;
+                    });
+
+                    promiseReturn = value;
+
+                    return value;
+                };
+            }
+            if (set) {
+                // TODO: Work out these types better
+                pluginRemote.set = async (params: ObservableSyncSetParams<any>) => {
+                    if (node.state?.isLoaded.get()) {
+                        const retryAttempts = { attemptNum: 0, retry: retry || params.options?.retry };
+                        return runWithRetry(node, retryAttempts, async (retryEvent) => {
+                            let changes = {};
+                            let maxModified = 0;
+                            if (!node.state!.isLoaded.peek()) {
+                                await whenReady(node.state!.isLoaded);
+                            }
+
+                            const cancelRetry = () => {
+                                retryEvent.cancel = true;
+                            };
+
+                            await set({
+                                ...(params as unknown as SyncedSetParams<any>),
+                                node,
+                                update: (params) => {
+                                    const { value, lastSync } = params;
+                                    maxModified = Math.max(lastSync || 0, maxModified);
+                                    changes = mergeIntoObservable(changes, value);
+                                },
+                                retryNum: retryAttempts.attemptNum,
+                                cancelRetry,
+                                refresh,
+                                fromSubscribe: false,
+                            });
+                            return { changes, lastSync: maxModified || undefined };
+                        });
+                    }
+                };
+            }
+
+            const nodeVal = getNodeValue(node);
+            if (promiseReturn !== undefined) {
+                newValue = promiseReturn;
+            } else if (nodeVal !== undefined && !isFunction(nodeVal)) {
+                newValue = nodeVal;
+            } else {
+                newValue = initial;
+            }
+            setNodeValue(node, promiseReturn ? undefined : newValue);
+
+            // @ts-expect-error TODO fix these types
+            syncState = syncObservable(obs$, { ...node.activationState, ...pluginRemote });
+
+            return { update: onChange!, value: newValue };
+        } else {
+            // If it is not a Synced
+
+            let update: UpdateFn | undefined = undefined;
+            const get = async (params: SyncedGetParams) => {
+                update = params.refresh;
+                if (isPromise(newValue)) {
+                    try {
+                        newValue = await newValue;
+                    } catch {
+                        // TODO Once we have global retry settings this should retry
+                    }
+                }
+                return newValue;
+            };
+
+            syncObservable(obs$, {
+                get,
+            });
+
+            return { update: update!, value: newValue };
+        }
+    };
+}

package/src/sync/configureObservableSync.ts

@@ -0,0 +1,7 @@
+import type { SyncedOptionsGlobal } from '@legendapp/state/sync';
+
+export const observableSyncConfiguration: SyncedOptionsGlobal = {};
+
+export function configureObservableSync(options?: SyncedOptionsGlobal) {
+    Object.assign(observableSyncConfiguration, options);
+}