dphelper 2.6.4 → 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.
Files changed (78) hide show
  1. package/CODE_OF_CONDUCT.md +108 -0
  2. package/COPYRIGHT.md +6 -0
  3. package/README.md +133 -291
  4. package/SECURITY.md +3 -0
  5. package/index.js +173 -1
  6. package/package.json +53 -153
  7. package/types/dphelper.d.ts +143 -543
  8. package/types/index.d.ts +48 -0
  9. package/types/scripts/generate-imports.d.ts +1 -0
  10. package/types/scripts/over.d.ts +1 -0
  11. package/types/scripts/setProps.d.ts +1 -0
  12. package/types/scripts/setupGlobal.d.ts +1 -0
  13. package/types/tools/ai/index.d.ts +1 -0
  14. package/types/tools/anchor/index.d.ts +1 -0
  15. package/types/tools/array/index.d.ts +1 -0
  16. package/types/tools/audio/index.d.ts +1 -0
  17. package/types/tools/avoid/index.d.ts +1 -0
  18. package/types/tools/browser/index.d.ts +1 -0
  19. package/types/tools/check/index.d.ts +1 -0
  20. package/types/tools/color/index.d.ts +1 -0
  21. package/types/tools/cookie/index.d.ts +1 -0
  22. package/types/tools/coords/index.d.ts +1 -0
  23. package/types/tools/credits/index.d.ts +1 -0
  24. package/types/tools/date/index.d.ts +1 -0
  25. package/types/tools/disable/index.d.ts +1 -0
  26. package/types/tools/dispatch/index.d.ts +1 -0
  27. package/types/tools/elements/index.d.ts +1 -0
  28. package/types/tools/events/index.d.ts +1 -0
  29. package/types/tools/fetch/index.d.ts +1 -0
  30. package/types/tools/form/index.d.ts +1 -0
  31. package/types/tools/format/index.d.ts +1 -0
  32. package/types/tools/json/index.d.ts +1 -0
  33. package/types/tools/load/index.d.ts +1 -0
  34. package/types/tools/logging/index.d.ts +1 -0
  35. package/types/tools/math/index.d.ts +1 -0
  36. package/types/tools/memory/index.d.ts +1 -0
  37. package/types/tools/objects/index.d.ts +1 -0
  38. package/types/tools/path/index.d.ts +1 -0
  39. package/types/tools/promise/index.d.ts +1 -0
  40. package/types/tools/sanitize/index.d.ts +1 -0
  41. package/types/tools/screen/index.d.ts +1 -0
  42. package/types/tools/screen/popupManager.d.ts +32 -0
  43. package/types/tools/scrollbar/index.d.ts +1 -0
  44. package/types/tools/security/index.d.ts +1 -0
  45. package/types/tools/shortcut/index.d.ts +1 -0
  46. package/types/tools/socket/index.d.ts +1 -0
  47. package/types/tools/sse/index.d.ts +1 -0
  48. package/types/tools/svg/index.d.ts +1 -0
  49. package/types/tools/sync/index.d.ts +1 -0
  50. package/types/tools/system/index.d.ts +1 -0
  51. package/types/tools/text/index.d.ts +1 -0
  52. package/types/tools/timer/index.d.ts +1 -0
  53. package/types/tools/tools/index.d.ts +1 -0
  54. package/types/tools/translators/index.d.ts +1 -0
  55. package/types/tools/triggers/index.d.ts +1 -0
  56. package/types/tools/types/index.d.ts +1 -0
  57. package/types/tools/ui/index.d.ts +1 -0
  58. package/types/tools/window/index.d.ts +1 -0
  59. package/DISCLAIMER.md +0 -11
  60. package/docs/_config.yml +0 -1
  61. package/docs/index.md +0 -380
  62. package/documents/OBSERVER.md +0 -63
  63. package/documents/SESSION.md +0 -54
  64. package/documents/STATE.md +0 -65
  65. package/documents/STORE.md +0 -76
  66. package/documents/SUMMARY.md +0 -24
  67. package/documents/TOOLS.md +0 -1282
  68. package/documents/USEOBSERVER.md +0 -26
  69. package/index.d.ts +0 -22
  70. package/types/cache.d.ts +0 -27
  71. package/types/idb.d.ts +0 -21
  72. package/types/jquery.d.ts +0 -20
  73. package/types/memorio.d.ts +0 -21
  74. package/types/observer.d.ts +0 -47
  75. package/types/session.d.ts +0 -67
  76. package/types/state.d.ts +0 -71
  77. package/types/store.d.ts +0 -91
  78. package/types/useobserver.d.ts +0 -28
@@ -0,0 +1,108 @@
1
+ # Code of Conduct
2
+
3
+ ## Our Pledge
4
+
5
+ In the interest of fostering an open and welcoming environment, we as
6
+ contributors and maintainers pledge to make participation in our project and
7
+ our community a harassment-free experience for everyone, regardless of age, body
8
+ size, disability, ethnicity, sex characteristics, gender identity and expression,
9
+ level of experience, education, socio-economic status, nationality, personal
10
+ appearance, race, religion, or sexual identity and orientation.
11
+
12
+ ## Our Standards
13
+
14
+ Examples of behavior that contributes to a positive environment for our
15
+ community include:
16
+
17
+ * Demonstrating empathy and kindness toward other people
18
+ * Being respectful of differing opinions, viewpoints, and experiences
19
+ * Giving and gracefully accepting constructive feedback
20
+ * Accepting responsibility and apologizing to those affected by our mistakes,
21
+ and learning from the experience
22
+ * Focusing on what is best not just for us as individuals, but for the
23
+ overall community
24
+
25
+ Examples of unacceptable behavior include:
26
+
27
+ * The use of sexualized language or imagery, and sexual attention or advances
28
+ * Trolling, insulting or derogatory comments, and personal or political attacks
29
+ * Public or private harassment
30
+ * Publishing others' private information, such as a physical or email
31
+ address, without their explicit permission
32
+ * Other conduct which could reasonably be considered inappropriate in a
33
+ professional setting
34
+
35
+ ## Our Responsibilities
36
+
37
+ Project maintainers are responsible for clarifying and enforcing our standards of
38
+ acceptable behavior and will take appropriate and fair corrective action in
39
+ response to any behavior that they deem inappropriate,
40
+ threatening, offensive, or harmful.
41
+
42
+ Project maintainers have the right and responsibility to remove, edit, or reject
43
+ comments, commits, code, wiki edits, issues, and other contributions that are
44
+ not aligned to this Code of Conduct, and will
45
+ communicate reasons for moderation decisions when appropriate.
46
+
47
+ ## Scope
48
+
49
+ This Code of Conduct applies within all community spaces, and also applies when
50
+ an individual is officially representing the community in public spaces.
51
+ Examples of representing our community include using an official e-mail address,
52
+ posting via an official social media account, or acting as an appointed
53
+ representative at an online or offline event.
54
+
55
+ ## Enforcement
56
+
57
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be
58
+ reported to the community leaders responsible for enforcement at <dariopassariello@gmail.com>.
59
+ All complaints will be reviewed and investigated promptly and fairly.
60
+
61
+ All community leaders are obligated to respect the privacy and security of the
62
+ reporter of any incident.
63
+
64
+ ## Enforcement Guidelines
65
+
66
+ Community leaders will follow these Community Impact Guidelines in determining
67
+ the consequences for any action they deem in violation of this Code of Conduct:
68
+
69
+ ### 1. Correction
70
+
71
+ **Community Impact**: Use of inappropriate language or other behavior deemed
72
+ unprofessional or unwelcome in the community.
73
+
74
+ **Consequence**: A private, written warning from community leaders, providing
75
+ clarity around the nature of the violation and an explanation of why the
76
+ behavior was inappropriate. A public apology may be requested.
77
+
78
+ ### 2. Warning
79
+
80
+ **Community Impact**: A violation through a single incident or series
81
+ of actions.
82
+
83
+ **Consequence**: A warning with consequences for continued behavior. No
84
+ interaction with the people involved, including unsolicited interaction with
85
+ those enforcing the Code of Conduct, for a specified period of time. This
86
+ includes avoiding interactions in community spaces as well as external channels
87
+ like social media. Violating these terms may lead to a temporary or
88
+ permanent ban.
89
+
90
+ ### 3. Temporary Ban
91
+
92
+ **Community Impact**: A serious violation of community standards, including
93
+ sustained inappropriate behavior.
94
+
95
+ **Consequence**: A temporary ban from any sort of interaction or public
96
+ communication with the community for a specified period of time. No public or
97
+ private interaction with the people involved, including unsolicited interaction
98
+ with those enforcing the Code of Conduct, is allowed during this period.
99
+ Violating these terms may lead to a permanent ban.
100
+
101
+ ### 4. Permanent Ban
102
+
103
+ **Community Impact**: Demonstrating a pattern of violation of community
104
+ standards, including sustained inappropriate behavior, harassment of an
105
+ individual, or aggression toward or disparagement of classes of individuals.
106
+
107
+ **Consequence**: A permanent ban from any sort of public interaction within
108
+ the community.
package/COPYRIGHT.md ADDED
@@ -0,0 +1,6 @@
1
+ # Copyright
2
+
3
+ Copyright (c) 2026, Dario Passariello. All rights reserved.
4
+ <https://dario.passariello.ca>
5
+
6
+ This software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
package/README.md CHANGED
@@ -2,379 +2,221 @@
2
2
 
3
3
  ![dpHelper](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/banner.svg)
4
4
 
5
- **Manager | DevTools** by [Dario Passariello](https://dario.passariello.ca) (c)
5
+ **The supercharged toolkit for modern web development, AI engineering & DevTools.**
6
+ By [Dario Passariello](https://dario.passariello.ca) (c)
6
7
 
7
8
  [![version](https://img.shields.io/npm/v/dphelper.svg)](https://npmjs.org/package/dphelper)
8
9
  [![downloads](https://img.shields.io/npm/dm/dphelper.svg)](https://npmjs.org/package/dphelper)
9
-
10
- ![jQuery](https://img.shields.io/badge/jQuery-gray?logo=jQuery)
11
10
  ![Javascript](https://img.shields.io/badge/Javascript-gray?logo=Javascript)
12
- ![React](https://img.shields.io/badge/React-gray?logo=React)
13
11
  ![TypeScript](https://img.shields.io/badge/TypeScript-gray?logo=typescript)
12
+ ![AI Ready](https://img.shields.io/badge/AI-Ready-brightgreen?logo=openai)
13
+ ![TOON](https://img.shields.io/badge/TOON-Format-blue)
14
14
 
15
15
  ![Node.js](https://img.shields.io/badge/Node.js-gray?logo=node.js)
16
16
  ![Jest](https://img.shields.io/badge/Jest-gray?logo=jest)
17
17
  ![ESLint](https://img.shields.io/badge/Eslint-gray?logo=eslint)
18
- ![webpack](https://img.shields.io/badge/webpack-gray?logo=webpack)
19
-
20
- ![Snik](https://img.shields.io/badge/Snyk-gray?logo=Snyk)
21
- ![Snik](https://img.shields.io/badge/Socket-gray?logo=socket)
18
+ ![esbuild](https://img.shields.io/badge/esbuild-gray?logo=esbuild)
19
+ ![Snyk](https://img.shields.io/badge/Snyk-gray?logo=Snyk)
22
20
 
23
21
  [![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://a51.gitbook.io/dphelper)
24
22
 
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)
23
+ ---
37
24
 
38
25
  ## About
39
26
 
40
- dpHelper is a precise and complete collection of 190+ tools ready to use in all web/SaaS and enterprise 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
27
+ **dphelper** is a powerful, zero-dependency utility library that brings together 45+ production-ready tools for web developers, AI engineers, and DevTools creators.
96
28
 
97
- ```js
98
- require("dphelper");
99
- ```
29
+ Think of it as your **universal toolbox** - from DOM manipulation to cryptographic operations, from real-time WebSocket handling to AI-powered token optimization. No more juggling multiple packages. One import, infinite possibilities.
100
30
 
101
- ## Install for EJS or Other Types of Projects (like HTML)
31
+ ### Why dphelper?
102
32
 
103
- Note: You don't need to use npm install in this case, or you will get an error.
33
+ - **⚡ Zero Dependencies** - Pure vanilla JavaScript/TypeScript. No bloat, no surprises.
34
+ - **🤖 AI-First Design** - Built for LLM apps with TOON optimization, token counting, and RAG support.
35
+ - **🌐 Universal** - Works in browser, Node.js, Bun, and Deno.
36
+ - **🔒 Type-Safe** - Full TypeScript definitions auto-generated for every tool.
37
+ - **📦 Tiny Bundle** - Only ~136KB minified, tree-shakeable.
104
38
 
105
- ```html
106
- <script src="https://cdn.jsdelivr.net/npm/dphelper@latest"></script>
107
- ```
39
+ > *"dphelper is what you'd build if you combined lodash, socket.io, and an AI SDK - but lighter."*
108
40
 
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
41
+ ---
133
42
 
134
- ### Using the "state"
43
+ ## 🚀 Version 3.0: The AI Leap
135
44
 
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.
45
+ > [!IMPORTANT]
46
+ > Application state is currently handled through Memorio and RGS. To integrate state management into your project, you should install:
47
+ >
48
+ > Simple State and Store Manager [Memorio](http://www.npmjs.com/package/memorio)
49
+ >
50
+ > Enterprise Lever State Manager [Argis RGS](https://www.npmjs.com/package/@biglogic/rgs)
137
51
 
138
- For example, you can store a value like this: _state.test = 'I am ready'_ and then retrieve it later using state.test.
52
+ ---
139
53
 
140
- _example:_
54
+ `dphelper` has evolved into a powerhouse for AI-driven applications. We've removed legacy dependencies (bye-bye jQuery!) and shifted focus to **performance**, **modularity**, and **LLM optimization**.
141
55
 
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**.
56
+ ### Highlights
143
57
 
144
- ```js
145
- // Set a state
146
- state.test = "I am ready" *
58
+ - **🤖 Advanced AI Module**: Built-in support for RAG, token counting, and prompt engineering.
59
+ - **🚀 AI Black Box (Snapshot)**: The first "Flight Recorder" for apps, capturing the internal state in TOON for instant AI debugging.
60
+ - **🎒 TOON Integration**: Native support for **Token-Oriented Object Notation** (3.0), reducing LLM context usage by up to 50%.
61
+ - **🛠️ Zero Dependencies**: Pure vanilla JavaScript/TypeScript architecture.
62
+ - **🌐 Fetch & SSE Pro**: High-level networking with automatic retries and custom headers.
63
+ - **⚡ Bulletproof Dispatcher**: Integrated listener management with automatic cleanup.
64
+ - **🔄 UI Mirror & Pulse**: Cross-tab synchronization and automatic UI state recovery (Zero-Code Persistence).
65
+ - **🌊 SSE Pro**: Server-Sent Events with POST & Custom Header support (modern AI streaming ready).
66
+ - **🧬 Modular Types**: Auto-generated Type definitions for all 200+ tools.
147
67
 
148
- // Get the state
149
- state.test *
150
-
151
- // List all states
152
- state.list // or just "state" to see the proxy
68
+ ---
153
69
 
154
- // Lock a state from edit (Only for Objects or Array)
155
- state.test.lock() *
70
+ ## Table of Contents
156
71
 
157
- // Remove a state
158
- state.remove("test")
72
+ 1. [About](#about)
73
+ 2. [Installation](#installation)
74
+ 3. [AI Power User Guide](#ai-power-user-guide)
75
+ 4. [Modular Architecture](#modular-architecture)
76
+ 5. [Browser Extension (Chrome/Edge)](#browser-extension-chromeedge)
77
+ 6. [Environment Compatibility](#environment-compatibility)
78
+ 7. [Security](#security)
159
79
 
160
- // Remove all states
161
- state.removeAll()
80
+ ---
162
81
 
163
- *["test" is only an example]
82
+ ## Installation
164
83
 
84
+ ```shell
85
+ npm i dphelper --save-dev
165
86
  ```
166
87
 
167
- ### Observer
168
-
169
- **Note**: _Observer works only with states. Stores are excluded at the moment._
88
+ ### Usage
170
89
 
171
- If you want to run a function every time a state changes, you can use:
90
+ Import it precisely **once** in your entry point (e.g., `index.js`, `main.ts`, or `App.tsx`):
172
91
 
173
92
  ```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
93
+ import "dphelper";
94
+ // dphelper is now available globally across your entire project!
185
95
  ```
186
96
 
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';
97
+ For plain HTML/CDN:
193
98
 
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);
99
+ ```html
100
+ <script src="https://cdn.jsdelivr.net/npm/dphelper@latest"></script>
202
101
  ```
203
102
 
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';
103
+ ---
210
104
 
211
- // Set a state
212
- state.myData = 'Hello, world!';
105
+ ## AI Power User Guide
213
106
 
214
- // Retrieve the state
215
- console.log(state.myData); // Output: Hello, world!
107
+ The new `dphelper.ai` module is designed for the modern AI stack (LLMs, RAG, Vector Search).
216
108
 
217
- // Observe state changes
218
- observer('myData', () => {
219
- console.log('myData has changed to:', state.myData);
220
- });
109
+ ```javascript
110
+ // TOON: The ultimate JSON alternative for prompts
111
+ const toonData = dphelper.ai.toon(myJsonObject);
112
+ // Efficient, compact, and deterministic.
221
113
 
222
- // Change the state
223
- state.myData = 'New value';
224
- ```
114
+ // 📏 Context-Aware Token Counting
115
+ const tokens = dphelper.ai.tokenCount(myJsonObject);
116
+ // Automatically calculates tokens based on the optimal TOON representation.
225
117
 
226
- ## useObserver
118
+ // 🧩 Smart Chunker (RAG Ready)
119
+ const chunks = dphelper.ai.chunker(longText, { size: 1000, overlap: 200 });
227
120
 
228
- ```js
229
- import 'dphelper';
121
+ // 🔍 Semantic Similarity
122
+ const score = dphelper.ai.similarity(embeddingA, embeddingB);
230
123
 
231
- // Use the useObserver to log the changing state value
232
- useObserver(
233
- () => console.log("State changed: ", state.count)
234
- , 'state.count'
235
- );
124
+ // 🧠 Reasoning Extractor (DeepSeek/O1 support)
125
+ const { reasoning, content } = dphelper.ai.extractReasoning(rawAiReply);
236
126
 
237
- // Store a value in the state that changes every 5 seconds
238
- setInterval(() => state.count = Date.now(), 5000);
127
+ // 📸 The AI Black Box (Snapshot)
128
+ const appStateToon = dphelper.ai.snapshot();
129
+ // Generates a complete app "mental dump" (URL, gState, Logs) optimized for LLMs.
239
130
  ```
240
131
 
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.
132
+ ---
252
133
 
253
- 3. **Remove all stored data:** Use store.removeAll() to securely remove all stored data from your application.
134
+ ## Modular Architecture
254
135
 
255
- ```js
256
- // Set a store:
257
- store.set("test", { test: "test" })
136
+ Every tool in `dphelper` is now a self-contained module. Our new build system automatically:
258
137
 
259
- // Get a store:
260
- store.get("test") // Output: { test: "test" }
138
+ 1. Scans the `tools/` directory.
139
+ 2. Generates dynamic imports for the core.
140
+ 3. Synchronizes TypeScript interfaces in `types/dphelper.d.ts`.
261
141
 
262
- // Remove a store:
263
- store.remove("test") // Output: "ok"
142
+ This ensures that adding new tools is instantaneous and always documented with full Intellisense support.
264
143
 
265
- // Remove all stores:
266
- store.removeAll() // Output: "ok"
267
- ```
268
-
269
- ### 2. Example in React
144
+ ---
270
145
 
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
- ```
146
+ ## 🔄 UI Mirror & Auto-Recovery
306
147
 
307
- ## session
148
+ `dphelper` makes your web app feel like a native desktop application with cross-tab intelligence.
308
149
 
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.
150
+ ```javascript
151
+ // Auto-Recovery: Save scroll and input values across reloads/crashes
152
+ dphelper.UI.anchorContext();
311
153
 
312
- ```js
313
- // Set a store:
314
- store.set("test", { test: "test" })
154
+ // 💓 Pulse: Real-time event bus between all open tabs (No Backend needed!)
155
+ const bus = dphelper.sync.pulse('my-app', (msg) => {
156
+ console.debug('Received from another tab:', msg);
157
+ });
158
+ bus.emit({ action: 'theme-change', value: 'dark' });
315
159
 
316
- // Get a store:
317
- store.get("test") // Output: { test: "test" }
160
+ // 🔒 Interlock: Monitor how many tabs of your app are active
161
+ dphelper.browser.interlock((count) => {
162
+ console.debug(`Active tabs: ${count}`);
163
+ });
318
164
 
319
- // Remove a store:
320
- store.remove("test") // Output: "ok"
165
+ // 🌊 SSE: Modern streaming (Support for POST & Headers)
166
+ const stream = dphelper.sse.open('/api/ai', {
167
+ method: 'POST',
168
+ headers: { 'Authorization': 'Bearer ...' },
169
+ body: JSON.stringify({ prompt: 'Hello AI' })
170
+ });
321
171
 
322
- // Remove all stores:
323
- store.removeAll() // Output: "ok"
172
+ stream.on('message', (data) => console.debug('Chunk:', data));
173
+ stream.on('error', (err) => console.error('Stream failure:', err));
324
174
  ```
325
175
 
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 |
176
+ ---
343
177
 
344
- ## Console (devtools)
178
+ ## Browser Extension (Chrome/Edge)
345
179
 
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).
180
+ ![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/screenshot.png)
347
181
 
348
- ## Browser Extension (Chrome/Edge) ♥️
182
+ Manage your `dphelper` environment, monitor memory usage, and access documentation directly from your browser.
349
183
 
350
- ![browser extension](https://img.shields.io/badge/browser%20extension-beta-orange.svg)
184
+ - [Download for Chrome](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)
185
+ - [Download for Edge](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)
351
186
 
352
- ![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/banner.png)
187
+ ---
353
188
 
354
- ![dphelper Banner](https://raw.githubusercontent.com/passariello/container/refs/heads/main/dphelper/assets/images/screenshot.png)
189
+ ---
355
190
 
356
- Chrome: [Download from Google Web Store](https://chrome.google.com/webstore/detail/dphelper-manager-dev-tool/oppppldaoknfddeikfloonnialijngbk)
191
+ ## Environment Compatibility
357
192
 
358
- Edge: [Download from Microsoft Addons](https://microsoftedge.microsoft.com/addons/detail/dphelper-manager-dev-to/kphabkbdpaljlfagldhojilhfammepnk)
193
+ `dphelper` tools are classified by their execution target to ensure stability across the stack.
359
194
 
360
- PS: **dpHelper** is compatible with all Chromium-based browsers like **Edge or Brave**!
195
+ | Icon | Type | Description |
196
+ | :--- | :--- | :--- |
197
+ | 🌐 | **Client** | Browser only (requires DOM, window, or navigator). |
198
+ | 🖥️ | **Server** | Node.js / Bun / Deno only (access to process, fs, etc). |
199
+ | 🧬 | **Isomorphic** | Universal. Works in both Browser and Server (AI, Logic, Math). |
361
200
 
362
- ## dpHelper Browser Extension
201
+ ### Core Module Status
363
202
 
364
- The dpHelper browser extension allows you to manage your application's dpHelper NPM. Key features include:
203
+ - `dphelper.ai`: 🧬 Isomorphic
204
+ - `dphelper.fetch`: 🧬 Isomorphic (Supports Node 18+)
205
+ - `dphelper.sse`: 🌐 Client (Streaming fetch)
206
+ - `dphelper.socket`: 🌐 Client (WebSocket)
207
+ - `dphelper.sync`: 🌐 Client (BroadcastChannel)
208
+ - `dphelper.UI`: 🌐 Client (DOM based)
365
209
 
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.
210
+ ---
371
211
 
372
212
  ## Security
373
213
 
374
- [Socket.dev](https://socket.dev/npm/package/dphelper)
214
+ We take security seriously. Every release is audited:
375
215
 
376
- [Snyk.io](https://security.snyk.io/package/npm/dphelper)
216
+ - [Socket.dev Audit](https://socket.dev/npm/package/dphelper)
217
+ - [Snyk Security Report](https://security.snyk.io/package/npm/dphelper)
377
218
 
378
219
  ---
379
220
 
380
- Dario Passariello - <dariopassariello@gmail.com>, All rights reserved - Copyright (c) 2019 - 2026
221
+ Dario Passariello - <dariopassariello@gmail.com>
222
+ All rights reserved - Copyright (c) 2019 - 2026
package/SECURITY.md ADDED
@@ -0,0 +1,3 @@
1
+ # Security
2
+
3
+ Please email [@passariello](https://github.com/passariello) or see <https://dario.passariello.ca/contact/> if you have a potential security vulnerability to report.