floppy-disk 2.0.0-alpha.4 → 2.0.0-alpha.6

package/esm/preact/create-store.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'preact/hooks';
+import { initStore, } from '../vanilla';
+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 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, render }) => {
+        const store = useStore(selectDeps);
+        return render(store);
+    };
+    useStore.Watch = Watch;
+    return useStore;
+};

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

@@ -0,0 +1,45 @@
+import { InitStoreOptions, InitStoreReturn, SelectDeps, SetStoreData, StoreData, Subscribers } from '../vanilla';
+import { WatchProps } from './create-store';
+type Maybe<T> = T | null | undefined;
+export type StoreKey = Record<string, any> | undefined;
+export type StoresInitializer<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = (api: {
+    key: TKey;
+    get: () => T;
+    set: (value: SetStoreData<T>, silent?: boolean) => void;
+}) => 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.
+     *
+     * @param selectDeps 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`.
+     *
+     * IMPORTANT NOTE: `selectDeps` must not be changed after initialization.
+     */
+    (...args: [Maybe<TKey>, SelectDeps<T>?] | [SelectDeps<T>?]): 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>) => () => void;
+    getSubscribers: (key: Maybe<TKey>) => Subscribers<T>;
+    getStore: (key?: Maybe<TKey>) => InitStoreReturn<T>;
+    getStores: () => Map<string, InitStoreReturn<T>>;
+    /**
+     * Set default values inside a component.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setDefaultValues: (key: Maybe<TKey>, values: SetStoreData<T>) => void;
+    Watch: (props: WatchProps<T> & {
+        storeKey?: Maybe<TKey>;
+    }) => any;
+};
+export type CreateStoresOptions<TKey extends StoreKey = StoreKey, T extends StoreData = StoreData> = InitStoreOptions<T> & {
+    onBeforeChangeKey?: (nextKey: TKey, prevKey: TKey) => void;
+    defaultDeps?: SelectDeps<T>;
+    hashKeyFn?: (obj: TKey) => string;
+};
+export declare const createStores: <TKey extends StoreKey = StoreKey, T extends StoreData = StoreData>(initializer: StoresInitializer<TKey, T>, options?: CreateStoresOptions<TKey, T>) => UseStores<TKey, T>;
+export {};

package/esm/preact/create-stores.js

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { hashStoreKey, noop } from '../utils';
+import { initStore, } from '../vanilla';
+export const createStores = (initializer, options = {}) => {
+    const { onBeforeChangeKey = noop, defaultDeps, hashKeyFn = hashStoreKey } = options;
+    const stores = new Map();
+    const getStore = (_key) => {
+        const key = _key || {};
+        const normalizedKey = hashKeyFn(key);
+        if (!stores.has(normalizedKey)) {
+            stores.set(normalizedKey, initStore((api) => initializer({ key, ...api }), options));
+        }
+        return stores.get(normalizedKey);
+    };
+    /**
+     * IMPORTANT NOTE: selectDeps function must not be changed after initialization.
+     */
+    const useStores = (...args) => {
+        const [_key, selectDeps = defaultDeps] = (typeof args[0] === 'function' ? [{}, args[0]] : args);
+        const key = _key || {};
+        const normalizedKey = hashKeyFn(key);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const { get, subscribe } = useMemo(() => getStore(key), [normalizedKey]);
+        const [state, setState] = useState(get);
+        const isFirstRender = useRef(true);
+        const prevKey = useRef(key);
+        useEffect(() => {
+            if (!isFirstRender.current) {
+                onBeforeChangeKey(key, prevKey.current);
+                setState(get);
+            }
+            isFirstRender.current = false;
+            prevKey.current = key;
+            const unsubs = subscribe(setState, selectDeps);
+            return unsubs;
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [normalizedKey]);
+        return state;
+    };
+    useStores.get = (key) => {
+        const store = getStore(key);
+        return store.get();
+    };
+    useStores.getAll = () => {
+        const allStores = [];
+        stores.forEach((store) => {
+            allStores.push(store.get());
+        });
+        return allStores;
+    };
+    useStores.getAllWithSubscriber = () => {
+        const allStores = [];
+        stores.forEach((store) => {
+            const subscribers = store.getSubscribers();
+            if (subscribers.size > 0)
+                allStores.push(store.get());
+        });
+        return allStores;
+    };
+    useStores.set = (key, value, silent) => {
+        const store = getStore(key);
+        store.set(value, silent);
+    };
+    useStores.setAll = (value, silent) => {
+        stores.forEach((store) => {
+            store.set(value, silent);
+        });
+    };
+    useStores.subscribe = (key, fn, selectDeps) => {
+        const store = getStore(key);
+        return store.subscribe(fn, selectDeps);
+    };
+    useStores.getSubscribers = (key) => {
+        const store = getStore(key);
+        return store.getSubscribers();
+    };
+    useStores.getStore = (key) => getStore(key);
+    useStores.getStores = () => stores;
+    useStores.setDefaultValues = (key, value) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useState(() => {
+            const store = getStore(key);
+            const subscribers = store.getSubscribers();
+            if (subscribers.size > 0) {
+                console.warn('Put setDefaultValues on the root component or parent component, before any component subscribed!');
+            }
+            store.set(value);
+        });
+    };
+    const Watch = ({ storeKey, selectDeps, render }) => {
+        const store = useStores(storeKey, selectDeps);
+        return render(store);
+    };
+    useStores.Watch = Watch;
+    return useStores;
+};

package/esm/preact/index.d.ts

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';

package/esm/preact/index.js

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';

package/esm/preact/with-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentChildren } from 'preact';
+export declare const withContext: <T>(initFn: () => T) => readonly [({ children, onInitialize, }: {
+    children: ComponentChildren;
+    onInitialize?: ((value: T) => void) | undefined;
+}) => import("react").JSX.Element, () => T | null];

package/esm/preact/with-context.js

@@ -0,0 +1,16 @@
+import { createContext } from 'preact';
+import { useContext, useState } from 'preact/hooks';
+export const withContext = (initFn) => {
+    const Context = createContext(null);
+    const Provider = ({ children, onInitialize, }) => {
+        const [value] = useState(() => {
+            const store = initFn();
+            onInitialize && onInitialize(store);
+            return store;
+        });
+        // @ts-ignore
+        return React.createElement(Context.Provider, { value: value }, children);
+    };
+    const useCurrentContext = () => useContext(Context);
+    return [Provider, useCurrentContext];
+};

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

@@ -25,6 +25,17 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
      * Set query state (data, error, etc) to initial state.
      */
     reset: () => void;
+    /**
+     * Optimistic update.
+     *
+     * @returns function to revert the changes & function to invalidate the query
+     *
+     * IMPORTANT NOTE: This won't work well on infinite query.
+     */
+    optimisticUpdate: (response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse)) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
     /**
      * Network fetching status.
      */

package/esm/react/create-query.js

@@ -76,8 +76,10 @@ export const createQuery = (queryFn, options = {}) => {
                 preventReplaceResponse.set(hashKeyFn(key), false);
                 queryFn(key, stateBeforeCallQuery)
                     .then((response) => {
-                    if (preventReplaceResponse.get(hashKeyFn(key)))
+                    if (preventReplaceResponse.get(hashKeyFn(key))) {
+                        set({ isWaiting: false });
                         return;
+                    }
                     responseAllPages.push(response);
                     const newPageParam = getNextPageParam(response, responseAllPages.length);
                     newPageParams.push(newPageParam);
@@ -207,6 +209,7 @@ export const createQuery = (queryFn, options = {}) => {
             forceFetch,
             fetchNextPage,
             reset: () => set(INITIAL_QUERY_STATE),
+            optimisticUpdate: (response) => useQuery.optimisticUpdate({ key, response }),
         };
     }, (() => {
         const fetchWindowFocusHandler = () => {

package/esm/react/index.d.ts

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';

package/esm/react/index.js

@@ -0,0 +1,5 @@
+export * from './create-store';
+export * from './create-stores';
+export * from './create-query';
+export * from './create-mutation';
+export * from './with-context';

package/lib/index.d.ts

@@ -1,6 +1,2 @@
 export * from './vanilla';
-export * from './react/create-store';
-export * from './react/create-stores';
-export * from './react/create-query';
-export * from './react/create-mutation';
-export * from './react/with-context';
+export * from './react';

package/lib/index.js

@@ -2,8 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./vanilla"), exports);
-tslib_1.__exportStar(require("./react/create-store"), exports);
-tslib_1.__exportStar(require("./react/create-stores"), exports);
-tslib_1.__exportStar(require("./react/create-query"), exports);
-tslib_1.__exportStar(require("./react/create-mutation"), exports);
-tslib_1.__exportStar(require("./react/with-context"), exports);
+tslib_1.__exportStar(require("./react"), exports);

package/lib/preact/create-mutation.d.ts

@@ -0,0 +1,28 @@
+import { InitStoreOptions } from '../vanilla';
+export type MutationState<TVar, TResponse = any, TError = unknown> = {
+    /**
+     * Network fetching status.
+     */
+    isWaiting: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    response: TResponse | null;
+    responseUpdatedAt: number | null;
+    error: TError | null;
+    errorUpdatedAt: number | null;
+    /**
+     * Mutate function is a promise that will always resolve.
+     */
+    mutate: (variables?: TVar) => Promise<{
+        response?: TResponse;
+        error?: TError;
+        variables?: TVar;
+    }>;
+};
+export type CreateMutationOptions<TVar, TResponse = any, TError = unknown> = InitStoreOptions<MutationState<TVar, TResponse, TError>> & {
+    onMutate?: (variables: TVar | undefined, stateBeforeMutate: MutationState<TVar, TResponse, TError>) => void;
+    onSuccess?: (response: TResponse, variables: TVar | undefined, stateBeforeMutate: MutationState<TVar, TResponse, TError>) => void;
+    onError?: (error: TError, variables: TVar | undefined, stateBeforeMutate: MutationState<TVar, TResponse, TError>) => void;
+    onSettled?: (variables: TVar | undefined, stateBeforeMutate: MutationState<TVar, TResponse, TError>) => void;
+};
+export declare const createMutation: <TVar, TResponse = any, TError = unknown>(mutationFn: (variables: TVar | undefined, state: MutationState<TVar, TResponse, TError>) => Promise<TResponse>, options?: CreateMutationOptions<TVar, TResponse, TError>) => import("./create-store").UseStore<MutationState<TVar, TResponse, TError>>;

package/lib/preact/create-mutation.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMutation = void 0;
+const utils_1 = require("../utils");
+const create_store_1 = require("./create-store");
+const createMutation = (mutationFn, options = {}) => {
+    const { onMutate = utils_1.noop, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, ...createStoreOptions } = options;
+    const useMutation = (0, create_store_1.createStore)(({ set, get }) => ({
+        isWaiting: false,
+        isSuccess: false,
+        isError: false,
+        response: null,
+        responseUpdatedAt: null,
+        error: null,
+        errorUpdatedAt: null,
+        mutate: (variables) => {
+            set({ isWaiting: true });
+            const stateBeforeMutate = get();
+            onMutate(variables, stateBeforeMutate);
+            return new Promise((resolve) => {
+                mutationFn(variables, stateBeforeMutate)
+                    .then((response) => {
+                    set({
+                        isWaiting: false,
+                        isSuccess: true,
+                        isError: false,
+                        response,
+                        responseUpdatedAt: Date.now(),
+                        error: null,
+                        errorUpdatedAt: null,
+                    });
+                    onSuccess(response, variables, stateBeforeMutate);
+                    resolve({ response, variables });
+                })
+                    .catch((error) => {
+                    set({
+                        isWaiting: false,
+                        isSuccess: false,
+                        isError: true,
+                        error,
+                        errorUpdatedAt: Date.now(),
+                    });
+                    onError(error, variables, stateBeforeMutate);
+                    resolve({ error, variables });
+                })
+                    .finally(() => {
+                    onSettled(variables, stateBeforeMutate);
+                });
+            });
+        },
+    }), createStoreOptions);
+    return useMutation;
+};
+exports.createMutation = createMutation;

package/lib/preact/create-query.d.ts

@@ -0,0 +1,197 @@
+import { CreateStoresOptions, StoreKey, UseStores } from './create-stores';
+export type QueryStatus = 'loading' | 'success' | 'error';
+export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = {
+    /**
+     * Query store key, an object that will be hashed into a string as a query store identifier.
+     */
+    key: TKey;
+    /**
+     * Will only be called if the data is stale or empty.
+     */
+    fetch: () => void;
+    /**
+     * Will be called even if the data is still fresh (not stale).
+     */
+    forceFetch: () => void;
+    /**
+     * Fetch next page if has next page.
+     *
+     * If the data is empty, it will just fetch the first page.
+     *
+     * You can ignore this if your query is not paginated.
+     */
+    fetchNextPage: () => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
+    /**
+     * Optimistic update.
+     *
+     * @returns function to revert the changes & function to invalidate the query
+     *
+     * IMPORTANT NOTE: This won't work well on infinite query.
+     */
+    optimisticUpdate: (response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse)) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
+    /**
+     * Network fetching status.
+     */
+    isWaiting: boolean;
+    /**
+     * Network fetching status for fetching next page.
+     */
+    isWaitingNextPage: boolean;
+    /**
+     * Status of the data.
+     *
+     * `"loading"` = no data.
+     *
+     * `"success"` = has data.
+     *
+     * `"error"` = has error.
+     *
+     * It has no relation with network fetching state.
+     * If you're looking for network fetching state, use `isWaiting` instead.
+     */
+    status: QueryStatus;
+    /**
+     * Data state, will be `true` if the query has no data.
+     *
+     * It has no relation with network fetching state.
+     * If you're looking for network fetching state, use `isWaiting` instead.
+     */
+    isLoading: boolean;
+    /**
+     * Data state, will be `true` if the query has a data.
+     */
+    isSuccess: boolean;
+    /**
+     * Error state, will be `true` after data fetching error.
+     */
+    isError: boolean;
+    isRefetching: boolean;
+    isRefetchError: boolean;
+    isPreviousData: boolean;
+    isOptimisticData: boolean;
+    data: TData | null;
+    response: TResponse | null;
+    responseUpdatedAt: number | null;
+    error: TError | null;
+    errorUpdatedAt: number | null;
+    retryCount: number;
+    isGoingToRetry: boolean;
+    pageParam: any;
+    pageParams: any[];
+    hasNextPage: boolean;
+    retryNextPageCount: number;
+    isGoingToRetryNextPage: boolean;
+};
+export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = CreateStoresOptions<TKey, QueryState<TKey, TResponse, TData, TError>> & {
+    select?: (response: TResponse, state: Pick<QueryState<TKey, TResponse, TData, TError>, 'data' | 'key'>) => TData;
+    /**
+     * Stale time in miliseconds.
+     *
+     * Defaults to `3000` (3 seconds).
+     */
+    staleTime?: number;
+    /**
+     * Auto call the query when the component is mounted.
+     *
+     * Defaults to `true`.
+     *
+     * - If set to `true`, the query will be called on mount focus **if the data is stale**.
+     * - If set to `false`, the query won't be called on mount focus.
+     * - If set to `"always"`, the query will be called on mount focus.
+     */
+    fetchOnMount?: boolean | 'always' | ((key: TKey) => boolean | 'always');
+    /**
+     * Defaults to `true`.
+     *
+     * - If set to `true`, the query will be called on window focus **if the data is stale**.
+     * - If set to `false`, the query won't be called on window focus.
+     * - If set to `"always"`, the query will be called on window focus.
+     */
+    fetchOnWindowFocus?: boolean | 'always' | ((key: TKey) => boolean | 'always');
+    /**
+     * If set to `false` or return `false`, the query won't be called in any condition.
+     * Auto fetch on mount will be disabled.
+     * Manually trigger `fetch` method (returned from `createQuery`) won't work too.
+     *
+     * Defaults to `true`.
+     */
+    enabled?: boolean | ((key: TKey) => boolean);
+    /**
+     * Number of maximum error retries.
+     *
+     * Defaults to `1`.
+     */
+    retry?: number | ((error: TError, key: TKey) => number);
+    /**
+     * Error retry delay in miliseconds.
+     *
+     * Defaults to `3000` (3 seconds).
+     */
+    retryDelay?: number | ((error: TError, key: TKey) => number);
+    /**
+     * If set to `true`, previous `data` will be kept when fetching new data because the query key changed.
+     *
+     * This will only happened if there is no `data` in the next query.
+     */
+    keepPreviousData?: boolean;
+    /**
+     * Only set this if you have an infinite query.
+     *
+     * This function should return a variable that will be used when fetching next page (`pageParam`).
+     */
+    getNextPageParam?: (lastPage: TResponse, index: number) => any;
+    onSuccess?: (response: TResponse, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
+    onError?: (error: TError, stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
+    onSettled?: (stateBeforeCallQuery: QueryState<TKey, TResponse, TData, TError>) => void;
+};
+export type UseQuery<TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown> = UseStores<TKey, QueryState<TKey, TResponse, TData, TError>> & {
+    /**
+     * Set query's initial response.
+     *
+     * This is used for server-side rendered page or static page.
+     *
+     * IMPORTANT NOTE: Put this on the root component or parent component, before any component subscribed!
+     */
+    setInitialResponse: (options: {
+        key?: TKey;
+        response: TResponse;
+    }) => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    reset: () => void;
+    /**
+     * Set query state (data, error, etc) to initial state.
+     */
+    resetSpecificKey: (key?: TKey | null) => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
+    invalidate: () => void;
+    /**
+     * Invalidate query means marking a query as stale, and will refetch only if the query is active (has subscriber)
+     */
+    invalidateSpecificKey: (key?: TKey | null) => void;
+    /**
+     * Optimistic update.
+     *
+     * @returns function to revert the changes & function to invalidate the query
+     *
+     * IMPORTANT NOTE: This won't work well on infinite query.
+     */
+    optimisticUpdate: (options: {
+        key?: TKey | null;
+        response: TResponse | ((prevState: QueryState<TKey, TResponse, TData, TError>) => TResponse);
+    }) => {
+        revert: () => void;
+        invalidate: () => void;
+    };
+};
+export declare const createQuery: <TKey extends StoreKey = StoreKey, TResponse = any, TData = TResponse, TError = unknown>(queryFn: (key: TKey, state: QueryState<TKey, TResponse, TData, TError>) => Promise<TResponse>, options?: CreateQueryOptions<TKey, TResponse, TData, TError>) => UseQuery<TKey, TResponse, TData, TError>;