dphelper 2.6.3 → 3.0.0
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/CODE_OF_CONDUCT.md +108 -0
- package/COPYRIGHT.md +6 -0
- package/README.md +133 -291
- package/SECURITY.md +3 -0
- package/index.js +173 -1
- package/package.json +96 -194
- package/types/dphelper.d.ts +143 -543
- package/types/index.d.ts +48 -0
- package/types/scripts/generate-imports.d.ts +1 -0
- package/types/scripts/over.d.ts +1 -0
- package/types/scripts/setProps.d.ts +1 -0
- package/types/scripts/setupGlobal.d.ts +1 -0
- package/types/tools/ai/index.d.ts +1 -0
- package/types/tools/anchor/index.d.ts +1 -0
- package/types/tools/array/index.d.ts +1 -0
- package/types/tools/audio/index.d.ts +1 -0
- package/types/tools/avoid/index.d.ts +1 -0
- package/types/tools/browser/index.d.ts +1 -0
- package/types/tools/check/index.d.ts +1 -0
- package/types/tools/color/index.d.ts +1 -0
- package/types/tools/cookie/index.d.ts +1 -0
- package/types/tools/coords/index.d.ts +1 -0
- package/types/tools/credits/index.d.ts +1 -0
- package/types/tools/date/index.d.ts +1 -0
- package/types/tools/disable/index.d.ts +1 -0
- package/types/tools/dispatch/index.d.ts +1 -0
- package/types/tools/elements/index.d.ts +1 -0
- package/types/tools/events/index.d.ts +1 -0
- package/types/tools/fetch/index.d.ts +1 -0
- package/types/tools/form/index.d.ts +1 -0
- package/types/tools/format/index.d.ts +1 -0
- package/types/tools/json/index.d.ts +1 -0
- package/types/tools/load/index.d.ts +1 -0
- package/types/tools/logging/index.d.ts +1 -0
- package/types/tools/math/index.d.ts +1 -0
- package/types/tools/memory/index.d.ts +1 -0
- package/types/tools/objects/index.d.ts +1 -0
- package/types/tools/path/index.d.ts +1 -0
- package/types/tools/promise/index.d.ts +1 -0
- package/types/tools/sanitize/index.d.ts +1 -0
- package/types/tools/screen/index.d.ts +1 -0
- package/types/tools/screen/popupManager.d.ts +32 -0
- package/types/tools/scrollbar/index.d.ts +1 -0
- package/types/tools/security/index.d.ts +1 -0
- package/types/tools/shortcut/index.d.ts +1 -0
- package/types/tools/socket/index.d.ts +1 -0
- package/types/tools/sse/index.d.ts +1 -0
- package/types/tools/svg/index.d.ts +1 -0
- package/types/tools/sync/index.d.ts +1 -0
- package/types/tools/system/index.d.ts +1 -0
- package/types/tools/text/index.d.ts +1 -0
- package/types/tools/timer/index.d.ts +1 -0
- package/types/tools/tools/index.d.ts +1 -0
- package/types/tools/translators/index.d.ts +1 -0
- package/types/tools/triggers/index.d.ts +1 -0
- package/types/tools/types/index.d.ts +1 -0
- package/types/tools/ui/index.d.ts +1 -0
- package/types/tools/window/index.d.ts +1 -0
- package/DISCLAIMER.md +0 -11
- package/docs/_config.yml +0 -1
- package/docs/index.md +0 -380
- package/documents/OBSERVER.md +0 -63
- package/documents/SESSION.md +0 -54
- package/documents/STATE.md +0 -65
- package/documents/STORE.md +0 -76
- package/documents/SUMMARY.md +0 -24
- package/documents/TOOLS.md +0 -1282
- package/documents/USEOBSERVER.md +0 -26
- package/index.d.ts +0 -22
- package/types/cache.d.ts +0 -27
- package/types/idb.d.ts +0 -21
- package/types/jquery.d.ts +0 -20
- package/types/memorio.d.ts +0 -21
- package/types/observer.d.ts +0 -47
- package/types/session.d.ts +0 -67
- package/types/state.d.ts +0 -71
- package/types/store.d.ts +0 -91
- package/types/useobserver.d.ts +0 -28
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import "./scripts/setupGlobal";
|
|
2
|
+
import "./scripts/setProps";
|
|
3
|
+
import "./tools/ai/index";
|
|
4
|
+
import "./tools/anchor/index";
|
|
5
|
+
import "./tools/array/index";
|
|
6
|
+
import "./tools/audio/index";
|
|
7
|
+
import "./tools/avoid/index";
|
|
8
|
+
import "./tools/browser/index";
|
|
9
|
+
import "./tools/check/index";
|
|
10
|
+
import "./tools/color/index";
|
|
11
|
+
import "./tools/cookie/index";
|
|
12
|
+
import "./tools/coords/index";
|
|
13
|
+
import "./tools/credits/index";
|
|
14
|
+
import "./tools/date/index";
|
|
15
|
+
import "./tools/disable/index";
|
|
16
|
+
import "./tools/dispatch/index";
|
|
17
|
+
import "./tools/elements/index";
|
|
18
|
+
import "./tools/events/index";
|
|
19
|
+
import "./tools/fetch/index";
|
|
20
|
+
import "./tools/form/index";
|
|
21
|
+
import "./tools/format/index";
|
|
22
|
+
import "./tools/json/index";
|
|
23
|
+
import "./tools/load/index";
|
|
24
|
+
import "./tools/logging/index";
|
|
25
|
+
import "./tools/math/index";
|
|
26
|
+
import "./tools/memory/index";
|
|
27
|
+
import "./tools/objects/index";
|
|
28
|
+
import "./tools/path/index";
|
|
29
|
+
import "./tools/promise/index";
|
|
30
|
+
import "./tools/sanitize/index";
|
|
31
|
+
import "./tools/screen/index";
|
|
32
|
+
import "./tools/scrollbar/index";
|
|
33
|
+
import "./tools/security/index";
|
|
34
|
+
import "./tools/shortcut/index";
|
|
35
|
+
import "./tools/socket/index";
|
|
36
|
+
import "./tools/sse/index";
|
|
37
|
+
import "./tools/svg/index";
|
|
38
|
+
import "./tools/sync/index";
|
|
39
|
+
import "./tools/system/index";
|
|
40
|
+
import "./tools/text/index";
|
|
41
|
+
import "./tools/timer/index";
|
|
42
|
+
import "./tools/tools/index";
|
|
43
|
+
import "./tools/translators/index";
|
|
44
|
+
import "./tools/triggers/index";
|
|
45
|
+
import "./tools/types/index";
|
|
46
|
+
import "./tools/ui/index";
|
|
47
|
+
import "./tools/window/index";
|
|
48
|
+
export default dphelper;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
interface MonitorInfo {
|
|
2
|
+
id: string;
|
|
3
|
+
width: number;
|
|
4
|
+
height: number;
|
|
5
|
+
left: number;
|
|
6
|
+
top: number;
|
|
7
|
+
isPrimary: boolean;
|
|
8
|
+
}
|
|
9
|
+
interface PopupState {
|
|
10
|
+
id: string;
|
|
11
|
+
monitorId: string;
|
|
12
|
+
left: number;
|
|
13
|
+
top: number;
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
monitorFingerprint: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const popupManager: {
|
|
19
|
+
save: (id: string, win?: Window) => void;
|
|
20
|
+
restore: (id: string) => {
|
|
21
|
+
left: number;
|
|
22
|
+
top: number;
|
|
23
|
+
width: number;
|
|
24
|
+
height: number;
|
|
25
|
+
} | null;
|
|
26
|
+
remove: (id: string) => void;
|
|
27
|
+
list: () => Record<string, PopupState>;
|
|
28
|
+
clear: () => void;
|
|
29
|
+
getMonitors: () => MonitorInfo[];
|
|
30
|
+
getCurrentMonitor: () => MonitorInfo;
|
|
31
|
+
};
|
|
32
|
+
export default popupManager;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/DISCLAIMER.md
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
# DISCLAIMER
|
|
2
|
-
|
|
3
|
-
```text
|
|
4
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
5
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
6
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
7
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
8
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
9
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
10
|
-
SOFTWARE.
|
|
11
|
-
```
|
package/docs/_config.yml
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
theme: jekyll-theme-modernist
|
package/docs/index.md
DELETED
|
@@ -1,380 +0,0 @@
|
|
|
1
|
-
# [dphelper](https://npmjs.com/package/dphelper)
|
|
2
|
-
|
|
3
|
-

|
|
4
|
-
|
|
5
|
-
**Manager | DevTools** by [Dario Passariello](https://dario.passariello.ca) (c)
|
|
6
|
-
|
|
7
|
-
[](https://npmjs.org/package/dphelper)
|
|
8
|
-
[](https://npmjs.org/package/dphelper)
|
|
9
|
-
|
|
10
|
-

|
|
11
|
-

|
|
12
|
-

|
|
13
|
-

|
|
14
|
-
|
|
15
|
-

|
|
16
|
-

|
|
17
|
-

|
|
18
|
-

|
|
19
|
-
|
|
20
|
-

|
|
21
|
-

|
|
22
|
-
|
|
23
|
-
[](https://a51.gitbook.io/dphelper)
|
|
24
|
-
|
|
25
|
-
## Table of Contents
|
|
26
|
-
|
|
27
|
-
1. [About](#about)
|
|
28
|
-
2. [Installation](#install)
|
|
29
|
-
3. [Live Demo](#live-demo)
|
|
30
|
-
4. [Documentation](#documentation)
|
|
31
|
-
1. [State](#state)
|
|
32
|
-
2. [Store](#store)
|
|
33
|
-
3. [Session](#session)
|
|
34
|
-
4. [Observer](#observer)
|
|
35
|
-
5. [useObserver](#useobserver)
|
|
36
|
-
5. [Security](#security)
|
|
37
|
-
|
|
38
|
-
## About
|
|
39
|
-
|
|
40
|
-
dpHelper is a precise and complete collection of 190+ tools ready to use in all web/SaaS applications. State and Store Management are now easy, accessible everywhere in your application, including Ajax or React apps, without the need for extra files.
|
|
41
|
-
|
|
42
|
-
1. **Single Source of Truth**: The application's entire state is held within a single object in one store, ensuring consistent and accessible state management throughout the app.
|
|
43
|
-
|
|
44
|
-
2. **State is flexible**: State changes are facilitated exclusively through actions. These actions, which are straightforward JavaScript objects, delineate what has occurred. This methodology ensures that state changes remain predictable.
|
|
45
|
-
|
|
46
|
-
3. **Changes are made with proxy handle function**: To define state changes, dpHelper employs pure functions as intermediaries. These functions accept the current state as input and produce a new state as output, ensuring predictability and ease of testing in the system.
|
|
47
|
-
|
|
48
|
-
<!-- 4. **Based on [Memorio](https://www.npmjs.com/package/memorio) by Dario Passariello** to manage STATE, STORE, SESSION and OBSERVER. You can use Memorio is you need only state management. DpHelper is indicate when you use a complete suite of tools. -->
|
|
49
|
-
|
|
50
|
-
### Example in React
|
|
51
|
-
|
|
52
|
-
```js
|
|
53
|
-
import { useEffect } from 'react';
|
|
54
|
-
import 'dphelper';
|
|
55
|
-
|
|
56
|
-
function App() {
|
|
57
|
-
// Store a value in the state
|
|
58
|
-
state.test = 'Hello, World!';
|
|
59
|
-
|
|
60
|
-
// Use the stored value in a React component
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
console.log("You can recall from all pages: " + state.test); // Output: "Hello, World!"
|
|
63
|
-
}, []);
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
<div>
|
|
67
|
-
<h1>{state.test}</h1>
|
|
68
|
-
</div>
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export default App;
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Install
|
|
76
|
-
|
|
77
|
-
Install dpHelper.
|
|
78
|
-
|
|
79
|
-
```shell
|
|
80
|
-
npm i dphelper --save-dev
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
or update:
|
|
84
|
-
|
|
85
|
-
```shell
|
|
86
|
-
npm i dphelper@latest --save-dev
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
Use it in the main root file (and only there):
|
|
90
|
-
|
|
91
|
-
```js
|
|
92
|
-
import "dphelper";
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
or
|
|
96
|
-
|
|
97
|
-
```js
|
|
98
|
-
require("dphelper");
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
## Install for EJS or Other Types of Projects (like HTML)
|
|
102
|
-
|
|
103
|
-
Note: You don't need to use npm install in this case, or you will get an error.
|
|
104
|
-
|
|
105
|
-
```html
|
|
106
|
-
<script src="https://cdn.jsdelivr.net/npm/dphelper@latest"></script>
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Live Demo
|
|
110
|
-
|
|
111
|
-
[https://tests.a51.dev/](https://tests.a51.dev/)
|
|
112
|
-
|
|
113
|
-
You can see an HTML version where dpHelper and LayerPro work together seamlessly. dpHelper is compatible with a variety of frontend libraries, including:
|
|
114
|
-
|
|
115
|
-
* HTML
|
|
116
|
-
* React
|
|
117
|
-
* Vue
|
|
118
|
-
* And any other frontend library
|
|
119
|
-
|
|
120
|
-
## Documentation
|
|
121
|
-
|
|
122
|
-
You can see:
|
|
123
|
-
|
|
124
|
-
* [State](https://a51.gitbook.io/dphelper/general/state)
|
|
125
|
-
* [Store](https://a51.gitbook.io/dphelper/general/store)
|
|
126
|
-
* [Observer](https://a51.gitbook.io/dphelper/general/observer)
|
|
127
|
-
* [useObserver](https://a51.gitbook.io/dphelper/general/useobserver)
|
|
128
|
-
* [List of functions](https://a51.gitbook.io/dphelper/general/tools)
|
|
129
|
-
|
|
130
|
-
You can see more tutorials, information, and examples about **dpHelper** [clicking here](https://a51.gitbook.io/dphelper).
|
|
131
|
-
|
|
132
|
-
## State
|
|
133
|
-
|
|
134
|
-
### Using the "state"
|
|
135
|
-
|
|
136
|
-
You can use the state function to store and reuse data throughout your application. Similar to other state managers, you can save state information in JSON format and access it easily in various contexts, including React useEffect and/or dispatch.
|
|
137
|
-
|
|
138
|
-
For example, you can store a value like this: _state.test = 'I am ready'_ and then retrieve it later using state.test.
|
|
139
|
-
|
|
140
|
-
_example:_
|
|
141
|
-
|
|
142
|
-
You can use the browser's devtools console and type " **state.test = 'I am ready'** ". Every time you want to use '**test**' values, you need just recall **state.test**.
|
|
143
|
-
|
|
144
|
-
```js
|
|
145
|
-
// Set a state
|
|
146
|
-
state.test = "I am ready" *
|
|
147
|
-
|
|
148
|
-
// Get the state
|
|
149
|
-
state.test *
|
|
150
|
-
|
|
151
|
-
// List all states
|
|
152
|
-
state.list // or just "state" to see the proxy
|
|
153
|
-
|
|
154
|
-
// Lock a state from edit (Only for Objects or Array)
|
|
155
|
-
state.test.lock() *
|
|
156
|
-
|
|
157
|
-
// Remove a state
|
|
158
|
-
state.remove("test")
|
|
159
|
-
|
|
160
|
-
// Remove all states
|
|
161
|
-
state.removeAll()
|
|
162
|
-
|
|
163
|
-
*["test" is only an example]
|
|
164
|
-
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### Observer
|
|
168
|
-
|
|
169
|
-
**Note**: _Observer works only with states. Stores are excluded at the moment._
|
|
170
|
-
|
|
171
|
-
If you want to run a function every time a state changes, you can use:
|
|
172
|
-
|
|
173
|
-
```js
|
|
174
|
-
/**
|
|
175
|
-
* Observer is a non-cumulative listener,
|
|
176
|
-
* triggered from customEvent / dispatch from state
|
|
177
|
-
* @parameters
|
|
178
|
-
* [ state | store, function ]
|
|
179
|
-
*/
|
|
180
|
-
observer( "state.test", () => alert("Test Changes to: " + state.test) )
|
|
181
|
-
|__________| |___________________________________________|
|
|
182
|
-
State: string Function
|
|
183
|
-
|
|
184
|
-
PS: you need to use the name of state | store as string
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
You can use it everywhere. Works like "useState" in React but with more flexibility (use one observer for each state!).
|
|
188
|
-
|
|
189
|
-
### Example
|
|
190
|
-
|
|
191
|
-
```js
|
|
192
|
-
import 'dphelper';
|
|
193
|
-
|
|
194
|
-
// Use the observer to log the changing state value
|
|
195
|
-
observer(
|
|
196
|
-
'state.count',
|
|
197
|
-
() => console.log("State changed: ", state.count)
|
|
198
|
-
);
|
|
199
|
-
|
|
200
|
-
// Store a value in the state that changes every 5 seconds
|
|
201
|
-
setInterval(() => state.count = Date.now(), 5000);
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
> NOTE: In some cases you need to wrap inside and useEffect in React to avoid multiple observers
|
|
205
|
-
|
|
206
|
-
#### Another Simple Example
|
|
207
|
-
|
|
208
|
-
```js
|
|
209
|
-
import 'dphelper';
|
|
210
|
-
|
|
211
|
-
// Set a state
|
|
212
|
-
state.myData = 'Hello, world!';
|
|
213
|
-
|
|
214
|
-
// Retrieve the state
|
|
215
|
-
console.log(state.myData); // Output: Hello, world!
|
|
216
|
-
|
|
217
|
-
// Observe state changes
|
|
218
|
-
observer('myData', () => {
|
|
219
|
-
console.log('myData has changed to:', state.myData);
|
|
220
|
-
});
|
|
221
|
-
|
|
222
|
-
// Change the state
|
|
223
|
-
state.myData = 'New value';
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
## useObserver
|
|
227
|
-
|
|
228
|
-
```js
|
|
229
|
-
import 'dphelper';
|
|
230
|
-
|
|
231
|
-
// Use the useObserver to log the changing state value
|
|
232
|
-
useObserver(
|
|
233
|
-
() => console.log("State changed: ", state.count)
|
|
234
|
-
, 'state.count'
|
|
235
|
-
);
|
|
236
|
-
|
|
237
|
-
// Store a value in the state that changes every 5 seconds
|
|
238
|
-
setInterval(() => state.count = Date.now(), 5000);
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
## Store
|
|
242
|
-
|
|
243
|
-
### Persistent Storage with dpHelper
|
|
244
|
-
|
|
245
|
-
When using dpHelper for permanent storage, you should use the **store**, which stores data persistently across sessions.
|
|
246
|
-
|
|
247
|
-
#### Important Security Note
|
|
248
|
-
|
|
249
|
-
1. **Use store for persistent storage:** If you want to store data permanently, use store to ensure it is saved in localStorage.
|
|
250
|
-
|
|
251
|
-
2. **Remove data when necessary:** To maintain security, remove stored data when it is no longer needed, such as during logout.
|
|
252
|
-
|
|
253
|
-
3. **Remove all stored data:** Use store.removeAll() to securely remove all stored data from your application.
|
|
254
|
-
|
|
255
|
-
```js
|
|
256
|
-
// Set a store:
|
|
257
|
-
store.set("test", { test: "test" })
|
|
258
|
-
|
|
259
|
-
// Get a store:
|
|
260
|
-
store.get("test") // Output: { test: "test" }
|
|
261
|
-
|
|
262
|
-
// Remove a store:
|
|
263
|
-
store.remove("test") // Output: "ok"
|
|
264
|
-
|
|
265
|
-
// Remove all stores:
|
|
266
|
-
store.removeAll() // Output: "ok"
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
### 2. Example in React
|
|
270
|
-
|
|
271
|
-
```js
|
|
272
|
-
import { useEffect } from 'react';
|
|
273
|
-
import 'dphelper';
|
|
274
|
-
|
|
275
|
-
function App() {
|
|
276
|
-
|
|
277
|
-
// Store a value in the store (persistent storage)
|
|
278
|
-
store.set(
|
|
279
|
-
'user',
|
|
280
|
-
{
|
|
281
|
-
name: 'John Doe',
|
|
282
|
-
age: 30
|
|
283
|
-
}
|
|
284
|
-
);
|
|
285
|
-
|
|
286
|
-
// Use the stored value in a React component
|
|
287
|
-
useEffect(
|
|
288
|
-
() => {
|
|
289
|
-
console.log(store.get("user")); // Output: { name: "John Doe", age: 30 }
|
|
290
|
-
$("#name").text(store.get("user").name)
|
|
291
|
-
}, []
|
|
292
|
-
);
|
|
293
|
-
|
|
294
|
-
// Remove all stored data if necessary
|
|
295
|
-
// store.removeAll();
|
|
296
|
-
|
|
297
|
-
return (
|
|
298
|
-
<div>
|
|
299
|
-
<h1 id="name">...</h1>
|
|
300
|
-
</div>
|
|
301
|
-
);
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
export default App;
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
## session
|
|
308
|
-
|
|
309
|
-
Similar to store but it's removed when you close the browser.
|
|
310
|
-
For more performance it's better to use state over session. State is global and access to data is more faster and not require the time to resolve promises.
|
|
311
|
-
|
|
312
|
-
```js
|
|
313
|
-
// Set a store:
|
|
314
|
-
store.set("test", { test: "test" })
|
|
315
|
-
|
|
316
|
-
// Get a store:
|
|
317
|
-
store.get("test") // Output: { test: "test" }
|
|
318
|
-
|
|
319
|
-
// Remove a store:
|
|
320
|
-
store.remove("test") // Output: "ok"
|
|
321
|
-
|
|
322
|
-
// Remove all stores:
|
|
323
|
-
store.removeAll() // Output: "ok"
|
|
324
|
-
```
|
|
325
|
-
|
|
326
|
-
# dpHelper vs Redux vs Zustand vs MobX
|
|
327
|
-
|
|
328
|
-
| Feature | **dpHelper** | **Redux / RTK** | **Zustand** | **MobX** |
|
|
329
|
-
|---------|--------------|------------------|-------------|----------|
|
|
330
|
-
| **Type** | Full suite (190+ utilities) + State Manager | Predictable state container | Minimal state manager | Reactive state manager |
|
|
331
|
-
| **Boilerplate** | **None** (single import) | High (reduced with RTK) | Low | Low |
|
|
332
|
-
| **Global Access** | **Immediate global state** (`state.x`) | No, requires provider | Yes, via store | Yes, via observable |
|
|
333
|
-
| **Reactivity** | Built‑in observer | Only via bindings | Yes | Yes (highly reactive) |
|
|
334
|
-
| **DevTools** | **DevTools + Browser Extension** | Redux DevTools | Yes | Yes |
|
|
335
|
-
| **Learning Curve** | **Very low** | Medium/High | Low | Medium |
|
|
336
|
-
| **Action Handling** | Simple actions + proxy | Actions + reducers | Setter functions | Decorators / actions |
|
|
337
|
-
| **Persistence** | Built‑in (state/store/session) | Via middleware | Via middleware | Via plugins |
|
|
338
|
-
| **Ecosystem** | 190+ built‑in utilities | Very large | Medium | Medium |
|
|
339
|
-
| **React Usage** | `state.x` anywhere | Hooks + provider | Hooks | Decorators / hooks |
|
|
340
|
-
| **HTML/Vanilla Usage** | **Native** (script tag) | No | No | No |
|
|
341
|
-
| **Philosophy** | “Single source of truth” + full toolbox | Predictability & immutability | Simplicity | Automatic reactivity |
|
|
342
|
-
| **Best Use Cases** | **SaaS apps, dashboards, multi‑framework projects** | Large enterprise apps | Lightweight React apps | Highly dynamic UIs |
|
|
343
|
-
|
|
344
|
-
## Console (devtools)
|
|
345
|
-
|
|
346
|
-
Type **dphelper** in the devtool console of your browser to have a look at all available tools that you can use! You can call these from everywhere without import (just one time in the main/root page).
|
|
347
|
-
|
|
348
|
-
## Browser Extension (Chrome/Edge) ♥️
|
|
349
|
-
|
|
350
|
-

|
|
351
|
-
|
|
352
|
-

|
|
353
|
-
|
|
354
|
-

|
|
355
|
-
|
|
356
|
-
Chrome: [Download from Google Web Store](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)
|
|
357
|
-
|
|
358
|
-
Edge: [Download from Microsoft Addons](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)
|
|
359
|
-
|
|
360
|
-
PS: **dpHelper** is compatible with all Chromium-based browsers like **Edge or Brave**!
|
|
361
|
-
|
|
362
|
-
## dpHelper Browser Extension
|
|
363
|
-
|
|
364
|
-
The dpHelper browser extension allows you to manage your application's dpHelper NPM. Key features include:
|
|
365
|
-
|
|
366
|
-
1. Simplified API operations: Easily manage and manipulate data with dpHelper's collection of scripts.
|
|
367
|
-
2. Real-time monitoring: Track memory usage and localStorage to optimize your application's performance.
|
|
368
|
-
3. Stay up-to-date: Receive updates and tips to improve your daily workflow.
|
|
369
|
-
4. Easy installation: Simply import 'dphelper' in your project index to get started.
|
|
370
|
-
5. Global accessibility: All scripts are available globally and can be accessed from anywhere in your application.
|
|
371
|
-
|
|
372
|
-
## Security
|
|
373
|
-
|
|
374
|
-
[Socket.dev](https://socket.dev/npm/package/dphelper)
|
|
375
|
-
|
|
376
|
-
[Snyk.io](https://security.snyk.io/package/npm/dphelper)
|
|
377
|
-
|
|
378
|
-
---
|
|
379
|
-
|
|
380
|
-
Dario Passariello - <dariopassariello@gmail.com>, All rights reserved - Copyright (c) 2019 - 2026
|