@ahoo-wang/fetcher-react 1.8.5 → 1.8.8

package/README.md

@@ -26,6 +26,88 @@ npm install @ahoo-wang/fetcher-react
 
 ## Usage
 
+### useFetcher Hook
+
+The `useFetcher` hook provides a convenient way to fetch data in React components with automatic state management for
+loading, error, and result states.
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const MyComponent = () => {
+  const { loading, error, result, execute, cancel } = useFetcher({
+    url: '/api/users',
+    method: 'GET'
+  });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+      <button onClick={execute}>Refresh</button>
+      <button onClick={cancel}>Cancel</button>
+    </div>
+  );
+};
+```
+
+### Manual Execution
+
+To manually control when the fetch occurs, set the `immediate` option to `false`:
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const MyComponent = () => {
+  const { loading, error, result, execute } = useFetcher({
+    url: '/api/users',
+    method: 'POST',
+    body: JSON.stringify({ name: 'John' })
+  }, { immediate: false });
+
+  const handleSubmit = async () => {
+    await execute();
+  };
+
+  if (loading) return <div>Submitting...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
+      <button onClick={handleSubmit}>Submit</button>
+    </div>
+  );
+};
+```
+
+### Custom Dependencies
+
+You can specify dependencies that will trigger a refetch when they change:
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const UserProfile = ({ userId }: { userId: string }) => {
+  const { loading, error, result } = useFetcher({
+    url: `/api/users/${userId}`,
+    method: 'GET'
+  }, { deps: [userId] });
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div>
+      <h1>{result?.name}</h1>
+      <p>{result?.email}</p>
+    </div>
+  );
+};
+```
+
 ### useKeyStorage Hook
 
 The `useKeyStorage` hook provides state management for a KeyStorage instance. It subscribes to storage changes and
@@ -77,6 +159,37 @@ const [user, setUser] = useKeyStorage(userStorage);
 
 ## API Reference
 
+### useFetcher
+
+```typescript
+function useFetcher<R>(
+  request: FetchRequest,
+  options?: UseFetcherOptions
+): UseFetcherResult<R>
+```
+
+A React hook that provides data fetching capabilities with automatic state management.
+
+**Parameters:**
+
+- `request`: The fetch request configuration
+- `options`: Configuration options for the fetch operation
+    - `deps`: Dependencies list for the fetch operation. When provided, the hook will re-fetch when any of these values
+      change.
+    - `immediate`: Whether the fetch operation should execute immediately upon component mount. Defaults to `true`.
+    - `fetcher`: Custom fetcher instance to use. Defaults to the default fetcher.
+
+**Returns:**
+
+An object containing:
+
+- `loading`: Indicates if the fetch operation is currently in progress
+- `exchange`: The FetchExchange object representing the ongoing fetch operation
+- `result`: The data returned by the fetch operation
+- `error`: Any error that occurred during the fetch operation
+- `execute`: Function to manually trigger the fetch operation
+- `cancel`: Function to cancel the ongoing fetch operation
+
 ### useKeyStorage
 
 ```typescript jsx

package/README.zh-CN.md

@@ -25,6 +25,87 @@ npm install @ahoo-wang/fetcher-react
 
 ## 使用方法
 
+### useFetcher Hook
+
+`useFetcher` hook 提供了一种在 React 组件中获取数据的便捷方式，具有自动管理加载、错误和结果状态的功能。
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const MyComponent = () => {
+  const { loading, error, result, execute, cancel } = useFetcher({
+    url: '/api/users',
+    method: 'GET'
+  });
+
+  if (loading) return <div>加载中...</div>;
+  if (error) return <div>错误: {error.message}</div>;
+  
+  return (
+    <div>
+      <pre>{JSON.stringify(result, null, 2)}</pre>
+      <button onClick={execute}>刷新</button>
+      <button onClick={cancel}>取消</button>
+    </div>
+  );
+};
+```
+
+### 手动执行
+
+要手动控制获取数据的时机，请将 `immediate` 选项设置为 `false`：
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const MyComponent = () => {
+  const { loading, error, result, execute } = useFetcher({
+    url: '/api/users',
+    method: 'POST',
+    body: JSON.stringify({ name: 'John' })
+  }, { immediate: false });
+
+  const handleSubmit = async () => {
+    await execute();
+  };
+
+  if (loading) return <div>提交中...</div>;
+  if (error) return <div>错误: {error.message}</div>;
+  
+  return (
+    <div>
+      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
+      <button onClick={handleSubmit}>提交</button>
+    </div>
+  );
+};
+```
+
+### 自定义依赖项
+
+您可以指定依赖项，当它们发生变化时会触发重新获取：
+
+```typescript jsx
+import { useFetcher } from '@ahoo-wang/fetcher-react';
+
+const UserProfile = ({ userId }: { userId: string }) => {
+  const { loading, error, result } = useFetcher({
+    url: `/api/users/${userId}`,
+    method: 'GET'
+  }, { deps: [userId] });
+
+  if (loading) return <div>加载中...</div>;
+  if (error) return <div>错误: {error.message}</div>;
+  
+  return (
+    <div>
+      <h1>{result?.name}</h1>
+      <p>{result?.email}</p>
+    </div>
+  );
+};
+```
+
 ### useKeyStorage Hook
 
 `useKeyStorage` hook 为 KeyStorage 实例提供状态管理。它订阅存储变化并返回当前值以及设置值的函数。
@@ -72,6 +153,36 @@ const [user, setUser] = useKeyStorage(userStorage);
 
 ## API 参考
 
+### useFetcher
+
+```typescript
+function useFetcher<R>(
+  request: FetchRequest,
+  options?: UseFetcherOptions
+): UseFetcherResult<R>
+```
+
+提供数据获取功能并自动管理状态的 React hook。
+
+**参数:**
+
+- `request`: 获取数据的请求配置
+- `options`: 获取数据操作的配置选项
+    - `deps`: 获取数据操作的依赖项列表。提供时，当这些值中的任何一个发生变化时，hook 将重新获取数据。
+    - `immediate`: 获取数据操作是否应在组件挂载时立即执行。默认为 `true`。
+    - `fetcher`: 要使用的自定义获取器实例。默认为默认获取器。
+
+**返回值:**
+
+包含以下属性的对象：
+
+- `loading`: 指示获取数据操作当前是否正在进行中
+- `exchange`: 代表正在进行的获取数据操作的 FetchExchange 对象
+- `result`: 获取数据操作返回的数据
+- `error`: 获取数据操作期间发生的任何错误
+- `execute`: 手动触发获取数据操作的函数
+- `cancel`: 取消正在进行的获取数据操作的函数
+
 ### useKeyStorage
 
 ```typescript jsx

package/dist/fetcher/index.d.ts

@@ -1 +1,2 @@
+export * from './useFetcher';
 //# sourceMappingURL=index.d.ts.map

package/dist/fetcher/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fetcher/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fetcher/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC"}

package/dist/fetcher/useFetcher.d.ts

@@ -0,0 +1,35 @@
+import { FetcherCapable, FetchExchange, FetchRequest, RequestOptions } from '@ahoo-wang/fetcher';
+/**
+ * Configuration options for the useFetcher hook.
+ * Extends RequestOptions and FetcherCapable interfaces.
+ */
+export interface UseFetcherOptions extends RequestOptions, FetcherCapable {
+    /**
+     * Whether the fetch operation should execute immediately upon component mount.
+     * Defaults to true.
+     */
+    readonly immediate?: boolean;
+}
+/**
+ * The result object returned by the useFetcher hook.
+ * @template R - The type of the data returned by the fetch operation
+ */
+export interface UseFetcherResult<R> {
+    /** Indicates if the fetch operation is currently in progress */
+    loading: boolean;
+    /** The FetchExchange object representing the ongoing fetch operation */
+    exchange?: FetchExchange;
+    /** The data returned by the fetch operation, or undefined if not yet loaded or an error occurred */
+    result?: R;
+    /** Any error that occurred during the fetch operation, or undefined if no error */
+    error?: unknown;
+    /**
+     * Function to manually trigger the fetch operation.
+     * Useful for fetching data on demand rather than automatically.
+     */
+    execute: () => Promise<void>;
+    /** Function to cancel the ongoing fetch operation */
+    cancel: () => void;
+}
+export declare function useFetcher<R>(request: FetchRequest, options?: UseFetcherOptions): UseFetcherResult<R>;
+//# sourceMappingURL=useFetcher.d.ts.map

package/dist/fetcher/useFetcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetcher.d.ts","sourceRoot":"","sources":["../../src/fetcher/useFetcher.ts"],"names":[],"mappings":"AAaA,OAAO,EAEL,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAc,EACf,MAAM,oBAAoB,CAAC;AAI5B;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,EAAE,cAAc;IACvE;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,gEAAgE;IAChE,OAAO,EAAE,OAAO,CAAC;IAEjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,aAAa,CAAC;IAEzB,oGAAoG;IACpG,MAAM,CAAC,EAAE,CAAC,CAAC;IAEX,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,qDAAqD;IACrD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,iBAAiB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAmErG"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './storage';
+export * from './fetcher';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}

package/dist/index.es.js

@@ -1,22 +1,63 @@
-import { useCallback as n, useSyncExternalStore as l } from "react";
-function i(s) {
-  const e = n(
-    (t) => s.addListener(t),
-    [s]
-  ), c = n(
-    () => s.get(),
-    [s]
-  ), u = l(
+import { useCallback as u, useSyncExternalStore as F, useRef as h, useEffect as v, useState as i } from "react";
+import { fetcher as p, getFetcher as A } from "@ahoo-wang/fetcher";
+function S(t) {
+  const e = u(
+    (n) => t.addListener(n),
+    [t]
+  ), s = u(
+    () => t.get(),
+    [t]
+  ), a = F(
     e,
-    c,
-    c
-  ), o = n(
-    (t) => s.set(t),
-    [s]
+    s,
+    s
+  ), f = u(
+    (n) => t.set(n),
+    [t]
   );
-  return [u, o];
+  return [a, f];
+}
+function L() {
+  var t = h(!1), e = u(function() {
+    return t.current;
+  }, []);
+  return v(function() {
+    return t.current = !0, function() {
+      t.current = !1;
+    };
+  }, []), e;
+}
+function V(t, e) {
+  const { fetcher: s = p, immediate: a = !0 } = e || {}, [f, n] = i(!1), [m, d] = i(void 0), [x, g] = i(void 0), [C, E] = i(void 0), c = L(), r = h(), b = A(s), l = u(async () => {
+    r.current && r.current.abort(), r.current = t.abortController ?? new AbortController(), t.abortController = r.current, c() && (n(!0), d(void 0));
+    try {
+      const o = await b.exchange(t, e);
+      c() && g(o);
+      const w = await o.extractResult();
+      c() && E(w);
+    } catch (o) {
+      if (o instanceof Error && o.name === "AbortError")
+        return;
+      c() && d(o);
+    } finally {
+      c() && n(!1), r.current === t.abortController && (r.current = void 0);
+    }
+  }, [b, t, c, e]), R = u(() => {
+    r.current?.abort();
+  }, []);
+  return v(() => (a && l(), () => {
+    r.current?.abort(), r.current = void 0;
+  }), [l, t, a]), {
+    loading: f,
+    exchange: x,
+    result: C,
+    error: m,
+    execute: l,
+    cancel: R
+  };
 }
 export {
-  i as useKeyStorage
+  V as useFetcher,
+  S as useKeyStorage
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/storage/useKeyStorage.ts"],"sourcesContent":["/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { KeyStorage } from '@ahoo-wang/fetcher-storage';\n\n/**\n * A React hook that provides state management for a KeyStorage instance.\n * Subscribes to storage changes and returns the current value along with a setter function.\n *\n * @template T - The type of value stored in the key storage\n * @param keyStorage - The KeyStorage instance to subscribe to and manage\n * @returns A tuple containing the current stored value and a function to update it\n */\nexport function useKeyStorage<T>(\n  keyStorage: KeyStorage<T>,\n): [T | null, (value: T) => void] {\n  const subscribe = useCallback(\n    (callback: () => void) => keyStorage.addListener(callback),\n    [keyStorage],\n  );\n  const getSnapshot = useCallback(\n    () => keyStorage.get(),\n    [keyStorage],\n  );\n  const value = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n  const setValue = useCallback(\n    (value: T) => keyStorage.set(value),\n    [keyStorage],\n  );\n  return [value, setValue];\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","value","useSyncExternalStore","setValue"],"mappings":";AAwBO,SAASA,EACdC,GACgC;AAChC,QAAMC,IAAYC;AAAA,IAChB,CAACC,MAAyBH,EAAW,YAAYG,CAAQ;AAAA,IACzD,CAACH,CAAU;AAAA,EAAA,GAEPI,IAAcF;AAAA,IAClB,MAAMF,EAAW,IAAA;AAAA,IACjB,CAACA,CAAU;AAAA,EAAA,GAEPK,IAAQC;AAAA,IACZL;AAAA,IACAG;AAAA,IACAA;AAAA,EAAA,GAEIG,IAAWL;AAAA,IACf,CAACG,MAAaL,EAAW,IAAIK,CAAK;AAAA,IAClC,CAACL,CAAU;AAAA,EAAA;AAEb,SAAO,CAACK,GAAOE,CAAQ;AACzB;"}
+{"version":3,"file":"index.es.js","sources":["../src/storage/useKeyStorage.ts","../../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMountedState.js","../src/fetcher/useFetcher.ts"],"sourcesContent":["/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { KeyStorage } from '@ahoo-wang/fetcher-storage';\n\n/**\n * A React hook that provides state management for a KeyStorage instance.\n * Subscribes to storage changes and returns the current value along with a setter function.\n *\n * @template T - The type of value stored in the key storage\n * @param keyStorage - The KeyStorage instance to subscribe to and manage\n * @returns A tuple containing the current stored value and a function to update it\n */\nexport function useKeyStorage<T>(\n  keyStorage: KeyStorage<T>,\n): [T | null, (value: T) => void] {\n  const subscribe = useCallback(\n    (callback: () => void) => keyStorage.addListener(callback),\n    [keyStorage],\n  );\n  const getSnapshot = useCallback(\n    () => keyStorage.get(),\n    [keyStorage],\n  );\n  const value = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n  const setValue = useCallback(\n    (value: T) => keyStorage.set(value),\n    [keyStorage],\n  );\n  return [value, setValue];\n}","import { useCallback, useEffect, useRef } from 'react';\nexport default function useMountedState() {\n    var mountedRef = useRef(false);\n    var get = useCallback(function () { return mountedRef.current; }, []);\n    useEffect(function () {\n        mountedRef.current = true;\n        return function () {\n            mountedRef.current = false;\n        };\n    }, []);\n    return get;\n}\n","/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  fetcher as defaultFetcher,\n  FetcherCapable,\n  FetchExchange,\n  FetchRequest, getFetcher,\n  RequestOptions,\n} from '@ahoo-wang/fetcher';\nimport { useRef, useCallback, useEffect, useState } from 'react';\nimport { useMountedState } from 'react-use';\n\n/**\n * Configuration options for the useFetcher hook.\n * Extends RequestOptions and FetcherCapable interfaces.\n */\nexport interface UseFetcherOptions extends RequestOptions, FetcherCapable {\n  /**\n   * Whether the fetch operation should execute immediately upon component mount.\n   * Defaults to true.\n   */\n  readonly immediate?: boolean;\n}\n\n/**\n * The result object returned by the useFetcher hook.\n * @template R - The type of the data returned by the fetch operation\n */\nexport interface UseFetcherResult<R> {\n  /** Indicates if the fetch operation is currently in progress */\n  loading: boolean;\n\n  /** The FetchExchange object representing the ongoing fetch operation */\n  exchange?: FetchExchange;\n\n  /** The data returned by the fetch operation, or undefined if not yet loaded or an error occurred */\n  result?: R;\n\n  /** Any error that occurred during the fetch operation, or undefined if no error */\n  error?: unknown;\n\n  /**\n   * Function to manually trigger the fetch operation.\n   * Useful for fetching data on demand rather than automatically.\n   */\n  execute: () => Promise<void>;\n\n  /** Function to cancel the ongoing fetch operation */\n  cancel: () => void;\n}\n\nexport function useFetcher<R>(request: FetchRequest, options?: UseFetcherOptions): UseFetcherResult<R> {\n  const { fetcher = defaultFetcher, immediate = true } = options || {};\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<unknown>(undefined);\n  const [exchange, setExchange] = useState<FetchExchange | undefined>(undefined);\n  const [result, setResult] = useState<R | undefined>(undefined);\n  const isMounted = useMountedState();\n  const abortControllerRef = useRef<AbortController | undefined>();\n\n  const currentFetcher = getFetcher(fetcher);\n  /**\n   * Execute the fetch operation.\n   * Cancels any ongoing fetch before starting a new one.\n   */\n  const execute = useCallback(async () => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n    abortControllerRef.current = request.abortController ?? new AbortController();\n    request.abortController = abortControllerRef.current;\n    if (isMounted()) {\n      setLoading(true);\n      setError(undefined);\n    }\n    try {\n      const exchange = await currentFetcher.exchange(request, options);\n      if (isMounted()) {\n        setExchange(exchange);\n      }\n      const result = await exchange.extractResult<R>();\n      if (isMounted()) {\n        setResult(result);\n      }\n    } catch (error) {\n      if (error instanceof Error && error.name === 'AbortError') {\n        return;\n      }\n      if (isMounted()) {\n        setError(error);\n      }\n    } finally {\n      if (isMounted()) {\n        setLoading(false);\n      }\n      if (abortControllerRef.current === request.abortController) {\n        abortControllerRef.current = undefined;\n      }\n    }\n  }, [currentFetcher, request, isMounted, options]);\n  /**\n   * Cancel the ongoing fetch operation if one is in progress.\n   */\n  const cancel = useCallback(() => {\n    abortControllerRef.current?.abort();\n  }, []);\n  useEffect(() => {\n    if (immediate) {\n      execute();\n    }\n    return () => {\n      abortControllerRef.current?.abort();\n      abortControllerRef.current = undefined;\n    };\n  }, [execute, request, immediate]);\n  return {\n    loading, exchange, result, error, execute, cancel,\n  };\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","value","useSyncExternalStore","setValue","useMountedState","mountedRef","useRef","get","useEffect","useFetcher","request","options","fetcher","defaultFetcher","immediate","loading","setLoading","useState","error","setError","exchange","setExchange","result","setResult","isMounted","abortControllerRef","currentFetcher","getFetcher","execute","cancel"],"mappings":";;AAwBO,SAASA,EACdC,GACgC;AAChC,QAAMC,IAAYC;AAAA,IAChB,CAACC,MAAyBH,EAAW,YAAYG,CAAQ;AAAA,IACzD,CAACH,CAAU;AAAA,EAAA,GAEPI,IAAcF;AAAA,IAClB,MAAMF,EAAW,IAAA;AAAA,IACjB,CAACA,CAAU;AAAA,EAAA,GAEPK,IAAQC;AAAA,IACZL;AAAA,IACAG;AAAA,IACAA;AAAA,EAAA,GAEIG,IAAWL;AAAA,IACf,CAACG,MAAaL,EAAW,IAAIK,CAAK;AAAA,IAClC,CAACL,CAAU;AAAA,EAAA;AAEb,SAAO,CAACK,GAAOE,CAAQ;AACzB;AC5Ce,SAASC,IAAkB;AACtC,MAAIC,IAAaC,EAAO,EAAK,GACzBC,IAAMT,EAAY,WAAY;AAAE,WAAOO,EAAW;AAAA,EAAS,GAAG,EAAE;AACpE,SAAAG,EAAU,WAAY;AAClB,WAAAH,EAAW,UAAU,IACd,WAAY;AACf,MAAAA,EAAW,UAAU;AAAA,IACzB;AAAA,EACJ,GAAG,CAAA,CAAE,GACEE;AACX;ACmDO,SAASE,EAAcC,GAAuBC,GAAkD;AACrG,QAAM,EAAA,SAAEC,IAAUC,GAAgB,WAAAC,IAAY,GAAA,IAASH,KAAW,CAAA,GAC5D,CAACI,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAOC,CAAQ,IAAIF,EAAkB,MAAS,GAC/C,CAACG,GAAUC,CAAW,IAAIJ,EAAoC,MAAS,GACvE,CAACK,GAAQC,CAAS,IAAIN,EAAwB,MAAS,GACvDO,IAAYpB,EAAA,GACZqB,IAAqBnB,EAAA,GAErBoB,IAAiBC,EAAWf,CAAO,GAKnCgB,IAAU9B,EAAY,YAAY;AACtC,IAAI2B,EAAmB,WACrBA,EAAmB,QAAQ,MAAA,GAE7BA,EAAmB,UAAUf,EAAQ,mBAAmB,IAAI,gBAAA,GAC5DA,EAAQ,kBAAkBe,EAAmB,SACzCD,QACFR,EAAW,EAAI,GACfG,EAAS,MAAS;AAEpB,QAAI;AACF,YAAMC,IAAW,MAAMM,EAAe,SAAShB,GAASC,CAAO;AAC/D,MAAIa,OACFH,EAAYD,CAAQ;AAEtB,YAAME,IAAS,MAAMF,EAAS,cAAA;AAC9B,MAAII,OACFD,EAAUD,CAAM;AAAA,IAEpB,SAASJ,GAAO;AACd,UAAIA,aAAiB,SAASA,EAAM,SAAS;AAC3C;AAEF,MAAIM,OACFL,EAASD,CAAK;AAAA,IAElB,UAAA;AACE,MAAIM,OACFR,EAAW,EAAK,GAEdS,EAAmB,YAAYf,EAAQ,oBACzCe,EAAmB,UAAU;AAAA,IAEjC;AAAA,EACF,GAAG,CAACC,GAAgBhB,GAASc,GAAWb,CAAO,CAAC,GAI1CkB,IAAS/B,EAAY,MAAM;AAC/B,IAAA2B,EAAmB,SAAS,MAAA;AAAA,EAC9B,GAAG,CAAA,CAAE;AACL,SAAAjB,EAAU,OACJM,KACFc,EAAA,GAEK,MAAM;AACX,IAAAH,EAAmB,SAAS,MAAA,GAC5BA,EAAmB,UAAU;AAAA,EAC/B,IACC,CAACG,GAASlB,GAASI,CAAS,CAAC,GACzB;AAAA,IACL,SAAAC;AAAA,IAAS,UAAAK;AAAA,IAAU,QAAAE;AAAA,IAAQ,OAAAJ;AAAA,IAAO,SAAAU;AAAA,IAAS,QAAAC;AAAA,EAAA;AAE/C;","x_google_ignoreList":[1]}

package/dist/index.umd.js

@@ -1,2 +1,2 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.FetcherReact={},t.React))})(this,(function(t,e){"use strict";function i(n){const c=e.useCallback(s=>n.addListener(s),[n]),u=e.useCallback(()=>n.get(),[n]),o=e.useSyncExternalStore(c,u,u),d=e.useCallback(s=>n.set(s),[n]);return[o,d]}t.useKeyStorage=i,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react"),require("@ahoo-wang/fetcher")):typeof define=="function"&&define.amd?define(["exports","react","@ahoo-wang/fetcher"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.FetcherReact={},r.React,r.Fetcher))})(this,(function(r,e,d){"use strict";function C(t){const o=e.useCallback(u=>t.addListener(u),[t]),i=e.useCallback(()=>t.get(),[t]),f=e.useSyncExternalStore(o,i,i),a=e.useCallback(u=>t.set(u),[t]);return[f,a]}function v(){var t=e.useRef(!1),o=e.useCallback(function(){return t.current},[]);return e.useEffect(function(){return t.current=!0,function(){t.current=!1}},[]),o}function g(t,o){const{fetcher:i=d.fetcher,immediate:f=!0}=o||{},[a,u]=e.useState(!1),[x,h]=e.useState(void 0),[m,E]=e.useState(void 0),[S,F]=e.useState(void 0),c=v(),n=e.useRef(),b=d.getFetcher(i),l=e.useCallback(async()=>{n.current&&n.current.abort(),n.current=t.abortController??new AbortController,t.abortController=n.current,c()&&(u(!0),h(void 0));try{const s=await b.exchange(t,o);c()&&E(s);const w=await s.extractResult();c()&&F(w)}catch(s){if(s instanceof Error&&s.name==="AbortError")return;c()&&h(s)}finally{c()&&u(!1),n.current===t.abortController&&(n.current=void 0)}},[b,t,c,o]),p=e.useCallback(()=>{n.current?.abort()},[]);return e.useEffect(()=>(f&&l(),()=>{n.current?.abort(),n.current=void 0}),[l,t,f]),{loading:a,exchange:m,result:S,error:x,execute:l,cancel:p}}r.useFetcher=g,r.useKeyStorage=C,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","sources":["../src/storage/useKeyStorage.ts"],"sourcesContent":["/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { KeyStorage } from '@ahoo-wang/fetcher-storage';\n\n/**\n * A React hook that provides state management for a KeyStorage instance.\n * Subscribes to storage changes and returns the current value along with a setter function.\n *\n * @template T - The type of value stored in the key storage\n * @param keyStorage - The KeyStorage instance to subscribe to and manage\n * @returns A tuple containing the current stored value and a function to update it\n */\nexport function useKeyStorage<T>(\n  keyStorage: KeyStorage<T>,\n): [T | null, (value: T) => void] {\n  const subscribe = useCallback(\n    (callback: () => void) => keyStorage.addListener(callback),\n    [keyStorage],\n  );\n  const getSnapshot = useCallback(\n    () => keyStorage.get(),\n    [keyStorage],\n  );\n  const value = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n  const setValue = useCallback(\n    (value: T) => keyStorage.set(value),\n    [keyStorage],\n  );\n  return [value, setValue];\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","value","useSyncExternalStore","setValue"],"mappings":"wQAwBO,SAASA,EACdC,EACgC,CAChC,MAAMC,EAAYC,EAAAA,YACfC,GAAyBH,EAAW,YAAYG,CAAQ,EACzD,CAACH,CAAU,CAAA,EAEPI,EAAcF,EAAAA,YAClB,IAAMF,EAAW,IAAA,EACjB,CAACA,CAAU,CAAA,EAEPK,EAAQC,EAAAA,qBACZL,EACAG,EACAA,CAAA,EAEIG,EAAWL,EAAAA,YACdG,GAAaL,EAAW,IAAIK,CAAK,EAClC,CAACL,CAAU,CAAA,EAEb,MAAO,CAACK,EAAOE,CAAQ,CACzB"}
+{"version":3,"file":"index.umd.js","sources":["../src/storage/useKeyStorage.ts","../../../node_modules/.pnpm/react-use@17.6.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-use/esm/useMountedState.js","../src/fetcher/useFetcher.ts"],"sourcesContent":["/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useCallback, useSyncExternalStore } from 'react';\nimport { KeyStorage } from '@ahoo-wang/fetcher-storage';\n\n/**\n * A React hook that provides state management for a KeyStorage instance.\n * Subscribes to storage changes and returns the current value along with a setter function.\n *\n * @template T - The type of value stored in the key storage\n * @param keyStorage - The KeyStorage instance to subscribe to and manage\n * @returns A tuple containing the current stored value and a function to update it\n */\nexport function useKeyStorage<T>(\n  keyStorage: KeyStorage<T>,\n): [T | null, (value: T) => void] {\n  const subscribe = useCallback(\n    (callback: () => void) => keyStorage.addListener(callback),\n    [keyStorage],\n  );\n  const getSnapshot = useCallback(\n    () => keyStorage.get(),\n    [keyStorage],\n  );\n  const value = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getSnapshot,\n  );\n  const setValue = useCallback(\n    (value: T) => keyStorage.set(value),\n    [keyStorage],\n  );\n  return [value, setValue];\n}","import { useCallback, useEffect, useRef } from 'react';\nexport default function useMountedState() {\n    var mountedRef = useRef(false);\n    var get = useCallback(function () { return mountedRef.current; }, []);\n    useEffect(function () {\n        mountedRef.current = true;\n        return function () {\n            mountedRef.current = false;\n        };\n    }, []);\n    return get;\n}\n","/*\n * Copyright [2021-present] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *      http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  fetcher as defaultFetcher,\n  FetcherCapable,\n  FetchExchange,\n  FetchRequest, getFetcher,\n  RequestOptions,\n} from '@ahoo-wang/fetcher';\nimport { useRef, useCallback, useEffect, useState } from 'react';\nimport { useMountedState } from 'react-use';\n\n/**\n * Configuration options for the useFetcher hook.\n * Extends RequestOptions and FetcherCapable interfaces.\n */\nexport interface UseFetcherOptions extends RequestOptions, FetcherCapable {\n  /**\n   * Whether the fetch operation should execute immediately upon component mount.\n   * Defaults to true.\n   */\n  readonly immediate?: boolean;\n}\n\n/**\n * The result object returned by the useFetcher hook.\n * @template R - The type of the data returned by the fetch operation\n */\nexport interface UseFetcherResult<R> {\n  /** Indicates if the fetch operation is currently in progress */\n  loading: boolean;\n\n  /** The FetchExchange object representing the ongoing fetch operation */\n  exchange?: FetchExchange;\n\n  /** The data returned by the fetch operation, or undefined if not yet loaded or an error occurred */\n  result?: R;\n\n  /** Any error that occurred during the fetch operation, or undefined if no error */\n  error?: unknown;\n\n  /**\n   * Function to manually trigger the fetch operation.\n   * Useful for fetching data on demand rather than automatically.\n   */\n  execute: () => Promise<void>;\n\n  /** Function to cancel the ongoing fetch operation */\n  cancel: () => void;\n}\n\nexport function useFetcher<R>(request: FetchRequest, options?: UseFetcherOptions): UseFetcherResult<R> {\n  const { fetcher = defaultFetcher, immediate = true } = options || {};\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<unknown>(undefined);\n  const [exchange, setExchange] = useState<FetchExchange | undefined>(undefined);\n  const [result, setResult] = useState<R | undefined>(undefined);\n  const isMounted = useMountedState();\n  const abortControllerRef = useRef<AbortController | undefined>();\n\n  const currentFetcher = getFetcher(fetcher);\n  /**\n   * Execute the fetch operation.\n   * Cancels any ongoing fetch before starting a new one.\n   */\n  const execute = useCallback(async () => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n    abortControllerRef.current = request.abortController ?? new AbortController();\n    request.abortController = abortControllerRef.current;\n    if (isMounted()) {\n      setLoading(true);\n      setError(undefined);\n    }\n    try {\n      const exchange = await currentFetcher.exchange(request, options);\n      if (isMounted()) {\n        setExchange(exchange);\n      }\n      const result = await exchange.extractResult<R>();\n      if (isMounted()) {\n        setResult(result);\n      }\n    } catch (error) {\n      if (error instanceof Error && error.name === 'AbortError') {\n        return;\n      }\n      if (isMounted()) {\n        setError(error);\n      }\n    } finally {\n      if (isMounted()) {\n        setLoading(false);\n      }\n      if (abortControllerRef.current === request.abortController) {\n        abortControllerRef.current = undefined;\n      }\n    }\n  }, [currentFetcher, request, isMounted, options]);\n  /**\n   * Cancel the ongoing fetch operation if one is in progress.\n   */\n  const cancel = useCallback(() => {\n    abortControllerRef.current?.abort();\n  }, []);\n  useEffect(() => {\n    if (immediate) {\n      execute();\n    }\n    return () => {\n      abortControllerRef.current?.abort();\n      abortControllerRef.current = undefined;\n    };\n  }, [execute, request, immediate]);\n  return {\n    loading, exchange, result, error, execute, cancel,\n  };\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","value","useSyncExternalStore","setValue","useMountedState","mountedRef","useRef","get","useEffect","useFetcher","request","options","fetcher","defaultFetcher","immediate","loading","setLoading","useState","error","setError","exchange","setExchange","result","setResult","isMounted","abortControllerRef","currentFetcher","getFetcher","execute","cancel"],"mappings":"uUAwBO,SAASA,EACdC,EACgC,CAChC,MAAMC,EAAYC,EAAAA,YACfC,GAAyBH,EAAW,YAAYG,CAAQ,EACzD,CAACH,CAAU,CAAA,EAEPI,EAAcF,EAAAA,YAClB,IAAMF,EAAW,IAAA,EACjB,CAACA,CAAU,CAAA,EAEPK,EAAQC,EAAAA,qBACZL,EACAG,EACAA,CAAA,EAEIG,EAAWL,EAAAA,YACdG,GAAaL,EAAW,IAAIK,CAAK,EAClC,CAACL,CAAU,CAAA,EAEb,MAAO,CAACK,EAAOE,CAAQ,CACzB,CC5Ce,SAASC,GAAkB,CACtC,IAAIC,EAAaC,EAAAA,OAAO,EAAK,EACzBC,EAAMT,EAAAA,YAAY,UAAY,CAAE,OAAOO,EAAW,OAAS,EAAG,EAAE,EACpEG,OAAAA,EAAAA,UAAU,UAAY,CAClB,OAAAH,EAAW,QAAU,GACd,UAAY,CACfA,EAAW,QAAU,EACzB,CACJ,EAAG,CAAA,CAAE,EACEE,CACX,CCmDO,SAASE,EAAcC,EAAuBC,EAAkD,CACrG,KAAM,CAAA,QAAEC,EAAUC,EAAAA,QAAgB,UAAAC,EAAY,EAAA,EAASH,GAAW,CAAA,EAC5D,CAACI,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtC,CAACC,EAAOC,CAAQ,EAAIF,EAAAA,SAAkB,MAAS,EAC/C,CAACG,EAAUC,CAAW,EAAIJ,EAAAA,SAAoC,MAAS,EACvE,CAACK,EAAQC,CAAS,EAAIN,EAAAA,SAAwB,MAAS,EACvDO,EAAYpB,EAAA,EACZqB,EAAqBnB,EAAAA,OAAA,EAErBoB,EAAiBC,EAAAA,WAAWf,CAAO,EAKnCgB,EAAU9B,EAAAA,YAAY,SAAY,CAClC2B,EAAmB,SACrBA,EAAmB,QAAQ,MAAA,EAE7BA,EAAmB,QAAUf,EAAQ,iBAAmB,IAAI,gBAC5DA,EAAQ,gBAAkBe,EAAmB,QACzCD,MACFR,EAAW,EAAI,EACfG,EAAS,MAAS,GAEpB,GAAI,CACF,MAAMC,EAAW,MAAMM,EAAe,SAAShB,EAASC,CAAO,EAC3Da,KACFH,EAAYD,CAAQ,EAEtB,MAAME,EAAS,MAAMF,EAAS,cAAA,EAC1BI,KACFD,EAAUD,CAAM,CAEpB,OAASJ,EAAO,CACd,GAAIA,aAAiB,OAASA,EAAM,OAAS,aAC3C,OAEEM,KACFL,EAASD,CAAK,CAElB,QAAA,CACMM,KACFR,EAAW,EAAK,EAEdS,EAAmB,UAAYf,EAAQ,kBACzCe,EAAmB,QAAU,OAEjC,CACF,EAAG,CAACC,EAAgBhB,EAASc,EAAWb,CAAO,CAAC,EAI1CkB,EAAS/B,EAAAA,YAAY,IAAM,CAC/B2B,EAAmB,SAAS,MAAA,CAC9B,EAAG,CAAA,CAAE,EACLjB,OAAAA,EAAAA,UAAU,KACJM,GACFc,EAAA,EAEK,IAAM,CACXH,EAAmB,SAAS,MAAA,EAC5BA,EAAmB,QAAU,MAC/B,GACC,CAACG,EAASlB,EAASI,CAAS,CAAC,EACzB,CACL,QAAAC,EAAS,SAAAK,EAAU,OAAAE,EAAQ,MAAAJ,EAAO,QAAAU,EAAS,OAAAC,CAAA,CAE/C","x_google_ignoreList":[1]}

package/dist/types.d.ts

@@ -0,0 +1,5 @@
+import { DependencyList } from 'react';
+export interface DepsCapable {
+    deps?: DependencyList;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahoo-wang/fetcher-react",
-  "version": "1.8.5",
+  "version": "1.8.8",
   "description": "React integration for Fetcher HTTP client. Provides React Hooks and components for seamless data fetching with automatic re-rendering and loading states.",
   "keywords": [
     "fetch",
@@ -37,24 +37,38 @@
     "dist"
   ],
   "dependencies": {
-    "@ahoo-wang/fetcher": "1.8.5",
-    "@ahoo-wang/fetcher-storage": "1.8.5"
+    "react-use": "^17.6.0",
+    "@ahoo-wang/fetcher": "1.8.8",
+    "@ahoo-wang/fetcher-storage": "1.8.8"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.35.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "eslint": "^9.35.0",
+    "globals": "^16.4.0",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.43.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "unplugin-dts": "1.0.0-beta.6",
+    "vite": "^7.1.5",
+    "vite-bundle-analyzer": "^1.2.3",
+    "vitest": "^3.2.4",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitest/coverage-v8": "^3.2.4",
     "jsdom": "^27.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "scripts": {
     "build": "vite build",
+    "test:ui": "vitest --ui",
     "test": "vitest run --coverage",
     "lint": "eslint . --fix",
     "clean": "rm -rf dist",