floppy-disk 1.3.0 → 1.4.0-beta.2

package/README.md

@@ -122,6 +122,11 @@ const unsub = useCatStore.subscribe(
 );
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/basic](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/basic)
+> - [https://codesandbox.io/.../examples/react/custom-reactivity](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/custom-reactivity)
+
 ### Advanced Concept
 
 Set the state **silently** (without broadcast the state change to **any subscribers**).
@@ -171,6 +176,11 @@ const useCatStore = createStore(
 );
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/store-event](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/store-event)
+> - [https://codesandbox.io/.../examples/react/intercept](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/intercept)
+
 Let's go wild using IIFE.
 
 ```js
@@ -228,6 +238,10 @@ function CatPageOptimized() {
 }
 ```
 
+> **Examples:**
+>
+> - [https://codesandbox.io/.../examples/react/watch-component](https://codesandbox.io/p/sandbox/github/afiiif/floppy-disk/tree/main/examples/react/watch-component)
+
 Want a local state instead of global state?  
 Or, want to set the initial state inside component?
 

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

@@ -94,6 +94,8 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     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;
@@ -103,12 +105,6 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
      * Defaults to `3000` (3 seconds).
      */
     staleTime?: number;
-    /**
-     * Number of maximum error retries.
-     *
-     * Defaults to `1`.
-     */
-    retry?: number | ((error: TError, key: TKey) => number);
     /**
      * Auto call the query when the component is mounted.
      *
@@ -135,6 +131,18 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
      * 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.
      *

package/esm/react/create-query.js

@@ -1,4 +1,4 @@
-import { identityFn, noop } from '../utils';
+import { hashStoreKey, identityFn, noop } from '../utils';
 import { createStores } from './create-stores';
 const getDecision = (value, param, { ifTrue, ifAlways }) => {
     if (value === true || (typeof value === 'function' && value(param) === true)) {
@@ -29,6 +29,8 @@ const INITIAL_QUERY_STATE = {
     pageParam: undefined,
     pageParams: [undefined],
     hasNextPage: false,
+    retryNextPageCount: 0,
+    isGoingToRetryNextPage: false,
 };
 const useQueryDefaultDeps = (state) => [
     state.data,
@@ -37,14 +39,22 @@ const useQueryDefaultDeps = (state) => [
     state.hasNextPage,
 ];
 export const createQuery = (queryFn, options = {}) => {
-    const { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = DEFAULT_STALE_TIME, retry = 1, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, ...createStoresOptions } = options;
+    const { onFirstSubscribe = noop, onSubscribe = noop, onLastUnsubscribe = noop, onBeforeChangeKey = noop, defaultDeps = useQueryDefaultDeps, select = identityFn, staleTime = DEFAULT_STALE_TIME, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, keepPreviousData, getNextPageParam = () => undefined, onSuccess = noop, onError = noop, onSettled = noop, hashKeyFn = hashStoreKey, ...createStoresOptions } = options;
+    const retryTimeoutId = new Map();
+    const retryNextPageTimeoutId = new Map();
     const useQuery = createStores(({ key: _key, get, set }) => {
         const key = _key;
+        const getRetryProps = (error, retryCount) => {
+            const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
+            const shouldRetry = retryCount < maxRetryCount;
+            const delay = (typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay) || 0;
+            return { shouldRetry, delay };
+        };
         const forceFetch = () => {
             const responseAllPages = [];
             const newPageParams = [undefined];
             let pageParam = undefined;
-            const { isWaiting, isLoading, isGoingToRetry, pageParams } = get();
+            const { isWaiting, isLoading, pageParams } = get();
             if (isWaiting || enabled === false || (typeof enabled === 'function' && !enabled(key)))
                 return;
             if (isLoading)
@@ -52,11 +62,12 @@ export const createQuery = (queryFn, options = {}) => {
             else
                 set({ isWaiting: true, isRefetching: true });
             const callQuery = () => {
-                if (isGoingToRetry) {
+                if (get().isGoingToRetry) {
                     if (isLoading)
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
+                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
                 queryFn(key, stateBeforeCallQuery)
@@ -95,6 +106,7 @@ export const createQuery = (queryFn, options = {}) => {
                     .catch((error) => {
                     const prevState = get();
                     const errorUpdatedAt = Date.now();
+                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
                     set(prevState.isSuccess
                         ? {
                             isWaiting: false,
@@ -105,6 +117,7 @@ export const createQuery = (queryFn, options = {}) => {
                             }, null),
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         }
@@ -113,13 +126,15 @@ export const createQuery = (queryFn, options = {}) => {
                             isError: true,
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         });
-                    const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
-                    if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
-                        callQuery();
+                    if (shouldRetry) {
+                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                            set({ retryCount: prevState.retryCount + 1 });
+                            callQuery();
+                        }, delay));
                     }
                     onError(error, stateBeforeCallQuery);
                 })
@@ -143,7 +158,8 @@ export const createQuery = (queryFn, options = {}) => {
                 return forceFetch();
             if (isWaitingNextPage || !hasNextPage)
                 return;
-            set({ isWaitingNextPage: true });
+            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
+            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -158,12 +174,21 @@ export const createQuery = (queryFn, options = {}) => {
                 });
             })
                 .catch((error) => {
+                const prevState = get();
+                const { shouldRetry, delay } = getRetryProps(error, prevState.retryNextPageCount);
                 set({
                     isWaitingNextPage: false,
                     isError: true,
                     error,
                     errorUpdatedAt: Date.now(),
+                    isGoingToRetryNextPage: shouldRetry,
                 });
+                if (shouldRetry) {
+                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
+                        fetchNextPage();
+                    }, delay));
+                }
             });
         };
         const setResponse = (responseSetter) => {
@@ -214,9 +239,6 @@ export const createQuery = (queryFn, options = {}) => {
             },
         };
     }, (() => {
-        const resetRetryCount = (key) => {
-            useQuery.set(key, { retryCount: 0 }, true);
-        };
         const fetchWindowFocusHandler = () => {
             useQuery.getAllWithSubscriber().forEach((state) => {
                 getDecision(fetchOnWindowFocus, state.key, {
@@ -228,6 +250,7 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
+            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -243,9 +266,11 @@ export const createQuery = (queryFn, options = {}) => {
             },
             onLastUnsubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
-                    window.addEventListener('focus', fetchWindowFocusHandler);
+                    window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
-                resetRetryCount(state.key);
+                useQuery.set(state.key, { retryCount: 0, retryNextPageCount: 0 }, true);
+                clearTimeout(retryTimeoutId.get(hashKeyFn(state.key)));
+                clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(state.key)));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {

package/esm/react/create-stores.js

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { noop } from '../utils';
+import { hashStoreKey, noop } from '../utils';
 import { initStore, } from '../vanilla';
-const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());
 export const createStores = (initializer, options = {}) => {
     const { onBeforeChangeKey = noop, defaultDeps, hashKeyFn = hashStoreKey } = options;
     const stores = new Map();

package/esm/utils/index.d.ts

@@ -1,2 +1,3 @@
 export declare const noop: () => void;
 export declare const identityFn: <T>(a: T) => T;
+export declare const hashStoreKey: (obj?: any) => string;

package/esm/utils/index.js

@@ -1,2 +1,3 @@
 export const noop = () => { };
 export const identityFn = (a) => a;
+export const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());

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

@@ -94,6 +94,8 @@ export type QueryState<TKey extends StoreKey = StoreKey, TResponse = any, TData
     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;
@@ -103,12 +105,6 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
      * Defaults to `3000` (3 seconds).
      */
     staleTime?: number;
-    /**
-     * Number of maximum error retries.
-     *
-     * Defaults to `1`.
-     */
-    retry?: number | ((error: TError, key: TKey) => number);
     /**
      * Auto call the query when the component is mounted.
      *
@@ -135,6 +131,18 @@ export type CreateQueryOptions<TKey extends StoreKey = StoreKey, TResponse = any
      * 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.
      *

package/lib/react/create-query.js

@@ -32,6 +32,8 @@ const INITIAL_QUERY_STATE = {
     pageParam: undefined,
     pageParams: [undefined],
     hasNextPage: false,
+    retryNextPageCount: 0,
+    isGoingToRetryNextPage: false,
 };
 const useQueryDefaultDeps = (state) => [
     state.data,
@@ -40,14 +42,22 @@ const useQueryDefaultDeps = (state) => [
     state.hasNextPage,
 ];
 const createQuery = (queryFn, options = {}) => {
-    const { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = DEFAULT_STALE_TIME, retry = 1, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, ...createStoresOptions } = options;
+    const { onFirstSubscribe = utils_1.noop, onSubscribe = utils_1.noop, onLastUnsubscribe = utils_1.noop, onBeforeChangeKey = utils_1.noop, defaultDeps = useQueryDefaultDeps, select = utils_1.identityFn, staleTime = DEFAULT_STALE_TIME, fetchOnMount = true, fetchOnWindowFocus = true, enabled = true, retry = 1, retryDelay = 3000, keepPreviousData, getNextPageParam = () => undefined, onSuccess = utils_1.noop, onError = utils_1.noop, onSettled = utils_1.noop, hashKeyFn = utils_1.hashStoreKey, ...createStoresOptions } = options;
+    const retryTimeoutId = new Map();
+    const retryNextPageTimeoutId = new Map();
     const useQuery = (0, create_stores_1.createStores)(({ key: _key, get, set }) => {
         const key = _key;
+        const getRetryProps = (error, retryCount) => {
+            const maxRetryCount = (typeof retry === 'function' ? retry(error, key) : retry) || 0;
+            const shouldRetry = retryCount < maxRetryCount;
+            const delay = (typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay) || 0;
+            return { shouldRetry, delay };
+        };
         const forceFetch = () => {
             const responseAllPages = [];
             const newPageParams = [undefined];
             let pageParam = undefined;
-            const { isWaiting, isLoading, isGoingToRetry, pageParams } = get();
+            const { isWaiting, isLoading, pageParams } = get();
             if (isWaiting || enabled === false || (typeof enabled === 'function' && !enabled(key)))
                 return;
             if (isLoading)
@@ -55,11 +65,12 @@ const createQuery = (queryFn, options = {}) => {
             else
                 set({ isWaiting: true, isRefetching: true });
             const callQuery = () => {
-                if (isGoingToRetry) {
+                if (get().isGoingToRetry) {
                     if (isLoading)
                         set({ isGoingToRetry: false, isWaiting: true });
                     else
                         set({ isGoingToRetry: false, isWaiting: true, isRefetching: true });
+                    clearTimeout(retryTimeoutId.get(hashKeyFn(key)));
                 }
                 const stateBeforeCallQuery = { ...get(), pageParam };
                 queryFn(key, stateBeforeCallQuery)
@@ -98,6 +109,7 @@ const createQuery = (queryFn, options = {}) => {
                     .catch((error) => {
                     const prevState = get();
                     const errorUpdatedAt = Date.now();
+                    const { shouldRetry, delay } = getRetryProps(error, prevState.retryCount);
                     set(prevState.isSuccess
                         ? {
                             isWaiting: false,
@@ -108,6 +120,7 @@ const createQuery = (queryFn, options = {}) => {
                             }, null),
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         }
@@ -116,13 +129,15 @@ const createQuery = (queryFn, options = {}) => {
                             isError: true,
                             error,
                             errorUpdatedAt,
+                            isGoingToRetry: shouldRetry,
                             pageParam,
                             hasNextPage: pageParam !== undefined,
                         });
-                    const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
-                    if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
-                        callQuery();
+                    if (shouldRetry) {
+                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                            set({ retryCount: prevState.retryCount + 1 });
+                            callQuery();
+                        }, delay));
                     }
                     onError(error, stateBeforeCallQuery);
                 })
@@ -146,7 +161,8 @@ const createQuery = (queryFn, options = {}) => {
                 return forceFetch();
             if (isWaitingNextPage || !hasNextPage)
                 return;
-            set({ isWaitingNextPage: true });
+            set({ isWaitingNextPage: true, isGoingToRetryNextPage: false });
+            clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(key)));
             queryFn(key, { ...state, pageParam })
                 .then((response) => {
                 const newPageParam = getNextPageParam(response, pageParams.length);
@@ -161,12 +177,21 @@ const createQuery = (queryFn, options = {}) => {
                 });
             })
                 .catch((error) => {
+                const prevState = get();
+                const { shouldRetry, delay } = getRetryProps(error, prevState.retryNextPageCount);
                 set({
                     isWaitingNextPage: false,
                     isError: true,
                     error,
                     errorUpdatedAt: Date.now(),
+                    isGoingToRetryNextPage: shouldRetry,
                 });
+                if (shouldRetry) {
+                    retryNextPageTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                        set({ retryNextPageCount: prevState.retryNextPageCount + 1 });
+                        fetchNextPage();
+                    }, delay));
+                }
             });
         };
         const setResponse = (responseSetter) => {
@@ -217,9 +242,6 @@ const createQuery = (queryFn, options = {}) => {
             },
         };
     }, (() => {
-        const resetRetryCount = (key) => {
-            useQuery.set(key, { retryCount: 0 }, true);
-        };
         const fetchWindowFocusHandler = () => {
             useQuery.getAllWithSubscriber().forEach((state) => {
                 getDecision(fetchOnWindowFocus, state.key, {
@@ -231,6 +253,7 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
+            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -246,9 +269,11 @@ const createQuery = (queryFn, options = {}) => {
             },
             onLastUnsubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
-                    window.addEventListener('focus', fetchWindowFocusHandler);
+                    window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
-                resetRetryCount(state.key);
+                useQuery.set(state.key, { retryCount: 0, retryNextPageCount: 0 }, true);
+                clearTimeout(retryTimeoutId.get(hashKeyFn(state.key)));
+                clearTimeout(retryNextPageTimeoutId.get(hashKeyFn(state.key)));
                 onLastUnsubscribe(state);
             },
             onBeforeChangeKey: (nextKey, prevKey) => {

package/lib/react/create-stores.js

@@ -4,9 +4,8 @@ exports.createStores = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
 const vanilla_1 = require("../vanilla");
-const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());
 const createStores = (initializer, options = {}) => {
-    const { onBeforeChangeKey = utils_1.noop, defaultDeps, hashKeyFn = hashStoreKey } = options;
+    const { onBeforeChangeKey = utils_1.noop, defaultDeps, hashKeyFn = utils_1.hashStoreKey } = options;
     const stores = new Map();
     const getStore = (_key) => {
         const key = _key || {};

package/lib/utils/index.d.ts

@@ -1,2 +1,3 @@
 export declare const noop: () => void;
 export declare const identityFn: <T>(a: T) => T;
+export declare const hashStoreKey: (obj?: any) => string;

package/lib/utils/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.identityFn = exports.noop = void 0;
+exports.hashStoreKey = exports.identityFn = exports.noop = void 0;
 const noop = () => { };
 exports.noop = noop;
 const identityFn = (a) => a;
 exports.identityFn = identityFn;
+const hashStoreKey = (obj) => JSON.stringify(obj, Object.keys(obj).sort());
+exports.hashStoreKey = hashStoreKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "floppy-disk",
-  "version": "1.3.0",
+  "version": "1.4.0-beta.2",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",