react-state-bucket 1.0.4 → 1.0.5
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 +179 -119
- package/dist/index.d.ts +16 -6
- package/dist/index.js +72 -78
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,181 +1,241 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://mui.com/core/" rel="noopener" target="_blank"><img width="120" src="https://api.mypiebd.com/uploads/2024/11/26/images/5c31a5fc731a89c82fd0e846dd69a99378243.png" alt="Material UI logo"></a>
|
|
3
|
+
</p>
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
<h1 align="center">React State Bucket</h1>
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
[GitHub Repository](https://github.com/devnax/react-state-bucket)
|
|
8
|
+
[NPM Package](https://www.npmjs.com/package/react-state-bucket)
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
- Supports three storage options: memory, session storage, and URL.
|
|
9
|
-
- Fully TypeScript-supported API.
|
|
10
|
-
- React hook-based implementation for seamless integration.
|
|
11
|
-
- Ideal for both small and large-scale React applications.
|
|
10
|
+
## Overview
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
`react-state-bucket` is a lightweight and powerful package designed to manage states globally in React applications. It provides CRUD operations for your state data with ease, enabling developers to handle complex state management scenarios without the need for heavy libraries.
|
|
13
|
+
|
|
14
|
+
This package supports multiple storage options, including:
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
- Memory (default)
|
|
17
|
+
- Session Storage
|
|
18
|
+
- Local Storage
|
|
19
|
+
- URL Query Parameters
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
16
22
|
|
|
17
23
|
```bash
|
|
18
24
|
npm install react-state-bucket
|
|
19
25
|
```
|
|
20
26
|
|
|
21
|
-
|
|
27
|
+
## Features
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
- **Global State Management**: Easily manage state across your entire React application.
|
|
30
|
+
- **CRUD Operations**: Create, Read, Update, and Delete state values effortlessly.
|
|
31
|
+
- **Multiple Storage Options**: Choose where to store your data ("memory", "session", "local", or "url").
|
|
32
|
+
- **Reactivity**: Automatically update components when the state changes.
|
|
33
|
+
- **Custom Hooks**: Seamlessly integrate with React’s functional components.
|
|
26
34
|
|
|
27
35
|
## Usage
|
|
28
36
|
|
|
29
|
-
###
|
|
37
|
+
### Basic Example
|
|
30
38
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
```javascript
|
|
39
|
+
```jsx
|
|
34
40
|
"use client";
|
|
35
|
-
import { createBucket } from "react-state-bucket";
|
|
36
|
-
```
|
|
37
41
|
|
|
38
|
-
|
|
42
|
+
import React from "react";
|
|
43
|
+
import createBucket from "react-state-bucket";
|
|
39
44
|
|
|
40
|
-
|
|
45
|
+
// Create a bucket with initial state
|
|
46
|
+
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
41
47
|
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
48
|
+
function App() {
|
|
49
|
+
const globalState = useGlobalState();
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<h1>Global State Management</h1>
|
|
54
|
+
<p>Count: {globalState.get("count")}</p>
|
|
55
|
+
<button onClick={() => globalState.set("count", globalState.get("count") + 1)}>Increment</button>
|
|
56
|
+
<button onClick={() => globalState.delete("count")}>Reset Count</button>
|
|
57
|
+
<pre>{JSON.stringify(globalState.getState(), null, 2)}</pre>
|
|
58
|
+
</div>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export default App;
|
|
49
63
|
```
|
|
50
64
|
|
|
51
|
-
### Using
|
|
65
|
+
### Using Multiple Buckets
|
|
66
|
+
|
|
67
|
+
```jsx
|
|
68
|
+
const useUserBucket = createBucket({ name: "", age: 0 });
|
|
69
|
+
const useSettingsBucket = createBucket({ theme: "light", notifications: true });
|
|
70
|
+
|
|
71
|
+
function Profile() {
|
|
72
|
+
const userBucket = useUserBucket();
|
|
73
|
+
const settingsBucket = useSettingsBucket();
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<div>
|
|
77
|
+
<h1>User Profile</h1>
|
|
78
|
+
<button onClick={() => userBucket.set("name", "John Doe")}>Set Name</button>
|
|
79
|
+
<button onClick={() => settingsBucket.set("theme", "dark")}>Change Theme</button>
|
|
80
|
+
<pre>User State: {JSON.stringify(userBucket.getState(), null, 2)}</pre>
|
|
81
|
+
<p>Current Theme: {settingsBucket.get("theme")}</p>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Storage Options Example
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
const usePersistentBucket = createBucket(
|
|
91
|
+
{ token: "", language: "en" },
|
|
92
|
+
{ store: "local" }
|
|
93
|
+
);
|
|
52
94
|
|
|
53
|
-
|
|
95
|
+
function PersistentExample() {
|
|
96
|
+
const persistentBucket = usePersistentBucket();
|
|
54
97
|
|
|
55
|
-
|
|
98
|
+
return (
|
|
99
|
+
<div>
|
|
100
|
+
<h1>Persistent Bucket</h1>
|
|
101
|
+
<button onClick={() => persistentBucket.set("token", "abc123")}>Set Token</button>
|
|
102
|
+
<p>Token: {persistentBucket.get("token")}</p>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Reusing State Across Components
|
|
109
|
+
|
|
110
|
+
```jsx
|
|
111
|
+
"use client";
|
|
56
112
|
|
|
57
|
-
```javascript
|
|
58
113
|
import React from "react";
|
|
114
|
+
import createBucket from "react-state-bucket";
|
|
115
|
+
|
|
116
|
+
// Create a global bucket
|
|
117
|
+
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
59
118
|
|
|
60
119
|
function Counter() {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
120
|
+
const globalState = useGlobalState(); // Access bucket functions and trigger re-render on state updates
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
<div>
|
|
124
|
+
<h2>Counter Component</h2>
|
|
125
|
+
<p>Count: {globalState.get("count")}</p>
|
|
126
|
+
<button onClick={() => globalState.set("count", globalState.get("count") + 1)}>
|
|
127
|
+
Increment Count
|
|
128
|
+
</button>
|
|
129
|
+
</div>
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
function UserDisplay() {
|
|
134
|
+
const globalState = useGlobalState(); // Reuse the same global bucket for reactivity
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<div>
|
|
138
|
+
<h2>User Component</h2>
|
|
139
|
+
<p>Current User: {globalState.get("user")}</p>
|
|
140
|
+
<button onClick={() => globalState.set("user", "John Doe")}>
|
|
141
|
+
Set User to John Doe
|
|
142
|
+
</button>
|
|
143
|
+
</div>
|
|
144
|
+
);
|
|
72
145
|
}
|
|
73
146
|
|
|
74
147
|
function App() {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
148
|
+
|
|
149
|
+
return (
|
|
150
|
+
<div>
|
|
151
|
+
<h1>Global State Example</h1>
|
|
152
|
+
<Counter />
|
|
153
|
+
<UserDisplay />
|
|
154
|
+
<pre>Global State: {JSON.stringify(useGlobalState().getState(), null, 2)}</pre>
|
|
155
|
+
</div>
|
|
156
|
+
);
|
|
80
157
|
}
|
|
81
158
|
|
|
82
159
|
export default App;
|
|
83
160
|
```
|
|
84
161
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
When you call the hook returned by `createBucket`, you gain access to a set of utility methods:
|
|
162
|
+
## Direct Usage of Functions
|
|
88
163
|
|
|
89
|
-
|
|
90
|
-
| ----------------- | ---------------------------------------------------------- |
|
|
91
|
-
| `set(key, value)` | Sets the value of a specific key in the state. |
|
|
92
|
-
| `get(key)` | Gets the value of a specific key from the state. |
|
|
93
|
-
| `delete(key)` | Deletes a specific key from the state. |
|
|
94
|
-
| `clear()` | Clears all keys from the state. |
|
|
95
|
-
| `getState()` | Retrieves the entire state object. |
|
|
96
|
-
| `setState(state)` | Updates the state with a partial object. |
|
|
97
|
-
| `isChange(key)` | Checks if a specific key has changed since the last clear. |
|
|
98
|
-
| `getChanges()` | Retrieves an object representing all changed keys. |
|
|
99
|
-
| `clearChanges()` | Clears the record of changes. |
|
|
164
|
+
The `createBucket` function provides direct access to the state management methods like `get`, `set`, `delete`, and others. For components that require re-rendering when the state changes, call the custom hook returned by `createBucket` within the component.
|
|
100
165
|
|
|
101
|
-
###
|
|
166
|
+
### Example
|
|
102
167
|
|
|
103
|
-
|
|
168
|
+
```jsx
|
|
169
|
+
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
104
170
|
|
|
105
|
-
|
|
106
|
-
2. **Session:** Persists the state in `sessionStorage` across page reloads.
|
|
107
|
-
3. **URL:** Stores the state in the URL's query parameters, enabling sharable states.
|
|
108
|
-
|
|
109
|
-
#### Example with URL Storage:
|
|
171
|
+
function Counter() {
|
|
110
172
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
173
|
+
return (
|
|
174
|
+
<div>
|
|
175
|
+
<p>Count: {useGlobalState.get("count")}</p>
|
|
176
|
+
<button onClick={() => useGlobalState.set("count", useGlobalState.get("count") + 1)}>Increment</button>
|
|
177
|
+
</div>
|
|
178
|
+
);
|
|
179
|
+
}
|
|
117
180
|
|
|
118
|
-
function
|
|
119
|
-
|
|
181
|
+
function App() {
|
|
182
|
+
useGlobalState(); // Will automatically re-render when state updates
|
|
120
183
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
184
|
+
return (
|
|
185
|
+
<div>
|
|
186
|
+
<Counter />
|
|
187
|
+
</div>
|
|
188
|
+
);
|
|
126
189
|
}
|
|
190
|
+
|
|
191
|
+
export default App;
|
|
127
192
|
```
|
|
128
193
|
|
|
129
|
-
## Real-World Example
|
|
130
194
|
|
|
131
|
-
### Managing a Multi-Step Form
|
|
132
195
|
|
|
133
|
-
|
|
134
|
-
const useFormState = createBucket({
|
|
135
|
-
step: 1,
|
|
136
|
-
formData: {},
|
|
137
|
-
});
|
|
196
|
+
## API Reference
|
|
138
197
|
|
|
139
|
-
|
|
140
|
-
const state = useFormState();
|
|
198
|
+
### `createBucket(initial: object, option?: BucketOptions)`
|
|
141
199
|
|
|
142
|
-
|
|
143
|
-
const prevStep = () => state.set("step", state.get("step") - 1);
|
|
200
|
+
Creates a new bucket for managing the global state.
|
|
144
201
|
|
|
145
|
-
|
|
146
|
-
<div>
|
|
147
|
-
<h2>Step {state.get("step")}</h2>
|
|
148
|
-
<button onClick={prevStep} disabled={state.get("step") === 1}>Back</button>
|
|
149
|
-
<button onClick={nextStep}>Next</button>
|
|
150
|
-
</div>
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
```
|
|
202
|
+
#### Parameters
|
|
154
203
|
|
|
155
|
-
|
|
204
|
+
| Name | Type | Description |
|
|
205
|
+
| --------- | --------- | ----------------------------------------- |
|
|
206
|
+
| `initial` | `object` | Initial state values. |
|
|
207
|
+
| `option` | `object?` | Optional configuration (default: memory). |
|
|
156
208
|
|
|
157
|
-
|
|
158
|
-
- Use `session` storage for states that should persist across page reloads but not sessions.
|
|
159
|
-
- Use `url` storage for sharable states, like filters or query parameters.
|
|
209
|
+
#### `BucketOptions`
|
|
160
210
|
|
|
161
|
-
|
|
211
|
+
`BucketOptions` allows you to configure how and where the state is stored. It includes:
|
|
162
212
|
|
|
163
|
-
|
|
164
|
-
|
|
213
|
+
| Property | Type | Description |
|
|
214
|
+
| -------- | ------------------------------------- | ---------------------------------------------- |
|
|
215
|
+
| `store` | `'memory', 'session', 'local', 'url'` | Specifies the storage mechanism for the state. |
|
|
165
216
|
|
|
166
|
-
###
|
|
167
|
-
An error will be thrown, ensuring state integrity.
|
|
217
|
+
### Returned Functions
|
|
168
218
|
|
|
169
|
-
|
|
170
|
-
Yes, `react-state-bucket` fully supports TypeScript with type-safe APIs.
|
|
219
|
+
#### State Management
|
|
171
220
|
|
|
172
|
-
|
|
221
|
+
| Function | Description |
|
|
222
|
+
| ----------------- | ----------------------------------------------------- |
|
|
223
|
+
| `set(key, value)` | Sets the value of a specific key in the state. |
|
|
224
|
+
| `get(key)` | Retrieves the value of a specific key from the state. |
|
|
225
|
+
| `delete(key)` | Removes a key-value pair from the state. |
|
|
226
|
+
| `clear()` | Clears all state values. |
|
|
227
|
+
| `getState()` | Returns the entire state as an object. |
|
|
228
|
+
| `setState(state)` | Updates the state with a partial object. |
|
|
173
229
|
|
|
174
|
-
|
|
175
|
-
[https://github.com/devnax/react-state-bucket.git](https://github.com/devnax/react-state-bucket.git)
|
|
230
|
+
#### Change Detection
|
|
176
231
|
|
|
177
|
-
|
|
232
|
+
| Function | Description |
|
|
233
|
+
| ---------------- | ------------------------------------------- |
|
|
234
|
+
| `isChange(key)` | Checks if a specific key has been modified. |
|
|
235
|
+
| `getChanges()` | Returns an array of keys that have changed. |
|
|
236
|
+
| `clearChanges()` | Resets the change detection for all keys. |
|
|
178
237
|
|
|
179
238
|
## License
|
|
180
239
|
|
|
181
|
-
MIT
|
|
240
|
+
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
|
241
|
+
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,27 @@
|
|
|
1
|
-
type
|
|
2
|
-
store?: "memory" | "session" | "url";
|
|
1
|
+
export type BucketOptions = {
|
|
2
|
+
store?: "memory" | "session" | "local" | "url";
|
|
3
3
|
};
|
|
4
4
|
export declare const createBucket: <IT extends {
|
|
5
5
|
[key: string]: any;
|
|
6
|
-
}>(initial: IT, option?:
|
|
6
|
+
}>(initial: IT, option?: BucketOptions) => {
|
|
7
|
+
(): {
|
|
8
|
+
set: <T extends keyof IT>(key: T, value: IT[T]) => void;
|
|
9
|
+
get: <T extends keyof IT>(key: T) => IT[T];
|
|
10
|
+
delete: <T extends keyof IT>(key: T) => void;
|
|
11
|
+
clear: () => void;
|
|
12
|
+
getState: () => IT;
|
|
13
|
+
setState: (state: Partial<IT>) => void;
|
|
14
|
+
isChange: <T extends keyof IT>(key: T) => boolean | undefined;
|
|
15
|
+
getChanges: () => string[];
|
|
16
|
+
clearChanges: () => void;
|
|
17
|
+
};
|
|
7
18
|
set: <T extends keyof IT>(key: T, value: IT[T]) => void;
|
|
8
19
|
get: <T extends keyof IT>(key: T) => IT[T];
|
|
9
20
|
delete: <T extends keyof IT>(key: T) => void;
|
|
10
21
|
clear: () => void;
|
|
11
22
|
getState: () => IT;
|
|
12
23
|
setState: (state: Partial<IT>) => void;
|
|
13
|
-
isChange: <T extends keyof IT>(key: T) => boolean;
|
|
14
|
-
getChanges: () =>
|
|
24
|
+
isChange: <T extends keyof IT>(key: T) => boolean | undefined;
|
|
25
|
+
getChanges: () => string[];
|
|
15
26
|
clearChanges: () => void;
|
|
16
27
|
};
|
|
17
|
-
export {};
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useEffect, useId, useState } from "react";
|
|
2
|
+
import { useEffect, useId, useMemo, useState } from "react";
|
|
3
3
|
export const createBucket = (initial, option) => {
|
|
4
4
|
const hooks = new Map();
|
|
5
5
|
let data = new Map();
|
|
@@ -8,22 +8,23 @@ export const createBucket = (initial, option) => {
|
|
|
8
8
|
store: "memory",
|
|
9
9
|
...option,
|
|
10
10
|
};
|
|
11
|
+
for (let key in initial) {
|
|
12
|
+
let value = initial[key];
|
|
13
|
+
data.set(key, value);
|
|
14
|
+
changes.set(key, true);
|
|
15
|
+
}
|
|
11
16
|
const handleStorage = (isLoaded = true) => {
|
|
12
17
|
if (typeof window !== 'undefined') {
|
|
13
18
|
let url = new URL(window.location.href);
|
|
14
|
-
if (_option.store === 'session') {
|
|
19
|
+
if (_option.store === 'session' || _option.store === 'local') {
|
|
20
|
+
let storage = _option.store === "session" ? sessionStorage : localStorage;
|
|
15
21
|
for (let key in initial) {
|
|
16
|
-
let has =
|
|
22
|
+
let has = storage.getItem(key) !== null;
|
|
17
23
|
if (isLoaded || !has) {
|
|
18
|
-
|
|
19
|
-
sessionStorage.setItem(key, data.get(key));
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
sessionStorage.removeItem(key);
|
|
23
|
-
}
|
|
24
|
+
data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key);
|
|
24
25
|
}
|
|
25
26
|
else if (has) {
|
|
26
|
-
data.set(key,
|
|
27
|
+
data.set(key, storage.getItem(key));
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
}
|
|
@@ -31,12 +32,7 @@ export const createBucket = (initial, option) => {
|
|
|
31
32
|
for (let key in initial) {
|
|
32
33
|
let has = url.searchParams.has(key);
|
|
33
34
|
if (isLoaded || !has) {
|
|
34
|
-
|
|
35
|
-
url.searchParams.set(key, data.get(key));
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
url.searchParams.delete(key);
|
|
39
|
-
}
|
|
35
|
+
data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key);
|
|
40
36
|
}
|
|
41
37
|
else if (has) {
|
|
42
38
|
data.set(key, url.searchParams.get(key));
|
|
@@ -46,11 +42,6 @@ export const createBucket = (initial, option) => {
|
|
|
46
42
|
}
|
|
47
43
|
}
|
|
48
44
|
};
|
|
49
|
-
for (let key in initial) {
|
|
50
|
-
let value = initial[key];
|
|
51
|
-
data.set(key, value);
|
|
52
|
-
changes.set(key, true);
|
|
53
|
-
}
|
|
54
45
|
handleStorage(false);
|
|
55
46
|
let dispatch = () => {
|
|
56
47
|
hooks.forEach(d => {
|
|
@@ -59,75 +50,78 @@ export const createBucket = (initial, option) => {
|
|
|
59
50
|
}
|
|
60
51
|
catch (error) { }
|
|
61
52
|
});
|
|
53
|
+
handleStorage();
|
|
54
|
+
};
|
|
55
|
+
const set = (key, value) => {
|
|
56
|
+
if (!(key in initial))
|
|
57
|
+
throw new Error(`(${key}) Invalid key provided in the set function. Please verify the structure of the initial state data.`);
|
|
58
|
+
data.set(key, value);
|
|
59
|
+
changes.set(key, true);
|
|
60
|
+
dispatch();
|
|
61
|
+
};
|
|
62
|
+
const get = (key) => data.get(key);
|
|
63
|
+
const _delete = (key) => {
|
|
64
|
+
data.delete(key);
|
|
65
|
+
changes.set(key, true);
|
|
66
|
+
dispatch();
|
|
62
67
|
};
|
|
68
|
+
const clear = () => {
|
|
69
|
+
for (let key in initial) {
|
|
70
|
+
data.delete(key);
|
|
71
|
+
changes.set(key, true);
|
|
72
|
+
}
|
|
73
|
+
dispatch();
|
|
74
|
+
};
|
|
75
|
+
const getState = () => {
|
|
76
|
+
let d = {};
|
|
77
|
+
for (let key in initial) {
|
|
78
|
+
d[key] = data.get(key);
|
|
79
|
+
}
|
|
80
|
+
return d;
|
|
81
|
+
};
|
|
82
|
+
const setState = (state) => {
|
|
83
|
+
for (let key in state) {
|
|
84
|
+
if (!(key in initial))
|
|
85
|
+
throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);
|
|
86
|
+
data.set(key, state[key]);
|
|
87
|
+
changes.set(key, true);
|
|
88
|
+
}
|
|
89
|
+
dispatch();
|
|
90
|
+
};
|
|
91
|
+
const isChange = (key) => changes.get(key);
|
|
92
|
+
const getChanges = () => Array.from(changes.keys()).filter((key) => changes.get(key));
|
|
93
|
+
const clearChanges = () => Array.from(changes.keys()).forEach((key) => changes.set(key, false));
|
|
63
94
|
const useHook = () => {
|
|
64
95
|
const id = useId();
|
|
65
|
-
const [, setUp] = useState(0);
|
|
96
|
+
const [d, setUp] = useState(0);
|
|
66
97
|
useEffect(() => {
|
|
67
98
|
hooks.set(id, () => setUp(Math.random()));
|
|
68
99
|
return () => {
|
|
69
100
|
hooks.delete(id);
|
|
70
101
|
};
|
|
71
102
|
}, []);
|
|
103
|
+
const state = useMemo(() => getState(), [d]);
|
|
72
104
|
return {
|
|
73
|
-
set
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
return data.get(key);
|
|
83
|
-
},
|
|
84
|
-
delete: (key) => {
|
|
85
|
-
data.delete(key);
|
|
86
|
-
changes.set(key, true);
|
|
87
|
-
dispatch();
|
|
88
|
-
handleStorage();
|
|
89
|
-
},
|
|
90
|
-
clear: () => {
|
|
91
|
-
for (let key in initial) {
|
|
92
|
-
data.delete(key);
|
|
93
|
-
changes.set(key, true);
|
|
94
|
-
}
|
|
95
|
-
dispatch();
|
|
96
|
-
handleStorage();
|
|
97
|
-
},
|
|
98
|
-
getState: () => {
|
|
99
|
-
let d = {};
|
|
100
|
-
for (let key in initial) {
|
|
101
|
-
d[key] = data.get(key);
|
|
102
|
-
}
|
|
103
|
-
return d;
|
|
104
|
-
},
|
|
105
|
-
setState: (state) => {
|
|
106
|
-
for (let key in state) {
|
|
107
|
-
if (!(key in initial))
|
|
108
|
-
throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);
|
|
109
|
-
data.set(key, state[key]);
|
|
110
|
-
changes.set(key, true);
|
|
111
|
-
}
|
|
112
|
-
dispatch();
|
|
113
|
-
handleStorage();
|
|
114
|
-
},
|
|
115
|
-
isChange: (key) => Boolean(changes.get(key)),
|
|
116
|
-
getChanges: () => {
|
|
117
|
-
let _changes = {};
|
|
118
|
-
for (let key of changes.keys()) {
|
|
119
|
-
if (changes.get(key))
|
|
120
|
-
_changes[key] = true;
|
|
121
|
-
}
|
|
122
|
-
return _changes;
|
|
123
|
-
},
|
|
124
|
-
clearChanges: () => {
|
|
125
|
-
for (let key of changes.keys()) {
|
|
126
|
-
changes.set(key, false);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
105
|
+
set,
|
|
106
|
+
get,
|
|
107
|
+
delete: _delete,
|
|
108
|
+
clear,
|
|
109
|
+
getState: () => state,
|
|
110
|
+
setState,
|
|
111
|
+
isChange,
|
|
112
|
+
getChanges,
|
|
113
|
+
clearChanges,
|
|
129
114
|
};
|
|
130
115
|
};
|
|
116
|
+
useHook.set = set;
|
|
117
|
+
useHook.get = get;
|
|
118
|
+
useHook.delete = _delete;
|
|
119
|
+
useHook.clear = clear;
|
|
120
|
+
useHook.getState = getState;
|
|
121
|
+
useHook.setState = setState;
|
|
122
|
+
useHook.isChange = isChange;
|
|
123
|
+
useHook.getChanges = getChanges;
|
|
124
|
+
useHook.clearChanges = clearChanges;
|
|
131
125
|
return useHook;
|
|
132
126
|
};
|
|
133
127
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED