react-state-bucket 1.0.6 → 1.0.8
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/index.js +2 -0
- package/index.js.map +7 -0
- package/package.json +32 -41
- package/LICENSE +0 -21
- package/README.md +0 -237
- package/dist/index.js +0 -127
- package/dist/index.js.map +0 -1
- /package/{dist/index.d.ts → index.d.ts} +0 -0
package/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{useEffect as v,useId as x,useMemo as P,useState as C}from"react";const M=(l,S)=>{const f=new Map;let r=new Map,o=new Map,c={store:"memory",...S};for(let e in l){let t=l[e];r.set(e,t),o.set(e,!0)}const g=(e=!0)=>{if(typeof window<"u"){let t=new URL(window.location.href);if(c.store==="session"||c.store==="local"){let s=c.store==="session"?sessionStorage:localStorage;for(let n in l){let w=s.getItem(n)!==null;e||!w?r.has(n)?s.setItem(n,r.get(n)):s.removeItem(n):w&&r.set(n,s.getItem(n))}}else if(c.store==="url"){for(let s in l){let n=t.searchParams.has(s);e||!n?r.has(s)?t.searchParams.set(s,r.get(s)):t.searchParams.delete(s):n&&r.set(s,t.searchParams.get(s))}window.history.replaceState(null,"",t.toString())}}};g(!1);let i=()=>{f.forEach(e=>{try{e()}catch{}}),g()};const u=(e,t)=>{if(!(e in l))throw new Error(`(${e}) Invalid key provided in the set function. Please verify the structure of the initial state data.`);r.set(e,t),o.set(e,!0),i()},h=e=>r.get(e),d=e=>{r.delete(e),o.set(e,!0),i()},y=()=>{for(let e in l)r.delete(e),o.set(e,!0);i()},T=()=>{let e={};for(let t in l)e[t]=r.get(t);return e},m=e=>{for(let t in e){if(!(t in l))throw new Error(`(${t}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`);r.set(t,e[t]),o.set(t,!0)}i()},k=e=>o.get(e),p=()=>Array.from(o.keys()).filter(e=>o.get(e)),I=()=>Array.from(o.keys()).forEach(e=>o.set(e,!1)),a=()=>{const e=x(),[t,s]=C(0);v(()=>(f.set(e,()=>s(Math.random())),()=>{f.delete(e)}),[]);const n=P(()=>T(),[t]);return{set:u,get:h,delete:d,clear:y,getState:()=>n,setState:m,isChange:k,getChanges:p,clearChanges:I}};return a.set=u,a.get=h,a.delete=d,a.clear=y,a.getState=T,a.setState=m,a.isChange=k,a.getChanges=p,a.clearChanges=I,a};export{M as createBucket};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
package/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["\"use client\"\nimport { useEffect, useId, useMemo, useState } from \"react\"\n\nexport type BucketOptions = {\n store?: \"memory\" | \"session\" | \"local\" | \"url\"\n}\n\nexport const createBucket = <IT extends { [key: string]: any }>(initial: IT, option?: BucketOptions) => {\n const hooks = new Map<string, Function>()\n let data = new Map<any, any>()\n let changes = new Map<string, boolean>()\n\n let _option: BucketOptions = {\n store: \"memory\",\n ...option,\n }\n\n for (let key in initial) {\n let value = initial[key]\n data.set(key, value)\n changes.set(key, true)\n }\n\n const handleStorage = (isLoaded = true) => {\n if (typeof window !== 'undefined') {\n let url = new URL(window.location.href)\n if (_option.store === 'session' || _option.store === 'local') {\n let storage = _option.store === \"session\" ? sessionStorage : localStorage\n for (let key in initial) {\n let has = storage.getItem(key) !== null\n if (isLoaded || !has) {\n data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key)\n } else if (has) {\n data.set(key, storage.getItem(key))\n }\n }\n } else if (_option.store === \"url\") {\n for (let key in initial) {\n let has = url.searchParams.has(key)\n if (isLoaded || !has) {\n data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key)\n } else if (has) {\n data.set(key, url.searchParams.get(key))\n }\n }\n window.history.replaceState(null, '', url.toString())\n }\n }\n }\n\n handleStorage(false)\n\n let dispatch = () => {\n hooks.forEach(d => {\n try { d() } catch (error) { }\n })\n handleStorage()\n }\n\n const set = <T extends keyof IT>(key: T, value: IT[T]) => {\n if (!(key in initial)) throw new Error(`(${key as string}) Invalid key provided in the set function. Please verify the structure of the initial state data.`)\n data.set(key, value)\n changes.set(key as string, true)\n dispatch()\n }\n\n const get = <T extends keyof IT>(key: T): IT[T] => data.get(key)\n const _delete = <T extends keyof IT>(key: T) => {\n data.delete(key)\n changes.set(key as string, true)\n dispatch()\n }\n\n const clear = () => {\n for (let key in initial) {\n data.delete(key)\n changes.set(key, true)\n }\n dispatch()\n }\n\n const getState = () => {\n let d: any = {}\n for (let key in initial) {\n d[key] = data.get(key)\n }\n return d as IT\n }\n\n const setState = (state: Partial<IT>) => {\n for (let key in state) {\n if (!(key in initial)) throw new Error(`(${key}) Invalid key provided in the setState function. Please verify the structure of the initial state data.`)\n data.set(key, state[key] as any)\n changes.set(key, true)\n }\n dispatch()\n }\n const isChange = <T extends keyof IT>(key: T) => changes.get(key as string)\n const getChanges = () => Array.from(changes.keys()).filter((key: string) => changes.get(key as string))\n const clearChanges = () => Array.from(changes.keys()).forEach((key: string) => changes.set(key, false))\n\n const useHook = () => {\n const id = useId()\n const [d, setUp] = useState(0)\n\n useEffect(() => {\n hooks.set(id, () => setUp(Math.random()))\n return () => {\n hooks.delete(id)\n }\n }, [])\n\n const state = useMemo(() => getState(), [d])\n\n return {\n set,\n get,\n delete: _delete,\n clear,\n getState: () => state,\n setState,\n isChange,\n getChanges,\n clearChanges,\n }\n }\n\n useHook.set = set\n useHook.get = get\n useHook.delete = _delete\n useHook.clear = clear\n useHook.getState = getState\n useHook.setState = setState\n useHook.isChange = isChange\n useHook.getChanges = getChanges\n useHook.clearChanges = clearChanges\n\n return useHook\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useEffect", "useId", "useMemo", "useState", "createBucket", "initial", "option", "hooks", "data", "changes", "_option", "key", "value", "handleStorage", "isLoaded", "url", "storage", "has", "dispatch", "d", "set", "get", "_delete", "clear", "getState", "setState", "state", "isChange", "getChanges", "clearChanges", "useHook", "id", "setUp"]
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,42 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": "1.0.
|
|
3
|
-
"name": "react-state-bucket",
|
|
4
|
-
"author": "Naxrul Ahmed",
|
|
5
|
-
"license": "MIT",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"@size-limit/preset-small-lib": "^11.1.4",
|
|
34
|
-
"@types/react": "^18.3.3",
|
|
35
|
-
"@types/react-dom": "^18.3.0",
|
|
36
|
-
"parcel": "^2.12.0",
|
|
37
|
-
"process": "^0.11.10",
|
|
38
|
-
"react": "^18.3.1",
|
|
39
|
-
"react-dom": "^18.3.1",
|
|
40
|
-
"typescript": "^5.5.3"
|
|
41
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"version": "1.0.8",
|
|
3
|
+
"name": "react-state-bucket",
|
|
4
|
+
"author": "Naxrul Ahmed",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "github",
|
|
8
|
+
"url": "https://github.com/devnax/react-state-bucket.git"
|
|
9
|
+
},
|
|
10
|
+
"main": "./index.js",
|
|
11
|
+
"description": "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.",
|
|
12
|
+
"scripts": {
|
|
13
|
+
"start": "makepack serve",
|
|
14
|
+
"pack": "makepack pack",
|
|
15
|
+
"publish:pack": "makepack pack -p"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@types/react": "^19.0.2",
|
|
19
|
+
"@types/react-dom": "^19.0.2",
|
|
20
|
+
"makepack": "latest",
|
|
21
|
+
"react": "^19.0.0",
|
|
22
|
+
"react-dom": "^19.0.0",
|
|
23
|
+
"typescript": "^4.4.2"
|
|
24
|
+
},
|
|
25
|
+
"keywords": [
|
|
26
|
+
"react",
|
|
27
|
+
"state management",
|
|
28
|
+
"global state",
|
|
29
|
+
"CRUD operations",
|
|
30
|
+
"lightweight",
|
|
31
|
+
"typescript"
|
|
32
|
+
]
|
|
42
33
|
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 Naxrul Ahmed
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/README.md
DELETED
|
@@ -1,237 +0,0 @@
|
|
|
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>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">React State Bucket</h1>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
`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.
|
|
9
|
-
|
|
10
|
-
This package supports multiple storage options, including:
|
|
11
|
-
|
|
12
|
-
- Memory (default)
|
|
13
|
-
- Session Storage
|
|
14
|
-
- Local Storage
|
|
15
|
-
- URL Query Parameters
|
|
16
|
-
|
|
17
|
-
## Installation
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
npm install react-state-bucket
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Features
|
|
24
|
-
|
|
25
|
-
- **Global State Management**: Easily manage state across your entire React application.
|
|
26
|
-
- **CRUD Operations**: Create, Read, Update, and Delete state values effortlessly.
|
|
27
|
-
- **Multiple Storage Options**: Choose where to store your data ("memory", "session", "local", or "url").
|
|
28
|
-
- **Reactivity**: Automatically update components when the state changes.
|
|
29
|
-
- **Custom Hooks**: Seamlessly integrate with React’s functional components.
|
|
30
|
-
|
|
31
|
-
## Usage
|
|
32
|
-
|
|
33
|
-
### Basic Example
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
"use client";
|
|
37
|
-
|
|
38
|
-
import React from "react";
|
|
39
|
-
import createBucket from "react-state-bucket";
|
|
40
|
-
|
|
41
|
-
// Create a bucket with initial state
|
|
42
|
-
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
43
|
-
|
|
44
|
-
function App() {
|
|
45
|
-
const globalState = useGlobalState();
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<div>
|
|
49
|
-
<h1>Global State Management</h1>
|
|
50
|
-
<p>Count: {globalState.get("count")}</p>
|
|
51
|
-
<button onClick={() => globalState.set("count", globalState.get("count") + 1)}>Increment</button>
|
|
52
|
-
<button onClick={() => globalState.delete("count")}>Reset Count</button>
|
|
53
|
-
<pre>{JSON.stringify(globalState.getState(), null, 2)}</pre>
|
|
54
|
-
</div>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export default App;
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### Using Multiple Buckets
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
const useUserBucket = createBucket({ name: "", age: 0 });
|
|
65
|
-
const useSettingsBucket = createBucket({ theme: "light", notifications: true });
|
|
66
|
-
|
|
67
|
-
function Profile() {
|
|
68
|
-
const userBucket = useUserBucket();
|
|
69
|
-
const settingsBucket = useSettingsBucket();
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<div>
|
|
73
|
-
<h1>User Profile</h1>
|
|
74
|
-
<button onClick={() => userBucket.set("name", "John Doe")}>Set Name</button>
|
|
75
|
-
<button onClick={() => settingsBucket.set("theme", "dark")}>Change Theme</button>
|
|
76
|
-
<pre>User State: {JSON.stringify(userBucket.getState(), null, 2)}</pre>
|
|
77
|
-
<p>Current Theme: {settingsBucket.get("theme")}</p>
|
|
78
|
-
</div>
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Storage Options Example
|
|
84
|
-
|
|
85
|
-
```jsx
|
|
86
|
-
const usePersistentBucket = createBucket(
|
|
87
|
-
{ token: "", language: "en" },
|
|
88
|
-
{ store: "local" }
|
|
89
|
-
);
|
|
90
|
-
|
|
91
|
-
function PersistentExample() {
|
|
92
|
-
const persistentBucket = usePersistentBucket();
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<div>
|
|
96
|
-
<h1>Persistent Bucket</h1>
|
|
97
|
-
<button onClick={() => persistentBucket.set("token", "abc123")}>Set Token</button>
|
|
98
|
-
<p>Token: {persistentBucket.get("token")}</p>
|
|
99
|
-
</div>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
### Reusing State Across Components
|
|
105
|
-
|
|
106
|
-
```jsx
|
|
107
|
-
"use client";
|
|
108
|
-
|
|
109
|
-
import React from "react";
|
|
110
|
-
import createBucket from "react-state-bucket";
|
|
111
|
-
|
|
112
|
-
// Create a global bucket
|
|
113
|
-
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
114
|
-
|
|
115
|
-
function Counter() {
|
|
116
|
-
const globalState = useGlobalState(); // Access bucket functions and trigger re-render on state updates
|
|
117
|
-
|
|
118
|
-
return (
|
|
119
|
-
<div>
|
|
120
|
-
<h2>Counter Component</h2>
|
|
121
|
-
<p>Count: {globalState.get("count")}</p>
|
|
122
|
-
<button onClick={() => globalState.set("count", globalState.get("count") + 1)}>
|
|
123
|
-
Increment Count
|
|
124
|
-
</button>
|
|
125
|
-
</div>
|
|
126
|
-
);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function UserDisplay() {
|
|
130
|
-
const globalState = useGlobalState(); // Reuse the same global bucket for reactivity
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<div>
|
|
134
|
-
<h2>User Component</h2>
|
|
135
|
-
<p>Current User: {globalState.get("user")}</p>
|
|
136
|
-
<button onClick={() => globalState.set("user", "John Doe")}>
|
|
137
|
-
Set User to John Doe
|
|
138
|
-
</button>
|
|
139
|
-
</div>
|
|
140
|
-
);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function App() {
|
|
144
|
-
|
|
145
|
-
return (
|
|
146
|
-
<div>
|
|
147
|
-
<h1>Global State Example</h1>
|
|
148
|
-
<Counter />
|
|
149
|
-
<UserDisplay />
|
|
150
|
-
<pre>Global State: {JSON.stringify(useGlobalState().getState(), null, 2)}</pre>
|
|
151
|
-
</div>
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
export default App;
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## Direct Usage of Functions
|
|
159
|
-
|
|
160
|
-
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.
|
|
161
|
-
|
|
162
|
-
### Example
|
|
163
|
-
|
|
164
|
-
```jsx
|
|
165
|
-
const useGlobalState = createBucket({ count: 0, user: "Guest" });
|
|
166
|
-
|
|
167
|
-
function Counter() {
|
|
168
|
-
|
|
169
|
-
return (
|
|
170
|
-
<div>
|
|
171
|
-
<p>Count: {useGlobalState.get("count")}</p>
|
|
172
|
-
<button onClick={() => useGlobalState.set("count", useGlobalState.get("count") + 1)}>Increment</button>
|
|
173
|
-
</div>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
function App() {
|
|
178
|
-
useGlobalState(); // Will automatically re-render when state updates
|
|
179
|
-
|
|
180
|
-
return (
|
|
181
|
-
<div>
|
|
182
|
-
<Counter />
|
|
183
|
-
</div>
|
|
184
|
-
);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
export default App;
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
## API Reference
|
|
193
|
-
|
|
194
|
-
### `createBucket(initial: object, option?: BucketOptions)`
|
|
195
|
-
|
|
196
|
-
Creates a new bucket for managing the global state.
|
|
197
|
-
|
|
198
|
-
#### Parameters
|
|
199
|
-
|
|
200
|
-
| Name | Type | Description |
|
|
201
|
-
| --------- | --------- | ----------------------------------------- |
|
|
202
|
-
| `initial` | `object` | Initial state values. |
|
|
203
|
-
| `option` | `object?` | Optional configuration (default: memory). |
|
|
204
|
-
|
|
205
|
-
#### `BucketOptions`
|
|
206
|
-
|
|
207
|
-
`BucketOptions` allows you to configure how and where the state is stored. It includes:
|
|
208
|
-
|
|
209
|
-
| Property | Type | Description |
|
|
210
|
-
| -------- | ------------------------------------- | ---------------------------------------------- |
|
|
211
|
-
| `store` | `'memory', 'session', 'local', 'url'` | Specifies the storage mechanism for the state. |
|
|
212
|
-
|
|
213
|
-
### Returned Functions
|
|
214
|
-
|
|
215
|
-
#### State Management
|
|
216
|
-
|
|
217
|
-
| Function | Description |
|
|
218
|
-
| ----------------- | ----------------------------------------------------- |
|
|
219
|
-
| `set(key, value)` | Sets the value of a specific key in the state. |
|
|
220
|
-
| `get(key)` | Retrieves the value of a specific key from the state. |
|
|
221
|
-
| `delete(key)` | Removes a key-value pair from the state. |
|
|
222
|
-
| `clear()` | Clears all state values. |
|
|
223
|
-
| `getState()` | Returns the entire state as an object. |
|
|
224
|
-
| `setState(state)` | Updates the state with a partial object. |
|
|
225
|
-
|
|
226
|
-
#### Change Detection
|
|
227
|
-
|
|
228
|
-
| Function | Description |
|
|
229
|
-
| ---------------- | ------------------------------------------- |
|
|
230
|
-
| `isChange(key)` | Checks if a specific key has been modified. |
|
|
231
|
-
| `getChanges()` | Returns an array of keys that have changed. |
|
|
232
|
-
| `clearChanges()` | Resets the change detection for all keys. |
|
|
233
|
-
|
|
234
|
-
## License
|
|
235
|
-
|
|
236
|
-
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
|
237
|
-
|
package/dist/index.js
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { useEffect, useId, useMemo, useState } from "react";
|
|
3
|
-
export const createBucket = (initial, option) => {
|
|
4
|
-
const hooks = new Map();
|
|
5
|
-
let data = new Map();
|
|
6
|
-
let changes = new Map();
|
|
7
|
-
let _option = {
|
|
8
|
-
store: "memory",
|
|
9
|
-
...option,
|
|
10
|
-
};
|
|
11
|
-
for (let key in initial) {
|
|
12
|
-
let value = initial[key];
|
|
13
|
-
data.set(key, value);
|
|
14
|
-
changes.set(key, true);
|
|
15
|
-
}
|
|
16
|
-
const handleStorage = (isLoaded = true) => {
|
|
17
|
-
if (typeof window !== 'undefined') {
|
|
18
|
-
let url = new URL(window.location.href);
|
|
19
|
-
if (_option.store === 'session' || _option.store === 'local') {
|
|
20
|
-
let storage = _option.store === "session" ? sessionStorage : localStorage;
|
|
21
|
-
for (let key in initial) {
|
|
22
|
-
let has = storage.getItem(key) !== null;
|
|
23
|
-
if (isLoaded || !has) {
|
|
24
|
-
data.has(key) ? storage.setItem(key, data.get(key)) : storage.removeItem(key);
|
|
25
|
-
}
|
|
26
|
-
else if (has) {
|
|
27
|
-
data.set(key, storage.getItem(key));
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
else if (_option.store === "url") {
|
|
32
|
-
for (let key in initial) {
|
|
33
|
-
let has = url.searchParams.has(key);
|
|
34
|
-
if (isLoaded || !has) {
|
|
35
|
-
data.has(key) ? url.searchParams.set(key, data.get(key)) : url.searchParams.delete(key);
|
|
36
|
-
}
|
|
37
|
-
else if (has) {
|
|
38
|
-
data.set(key, url.searchParams.get(key));
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
window.history.replaceState(null, '', url.toString());
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
handleStorage(false);
|
|
46
|
-
let dispatch = () => {
|
|
47
|
-
hooks.forEach(d => {
|
|
48
|
-
try {
|
|
49
|
-
d();
|
|
50
|
-
}
|
|
51
|
-
catch (error) { }
|
|
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();
|
|
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));
|
|
94
|
-
const useHook = () => {
|
|
95
|
-
const id = useId();
|
|
96
|
-
const [d, setUp] = useState(0);
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
hooks.set(id, () => setUp(Math.random()));
|
|
99
|
-
return () => {
|
|
100
|
-
hooks.delete(id);
|
|
101
|
-
};
|
|
102
|
-
}, []);
|
|
103
|
-
const state = useMemo(() => getState(), [d]);
|
|
104
|
-
return {
|
|
105
|
-
set,
|
|
106
|
-
get,
|
|
107
|
-
delete: _delete,
|
|
108
|
-
clear,
|
|
109
|
-
getState: () => state,
|
|
110
|
-
setState,
|
|
111
|
-
isChange,
|
|
112
|
-
getChanges,
|
|
113
|
-
clearChanges,
|
|
114
|
-
};
|
|
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;
|
|
125
|
-
return useHook;
|
|
126
|
-
};
|
|
127
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
File without changes
|