floppy-disk 1.3.0-beta.2 → 1.4.0-beta.1

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

@@ -103,12 +103,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 +129,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)) {
@@ -37,7 +37,8 @@ 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 useQuery = createStores(({ key: _key, get, set }) => {
         const key = _key;
         const forceFetch = () => {
@@ -118,8 +119,11 @@ export const createQuery = (queryFn, options = {}) => {
                         });
                     const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
                     if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
-                        callQuery();
+                        const delay = typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay;
+                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                            set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
+                            callQuery();
+                        }, delay));
                     }
                     onError(error, stateBeforeCallQuery);
                 })
@@ -228,6 +232,7 @@ export const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
+            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -243,9 +248,10 @@ export const createQuery = (queryFn, options = {}) => {
             },
             onLastUnsubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
-                    window.addEventListener('focus', fetchWindowFocusHandler);
+                    window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
                 resetRetryCount(state.key);
+                clearTimeout(retryTimeoutId.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

@@ -103,12 +103,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 +129,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

@@ -40,7 +40,8 @@ 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 useQuery = (0, create_stores_1.createStores)(({ key: _key, get, set }) => {
         const key = _key;
         const forceFetch = () => {
@@ -121,8 +122,11 @@ const createQuery = (queryFn, options = {}) => {
                         });
                     const retryCount = typeof retry === 'function' ? retry(error, key) : retry;
                     if (typeof retryCount === 'number' && prevState.retryCount < retryCount) {
-                        set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
-                        callQuery();
+                        const delay = typeof retryDelay === 'function' ? retryDelay(error, key) : retryDelay;
+                        retryTimeoutId.set(hashKeyFn(key), window.setTimeout(() => {
+                            set({ retryCount: prevState.retryCount + 1, isGoingToRetry: true });
+                            callQuery();
+                        }, delay));
                     }
                     onError(error, stateBeforeCallQuery);
                 })
@@ -231,6 +235,7 @@ const createQuery = (queryFn, options = {}) => {
         return {
             ...createStoresOptions,
             defaultDeps,
+            hashKeyFn,
             onFirstSubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
                     window.addEventListener('focus', fetchWindowFocusHandler);
@@ -246,9 +251,10 @@ const createQuery = (queryFn, options = {}) => {
             },
             onLastUnsubscribe: (state) => {
                 if (typeof window !== 'undefined' && fetchOnWindowFocus) {
-                    window.addEventListener('focus', fetchWindowFocusHandler);
+                    window.removeEventListener('focus', fetchWindowFocusHandler);
                 }
                 resetRetryCount(state.key);
+                clearTimeout(retryTimeoutId.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-beta.2",
+  "version": "1.4.0-beta.1",
   "description": "FloppyDisk - lightweight, simple, and powerful state management library",
   "keywords": [
     "state",