dphelper 1.2.4 → 1.2.6
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/.github/README.md +42 -27
- package/README.md +42 -27
- package/index.js +1 -1
- package/package.json +2 -20
- package/types/cache.d.ts +9 -0
- package/types/observer.d.ts +30 -0
- package/types/state.d.ts +13 -1
- package/types/store.d.ts +6 -6
package/.github/README.md
CHANGED
|
@@ -1,25 +1,13 @@
|
|
|
1
1
|
# I am dpHelper
|
|
2
2
|
|
|
3
|
-
```
|
|
4
|
-
dpHelper Devtools by Dario Passariello
|
|
5
|
-
```
|
|
6
|
-
|
|
7
3
|
|
|
8
4
|
|
|
9
|
-
Manager | DevTools by [Dario Passariello
|
|
5
|
+
Manager | DevTools by [Dario Passariello](https://dario.passariello.ca) (c)
|
|
10
6
|
|
|
11
7
|
<!--  -->
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
9
|
|
|
17
|
-
|
|
18
10
|
|
|
19
|
-
|
|
20
|
-
<!--  -->
|
|
21
|
-
<!--  -->
|
|
22
|
-
<!--  -->
|
|
23
11
|
|
|
24
12
|
## About 🔥
|
|
25
13
|
|
|
@@ -35,28 +23,36 @@ Please, read the [LICENSE](/LICENSE.txt) agreement before to implementing in you
|
|
|
35
23
|
You can see an HTML version where dpHelper and LayerPro works.
|
|
36
24
|
You can use with html, react, vue or any other frontend / library.
|
|
37
25
|
|
|
26
|
+
## What you need to know about "no-refresh/reload" 🧐
|
|
27
|
+
|
|
28
|
+
dpHelper is designed to work primaly with website, application and portals that use "AJAX / XMLHttpRequest" technology like PWA, SPA, Angular, React, JQuery etc.
|
|
29
|
+
What mean?... So, modern browser and modern application use "NO REFRESH" behavior and these render only the part of browser needs changes instead re-render o refresh the entire page. Refresh o reload the entire page cause the lose of entire "states" ... my suggestion is to redesign/rewamp you code using a technology more robust and faster. So, if you want to use dpHelper as state / store moanager you can use only store function in a non Ajax engine. Feel free to contact me in case you need support or more information.
|
|
30
|
+
|
|
31
|
+
Here some links for you:
|
|
32
|
+
|
|
33
|
+
[https://en.wikipedia.org/wiki/Ajax_(programming)](Ajax_(programming))
|
|
34
|
+
[https://developer.mozilla.org/en-US/docs/Glossary/SPA](SPA (Single-page application))
|
|
35
|
+
[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest](XMLHttpRequest)
|
|
36
|
+
|
|
37
|
+
I am no a techGuy | nerd | geek? ... no worries. Fix it... go to hiring one 🤭
|
|
38
|
+
|
|
38
39
|
## The Best Way To Use State and Store 💥
|
|
39
40
|
|
|
40
41
|
You can use "state" to store all what you want and reuse everywhere. Like other state manager you can store information in JSON format and you can use them in react, useEffect, dispatch in a very easy way.
|
|
41
42
|
|
|
42
43
|
_example:_
|
|
43
44
|
|
|
44
|
-
You can use devtools
|
|
45
|
-
Every time you want to use '**test**' you need just recall **state.test**.
|
|
45
|
+
You can use browser's devtools console and type " **state.test = 'I am ready'** ".
|
|
46
|
+
Every time you want to use '**test**' values you need just recall **state.test**.
|
|
46
47
|
|
|
47
48
|
```javascript
|
|
49
|
+
/ Set a state
|
|
48
50
|
state.test = "I am ready";
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
recall
|
|
52
51
|
|
|
53
|
-
|
|
52
|
+
// Get the state
|
|
54
53
|
state.test
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
To see all states just use
|
|
58
54
|
|
|
59
|
-
|
|
55
|
+
// List all states
|
|
60
56
|
state
|
|
61
57
|
```
|
|
62
58
|
|
|
@@ -65,14 +61,33 @@ state
|
|
|
65
61
|
If you want to run a funtion everytime a state change you can use:
|
|
66
62
|
|
|
67
63
|
```javascript
|
|
68
|
-
|
|
64
|
+
// Observer is a non cumulative listener, is trigged from customEvent / dispatch from state
|
|
65
|
+
observer("test", ()=> alert( "Test Changes to: " + state.test ) )
|
|
69
66
|
```
|
|
70
67
|
|
|
71
68
|
You can use it everywere. Works like "useState" in react but with more flexibility
|
|
72
69
|
|
|
73
70
|
## State vs Store 🎅
|
|
74
71
|
|
|
75
|
-
**INFO**: if you want to use as permanent storage (localStorage) you need to use " **store
|
|
72
|
+
**INFO**: if you want to use as permanent storage (localStorage) you need to use " **store** " instead state.
|
|
73
|
+
**IMPORTANT**: Store use localStorage... data are persistant and you need to remove if necessary for security (like logout)
|
|
74
|
+
|
|
75
|
+
**SECURITY**: Do not store any sensitive data. Data stay in the computer if are not properly removed
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
// Set a store:
|
|
79
|
+
store.set("test",{test:"test"})
|
|
80
|
+
|
|
81
|
+
// Get a store:
|
|
82
|
+
store.get("test") -> {test:"test"}
|
|
83
|
+
|
|
84
|
+
// Remove a store:
|
|
85
|
+
store.delete("test") -> "ok"
|
|
86
|
+
|
|
87
|
+
// Remove all:
|
|
88
|
+
store.clearAll() -> "ok"
|
|
89
|
+
|
|
90
|
+
```
|
|
76
91
|
|
|
77
92
|
---
|
|
78
93
|
|
|
@@ -110,7 +125,7 @@ note: you don't need to use npm install in this case or you get an error
|
|
|
110
125
|
|
|
111
126
|
## How to use it
|
|
112
127
|
|
|
113
|
-
type 'dphelper' in your
|
|
128
|
+
type 'dphelper' as panel in your browser to have a look about all available tools that you can use!
|
|
114
129
|
|
|
115
130
|
You can call these from everywhere without import (just one at index)
|
|
116
131
|
|
|
@@ -129,4 +144,4 @@ This extension allows you to manage your app's dpHelper NPM. Here you will find
|
|
|
129
144
|
|
|
130
145
|
---
|
|
131
146
|
|
|
132
|
-
|
|
147
|
+
Dario Passariello Copyright (c) 2019 - 2024, All rights reserved
|
package/README.md
CHANGED
|
@@ -1,25 +1,13 @@
|
|
|
1
1
|
# I am dpHelper
|
|
2
2
|
|
|
3
|
-
```
|
|
4
|
-
dpHelper Devtools by Dario Passariello
|
|
5
|
-
```
|
|
6
|
-
|
|
7
3
|
|
|
8
4
|
|
|
9
|
-
Manager | DevTools by [Dario Passariello
|
|
5
|
+
Manager | DevTools by [Dario Passariello](https://dario.passariello.ca) (c)
|
|
10
6
|
|
|
11
7
|
<!--  -->
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
9
|
|
|
17
|
-
|
|
18
10
|
|
|
19
|
-
|
|
20
|
-
<!--  -->
|
|
21
|
-
<!--  -->
|
|
22
|
-
<!--  -->
|
|
23
11
|
|
|
24
12
|
## About 🔥
|
|
25
13
|
|
|
@@ -35,28 +23,36 @@ Please, read the [LICENSE](/LICENSE.txt) agreement before to implementing in you
|
|
|
35
23
|
You can see an HTML version where dpHelper and LayerPro works.
|
|
36
24
|
You can use with html, react, vue or any other frontend / library.
|
|
37
25
|
|
|
26
|
+
## What you need to know about "no-refresh/reload" 🧐
|
|
27
|
+
|
|
28
|
+
dpHelper is designed to work primaly with website, application and portals that use "AJAX / XMLHttpRequest" technology like PWA, SPA, Angular, React, JQuery etc.
|
|
29
|
+
What mean?... So, modern browser and modern application use "NO REFRESH" behavior and these render only the part of browser needs changes instead re-render o refresh the entire page. Refresh o reload the entire page cause the lose of entire "states" ... my suggestion is to redesign/rewamp you code using a technology more robust and faster. So, if you want to use dpHelper as state / store moanager you can use only store function in a non Ajax engine. Feel free to contact me in case you need support or more information.
|
|
30
|
+
|
|
31
|
+
Here some links for you:
|
|
32
|
+
|
|
33
|
+
[https://en.wikipedia.org/wiki/Ajax_(programming)](Ajax_(programming))
|
|
34
|
+
[https://developer.mozilla.org/en-US/docs/Glossary/SPA](SPA (Single-page application))
|
|
35
|
+
[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest](XMLHttpRequest)
|
|
36
|
+
|
|
37
|
+
I am no a techGuy | nerd | geek? ... no worries. Fix it... go to hiring one 🤭
|
|
38
|
+
|
|
38
39
|
## The Best Way To Use State and Store 💥
|
|
39
40
|
|
|
40
41
|
You can use "state" to store all what you want and reuse everywhere. Like other state manager you can store information in JSON format and you can use them in react, useEffect, dispatch in a very easy way.
|
|
41
42
|
|
|
42
43
|
_example:_
|
|
43
44
|
|
|
44
|
-
You can use devtools
|
|
45
|
-
Every time you want to use '**test**' you need just recall **state.test**.
|
|
45
|
+
You can use browser's devtools console and type " **state.test = 'I am ready'** ".
|
|
46
|
+
Every time you want to use '**test**' values you need just recall **state.test**.
|
|
46
47
|
|
|
47
48
|
```javascript
|
|
49
|
+
/ Set a state
|
|
48
50
|
state.test = "I am ready";
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
recall
|
|
52
51
|
|
|
53
|
-
|
|
52
|
+
// Get the state
|
|
54
53
|
state.test
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
To see all states just use
|
|
58
54
|
|
|
59
|
-
|
|
55
|
+
// List all states
|
|
60
56
|
state
|
|
61
57
|
```
|
|
62
58
|
|
|
@@ -65,14 +61,33 @@ state
|
|
|
65
61
|
If you want to run a funtion everytime a state change you can use:
|
|
66
62
|
|
|
67
63
|
```javascript
|
|
68
|
-
|
|
64
|
+
// Observer is a non cumulative listener, is trigged from customEvent / dispatch from state
|
|
65
|
+
observer("test", ()=> alert( "Test Changes to: " + state.test ) )
|
|
69
66
|
```
|
|
70
67
|
|
|
71
68
|
You can use it everywere. Works like "useState" in react but with more flexibility
|
|
72
69
|
|
|
73
70
|
## State vs Store 🎅
|
|
74
71
|
|
|
75
|
-
**INFO**: if you want to use as permanent storage (localStorage) you need to use " **store
|
|
72
|
+
**INFO**: if you want to use as permanent storage (localStorage) you need to use " **store** " instead state.
|
|
73
|
+
**IMPORTANT**: Store use localStorage... data are persistant and you need to remove if necessary for security (like logout)
|
|
74
|
+
|
|
75
|
+
**SECURITY**: Do not store any sensitive data. Data stay in the computer if are not properly removed
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
// Set a store:
|
|
79
|
+
store.set("test",{test:"test"})
|
|
80
|
+
|
|
81
|
+
// Get a store:
|
|
82
|
+
store.get("test") -> {test:"test"}
|
|
83
|
+
|
|
84
|
+
// Remove a store:
|
|
85
|
+
store.delete("test") -> "ok"
|
|
86
|
+
|
|
87
|
+
// Remove all:
|
|
88
|
+
store.clearAll() -> "ok"
|
|
89
|
+
|
|
90
|
+
```
|
|
76
91
|
|
|
77
92
|
---
|
|
78
93
|
|
|
@@ -110,7 +125,7 @@ note: you don't need to use npm install in this case or you get an error
|
|
|
110
125
|
|
|
111
126
|
## How to use it
|
|
112
127
|
|
|
113
|
-
type 'dphelper' in your
|
|
128
|
+
type 'dphelper' as panel in your browser to have a look about all available tools that you can use!
|
|
114
129
|
|
|
115
130
|
You can call these from everywhere without import (just one at index)
|
|
116
131
|
|
|
@@ -129,4 +144,4 @@ This extension allows you to manage your app's dpHelper NPM. Here you will find
|
|
|
129
144
|
|
|
130
145
|
---
|
|
131
146
|
|
|
132
|
-
|
|
147
|
+
Dario Passariello Copyright (c) 2019 - 2024, All rights reserved
|