icode-hooks 0.3.0

package/es/useRequest/src/Fetch.js

@@ -0,0 +1,161 @@
+import { __assign, __awaiter, __generator, __read, __rest, __spreadArray } from "tslib";
+/* eslint-disable @typescript-eslint/no-parameter-properties */
+import { isFunction } from '../../utils';
+var Fetch = /** @class */function () {
+  function Fetch(serviceRef, options, subscribe, initState) {
+    if (initState === void 0) {
+      initState = {};
+    }
+    this.serviceRef = serviceRef;
+    this.options = options;
+    this.subscribe = subscribe;
+    this.initState = initState;
+    this.count = 0;
+    this.state = {
+      loading: false,
+      params: undefined,
+      data: undefined,
+      error: undefined
+    };
+    this.state = __assign(__assign(__assign({}, this.state), {
+      loading: !options.manual
+    }), initState);
+  }
+  Fetch.prototype.setState = function (s) {
+    if (s === void 0) {
+      s = {};
+    }
+    this.state = __assign(__assign({}, this.state), s);
+    this.subscribe();
+  };
+  //「同一生命周期点，依次问所有插件，再把它们返回的东西合并成一份」
+  Fetch.prototype.runPluginHandler = function (event) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest[_i - 1] = arguments[_i];
+    }
+    // @ts-ignore
+    var r = this.pluginImpls.map(function (i) {
+      var _a;
+      return (_a = i[event]) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([i], __read(rest), false));
+    }).filter(Boolean);
+    return r.reduce(function (acc, cur) {
+      return Object.assign(acc, cur);
+    }, {});
+  };
+  Fetch.prototype.runAsync = function () {
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+      params[_i] = arguments[_i];
+    }
+    return __awaiter(this, void 0, void 0, function () {
+      var currentCount, _a, _b, stopNow, _c, returnNow, state, servicePromise, res, error_1;
+      var _d;
+      var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+      return __generator(this, function (_q) {
+        switch (_q.label) {
+          case 0:
+            this.count += 1;
+            currentCount = this.count;
+            _a = this.runPluginHandler('onBefore', params), _b = _a.stopNow, stopNow = _b === void 0 ? false : _b, _c = _a.returnNow, returnNow = _c === void 0 ? false : _c, state = __rest(_a, ["stopNow", "returnNow"]);
+            // stop request
+            if (stopNow) {
+              return [2 /*return*/, new Promise(function () {})];
+            }
+            this.setState(__assign({
+              loading: true,
+              params: params
+            }, state));
+            // return now 缓存场景下，直接返回缓存数据
+            if (returnNow) {
+              return [2 /*return*/, Promise.resolve(state.data)];
+            }
+            (_f = (_e = this.options).onBefore) === null || _f === void 0 ? void 0 : _f.call(_e, params);
+            _q.label = 1;
+          case 1:
+            _q.trys.push([1, 3,, 4]);
+            servicePromise = this.runPluginHandler('onRequest', this.serviceRef.current, params).servicePromise;
+            if (!servicePromise) {
+              servicePromise = (_d = this.serviceRef).current.apply(_d, __spreadArray([], __read(params), false));
+            }
+            console.log('servicePromise', servicePromise);
+            return [4 /*yield*/, servicePromise];
+          case 2:
+            res = _q.sent();
+            if (currentCount !== this.count) {
+              // prevent run.then when request is canceled
+              return [2 /*return*/, new Promise(function () {})];
+            }
+            // const formattedResult = this.options.formatResultRef.current ? this.options.formatResultRef.current(res) : res;
+            this.setState({
+              data: res,
+              error: undefined,
+              loading: false
+            });
+            (_h = (_g = this.options).onSuccess) === null || _h === void 0 ? void 0 : _h.call(_g, res, params);
+            this.runPluginHandler('onSuccess', res, params);
+            (_k = (_j = this.options).onFinally) === null || _k === void 0 ? void 0 : _k.call(_j, params, res, undefined);
+            if (currentCount === this.count) {
+              this.runPluginHandler('onFinally', params, res, undefined);
+            }
+            return [2 /*return*/, res];
+          case 3:
+            error_1 = _q.sent();
+            if (currentCount !== this.count) {
+              // prevent run.then when request is canceled
+              return [2 /*return*/, new Promise(function () {})];
+            }
+            this.setState({
+              error: error_1,
+              loading: false
+            });
+            (_m = (_l = this.options).onError) === null || _m === void 0 ? void 0 : _m.call(_l, error_1, params);
+            this.runPluginHandler('onError', error_1, params);
+            (_p = (_o = this.options).onFinally) === null || _p === void 0 ? void 0 : _p.call(_o, params, undefined, error_1);
+            if (currentCount === this.count) {
+              this.runPluginHandler('onFinally', params, undefined, error_1);
+            }
+            throw error_1;
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  Fetch.prototype.run = function () {
+    var _this = this;
+    var params = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+      params[_i] = arguments[_i];
+    }
+    this.runAsync.apply(this, __spreadArray([], __read(params), false)).catch(function (error) {
+      if (!_this.options.onError) {
+        console.error(error);
+      }
+    });
+  };
+  Fetch.prototype.cancel = function () {
+    this.count += 1;
+    this.setState({
+      loading: false
+    });
+    this.runPluginHandler('onCancel');
+  };
+  Fetch.prototype.refresh = function () {
+    // @ts-ignore
+    this.run.apply(this, __spreadArray([], __read(this.state.params || []), false));
+  };
+  Fetch.prototype.refreshAsync = function () {
+    // @ts-ignore
+    return this.runAsync.apply(this, __spreadArray([], __read(this.state.params || []), false));
+  };
+  Fetch.prototype.mutate = function (data) {
+    var targetData = isFunction(data) ? data(this.state.data) : data;
+    this.runPluginHandler('onMutate', targetData);
+    this.setState({
+      data: targetData
+    });
+  };
+  return Fetch;
+}();
+export default Fetch;

package/es/useRequest/src/plugins/useAutoRunPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useAutoRunPlugin: Plugin<any, any[]>;
+export default useAutoRunPlugin;

package/es/useRequest/src/plugins/useAutoRunPlugin.js

@@ -0,0 +1,56 @@
+import { __read, __spreadArray } from "tslib";
+import { useRef } from 'react';
+import useUpdateEffect from '../../../useUpdateEffect';
+// 自动请求插件
+var useAutoRunPlugin = function (fetchInstance, _a) {
+  var manual = _a.manual,
+    _b = _a.ready,
+    ready = _b === void 0 ? true : _b,
+    _c = _a.defaultParams,
+    defaultParams = _c === void 0 ? [] : _c,
+    _d = _a.refreshDeps,
+    refreshDeps = _d === void 0 ? [] : _d,
+    refreshDepsAction = _a.refreshDepsAction;
+  var hasAutoRun = useRef(false);
+  hasAutoRun.current = false;
+  useUpdateEffect(function () {
+    if (!manual && ready) {
+      hasAutoRun.current = true;
+      fetchInstance.run.apply(fetchInstance, __spreadArray([], __read(defaultParams), false));
+    }
+  }, [ready]);
+  useUpdateEffect(function () {
+    if (hasAutoRun.current) {
+      return;
+    }
+    if (!manual) {
+      hasAutoRun.current = true;
+      console.log('refreshDeps', refreshDeps, refreshDepsAction);
+      if (refreshDepsAction) {
+        refreshDepsAction();
+      } else {
+        fetchInstance.refresh();
+      }
+    }
+  }, __spreadArray([], __read(refreshDeps), false));
+  return {
+    onBefore: function () {
+      if (!ready) {
+        //ready == false | undefined 不请求
+        return {
+          stopNow: true
+        };
+      }
+    }
+  };
+};
+useAutoRunPlugin.onInit = function (_a) {
+  var _b = _a.ready,
+    ready = _b === void 0 ? true : _b,
+    manual = _a.manual;
+  // 自动请求插件初始化时，设置 loading 状态  ready = true 自动请求
+  return {
+    loading: !manual && ready
+  };
+};
+export default useAutoRunPlugin;

package/es/useRequest/src/plugins/useCachePlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useCachePlugin: Plugin<any, any[]>;
+export default useCachePlugin;

package/es/useRequest/src/plugins/useCachePlugin.js

@@ -0,0 +1,143 @@
+import { __read, __spreadArray } from "tslib";
+import { useRef } from 'react';
+import useCreation from '../../../useCreation';
+import useUnmount from '../../../useUnmount';
+import { setCache, getCache } from '../utils/cache';
+import { setCachePromise, getCachePromise } from '../utils/cachePromise';
+import { trigger, subscribe } from '../utils/cacheSubscribe';
+var useCachePlugin = function (fetchInstance, _a) {
+  var cacheKey = _a.cacheKey,
+    _b = _a.cacheTime,
+    cacheTime = _b === void 0 ? 5 * 60 * 1000 : _b,
+    _c = _a.staleTime,
+    staleTime = _c === void 0 ? 0 : _c,
+    customSetCache = _a.setCache,
+    customGetCache = _a.getCache;
+  var unSubscribeRef = useRef();
+  var currentPromiseRef = useRef();
+  var _setCache = function (key, cachedData) {
+    if (customSetCache) {
+      customSetCache(cachedData);
+    } else {
+      setCache(key, cacheTime, cachedData);
+    }
+    trigger(key, cachedData.data);
+  };
+  var _getCache = function (key, params) {
+    if (params === void 0) {
+      params = [];
+    }
+    if (customGetCache) {
+      return customGetCache(params);
+    }
+    return getCache(key);
+  };
+  useCreation(function () {
+    if (!cacheKey) {
+      return;
+    }
+    // get data from cache when init
+    var cacheData = _getCache(cacheKey);
+    if (cacheData && Object.hasOwnProperty.call(cacheData, 'data')) {
+      fetchInstance.state.data = cacheData.data;
+      fetchInstance.state.params = cacheData.params;
+      if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
+        fetchInstance.state.loading = false;
+      }
+    }
+    // 订阅相同的cachekey更新，触发更新
+    unSubscribeRef.current = subscribe(cacheKey, function (data) {
+      fetchInstance.setState({
+        data: data
+      });
+    });
+  }, []);
+  useUnmount(function () {
+    var _a;
+    (_a = unSubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unSubscribeRef);
+  });
+  // 有缓存才会走下面逻辑
+  if (!cacheKey) {
+    return {};
+  }
+  return {
+    onBefore: function (params) {
+      // 缓存场景下，直接返回缓存数据
+      var cacheData = _getCache(cacheKey, params);
+      console.log('cacheData', cacheData, '74');
+      if (!cacheData || !Object.hasOwnProperty.call(cacheData, 'data')) {
+        return {};
+      }
+      // If the data is fresh, stop request
+      if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
+        return {
+          loading: false,
+          data: cacheData === null || cacheData === void 0 ? void 0 : cacheData.data,
+          error: undefined,
+          returnNow: true
+        };
+      } else {
+        // If the data is stale, return data, and request continue
+        return {
+          data: cacheData === null || cacheData === void 0 ? void 0 : cacheData.data,
+          error: undefined
+        };
+      }
+    },
+    onRequest: function (service, args) {
+      var servicePromise = getCachePromise(cacheKey);
+      console.log('service', servicePromise, args, 'cachePlugin');
+      // If has servicePromise, and is not trigger by self, then use it
+      if (servicePromise && servicePromise !== currentPromiseRef.current) {
+        return {
+          servicePromise: servicePromise
+        };
+      }
+      servicePromise = service.apply(void 0, __spreadArray([], __read(args), false));
+      currentPromiseRef.current = servicePromise;
+      setCachePromise(cacheKey, servicePromise);
+      return {
+        servicePromise: servicePromise
+      };
+    },
+    onSuccess: function (data, params) {
+      var _a;
+      console.log('onSuccess', cacheKey, data);
+      if (cacheKey) {
+        // cancel subscribe, avoid trgger self
+        (_a = unSubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unSubscribeRef);
+        _setCache(cacheKey, {
+          data: data,
+          params: params,
+          time: new Date().getTime()
+        });
+        // resubscribe
+        unSubscribeRef.current = subscribe(cacheKey, function (d) {
+          console.log('subscribe', d);
+          fetchInstance.setState({
+            data: d
+          });
+        });
+      }
+    },
+    onMutate: function (data) {
+      var _a;
+      if (cacheKey) {
+        // cancel subscribe, avoid trigger self
+        (_a = unSubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unSubscribeRef);
+        _setCache(cacheKey, {
+          data: data,
+          params: fetchInstance.state.params,
+          time: new Date().getTime()
+        });
+        // resubscribe
+        unSubscribeRef.current = subscribe(cacheKey, function (d) {
+          fetchInstance.setState({
+            data: d
+          });
+        });
+      }
+    }
+  };
+};
+export default useCachePlugin;

package/es/useRequest/src/plugins/useDebouncePlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useDebouncePlugin: Plugin<any, any[]>;
+export default useDebouncePlugin;

package/es/useRequest/src/plugins/useDebouncePlugin.js

@@ -0,0 +1,61 @@
+import { __read, __spreadArray } from "tslib";
+import { debounce } from 'lodash-es';
+import { useEffect, useMemo, useRef } from 'react';
+var useDebouncePlugin = function (fetchInstance, _a) {
+  var debounceWait = _a.debounceWait,
+    debounceLeading = _a.debounceLeading,
+    debounceTrailing = _a.debounceTrailing,
+    debounceMaxWait = _a.debounceMaxWait;
+  var debouncedRef = useRef();
+  // 防抖配置 契合 lodash.debounce 的配置
+  var options = useMemo(function () {
+    var ret = {};
+    if (debounceLeading !== undefined) {
+      ret.leading = debounceLeading;
+    }
+    if (debounceTrailing !== undefined) {
+      ret.trailing = debounceTrailing;
+    }
+    if (debounceMaxWait !== undefined) {
+      ret.maxWait = debounceMaxWait;
+    }
+    return ret;
+  }, [debounceLeading, debounceTrailing, debounceMaxWait]);
+  useEffect(function () {
+    if (debounceWait) {
+      var _originRunAsync_1 = fetchInstance.runAsync.bind(fetchInstance);
+      debouncedRef.current = debounce(function (callback) {
+        callback();
+      }, debounceWait, options);
+      // debounce runAsync should be promise
+      // https://github.com/lodash/lodash/issues/4400#issuecomment-834800398
+      fetchInstance.runAsync = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+          args[_i] = arguments[_i];
+        }
+        return new Promise(function (resolve, reject) {
+          var _a;
+          (_a = debouncedRef.current) === null || _a === void 0 ? void 0 : _a.call(debouncedRef, function () {
+            _originRunAsync_1.apply(void 0, __spreadArray([], __read(args), false)).then(resolve).catch(reject);
+          });
+        });
+      };
+      return function () {
+        var _a;
+        (_a = debouncedRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+        fetchInstance.runAsync = _originRunAsync_1; // 取消防抖后，恢复原来的 runAsync
+      };
+    }
+  }, [debounceWait, options]);
+  if (!debounceWait) {
+    return {};
+  }
+  return {
+    onCancel: function () {
+      var _a;
+      (_a = debouncedRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
+    }
+  };
+};
+export default useDebouncePlugin;

package/es/useRequest/src/plugins/useLoadingDelayPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useLoadingDelayPlugin: Plugin<any, any[]>;
+export default useLoadingDelayPlugin;

package/es/useRequest/src/plugins/useLoadingDelayPlugin.js

@@ -0,0 +1,40 @@
+import { useRef } from 'react';
+var useLoadingDelayPlugin = function (fetchInstance, _a) {
+  var loadingDelay = _a.loadingDelay,
+    ready = _a.ready;
+  var timerRef = useRef();
+  if (!loadingDelay) {
+    return {};
+  }
+  var cancelTimeout = function () {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+  return {
+    onBefore: function () {
+      cancelTimeout();
+      // Two cases:
+      // 1. ready === undefined
+      // 2. ready === true
+      console.log('ready', ready);
+      if (ready !== false) {
+        timerRef.current = setTimeout(function () {
+          fetchInstance.setState({
+            loading: true
+          });
+        }, loadingDelay);
+      }
+      return {
+        loading: false
+      };
+    },
+    onFinally: function () {
+      cancelTimeout();
+    },
+    onCancel: function () {
+      cancelTimeout();
+    }
+  };
+};
+export default useLoadingDelayPlugin;

package/es/useRequest/src/plugins/usePollingPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const usePollingPlugin: Plugin<any, any[]>;
+export default usePollingPlugin;

package/es/useRequest/src/plugins/usePollingPlugin.js

@@ -0,0 +1,65 @@
+import { useRef } from 'react';
+import useUpdateEffect from '../../../useUpdateEffect';
+import isDocumentVisible from '../utils/isDocumentVisible';
+import subscribeReVisible from '../utils/subscribeReVisible';
+// 轮询插件
+var usePollingPlugin = function (fetchInstance, _a) {
+  var pollingInterval = _a.pollingInterval,
+    _b = _a.pollingWhenHidden,
+    pollingWhenHidden = _b === void 0 ? true : _b,
+    _c = _a.pollingErrorRetryCount,
+    pollingErrorRetryCount = _c === void 0 ? -1 : _c;
+  var timerRef = useRef();
+  var unsubscribeRef = useRef();
+  var countRef = useRef(0);
+  var stopPolling = function () {
+    var _a;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
+  };
+  useUpdateEffect(function () {
+    if (!pollingInterval) {
+      stopPolling();
+    }
+  }, [pollingInterval]);
+  if (!pollingInterval) {
+    return {};
+  }
+  return {
+    onBefore: function () {
+      stopPolling();
+    },
+    onError: function () {
+      countRef.current += 1;
+    },
+    onSuccess: function () {
+      countRef.current = 0;
+    },
+    onFinally: function () {
+      if (pollingErrorRetryCount === -1 ||
+      // When an error occurs, the request is not repeated after pollingErrorRetryCount retries
+      pollingErrorRetryCount !== -1 && countRef.current <= pollingErrorRetryCount) {
+        timerRef.current = setTimeout(function () {
+          // if pollingWhenHidden = false && document is hidden, then stop polling and subscribe revisible
+          if (!pollingWhenHidden && !isDocumentVisible()) {
+            // 在页面隐藏时会暂时停止轮询，页面重新显示时继续上次轮询。
+            unsubscribeRef.current = subscribeReVisible(function () {
+              fetchInstance.refresh();
+            });
+          } else {
+            // 如果页面可见，则刷新请求
+            fetchInstance.refresh();
+          }
+        }, pollingInterval);
+      } else {
+        countRef.current = 0;
+      }
+    },
+    onCancel: function () {
+      stopPolling();
+    }
+  };
+};
+export default usePollingPlugin;

package/es/useRequest/src/plugins/useRefreshOnWindowFocusPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useRefreshOnWindowFocusPlugin: Plugin<any, any[]>;
+export default useRefreshOnWindowFocusPlugin;

package/es/useRequest/src/plugins/useRefreshOnWindowFocusPlugin.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import useUnmount from '../../../useUnmount';
+import limit from '../utils/limit';
+import subscribeFocus from '../utils/subscribeFocus';
+var useRefreshOnWindowFocusPlugin = function (fetchInstance, _a) {
+  var refreshOnWindowFocus = _a.refreshOnWindowFocus,
+    _b = _a.focusTimespan,
+    focusTimespan = _b === void 0 ? 5000 : _b;
+  var unsubscribeRef = useRef();
+  var stopSubscribe = function () {
+    var _a;
+    (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
+  };
+  useEffect(function () {
+    if (refreshOnWindowFocus) {
+      var limitRefresh_1 = limit(fetchInstance.refresh.bind(fetchInstance), focusTimespan);
+      unsubscribeRef.current = subscribeFocus(function () {
+        limitRefresh_1();
+      });
+    }
+    return function () {
+      stopSubscribe();
+    };
+  }, [refreshOnWindowFocus, focusTimespan]);
+  useUnmount(function () {
+    stopSubscribe();
+  });
+  return {};
+};
+export default useRefreshOnWindowFocusPlugin;

package/es/useRequest/src/plugins/useRetryPlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useRetryPlugin: Plugin<any, any[]>;
+export default useRetryPlugin;

package/es/useRequest/src/plugins/useRetryPlugin.js

@@ -0,0 +1,45 @@
+import { useRef } from 'react';
+var useRetryPlugin = function (fetchInstance, _a) {
+  var retryInterval = _a.retryInterval,
+    retryCount = _a.retryCount;
+  var timerRef = useRef();
+  var countRef = useRef(0);
+  var triggerByRetry = useRef(false);
+  if (!retryCount) {
+    return {};
+  }
+  return {
+    onBefore: function () {
+      if (!triggerByRetry.current) {
+        countRef.current = 0;
+      }
+      triggerByRetry.current = false;
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    onSuccess: function () {
+      countRef.current = 0;
+    },
+    onError: function () {
+      countRef.current += 1;
+      if (retryCount === -1 || countRef.current <= retryCount) {
+        // Exponential backoff
+        var timeout = retryInterval !== null && retryInterval !== void 0 ? retryInterval : Math.min(1000 * Math.pow(2, countRef.current), 30000);
+        timerRef.current = setTimeout(function () {
+          triggerByRetry.current = true;
+          fetchInstance.refresh();
+        }, timeout);
+      } else {
+        countRef.current = 0;
+      }
+    },
+    onCancel: function () {
+      countRef.current = 0;
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    }
+  };
+};
+export default useRetryPlugin;

package/es/useRequest/src/plugins/useThrottlePlugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from '../types';
+declare const useThrottlePlugin: Plugin<any, any[]>;
+export default useThrottlePlugin;