@legendapp/state 3.0.0-alpha.1 → 3.0.0-alpha.3

package/src/react/useEffectOnce.ts

@@ -1,41 +0,0 @@
-import { isFunction } from '@legendapp/state';
-import { useEffect, useRef } from 'react';
-
-export const useEffectOnce = (effect: () => void | (() => void), deps: any[]) => {
-    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
-        const refDispose = useRef<{ dispose?: void | (() => void); num: number }>({ num: 0 });
-
-        useEffect(() => {
-            // This is a hack to work around StrictMode running effects twice.
-            // On the first run it returns a cleanup function that queues the dispose function
-            // in a microtask. This way it will run at the end of the frame after StrictMode's second
-            // run of the effect. If it's run a second time then the microtasked dispose will do nothing,
-            // but the effect will return the dispose again so that when it actually unmounts it will dispose.
-            // If not in StrictMode, then the dispose function will run in the microtask.
-            // It's possible that this is not safe in 100% of cases, but I'm not sure what the
-            // dangerous cases would be. The side effect is that the listener is still active
-            // until the end of the frame, but that's probably not a problem.
-            const { current } = refDispose;
-            current.num++;
-            const dispose = () => {
-                if (current.dispose && current.num < 2) {
-                    (current.dispose as () => void)();
-                    current.dispose = undefined;
-                }
-                current.num--;
-            };
-            if (current.dispose === undefined) {
-                const ret = effect() ?? null;
-                // If ret is a function, then it's a dispose function.
-                if (ret && isFunction(ret)) {
-                    current.dispose = ret;
-                    return () => queueMicrotask(dispose);
-                }
-            } else {
-                return dispose;
-            }
-        }, deps);
-    } else {
-        useEffect(effect, deps);
-    }
-};

package/src/react/useIsMounted.ts

@@ -1,16 +0,0 @@
-import type { Observable } from '@legendapp/state';
-import { useMountOnce } from './useMount';
-import { useObservable } from './useObservable';
-
-export function useIsMounted(): Observable<boolean> {
-    const obs = useObservable(false);
-
-    const { set } = obs;
-    useMountOnce(() => {
-        set(true);
-
-        return () => set(false);
-    });
-
-    return obs;
-}

package/src/react/useMount.ts

@@ -1,15 +0,0 @@
-import { isPromise } from '@legendapp/state';
-import { useEffectOnce } from './useEffectOnce';
-
-export function useMount(fn: () => (void | (() => void)) | Promise<void>) {
-    return useEffectOnce(() => {
-        const ret = fn();
-        // Allow the function to be async but if so ignore its return value
-        if (!isPromise(ret)) {
-            return ret;
-        }
-    }, []);
-}
-
-// TODOV4 Deprecate
-export const useMountOnce = useMount;

package/src/react/useObservable.ts

@@ -1,24 +0,0 @@
-import { observable, Observable, RecursiveValueOrFunction } from '@legendapp/state';
-import { useRef } from 'react';
-
-/**
- * A React hook that creates a new observable
- *
- * @param initialValue The initial value of the observable or a function that returns the initial value
- *
- * @see https://www.legendapp.com/dev/state/react/#useObservable
- */
-export function useObservable<T>(): Observable<T | undefined>;
-export function useObservable<T>(
-    value: Promise<RecursiveValueOrFunction<T>> | (() => RecursiveValueOrFunction<T>) | RecursiveValueOrFunction<T>,
-): Observable<T>;
-export function useObservable<T>(value: T): Observable<T>;
-export function useObservable<T>(value?: T): Observable<any>;
-export function useObservable<T>(initialValue?: T | (() => T) | (() => Promise<T>)): Observable<T> {
-    const ref = useRef<Observable<T>>();
-    if (!ref.current) {
-        // Create the observable from the default value
-        ref.current = observable<T>(initialValue as any);
-    }
-    return ref.current;
-}

package/src/react/useObservableReducer.ts

@@ -1,52 +0,0 @@
-import type { Observable } from '@legendapp/state';
-import { isFunction } from '@legendapp/state';
-import type {
-    Dispatch,
-    DispatchWithoutAction,
-    Reducer,
-    ReducerAction,
-    ReducerState,
-    ReducerStateWithoutAction,
-    ReducerWithoutAction,
-} from 'react';
-import { useObservable } from './useObservable';
-
-export function useObservableReducer<R extends ReducerWithoutAction<any>, I>(
-    reducer: R,
-    initializerArg: I,
-    initializer: (arg: I) => ReducerStateWithoutAction<R>,
-): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
-export function useObservableReducer<R extends ReducerWithoutAction<any>>(
-    reducer: R,
-    initializerArg: ReducerStateWithoutAction<R>,
-    initializer?: undefined,
-): [Observable<ReducerStateWithoutAction<R>>, DispatchWithoutAction];
-export function useObservableReducer<R extends Reducer<any, any>, I>(
-    reducer: R,
-    initializerArg: I & ReducerState<R>,
-    initializer: (arg: I & ReducerState<R>) => ReducerState<R>,
-): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
-export function useObservableReducer<R extends Reducer<any, any>, I>(
-    reducer: R,
-    initializerArg: I,
-    initializer: (arg: I) => ReducerState<R>,
-): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
-export function useObservableReducer<R extends Reducer<any, any>>(
-    reducer: R,
-    initialState: ReducerState<R>,
-    initializer?: undefined,
-): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>];
-export function useObservableReducer<R extends Reducer<any, any>, I>(
-    reducer: R,
-    initializerArg: I & ReducerState<R>,
-    initializer: ((arg: I & ReducerState<R>) => ReducerState<R>) | undefined,
-): [Observable<ReducerState<R>>, Dispatch<ReducerAction<R>>] {
-    const obs = useObservable(() =>
-        initializerArg !== undefined && isFunction(initializerArg) ? initializer!(initializerArg) : initializerArg,
-    );
-    const dispatch = (action: any) => {
-        obs.set(reducer(obs.get(), action));
-    };
-
-    return [obs as Observable<ReducerState<R>>, dispatch];
-}

package/src/react/useObservableState.ts

@@ -1,30 +0,0 @@
-import { isFunction, observable, type Observable } from '@legendapp/state';
-import { useMemo } from 'react';
-import { useSelector } from './useSelector';
-
-export function useObservableState<T>(initialValue?: T | (() => T) | (() => Promise<T>)): [Observable<T>, T] {
-    // Create a memoized observable
-    return useMemo(
-        () =>
-            // Wrap the return array in a Proxy to detect whether the value is accessed
-            new Proxy(
-                [
-                    observable<T>((isFunction(initialValue) ? initialValue() : initialValue) as any),
-                    // Second element of the array just needs to exist for the Proxy to access it
-                    // but we can't ensure it's updated with the real value, and it doesn't really matter since it's proxied,
-                    // so just make it undefined. Alternatively the Proxy handler could manually return 2 for the "length" prop
-                    // but this seems easier and less code.
-                    undefined,
-                ],
-                proxyHandler,
-            ),
-        [],
-    ) as [Observable<T>, T];
-}
-
-const proxyHandler: ProxyHandler<any[]> = {
-    get(target, prop, receiver) {
-        // If the value is accessed at index 1 then `useSelector` to track it for changes
-        return prop === '1' ? useSelector(target[0]) : Reflect.get(target, prop, receiver);
-    },
-};

package/src/react/useObserve.ts

@@ -1,54 +0,0 @@
-import {
-    computeSelector,
-    isFunction,
-    ObservableParam,
-    observe,
-    ObserveEvent,
-    ObserveEventCallback,
-    Selector,
-} from '@legendapp/state';
-import { useRef } from 'react';
-import type { ObserveOptions } from '../observe';
-import { useUnmountOnce } from './useUnmount';
-
-export function useObserve<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): () => void;
-export function useObserve<T>(
-    selector: Selector<T>,
-    reaction?: (e: ObserveEventCallback<T>) => any,
-    options?: ObserveOptions,
-): () => void;
-export function useObserve<T>(
-    selector: Selector<T> | ((e: ObserveEvent<T>) => any),
-    reactionOrOptions?: ((e: ObserveEventCallback<T>) => any) | ObserveOptions,
-    options?: ObserveOptions,
-): () => void {
-    let reaction: ((e: ObserveEventCallback<T>) => any) | undefined;
-    if (isFunction(reactionOrOptions)) {
-        reaction = reactionOrOptions;
-    } else {
-        options = reactionOrOptions;
-    }
-
-    const ref = useRef<{
-        selector?: Selector<T> | ((e: ObserveEvent<T>) => T | void) | ObservableParam<T>;
-        reaction?: (e: ObserveEventCallback<T>) => any;
-        dispose?: () => void;
-    }>({});
-
-    ref.current.selector = selector;
-    ref.current.reaction = reaction;
-
-    if (!ref.current.dispose) {
-        ref.current.dispose = observe<T>(
-            ((e: ObserveEventCallback<T>) => computeSelector(ref.current.selector, e)) as any,
-            (e) => ref.current.reaction?.(e),
-            options,
-        );
-    }
-
-    useUnmountOnce(() => {
-        ref.current?.dispose?.();
-    });
-
-    return ref.current.dispose;
-}

package/src/react/useObserveEffect.ts

@@ -1,40 +0,0 @@
-import { isFunction, ObservableParam, observe, ObserveEvent, ObserveEventCallback, Selector } from '@legendapp/state';
-import { useRef } from 'react';
-import type { ObserveOptions } from '../observe';
-import { useMountOnce } from './useMount';
-
-export function useObserveEffect<T>(run: (e: ObserveEvent<T>) => T | void, options?: ObserveOptions): void;
-export function useObserveEffect<T>(
-    selector: Selector<T>,
-    reaction?: (e: ObserveEventCallback<T>) => any,
-    options?: ObserveOptions,
-): void;
-export function useObserveEffect<T>(
-    selector: Selector<T> | ((e: ObserveEvent<T>) => any),
-    reactionOrOptions?: ((e: ObserveEventCallback<T>) => any) | ObserveOptions,
-    options?: ObserveOptions,
-): void {
-    let reaction: ((e: ObserveEventCallback<T>) => any) | undefined;
-    if (isFunction(reactionOrOptions)) {
-        reaction = reactionOrOptions;
-    } else {
-        options = reactionOrOptions;
-    }
-
-    const ref = useRef<{
-        selector: Selector<T> | ((e: ObserveEvent<T>) => T | void) | ObservableParam<T>;
-        reaction?: (e: ObserveEventCallback<T>) => any;
-    }>({ selector });
-    ref.current = { selector, reaction };
-
-    useMountOnce(() =>
-        observe<T>(
-            ((e: ObserveEventCallback<T>) => {
-                const { selector } = ref.current as { selector: (e: ObserveEvent<T>) => T | void };
-                return isFunction(selector) ? selector(e) : selector;
-            }) as any,
-            (e) => ref.current.reaction?.(e),
-            options,
-        ),
-    );
-}

package/src/react/usePauseProvider.tsx

@@ -1,16 +0,0 @@
-import { Observable, ObservableBoolean, observable } from '@legendapp/state';
-import { Context, ReactNode, createContext, createElement, useState } from 'react';
-
-let pauseContext: Context<ObservableBoolean> | undefined = undefined;
-export const getPauseContext = () => {
-    return (pauseContext ||= createContext<Observable<boolean>>(null as any));
-};
-
-export function usePauseProvider() {
-    const [value] = useState(() => observable(false));
-    return {
-        PauseProvider: ({ children }: { children: ReactNode }) =>
-            createElement(getPauseContext().Provider, { value }, children),
-        isPaused$: value,
-    };
-}

package/src/react/useSelector.ts

@@ -1,167 +0,0 @@
-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 { getPauseContext } 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) && !options?.suspense) {
-        return computeSelector(selector);
-    }
-
-    let value;
-
-    try {
-        const isPaused$ = useContext(getPauseContext());
-        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

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

package/src/react/useWhen.ts

@@ -1,9 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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/useHover.ts

@@ -1,40 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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;
-}