@legendapp/state 2.2.0-next.7 → 2.2.0-next.71

package/src/react/useSelector.ts

@@ -0,0 +1,167 @@
+import {
+    ListenerParams,
+    Observable,
+    Selector,
+    computeSelector,
+    isObservable,
+    isPrimitive,
+    isPromise,
+    syncState,
+    trackSelector,
+    when,
+} from '@legendapp/state';
+import React, { useContext, useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { reactGlobals } from './react-globals';
+import type { UseSelectorOptions } from './reactInterfaces';
+import { PauseContext } from './usePauseProvider';
+
+interface SelectorFunctions<T> {
+    subscribe: (onStoreChange: () => void) => () => void;
+    getVersion: () => number;
+    run: (selector: Selector<T>) => T;
+}
+
+function createSelectorFunctions<T>(
+    options: UseSelectorOptions | undefined,
+    isPaused$: Observable<boolean>,
+): SelectorFunctions<T> {
+    let version = 0;
+    let notify: () => void;
+    let dispose: (() => void) | undefined;
+    let resubscribe: (() => () => void) | undefined;
+    let _selector: Selector<T>;
+    let prev: T;
+
+    let pendingUpdate: any | undefined = undefined;
+
+    const run = () => {
+        // Dispose if already listening
+        dispose?.();
+
+        const {
+            value,
+            dispose: _dispose,
+            resubscribe: _resubscribe,
+        } = trackSelector(_selector, _update, undefined, undefined, /*createResubscribe*/ true);
+
+        dispose = _dispose;
+        resubscribe = _resubscribe;
+
+        return value;
+    };
+
+    const _update = ({ value }: { value: ListenerParams['value'] }) => {
+        if (isPaused$?.peek()) {
+            const next = pendingUpdate;
+            pendingUpdate = value;
+            if (next === undefined) {
+                when(
+                    () => !isPaused$.get(),
+                    () => {
+                        const latest = pendingUpdate;
+                        pendingUpdate = undefined;
+                        _update({ value: latest });
+                    },
+                );
+            }
+        } else {
+            // If skipCheck then don't need to re-run selector
+            let changed = options?.skipCheck;
+            if (!changed) {
+                const newValue = run();
+
+                // If newValue is different than previous value then it's changed.
+                // Also if the selector returns an observable directly then its value will be the same as
+                // the value from the listener, and that should always re-render.
+                if (newValue !== prev || (!isPrimitive(newValue) && newValue === value)) {
+                    changed = true;
+                }
+            }
+            if (changed) {
+                version++;
+                notify?.();
+            }
+        }
+    };
+
+    return {
+        subscribe: (onStoreChange: () => void) => {
+            notify = onStoreChange;
+
+            // Workaround for React 18 running twice in dev (part 2)
+            if (
+                (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') &&
+                !dispose &&
+                resubscribe
+            ) {
+                dispose = resubscribe();
+            }
+
+            return () => {
+                dispose?.();
+                dispose = undefined;
+            };
+        },
+        getVersion: () => version,
+        run: (selector: Selector<T>) => {
+            // Update the cached selector
+            _selector = selector;
+
+            return (prev = run());
+        },
+    };
+}
+
+export function useSelector<T>(selector: Selector<T>, options?: UseSelectorOptions): T {
+    // Short-circuit to skip creating the hook if selector is an observable
+    // and running in an observer. If selector is a function it needs to run in its own context.
+    if (reactGlobals.inObserver && isObservable(selector)) {
+        return computeSelector(selector);
+    }
+
+    let value;
+
+    try {
+        const isPaused$ = useContext(PauseContext);
+        const selectorFn = useMemo(() => createSelectorFunctions<T>(options, isPaused$), []);
+        const { subscribe, getVersion, run } = selectorFn;
+
+        // Run the selector
+        // Note: The selector needs to run on every render because it may have different results
+        // than the previous run if it uses local state
+        value = run(selector) as any;
+
+        useSyncExternalStore(subscribe, getVersion, getVersion);
+
+        // Suspense support
+        if (options?.suspense) {
+            // Note: Although it's not possible for an observable to be a promise, the selector may be a
+            // function that returns a Promise, so we handle that case too.
+            if (
+                isPromise(value) ||
+                (!value && isObservable(selector) && syncState(selector).isLoaded.get() === false)
+            ) {
+                if (React.use) {
+                    React.use(value);
+                } else {
+                    throw value;
+                }
+            }
+        }
+    } catch (err: unknown) {
+        if (
+            (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') &&
+            (err as Error)?.message?.includes('Rendered more')
+        ) {
+            console.warn(
+                `[legend-state]: You may want to wrap this component in \`observer\` to fix the error of ${
+                    (err as Error).message
+                }`,
+            );
+        }
+        throw err;
+    }
+
+    return value;
+}

package/src/react/useUnmount.ts

@@ -0,0 +1,8 @@
+import { useMount } from './useMount';
+
+export function useUnmount(fn: () => void) {
+    return useMount(() => fn);
+}
+
+// TODOV4 Deprecate
+export const useUnmountOnce = useUnmount;

package/src/react/useWhen.ts

@@ -0,0 +1,9 @@
+import { Selector, when, whenReady } from '@legendapp/state';
+import { useMemo } from 'react';
+
+export function useWhen<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)) {
+    return useMemo(() => when(predicate, effect), []);
+}
+export function useWhenReady<T>(predicate: Selector<T>, effect: (value: T) => any | (() => any)) {
+    return useMemo(() => whenReady(predicate, effect), []);
+}

package/src/react-hooks/createObservableHook.ts

@@ -0,0 +1,53 @@
+import { isFunction, Observable, observable } from '@legendapp/state';
+import React, { MutableRefObject, Reducer, ReducerState } from 'react';
+
+function overrideHooks<TRet>(refObs: MutableRefObject<Observable<TRet> | undefined>) {
+    // @ts-expect-error Types don't match React's expected types
+    React.useState = function useState(initialState: TRet | (() => TRet)) {
+        const obs =
+            refObs.current ??
+            (refObs.current = observable((isFunction(initialState) ? initialState() : initialState) as any) as any);
+        return [obs.get() as TRet, obs.set] as [TRet, React.Dispatch<React.SetStateAction<TRet>>];
+    };
+    // @ts-expect-error Types don't match React's expected types
+    React.useReducer = function useReducer<R extends Reducer<any, any>>(
+        reducer: R,
+        initializerArg: ReducerState<R>,
+        initializer: (arg: ReducerState<R>) => ReducerState<R>,
+    ) {
+        const obs =
+            refObs.current ??
+            (refObs.current = observable(
+                initializerArg !== undefined && isFunction(initializerArg)
+                    ? initializer(initializerArg)
+                    : initializerArg,
+            ) as any);
+        const dispatch = (action: any) => {
+            obs.set(reducer(obs.get(), action));
+        };
+        return [obs, dispatch];
+    };
+}
+
+export function createObservableHook<TArgs extends any[], TRet>(
+    fn: (...args: TArgs) => TRet,
+): (...args: TArgs) => Observable<TRet> {
+    const _useState = React.useState;
+    const _useReducer = React.useReducer;
+
+    return function (...args: TArgs) {
+        const refObs = React.useRef<Observable<TRet>>();
+
+        // First override the built-in hooks to create/update observables
+        overrideHooks(refObs);
+
+        // Then call the original hook
+        fn(...args);
+
+        // And reset back to the built-in hooks
+        React.useState = _useState;
+        React.useReducer = _useReducer;
+
+        return refObs.current as Observable<TRet>;
+    };
+}

package/src/react-hooks/useFetch.ts

@@ -0,0 +1,16 @@
+import { Observable } from '@legendapp/state';
+import { observableFetch } from '@legendapp/state/helpers/fetch';
+import { useMemo } from 'react';
+
+export function useFetch<T>(
+    input: RequestInfo | URL,
+    init?: RequestInit,
+    valueType?: 'arrayBuffer' | 'blob' | 'formData' | 'json' | 'text',
+): Observable<{
+    data?: T;
+    error?: any;
+    errorStr?: string;
+    loading: boolean;
+}> {
+    return useMemo(() => observableFetch<T>(input, init, valueType), []);
+}

package/src/react-hooks/useHover.ts

@@ -0,0 +1,40 @@
+import type { Observable } from '@legendapp/state';
+import { useObservable } from '@legendapp/state/react';
+import { useEffect } from 'react';
+
+export function useHover<T extends HTMLElement>(ref: React.MutableRefObject<T>): Observable<boolean> {
+    const obs = useObservable(false);
+
+    useEffect(() => {
+        const handleMouseOver = () => obs.set(true);
+        const handleMouseOut = (e: MouseEvent) => {
+            if (obs.peek() === true) {
+                let parent = (e as any).toElement as HTMLElement | null;
+                let foundRef = false;
+                while (parent && !foundRef) {
+                    if (parent === ref.current) {
+                        foundRef = true;
+                    }
+                    parent = parent.parentElement;
+                }
+
+                if (!foundRef) {
+                    obs.set(false);
+                }
+            }
+        };
+
+        const node = ref.current;
+        if (node) {
+            node.addEventListener('mouseover', handleMouseOver);
+            node.addEventListener('mouseout', handleMouseOut);
+
+            return () => {
+                node.removeEventListener('mouseover', handleMouseOver);
+                node.removeEventListener('mouseout', handleMouseOut);
+            };
+        }
+    }, [ref.current]);
+
+    return obs;
+}

package/src/react-hooks/useMeasure.ts

@@ -0,0 +1,48 @@
+import type { ObservableObject } from '@legendapp/state';
+import { useObservable } from '@legendapp/state/react';
+import { RefObject, useLayoutEffect } from 'react';
+
+function getSize(el: HTMLElement): { width: number; height: number } | undefined {
+    return el
+        ? {
+              width: el.offsetWidth,
+              height: el.offsetHeight,
+          }
+        : undefined;
+}
+
+export function useMeasure(ref: RefObject<HTMLElement>): ObservableObject<{
+    width: number | undefined;
+    height: number | undefined;
+}> {
+    const obs = useObservable<{ width: number | undefined; height: number | undefined }>({
+        width: undefined,
+        height: undefined,
+    });
+
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (el) {
+            const handleResize = () => {
+                if (ref.current) {
+                    const oldSize = obs.peek();
+                    const newSize = getSize(ref.current);
+                    if (newSize && (newSize.width !== oldSize.width || newSize.height !== oldSize.height)) {
+                        obs.set(newSize);
+                    }
+                }
+            };
+            handleResize();
+
+            let resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(el);
+
+            return () => {
+                resizeObserver.disconnect();
+                (resizeObserver as any) = undefined;
+            };
+        }
+    }, [ref.current]);
+
+    return obs;
+}

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;
+}