floppy-disk 2.16.0 → 3.0.0-alpha.2

package/esm/react/create-query.js

@@ -1,434 +0,0 @@
-import { createElement, useState } from 'react';
-import { getValue, hasValue, identityFn, isClient, noop } from '../utils';
-import { createStores } from './create-stores';
-const INITIAL_QUERY_STATE = {
-    isWaiting: false,
-    isWaitingNextPage: false,
-    status: 'loading',
-    isLoading: true,
-    isSuccess: false,
-    isError: false,
-    isRefetching: false,
-    isRefetchError: false,
-    isPreviousData: false,
-    isOptimisticData: false,
-    data: undefined,
-    response: undefined,
-    responseUpdatedAt: undefined,
-    error: undefined,
-    errorUpdatedAt: undefined,
-    retryCount: 0,
-    isGoingToRetry: false,
-    pageParam: undefined,
-    pageParams: [undefined],
-    hasNextPage: false,
-    retryNextPageCount: 0,
-    isGoingToRetryNextPage: false,
-};
-const useQueryDefaultDeps = (state) => [
-    state.data,
-    state.error,
-    state.isWaitingNextPage,
-    state.hasNextPage,
-];
-const fallbackComponent = () => null;
-/**
- * @see https://floppy-disk.vercel.app/docs/api#createquery
- */
-export const createQuery = (queryFn, options = {}) => {
-    const defaultFetchOnWindowFocus = options.fetchOnMount ?? true;
-    const defaultFetchOnReconnect = options.fetchOnMount ?? true;
-    const { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = 3000, // 3 seconds
-    fetchOnMount = true, fetchOnWindowFocus = defaultFetchOnWindowFocus, fetchOnReconnect = defaultFetchOnReconnect, enabled = true, retry = 1, retryDelay = 2000, // 2 seconds
-    keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError, onSettled = noop, cacheTime = 5 * 60 * 1000, refetchInterval = false, ...createStoresOptions } = options;
-    const retryTimeoutId = new Map();
-    const retryNextPageTimeoutId = new Map();
-    const resetTimeoutId = new Map();
-    const refetchIntervalTimeoutId = new Map();
-    const preventReplaceResponse = new Map(); // Prevent optimistic data to be replaced
-    const useQuery = createStores(({ get, set, key: _key, keyHash }) => {
-        const key = _key;
-        const getRetryProps = (error, retryCount) => {
-            const prevState = get();
-            const maxRetryCount = getValue(retry, error, prevState) || 0;
-            const delay = getValue(retryDelay, error, prevState) || 0;
-            return { shouldRetry: retryCount < maxRetryCount, delay };
-        };
-        const forceFetch = () => new Promise((resolve) => {
-            const state = get();
-            const { isWaiting, isLoading, pageParams } = state;
-            const responseAllPages = [];
-            const newPageParams = [pageParams[0]];
-            let pageParam = pageParams[0];
-            clearTimeout(refetchIntervalTimeoutId.get(keyHash));
-            if (isWaiting || !getValue(enabled, key))
-                return resolve(state);
-            if (isLoading)
-                set({ isWaiting: true });
-            else
-                set({ isWaiting: true, isRefetching: true });
-            const callQuery = (innerResolve = resolve) => {
-                if (get().isGoingToRetry) {
-                    if (isLoading)
-                        set({ isGoingToRetry: false, isWaiting: true });
-                    else
-                        set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
-                    clearTimeout(retryTimeoutId.get(keyHash));
-                }
-                preventReplaceResponse.set(keyHash, false);
-                const stateBeforeCallQuery = { ...get(), pageParam };
-                queryFn(key, stateBeforeCallQuery)
-                    .then((response) => {
-                    if (preventReplaceResponse.get(keyHash)) {
-                        set({ isWaiting: false, isRefetching: false });
-                        return innerResolve(get());
-                    }
-                    responseAllPages.push(response);
-                    const newPageParam = getNextPageParam(response, responseAllPages.length, stateBeforeCallQuery);
-                    newPageParams.push(newPageParam);
-                    if (hasValue(newPageParam) && newPageParams.length < pageParams.length) {
-                        pageParam = newPageParam;
-                        callQuery();
-                        return;
-                    }
-                    const nextState = {
-                        isWaiting: false,
-                        status: 'success',
-                        isLoading: false,
-                        isSuccess: true,
-                        isError: false,
-                        isRefetching: false,
-                        isRefetchError: false,
-                        isPreviousData: false,
-                        isOptimisticData: false,
-                        data: responseAllPages.reduce((prev, responseCurrentPage) => {
-                            return select(responseCurrentPage, { key, data: prev });
-                        }, undefined),
-                        response,
-                        responseUpdatedAt: Date.now(),
-                        error: undefined,
-                        errorUpdatedAt: undefined,
-                        retryCount: 0,
-                        pageParam: newPageParam,
-                        pageParams: newPageParams,
-                        hasNextPage: hasValue(newPageParam),
-                    };
-                    const refetchIntervalValue = isClient && getValue(refetchInterval, { ...get(), ...nextState });
-                    if (refetchIntervalValue) {
-                        refetchIntervalTimeoutId.set(keyHash, window.setTimeout(() => {
-                            forceFetch();
-                        }, refetchIntervalValue));
-                    }
-                    set(nextState);
-                    onSuccess(response, stateBeforeCallQuery);
-                    onSettled(stateBeforeCallQuery);
-                    innerResolve(get());
-                })
-                    .catch((error) => {
-                    const prevState = get();
-                    const errorUpdatedAt = Date.now();
-                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
-                    if (shouldRetry) {
-                        set({
-                            isWaiting: false,
-                            isGoingToRetry: true,
-                        });
-                        if (isClient) {
-                            retryTimeoutId.set(keyHash, window.setTimeout(() => {
-                                set({ retryCount: prevState.retryCount + 1 });
-                                callQuery(innerResolve);
-                            }, delay));
-                        }
-                        return;
-                    }
-                    set(prevState.isSuccess && !prevState.isPreviousData
-                        ? {
-                            isWaiting: false,
-                            isRefetching: false,
-                            isRefetchError: true,
-                            data: responseAllPages.length
-                                ? responseAllPages.reduce((prev, response) => {
-                                    return select(response, { key, data: prev });
-                                }, undefined)
-                                : prevState.data,
-                            error,
-                            errorUpdatedAt,
-                            pageParam,
-                            hasNextPage: hasValue(pageParam),
-                        }
-                        : {
-                            isWaiting: false,
-                            status: 'error',
-                            isLoading: false,
-                            isError: true,
-                            data: undefined,
-                            error,
-                            errorUpdatedAt,
-                            pageParam,
-                            hasNextPage: hasValue(pageParam),
-                        });
-                    if (onError)
-                        onError(error, stateBeforeCallQuery);
-                    else
-                        console.error(error, get());
-                    onSettled(stateBeforeCallQuery);
-                    innerResolve(get());
-                });
-            };
-            callQuery();
-        });
-        const fetch = () => {
-            const { responseUpdatedAt } = get();
-            const isStale = !responseUpdatedAt || Date.now() > responseUpdatedAt + staleTime;
-            if (!isStale)
-                return;
-            forceFetch();
-        };
-        const fetchNextPage = () => new Promise((resolve) => {
-            const state = get();
-            if (typeof options.getNextPageParam !== 'function') {
-                console.warn('fetchNextPage with invalid getNextPageParam option');
-                return resolve(state);
-            }
-            const { isLoading, isWaitingNextPage, data, hasNextPage, pageParam, pageParams } = state;
-            if (isLoading)
-                return resolve(forceFetch());
-            if (isWaitingNextPage || !hasNextPage || !getValue(enabled, key))
-                return resolve(state);
-            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
-            clearTimeout(retryNextPageTimeoutId.get(keyHash));
-            const stateBeforeCallQuery = get();
-            queryFn(key, { ...state, pageParam })
-                .then((response) => {
-                if (preventReplaceResponse.get(keyHash)) {
-                    set({ isWaitingNextPage: false });
-                    return resolve(get());
-                }
-                const newPageParam = getNextPageParam(response, pageParams.length, stateBeforeCallQuery);
-                set({
-                    isWaitingNextPage: false,
-                    response,
-                    responseUpdatedAt: Date.now(),
-                    data: select(response, { key, data }),
-                    pageParam: newPageParam,
-                    pageParams: pageParams.concat(newPageParam),
-                    hasNextPage: hasValue(newPageParam),
-                });
-                onSuccess(response, stateBeforeCallQuery);
-                onSettled(stateBeforeCallQuery);
-                resolve(get());
-            })
-                .catch((error) => {
-                const prevState = get();
-                const { shouldRetry, delay } = getRetryProps(error, prevState.retryNextPageCount);
-                if (shouldRetry) {
-                    set({
-                        isWaitingNextPage: false,
-                        isGoingToRetryNextPage: true,
-                    });
-                    retryNextPageTimeoutId.set(keyHash, window.setTimeout(() => {
-                        set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
-                        resolve(fetchNextPage());
-                    }, delay));
-                    return;
-                }
-                set({
-                    isWaitingNextPage: false,
-                    isError: true,
-                    error,
-                    errorUpdatedAt: Date.now(),
-                });
-                if (onError)
-                    onError(error, stateBeforeCallQuery);
-                else
-                    console.error(error, get());
-                onSettled(stateBeforeCallQuery);
-                resolve(get());
-            });
-        });
-        return {
-            ...INITIAL_QUERY_STATE,
-            key,
-            keyHash,
-            fetch,
-            forceFetch,
-            fetchNextPage,
-            reset: () => {
-                preventReplaceResponse.set(keyHash, true);
-                clearTimeout(retryTimeoutId.get(keyHash));
-                clearTimeout(retryNextPageTimeoutId.get(keyHash));
-                set(INITIAL_QUERY_STATE);
-            },
-            optimisticUpdate: (response) => useQuery.optimisticUpdate({ key, response }),
-        };
-    }, (() => {
-        const windowFocusHandler = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                const result = getValue(fetchOnWindowFocus, state.key);
-                if (result === 'always')
-                    state.forceFetch();
-                else if (result)
-                    state.fetch();
-            });
-        };
-        const reconnectHandler = () => {
-            useQuery.getAllWithSubscriber().forEach((state) => {
-                const result = getValue(fetchOnReconnect, state.key);
-                if (result === 'always')
-                    state.forceFetch();
-                else if (result)
-                    state.fetch();
-            });
-        };
-        return {
-            ...createStoresOptions,
-            defaultDeps,
-            onFirstSubscribe: (state) => {
-                if (state.isSuccess) {
-                    const refetchIntervalValue = isClient && getValue(refetchInterval, state);
-                    if (refetchIntervalValue) {
-                        refetchIntervalTimeoutId.set(state.keyHash, window.setTimeout(() => {
-                            state.forceFetch();
-                        }, refetchIntervalValue));
-                    }
-                }
-                if (isClient) {
-                    if (fetchOnWindowFocus)
-                        window.addEventListener('focus', windowFocusHandler);
-                    if (fetchOnReconnect)
-                        window.addEventListener('online', reconnectHandler);
-                }
-                clearTimeout(resetTimeoutId.get(state.keyHash));
-                onFirstSubscribe(state);
-            },
-            onSubscribe: (state) => {
-                const result = getValue(fetchOnMount, state.key);
-                if (result === 'always')
-                    state.forceFetch();
-                else if (result)
-                    state.fetch();
-                onSubscribe(state);
-            },
-            onLastUnsubscribe: (state) => {
-                const totalSubs = useQuery.getAllWithSubscriber().length;
-                if (isClient && totalSubs === 0) {
-                    if (fetchOnWindowFocus)
-                        window.removeEventListener('focus', windowFocusHandler);
-                    if (fetchOnReconnect)
-                        window.removeEventListener('online', reconnectHandler);
-                }
-                useQuery.set(state.key, { retryCount: 0, retryNextPageCount: 0 }, true);
-                clearTimeout(retryTimeoutId.get(state.keyHash));
-                clearTimeout(retryNextPageTimeoutId.get(state.keyHash));
-                clearTimeout(refetchIntervalTimeoutId.get(state.keyHash));
-                if (isClient && cacheTime !== Infinity) {
-                    resetTimeoutId.set(state.keyHash, window.setTimeout(() => {
-                        useQuery.set(state.key, INITIAL_QUERY_STATE);
-                    }, cacheTime));
-                }
-                onLastUnsubscribe(state);
-            },
-            onBeforeChangeKey: (nextKey, prevKey) => {
-                if (keepPreviousData) {
-                    const nextData = useQuery.get(nextKey);
-                    if (!nextData.data) {
-                        const prevData = useQuery.get(prevKey);
-                        if (prevData.data) {
-                            useQuery.set(nextKey, {
-                                status: 'success',
-                                isLoading: false,
-                                isSuccess: true,
-                                isError: false,
-                                data: prevData.data,
-                                response: prevData.response,
-                                isPreviousData: true,
-                            }, true);
-                        }
-                    }
-                }
-                onBeforeChangeKey(nextKey, prevKey);
-            },
-        };
-    })());
-    useQuery.setInitialResponse = ({ key, response, skipRevalidation }) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useState(() => {
-            const state = useQuery.get(key);
-            if (response === undefined || state.isSuccess)
-                return;
-            const newPageParam = getNextPageParam(response, 1, state);
-            useQuery.set(key, {
-                status: 'success',
-                isLoading: false,
-                isSuccess: true,
-                isError: false,
-                response,
-                responseUpdatedAt: skipRevalidation ? Date.now() : undefined,
-                data: select(response, { key: key, data: undefined }),
-                pageParam: newPageParam,
-                pageParams: [undefined, newPageParam],
-                hasNextPage: hasValue(newPageParam),
-            });
-        });
-    };
-    useQuery.reset = () => {
-        useQuery.getStores().forEach((store, keyHash) => {
-            preventReplaceResponse.set(keyHash, true);
-            clearTimeout(retryTimeoutId.get(keyHash));
-            clearTimeout(retryNextPageTimeoutId.get(keyHash));
-            store.set(INITIAL_QUERY_STATE);
-        });
-    };
-    useQuery.resetSpecificKey = (key) => useQuery.get(key).reset();
-    useQuery.invalidate = () => {
-        useQuery.getStores().forEach((store) => {
-            const { get, set, getSubscribers } = store;
-            set({ responseUpdatedAt: undefined });
-            if (getSubscribers().size > 0)
-                get().forceFetch();
-        });
-    };
-    useQuery.invalidateSpecificKey = (key) => {
-        const { get, set, getSubscribers } = useQuery.getStore(key);
-        set({ responseUpdatedAt: undefined });
-        if (getSubscribers().size > 0)
-            get().forceFetch();
-    };
-    useQuery.optimisticUpdate = ({ key, response }) => {
-        const prevState = useQuery.get(key);
-        const optimisticResponse = getValue(response, prevState);
-        useQuery.set(key, {
-            isOptimisticData: true,
-            response: optimisticResponse,
-            data: select(optimisticResponse, { key: key, data: undefined }),
-        });
-        preventReplaceResponse.set(prevState.keyHash, true);
-        const revert = () => {
-            useQuery.set(key, {
-                isOptimisticData: false,
-                response: prevState.response,
-                data: prevState.data,
-            });
-        };
-        const invalidate = () => useQuery.invalidateSpecificKey(key);
-        return { revert, invalidate };
-    };
-    useQuery.suspend = (key) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const state = useQuery(key);
-        if (state.isLoading)
-            throw state.forceFetch();
-        if (state.isError)
-            throw state.error;
-        return state;
-    };
-    useQuery.Render = (props) => {
-        const { queryKey, loading = fallbackComponent, success = fallbackComponent, error = fallbackComponent, } = props;
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        const state = useQuery(queryKey);
-        if (state.data)
-            return createElement(success, state);
-        return createElement(state.isLoading ? loading : error, state);
-    };
-    return useQuery;
-};

package/esm/react/create-store.d.ts

@@ -1,51 +0,0 @@
-import { InitStoreOptions, SelectDeps, SetStoreData, StoreData, StoreInitializer, Subscribers } from '../store';
-export type WatchProps<T, K extends SelectDeps<T> | keyof T = SelectDeps<T>> = {
-    selectDeps?: K;
-    render: (state: K extends keyof T ? T[K] : T) => any;
-};
-export type UseStore<T extends StoreData> = {
-    /**
-     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
-     * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStore`.
-     *
-     * Since version `2.13.0`, we can use a store's object key to control reactivity.
-     *
-     * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
-     *
-     * @example
-     * ```tsx
-     * const useMyStore = createStore({
-     *   foo: 12,
-     *   bar: true,
-     *   baz: "z",
-     * });
-     *
-     * const MyComponent = () => {
-     *   const foo = useMyStore("foo");
-     *   // Will only re-render if "foo" updated
-     * };
-     * ```
-     */
-    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
-    get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
-    getSubscribers: () => Subscribers<T>;
-    /**
-     * ⚛️ (**_Hook_**)
-     *
-     * Set default values **inside of a component**.
-     *
-     * **IMPORTANT NOTE:**
-     * - This is a hook, put it inside of a React component
-     * - Put this on the root component or parent component, before any component subscribed!
-     */
-    setDefaultValues: (values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K>) => any;
-};
-/**
- * @see https://floppy-disk.vercel.app/docs/api#createstore
- */
-export declare const createStore: <T extends StoreData>(initializer: StoreInitializer<T>, options?: InitStoreOptions<T> & {
-    defaultDeps?: SelectDeps<T>;
-}) => UseStore<T>;

package/esm/react/create-store.js

@@ -1,38 +0,0 @@
-import { useEffect, useState } from 'react';
-import { initStore, } from '../store';
-/**
- * @see https://floppy-disk.vercel.app/docs/api#createstore
- */
-export const createStore = (initializer, options = {}) => {
-    const { get, set, subscribe, getSubscribers } = initStore(initializer, options);
-    const { defaultDeps } = options;
-    /**
-     * **IMPORTANT NOTE:** `selectDeps` function must not be changed after initialization.
-     */
-    const useStore = (selectDeps = defaultDeps) => {
-        const [state, setState] = useState(get);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        useEffect(() => subscribe(setState, selectDeps), []);
-        return (typeof selectDeps === 'string' ? state[selectDeps] : state);
-    };
-    useStore.get = get;
-    useStore.set = set;
-    useStore.subscribe = subscribe;
-    useStore.getSubscribers = getSubscribers;
-    useStore.setDefaultValues = (value) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useState(() => {
-            const subscribers = getSubscribers();
-            if (subscribers.size > 0) {
-                console.warn('Put setDefaultValues on the root component or parent component, before any component subscribed!');
-            }
-            set(value);
-        });
-    };
-    const Watch = ({ selectDeps = defaultDeps, render, }) => {
-        const store = useStore(selectDeps);
-        return render(store);
-    };
-    useStore.Watch = Watch;
-    return useStore;
-};

package/esm/react/create-stores.d.ts

@@ -1,77 +0,0 @@
-import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../store';
-import { Maybe } from '../utils';
-import { WatchProps } from './create-store';
-export type StoreKey = Record<string, any> | undefined;
-export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = T | ((api: {
-    get: () => T;
-    set: (value: SetStoreData<T>, silent?: boolean) => void;
-    key: TKey;
-    keyHash: string;
-}) => T);
-export type UseStores<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = {
-    /**
-     * @param key (Optional) Store key, an object that will be hashed into a string as a store identifier.
-     * No need to memoize the store key.
-     *
-     * @param selectDeps (Optional) A function that return the dependency array (just like in `useEffect`), to trigger reactivity.
-     * Defaults to `undefined` (reactive to all state change) if you didn't set `defaultDeps` on `createStores`.
-     *
-     * Since version `2.13.0`, we can use a store's object key to control reactivity.
-     *
-     * **IMPORTANT NOTE:** `selectDeps` must not be changed after initialization.
-     *
-     * @example
-     * ```tsx
-     * type StoreKey = { id: string };
-     * type StoreData = { foo: number; bar: boolean; baz: string };
-     * const useMyStores = createStores<StoreKey, StoreData>({
-     *   foo: 12,
-     *   bar: true,
-     *   baz: "z",
-     * });
-     *
-     * export const MyComponent = () => {
-     *   const foo = useMyStores({ id: "p1" }, "foo");
-     *   // Will only re-render if "foo" & store key ("id") updated
-     * };
-     * ```
-     */
-    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(selectDeps?: K): K extends keyof T ? T[K] : T;
-    <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(key: Maybe<TKey>, selectDeps?: K): K extends keyof T ? T[K] : T;
-    get: (key?: Maybe<TKey>) => T;
-    getAll: () => T[];
-    getAllWithSubscriber: () => T[];
-    set: (key: Maybe<TKey>, value: SetStoreData<T>, silent?: boolean) => void;
-    setAll: (value: SetStoreData<T>, silent?: boolean) => void;
-    subscribe: (key: Maybe<TKey>, fn: (state: T) => void, selectDeps?: SelectDeps<T> | keyof T) => () => void;
-    getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
-    getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
-    getStores: () => Map<string, InitStoreReturn<T>>;
-    /**
-     * ⚛️ (**_Hook_**)
-     *
-     * Set default values **inside of a component**.
-     *
-     * **IMPORTANT NOTE:**
-     * - This is a hook, put it inside of a React component
-     * - Put this on the root component or parent component, before any component subscribed!
-     */
-    setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
-    Watch: <K extends SelectDeps<T> | keyof T = SelectDeps<T>>(props: WatchProps<T, K> & {
-        storeKey?: Maybe<TKey>;
-    }) => any;
-};
-export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = InitStoreOptions<T> & {
-    onBeforeChangeKey?: (nextKey: TKey, prevKey: TKey) => void;
-    /**
-     * Will be triggered when a single store with a specific key was initialized.
-     */
-    onStoreInitialized?: (key: TKey, keyHash: string) => void;
-    defaultDeps?: SelectDeps<T>;
-    hashKeyFn?: (obj: TKey) => string;
-};
-export declare const hashStoreKey: (value?: any) => string;
-/**
- * @see https://floppy-disk.vercel.app/docs/api#createstores
- */
-export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreData = StoreData>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;