@ahoo-wang/fetcher-react 1.8.1 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -14,11 +14,9 @@ automatic re-rendering and loading states.
14
14
  ## Features
15
15
 
16
16
  - 🔄 **React Hooks**: Provides React hooks for seamless integration with Fetcher
17
- - 📦 **Lightweight**: Only 3KiB min+gzip
18
17
  - 🌐 **TypeScript Support**: Full TypeScript support with comprehensive type definitions
19
18
  - 🚀 **Modern**: Built with modern React patterns and best practices
20
19
  - 🧠 **Smart Caching**: Built-in caching and automatic revalidation
21
- - 📡 **Real-time**: Automatic updates when data changes
22
20
 
23
21
  ## Installation
24
22
 
@@ -33,13 +31,13 @@ npm install @ahoo-wang/fetcher-react
33
31
  The `useKeyStorage` hook provides state management for a KeyStorage instance. It subscribes to storage changes and
34
32
  returns the current value along with a setter function.
35
33
 
36
- ```typescript
37
- import { useKeyStorage } from '@ahoo-wang/fetcher-react/storage';
38
- import { KeyStorage } from '@ahoo-wang/fetcher-react';
34
+ ```typescript jsx
35
+ import { KeyStorage } from '@ahoo-wang/fetcher-storage';
36
+ import { useKeyStorage } from '@ahoo-wang/fetcher-react';
39
37
 
40
38
  const MyComponent = () => {
41
39
  const keyStorage = new KeyStorage<string>({
42
- key: 'my-key'
40
+ key: 'my-key',
43
41
  });
44
42
 
45
43
  const [value, setValue] = useKeyStorage(keyStorage);
@@ -47,27 +45,22 @@ const MyComponent = () => {
47
45
  return (
48
46
  <div>
49
47
  <p>Current
50
- value: {
51
- value
52
- }
53
- </p>
54
- < button
55
- onClick = {()
56
- =>
57
- setValue('new value')
58
- }>
59
- Update
60
- Value
61
- < /button>
62
- < /div>
63
- )
64
- ;
48
+ value: {value}
49
+ </p>
50
+ <button
51
+ onClick={() => setValue('new value')}>
52
+ Update
53
+ Value
54
+ </button>
55
+ </div>
56
+ )
57
+ ;
65
58
  };
66
59
  ```
67
60
 
68
61
  ### More Examples
69
62
 
70
- ```typescript
63
+ ```typescript jsx
71
64
  // Working with different value types
72
65
  const numberStorage = new KeyStorage<number>({ key: 'counter' });
73
66
  const [count, setCount] = useKeyStorage(numberStorage);
@@ -86,7 +79,7 @@ const [user, setUser] = useKeyStorage(userStorage);
86
79
 
87
80
  ### useKeyStorage
88
81
 
89
- ```typescript
82
+ ```typescript jsx
90
83
  function useKeyStorage<T>(keyStorage: KeyStorage<T>): [T | null, (value: T) => void]
91
84
  ```
92
85
 
package/README.zh-CN.md CHANGED
@@ -13,11 +13,9 @@ Fetcher 生态的 React 集成包。提供 React Hooks 和组件,实现无缝
13
13
  ## 功能特性
14
14
 
15
15
  - 🔄 **React Hooks**: 提供 React hooks 与 Fetcher 无缝集成
16
- - 📦 **轻量级**: 仅 3KiB min+gzip
17
16
  - 🌐 **TypeScript 支持**: 完整的 TypeScript 支持和全面的类型定义
18
17
  - 🚀 **现代化**: 使用现代 React 模式和最佳实践构建
19
18
  - 🧠 **智能缓存**: 内置缓存和自动重新验证
20
- - 📡 **实时更新**: 数据变化时自动更新
21
19
 
22
20
  ## 安装
23
21
 
@@ -31,41 +29,33 @@ npm install @ahoo-wang/fetcher-react
31
29
 
32
30
  `useKeyStorage` hook 为 KeyStorage 实例提供状态管理。它订阅存储变化并返回当前值以及设置值的函数。
33
31
 
34
- ```typescript
35
- import { useKeyStorage } from '@ahoo-wang/fetcher-react/storage';
32
+ ```typescript jsx
36
33
  import { KeyStorage } from '@ahoo-wang/fetcher-storage';
34
+ import { useKeyStorage } from '@ahoo-wang/fetcher-react';
37
35
 
38
36
  const MyComponent = () => {
39
37
  const keyStorage = new KeyStorage<string>({
40
- key: 'my-key'
38
+ key: 'my-key',
41
39
  });
42
40
 
43
41
  const [value, setValue] = useKeyStorage(keyStorage);
44
42
 
45
43
  return (
46
44
  <div>
47
- <p>当前值
48
- :
49
- {
50
- value
51
- }
52
- </p>
53
- < button
54
- onClick = {()
55
- =>
56
- setValue('new value')
57
- }>
58
- 更新值
59
- < /button>
60
- < /div>
61
- )
62
- ;
45
+ <p>当前值 :{value}
46
+ </p>
47
+ < button
48
+ onClick={() => setValue('new value')}>
49
+ 更新值
50
+ < /button>
51
+ < /div>
52
+ );
63
53
  };
64
54
  ```
65
55
 
66
56
  ### 更多示例
67
57
 
68
- ```typescript
58
+ ```typescript jsx
69
59
  // 处理不同类型的值
70
60
  const numberStorage = new KeyStorage<number>({ key: 'counter' });
71
61
  const [count, setCount] = useKeyStorage(numberStorage);
@@ -84,7 +74,7 @@ const [user, setUser] = useKeyStorage(userStorage);
84
74
 
85
75
  ### useKeyStorage
86
76
 
87
- ```typescript
77
+ ```typescript jsx
88
78
  function useKeyStorage<T>(keyStorage: KeyStorage<T>): [T | null, (value: T) => void]
89
79
  ```
90
80
 
package/dist/index.es.js CHANGED
@@ -1,22 +1,22 @@
1
- import { useCallback as n, useSyncExternalStore as r } from "react";
2
- function l(s) {
1
+ import { useCallback as n, useSyncExternalStore as l } from "react";
2
+ function i(s) {
3
3
  const e = n(
4
4
  (t) => s.addListener(t),
5
5
  [s]
6
6
  ), c = n(
7
7
  () => s.get(),
8
8
  [s]
9
- ), o = r(
9
+ ), u = l(
10
10
  e,
11
11
  c,
12
12
  c
13
- ), u = n(
13
+ ), o = n(
14
14
  (t) => s.set(t),
15
15
  [s]
16
16
  );
17
- return [o, u];
17
+ return [u, o];
18
18
  }
19
19
  export {
20
- l as useKeyStorage
20
+ i as useKeyStorage
21
21
  };
22
22
  //# sourceMappingURL=index.es.js.map
@@ -1 +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 store = useSyncExternalStore(\n subscribe,\n getSnapshot,\n getSnapshot,\n );\n const setValue = useCallback(\n (value: T) => keyStorage.set(value),\n [keyStorage],\n );\n return [store, setValue];\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","store","useSyncExternalStore","setValue","value"],"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,CAACM,MAAaR,EAAW,IAAIQ,CAAK;AAAA,IAClC,CAACR,CAAU;AAAA,EAAA;AAEb,SAAO,CAACK,GAAOE,CAAQ;AACzB;"}
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;"}
package/dist/index.umd.js CHANGED
@@ -1,2 +1,2 @@
1
- (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 o=e.useCallback(s=>n.addListener(s),[n]),u=e.useCallback(()=>n.get(),[n]),c=e.useSyncExternalStore(o,u,u),d=e.useCallback(s=>n.set(s),[n]);return[c,d]}t.useKeyStorage=i,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
1
+ (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"})}));
2
2
  //# sourceMappingURL=index.umd.js.map
@@ -1 +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 store = useSyncExternalStore(\n subscribe,\n getSnapshot,\n getSnapshot,\n );\n const setValue = useCallback(\n (value: T) => keyStorage.set(value),\n [keyStorage],\n );\n return [store, setValue];\n}"],"names":["useKeyStorage","keyStorage","subscribe","useCallback","callback","getSnapshot","store","useSyncExternalStore","setValue","value"],"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,YACdM,GAAaR,EAAW,IAAIQ,CAAK,EAClC,CAACR,CAAU,CAAA,EAEb,MAAO,CAACK,EAAOE,CAAQ,CACzB"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ahoo-wang/fetcher-react",
3
- "version": "1.8.1",
3
+ "version": "1.8.2",
4
4
  "description": "React integration for Fetcher HTTP client. Provides React Hooks and components for seamless data fetching with automatic re-rendering and loading states.",
5
5
  "keywords": [
6
6
  "fetch",
@@ -37,8 +37,8 @@
37
37
  "dist"
38
38
  ],
39
39
  "dependencies": {
40
- "@ahoo-wang/fetcher": "1.8.1",
41
- "@ahoo-wang/fetcher-storage": "1.8.1"
40
+ "@ahoo-wang/fetcher": "1.8.2",
41
+ "@ahoo-wang/fetcher-storage": "1.8.2"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "react": ">=16.8.0",