@biglogic/rgs 3.8.0 → 3.8.4
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 +313 -300
- package/docs/README.md +313 -300
- package/docs/SUMMARY.md +10 -19
- package/index.js +1868 -43
- package/package.json +2 -2
- package/docs/api.md +0 -381
- package/docs/chapters/05-plugin-sdk.md +0 -290
- package/docs/chapters/05-plugins-and-extensibility.md +0 -190
- package/docs/qa.md +0 -47
- /package/docs/chapters/{06-case-studies.md → case-studies.md} +0 -0
- /package/docs/chapters/{07-faq.md → faq.md} +0 -0
- /package/docs/chapters/{02-getting-started.md → getting-started.md} +0 -0
- /package/docs/chapters/{10-local-first-sync.md → local-first-sync.md} +0 -0
- /package/docs/chapters/{08-migration-guide.md → migration-guide.md} +0 -0
- /package/docs/chapters/{04-persistence-and-safety.md → persistence-and-safety.md} +0 -0
- /package/docs/chapters/{01-philosophy.md → philosophy.md} +0 -0
- /package/docs/chapters/{09-security-architecture.md → security-architecture.md} +0 -0
- /package/docs/chapters/{03-the-magnetar-way.md → the-magnetar-way.md} +0 -0
package/README.md
CHANGED
|
@@ -1,277 +1,286 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 🚀 ARGIS (RGS) - Reactive Global State
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
> The most powerful state management engine for React. Built for those who demand industrial-grade reliability with a zero-boilerplate experience.
|
|
3
|
+
<div align="center">
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
[](https://npmjs.org/package/@biglogic/rgs)
|
|
9
|
-
|
|
10
|
-

|
|
11
|
-

|
|
12
|
-

|
|
13
|
-

|
|
14
|
-

|
|
15
|
-

|
|
16
|
-

|
|
17
|
-

|
|
5
|
+
> **"Atomic Precision. Immutable Safety. Zen Simplicity."**
|
|
6
|
+
> The state management engine that **won't let you fail**.
|
|
18
7
|
|
|
19
|
-
](https://npmjs.org/package/@biglogic/rgs)
|
|
9
|
+
[](https://npmjs.org/package/@biglogic/rgs)
|
|
10
|
+
[](https://opensource.org/licenses/MIT)
|
|
11
|
+
[](https://www.typescriptlang.org/)
|
|
12
|
+
[](https://react.dev/)
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
</div>
|
|
23
15
|
|
|
24
16
|
---
|
|
25
17
|
|
|
26
|
-
##
|
|
18
|
+
## ⚡ TL;DR - Why ARGIS (RGS) Will Change How You Code Forever
|
|
27
19
|
|
|
28
|
-
|
|
20
|
+
```tsx
|
|
21
|
+
// One line. Zero boilerplate. Enterprise-grade power.
|
|
22
|
+
const useUser = gstate({
|
|
23
|
+
name: 'Alice',
|
|
24
|
+
cart: [],
|
|
25
|
+
preferences: { theme: 'dark' }
|
|
26
|
+
})
|
|
29
27
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
- **⚛️ Power on Demand**: Advanced async and persistence tools isolated in the `advanced` export.
|
|
34
|
-
- **🏗️ Stellar Architecture**: Zero circular dependencies. Modular, clean, and 100% type-safe.
|
|
28
|
+
// That's it. Use it anywhere:
|
|
29
|
+
const name = useUser(s => s.name)
|
|
30
|
+
const theme = useUser(s => s.preferences.theme)
|
|
35
31
|
|
|
36
|
-
|
|
32
|
+
// Mutations? Just write it. Immer handles immutability automatically.
|
|
33
|
+
useUser(s => {
|
|
34
|
+
s.cart.push({ id: 1, item: 'Coffee Machine', price: 99 })
|
|
35
|
+
})
|
|
36
|
+
```
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
| Feature | RGS ggtate | React useState |
|
|
41
|
-
|---------|--------|----------|
|
|
42
|
-
| **Global state across components** | ✅ Automatic sharing | ❌ Need Context/props |
|
|
43
|
-
| **Provider wrapper** | ✅ Not needed | ❌ Required |
|
|
44
|
-
| **Persistence (localStorage)** | ✅ Built-in | ❌ Manual |
|
|
45
|
-
| **Data encryption** | ✅ AES-256-GCM | ❌ |
|
|
46
|
-
| **Multiple namespaces/stores** | ✅ | ❌ |
|
|
47
|
-
| **Plugins (Immer, Undo/Redo)** | ✅ | ❌ |
|
|
48
|
-
| **Audit logging** | ✅ | ❌ |
|
|
49
|
-
| **RBAC/GDPR consent** | ✅ | ❌ |
|
|
50
|
-
| **SSR/Hydration** | ✅ Automatic | ❌ Manual |
|
|
51
|
-
| **Computed values** | ✅ | ❌ |
|
|
52
|
-
|
|
53
|
-
### When to use what?
|
|
54
|
-
|
|
55
|
-
- **useState**: Local UI, single component, temporary state
|
|
56
|
-
- **gstate**:
|
|
57
|
-
- Shared state across multiple components
|
|
58
|
-
- Persistent data (preferences, cart, authentication)
|
|
59
|
-
- Sensitive data (encryption)
|
|
60
|
-
- Advanced features (undo/redo, snapshots)
|
|
61
|
-
- Enterprise (audit, RBAC, GDPR)
|
|
38
|
+
**Stop fighting your state management. Start building.**
|
|
62
39
|
|
|
63
40
|
---
|
|
64
41
|
|
|
65
|
-
##
|
|
66
|
-
|
|
67
|
-
|Feature|**RGS (Argis)**|Zustand|Redux Toolkit|Recoil|
|
|
68
|
-
|:---|:---|:---|:---|:---|
|
|
69
|
-
| **Philosophy** | **Zen State** | Minimalist | Enterprise Flux | Atomic |
|
|
70
|
-
| **API Surface** | **1 Function** | Simple | Complex | Complex |
|
|
71
|
-
| **Mutations** | **Magic (Immer)** | Manual Spreads | Magic (Immer) | Manual |
|
|
72
|
-
| **Selectors** | ✅ **Type-Safe** | ✅ Functional | ✅ Functional | ⚠️ Selectors |
|
|
73
|
-
| **Security** | 🛡️ **AES-256 + RBAC** | ❌ None | ❌ Ecosystem | ❌ None |
|
|
74
|
-
| **Persistence** | 💾 **First-class** | 🔌 Middleware | 🔌 Middleware | 🔌 Effects |
|
|
75
|
-
| **Async** | ✅ **Atomic** | ✅ Async/Await | ✅ Thunks | ✅ Suspense |
|
|
76
|
-
| **Local-First Sync** | ✅ **Built-in** | ❌ None | ❌ None | ❌ None |
|
|
77
|
-
| **Bundle Size** | **~2kB** | ~1kB | >10kB | >20kB |
|
|
42
|
+
## 🎯 Why Developers Are **Obsessed** With ARGIS (RGS)
|
|
78
43
|
|
|
79
|
-
|
|
44
|
+
| Feature | Other Libraries | ARGIS (RGS) |
|
|
45
|
+
|---------|----------------|--------------|
|
|
46
|
+
| **API Complexity** | 10+ functions, providers, reducers | **1 function** - `gstate()` |
|
|
47
|
+
| **Immutability** | Manual spreads, Redux boilerplate | **Automatic** - Powered by Immer |
|
|
48
|
+
| **Security** | None | **AES-256 + RBAC + GDPR** built-in |
|
|
49
|
+
| **Persistence** | Manual localStorage/sessionStorage | **First-class** - Auto-save anywhere |
|
|
50
|
+
| **Offline/Cloud Sync** | Non-existent | **Local-First + Cloud Sync** included |
|
|
51
|
+
| **Bundle Size** | 10-50KB+ | **~2KB** minimal / **~32KB** full |
|
|
52
|
+
| **Type Safety** | Partial | **100% TypeScript** out of the box |
|
|
80
53
|
|
|
81
|
-
|
|
54
|
+
### 🔥 The Truth About State Management
|
|
82
55
|
|
|
83
|
-
|
|
56
|
+
Most libraries make you **choose** between:
|
|
57
|
+
- ✗ Simplicity vs Power
|
|
58
|
+
- ✗ Security vs Speed
|
|
59
|
+
- ✗ Offline vs Cloud
|
|
84
60
|
|
|
85
|
-
|
|
86
|
-
npm install @biglogic/rgs
|
|
87
|
-
```
|
|
61
|
+
**ARGIS (RGS) gives you ALL of it.**
|
|
88
62
|
|
|
89
63
|
---
|
|
90
64
|
|
|
91
|
-
|
|
65
|
+
## 🏆 RGS vs The Competition
|
|
92
66
|
|
|
93
|
-
**
|
|
67
|
+
| Feature | **RGS (Argis)** | Zustand | Redux Toolkit | Recoil | Jotai |
|
|
68
|
+
|---------|:---:|:---:|:---:|:---:|:---:|
|
|
69
|
+
| **Philosophy** | Zen State | Minimalist | Enterprise Flux | Atomic | Atomic |
|
|
70
|
+
| **API Surface** | **1 Function** | Simple | Complex | Complex | Simple |
|
|
71
|
+
| **Mutations** | **Magic (Immer)** | Manual | Magic | Manual | Manual |
|
|
72
|
+
| **Security** | 🛡️ **AES-256 + RBAC** | ❌ | ❌ | ❌ | ❌ |
|
|
73
|
+
| **Persistence** | 💾 **First-class** | 🔌 | 🔌 | 🔌 | 🔌 |
|
|
74
|
+
| **Local-First Sync** | ✅ **Built-in** | ❌ | ❌ | ❌ | ❌ |
|
|
75
|
+
| **Bundle Size** | **~2KB/32KB** | ~1KB | >10KB | >20KB | ~3KB |
|
|
94
76
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
## 🏗️ Architecture
|
|
98
|
-
|
|
99
|
-
```mermaid
|
|
100
|
-
graph TB
|
|
101
|
-
subgraph API
|
|
102
|
-
A[gstate] --> D[IStore]
|
|
103
|
-
B[useStore] --> D
|
|
104
|
-
C[createStore] --> D
|
|
105
|
-
end
|
|
77
|
+
> **RGS is the ONLY library treating Security and Persistence as first-class citizens.**
|
|
106
78
|
|
|
107
|
-
|
|
108
|
-
D --> F[Immer Proxy]
|
|
109
|
-
D --> G[Plugins]
|
|
110
|
-
D --> H[Security]
|
|
111
|
-
D --> I[Async Store]
|
|
79
|
+
---
|
|
112
80
|
|
|
113
|
-
|
|
114
|
-
E --> K[session]
|
|
115
|
-
E --> L[memory]
|
|
81
|
+
## 🚀 Installation
|
|
116
82
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
G --> P[Analytics]
|
|
83
|
+
```bash
|
|
84
|
+
# The fastest way to upgrade your React app
|
|
85
|
+
npm install @biglogic/rgs
|
|
121
86
|
```
|
|
122
87
|
|
|
123
|
-
|
|
88
|
+
```bash
|
|
89
|
+
# Or with pnpm
|
|
90
|
+
pnpm add @biglogic/rgs
|
|
124
91
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
| **useStore()** | React hook for subscribing to state |
|
|
129
|
-
| **createStore()** | Classic store factory |
|
|
130
|
-
| **IStore** | Core interface with get/set/subscribe |
|
|
131
|
-
| **StorageAdapters** | local, session, memory persistence |
|
|
132
|
-
| **Plugins** | Immer, Undo/Redo, Sync, Schema, etc. |
|
|
133
|
-
| **Security** | Encryption, RBAC, GDPR consent |
|
|
92
|
+
# Or with yarn
|
|
93
|
+
yarn add @biglogic/rgs
|
|
94
|
+
```
|
|
134
95
|
|
|
135
96
|
---
|
|
136
97
|
|
|
137
|
-
##
|
|
138
|
-
|
|
139
|
-
- **React 16.8+** (for hooks support)
|
|
140
|
-
- **React DOM**
|
|
141
|
-
|
|
142
|
-
## ⚡ Zero-Boilerplate Quickstart
|
|
143
|
-
|
|
144
|
-
### Path A: The Zen Way (Modular)
|
|
98
|
+
## 🎮 Quick Start - 30 Seconds to Glory
|
|
145
99
|
|
|
146
|
-
|
|
100
|
+
### The Zen Way (Recommended)
|
|
147
101
|
|
|
148
102
|
```tsx
|
|
149
103
|
import { gstate } from '@biglogic/rgs'
|
|
150
104
|
|
|
151
|
-
//
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const userName = useCounter(state => state.user.name)
|
|
105
|
+
// ONE line creates a typed store hook
|
|
106
|
+
const useStore = gstate({
|
|
107
|
+
count: 0,
|
|
108
|
+
user: { name: 'Alice', email: 'alice@example.com' }
|
|
109
|
+
})
|
|
157
110
|
|
|
158
|
-
|
|
159
|
-
|
|
111
|
+
function Counter() {
|
|
112
|
+
// Type-safe selectors - the React way
|
|
113
|
+
const count = useStore(s => s.count)
|
|
114
|
+
const userName = useStore(s => s.user.name)
|
|
115
|
+
|
|
116
|
+
// Direct mutations - just write JavaScript
|
|
117
|
+
const increment = () => useStore(s => { s.count++ })
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
<div>
|
|
121
|
+
<h1>Hello, {userName}!</h1>
|
|
122
|
+
<p>Count: {count}</p>
|
|
123
|
+
<button onClick={increment}>+1</button>
|
|
124
|
+
</div>
|
|
125
|
+
)
|
|
126
|
+
}
|
|
160
127
|
```
|
|
161
128
|
|
|
162
|
-
###
|
|
163
|
-
|
|
164
|
-
Best for shared state across the entire application.
|
|
129
|
+
### The Classic Way (Global Store)
|
|
165
130
|
|
|
166
131
|
```tsx
|
|
167
|
-
// 1. Initialize once
|
|
168
132
|
import { initState, useStore } from '@biglogic/rgs'
|
|
169
|
-
initState({ namespace: 'app' })
|
|
170
133
|
|
|
171
|
-
//
|
|
134
|
+
// Initialize once at app root
|
|
135
|
+
initState({ namespace: 'myapp' })
|
|
136
|
+
|
|
137
|
+
// Use anywhere in your app
|
|
172
138
|
const [user, setUser] = useStore('user')
|
|
139
|
+
const [theme, setTheme] = useStore('theme')
|
|
173
140
|
```
|
|
174
141
|
|
|
175
142
|
---
|
|
176
143
|
|
|
177
|
-
## 🛡️ Security
|
|
144
|
+
## 🛡️ Enterprise-Grade Security (No Extra Code)
|
|
178
145
|
|
|
179
|
-
|
|
146
|
+
### AES-256-GCM Encryption
|
|
180
147
|
|
|
181
|
-
|
|
182
|
-
|
|
148
|
+
```tsx
|
|
149
|
+
// Your sensitive data is encrypted automatically
|
|
150
|
+
const useAuth = gstate({
|
|
151
|
+
token: 'jwt-token-here',
|
|
152
|
+
refreshToken: 'refresh-token'
|
|
153
|
+
}, { encoded: true }) // 🔐 AES-256-GCM encryption enabled
|
|
154
|
+
```
|
|
183
155
|
|
|
184
|
-
###
|
|
185
|
-
Falls back to cryptographically secure random UUID generation when native `crypto.randomUUID()` is unavailable.
|
|
156
|
+
### RBAC (Role-Based Access Control)
|
|
186
157
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
158
|
+
```tsx
|
|
159
|
+
const store = gstate({
|
|
160
|
+
adminPanel: { users: [], settings: {} },
|
|
161
|
+
userProfile: {}
|
|
162
|
+
}, {
|
|
163
|
+
rbac: {
|
|
164
|
+
admin: ['adminPanel', 'userProfile'],
|
|
165
|
+
user: ['userProfile'],
|
|
166
|
+
guest: []
|
|
167
|
+
}
|
|
168
|
+
})
|
|
190
169
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
170
|
+
// Only admins can touch adminPanel
|
|
171
|
+
store.set('adminPanel', { users: ['new'] }) // ✅ Works for admins
|
|
172
|
+
```
|
|
194
173
|
|
|
195
174
|
### GDPR Compliance
|
|
196
|
-
- Consent management system
|
|
197
|
-
- Data export (`exportData()`)
|
|
198
|
-
- Data deletion (`deleteData()`)
|
|
199
175
|
|
|
200
|
-
|
|
201
|
-
|
|
176
|
+
```tsx
|
|
177
|
+
// Export all user data (GDPR requirement)
|
|
178
|
+
store.exportData() // Returns JSON of all stored data
|
|
179
|
+
|
|
180
|
+
// Delete all user data (GDPR "right to be forgotten")
|
|
181
|
+
store.deleteData()
|
|
182
|
+
```
|
|
202
183
|
|
|
203
184
|
---
|
|
204
185
|
|
|
205
|
-
##
|
|
186
|
+
## 💾 Persistence That Just Works
|
|
187
|
+
|
|
188
|
+
### Built-in Storage Adapters
|
|
206
189
|
|
|
207
190
|
```tsx
|
|
208
|
-
|
|
209
|
-
|
|
191
|
+
// localStorage (default) - survives browser restart
|
|
192
|
+
const useSettings = gstate({ theme: 'dark' }, { persist: true })
|
|
210
193
|
|
|
211
|
-
|
|
194
|
+
// sessionStorage - survives page refresh but not tab close
|
|
195
|
+
const useSession = gstate({ temporary: 'data' }, { storage: 'session' })
|
|
212
196
|
|
|
213
|
-
|
|
214
|
-
const
|
|
197
|
+
// Memory only - for ephemeral data
|
|
198
|
+
const useMemory = gstate({ cache: [] }, { storage: 'memory' })
|
|
199
|
+
|
|
200
|
+
// IndexedDB - for GB-scale data
|
|
201
|
+
const useBigData = gstate({ dataset: [] })
|
|
202
|
+
store._addPlugin(indexedDBPlugin({ dbName: 'my-app-db' }))
|
|
215
203
|
```
|
|
216
204
|
|
|
217
|
-
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## 🔌 Plugins Ecosystem - Extend Without Limits
|
|
208
|
+
|
|
209
|
+
RGS comes with **11+ official plugins** ready to supercharge your app:
|
|
210
|
+
|
|
211
|
+
| Plugin | Purpose | One-Liner |
|
|
212
|
+
|--------|---------|-----------|
|
|
213
|
+
| `undoRedoPlugin` | Time travel through state | `store.undo()` / `store.redo()` |
|
|
214
|
+
| `syncPlugin` | Cross-tab sync (no server) | `store._addPlugin(syncPlugin(...))` |
|
|
215
|
+
| `indexedDBPlugin` | GB-scale storage | `store._addPlugin(indexedDBPlugin(...))` |
|
|
216
|
+
| `cloudSyncPlugin` | Cloud backup & sync | `store.plugins.cloudSync.sync()` |
|
|
217
|
+
| `devToolsPlugin` | Redux DevTools | `store._addPlugin(devToolsPlugin(...))` |
|
|
218
|
+
| `immerPlugin` | Mutable-style updates | `store.setWithProduce('key', fn)` |
|
|
219
|
+
| `snapshotPlugin` | Save/restore checkpoints | `store.takeSnapshot('backup')` |
|
|
220
|
+
| `schemaPlugin` | Runtime validation | `store._addPlugin(schemaPlugin(...))` |
|
|
221
|
+
| `guardPlugin` | Transform on set | `store._addPlugin(guardPlugin(...))` |
|
|
222
|
+
| `analyticsPlugin` | Track changes | `store._addPlugin(analyticsPlugin(...))` |
|
|
223
|
+
| `debugPlugin` | Console access (DEV) | `window.gstate.list()` |
|
|
224
|
+
|
|
225
|
+
### Undo/Redo - Never Lose Work
|
|
218
226
|
|
|
219
227
|
```tsx
|
|
220
|
-
|
|
228
|
+
import { undoRedoPlugin } from '@biglogic/rgs'
|
|
229
|
+
|
|
230
|
+
const store = gstate({ text: '' })
|
|
221
231
|
store._addPlugin(undoRedoPlugin({ limit: 50 }))
|
|
222
232
|
|
|
223
|
-
|
|
224
|
-
store.
|
|
233
|
+
// User makes changes...
|
|
234
|
+
store.set('text', 'Hello World')
|
|
235
|
+
store.set('text', 'Hello Universe')
|
|
236
|
+
|
|
237
|
+
// Oops! Let's go back
|
|
238
|
+
store.undo() // Returns to 'Hello World'
|
|
239
|
+
store.redo() // Returns to 'Hello Universe'
|
|
225
240
|
```
|
|
226
241
|
|
|
227
|
-
### Cross-Tab Sync
|
|
242
|
+
### Cross-Tab Sync - Real-Time Everywhere
|
|
228
243
|
|
|
229
244
|
```tsx
|
|
245
|
+
import { syncPlugin } from '@biglogic/rgs/advanced'
|
|
246
|
+
|
|
230
247
|
const store = gstate({ theme: 'light' })
|
|
231
248
|
store._addPlugin(syncPlugin({ channelName: 'my-app' }))
|
|
232
|
-
```
|
|
233
249
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
store.compute('fullName', (get) => `${get('firstName')} ${get('lastName')}`)
|
|
237
|
-
|
|
238
|
-
const [fullName] = store('fullName') // "John Doe"
|
|
250
|
+
// Change in Tab 1 → Instantly updates Tab 2, Tab 3, etc.
|
|
251
|
+
// ZERO server calls. Pure browser magic.
|
|
239
252
|
```
|
|
240
253
|
|
|
241
|
-
###
|
|
242
|
-
|
|
243
|
-
Handle errors gracefully with the `onError` callback - perfect for production apps:
|
|
254
|
+
### Cloud Sync - Your Data, Everywhere
|
|
244
255
|
|
|
245
256
|
```tsx
|
|
246
|
-
|
|
247
|
-
onError: (error, context) => {
|
|
248
|
-
console.error(`Error in ${context.operation}:`, error.message)
|
|
249
|
-
// Send to error tracking service (Sentry, etc.)
|
|
250
|
-
}
|
|
251
|
-
})
|
|
252
|
-
```
|
|
257
|
+
import { cloudSyncPlugin, createMongoAdapter } from '@biglogic/rgs/advanced'
|
|
253
258
|
|
|
254
|
-
|
|
259
|
+
const adapter = createMongoAdapter(
|
|
260
|
+
'https://data.mongodb-api.com/...',
|
|
261
|
+
'your-api-key'
|
|
262
|
+
)
|
|
255
263
|
|
|
256
|
-
|
|
264
|
+
const store = gstate({ todos: [] })
|
|
265
|
+
store._addPlugin(cloudSyncPlugin({
|
|
266
|
+
adapter,
|
|
267
|
+
autoSyncInterval: 30000 // Every 30 seconds
|
|
268
|
+
}))
|
|
257
269
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
// Warn if single value exceeds 5MB (Default is 0/Disabled for performance)
|
|
261
|
-
maxObjectSize: 5 * 1024 * 1024,
|
|
262
|
-
// Warn if total store exceeds 50MB (Default is 0/Disabled)
|
|
263
|
-
maxTotalSize: 50 * 1024 * 1024
|
|
264
|
-
})
|
|
270
|
+
// Manual sync when needed
|
|
271
|
+
await store.plugins.cloudSync.sync()
|
|
265
272
|
```
|
|
266
273
|
|
|
267
|
-
|
|
274
|
+
---
|
|
275
|
+
|
|
276
|
+
## ☁️ Local-First Sync - Offline by Default
|
|
268
277
|
|
|
269
|
-
|
|
278
|
+
The **killer feature** that makes RGS unique:
|
|
270
279
|
|
|
271
280
|
```tsx
|
|
272
281
|
import { gstate, useSyncedState } from '@biglogic/rgs'
|
|
273
282
|
|
|
274
|
-
// Create store with
|
|
283
|
+
// Create store with automatic offline-first sync
|
|
275
284
|
const store = gstate({
|
|
276
285
|
todos: [],
|
|
277
286
|
user: null
|
|
@@ -279,192 +288,196 @@ const store = gstate({
|
|
|
279
288
|
namespace: 'myapp',
|
|
280
289
|
sync: {
|
|
281
290
|
endpoint: 'https://api.example.com/sync',
|
|
282
|
-
// Use a getter function to avoid exposing token in memory
|
|
283
291
|
authToken: () => localStorage.getItem('auth_token'),
|
|
284
|
-
autoSyncInterval: 30000,
|
|
285
|
-
syncOnReconnect: true,
|
|
286
|
-
strategy: 'last-write-wins'
|
|
292
|
+
autoSyncInterval: 30000,
|
|
293
|
+
syncOnReconnect: true,
|
|
294
|
+
strategy: 'last-write-wins'
|
|
287
295
|
}
|
|
288
296
|
})
|
|
289
297
|
|
|
290
|
-
//
|
|
298
|
+
// Works offline. Automatically syncs when online.
|
|
291
299
|
function TodoList() {
|
|
292
300
|
const [todos, setTodos] = useSyncedState('todos')
|
|
293
301
|
|
|
294
|
-
// Works offline automatically
|
|
295
302
|
const addTodo = (text) => {
|
|
296
303
|
setTodos([...todos, { id: Date.now(), text }])
|
|
304
|
+
// Synced automatically! ✨
|
|
297
305
|
}
|
|
298
306
|
|
|
299
|
-
return <
|
|
307
|
+
return <ul>{todos.map(t => <li>{t.text}</li>)}</ul>
|
|
300
308
|
}
|
|
301
309
|
```
|
|
302
310
|
|
|
303
311
|
---
|
|
304
312
|
|
|
305
|
-
##
|
|
313
|
+
## ⚡ Advanced Superpowers
|
|
306
314
|
|
|
307
|
-
|
|
315
|
+
### Computed Values (Derived State)
|
|
308
316
|
|
|
309
317
|
```tsx
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
318
|
+
const store = gstate({
|
|
319
|
+
firstName: 'John',
|
|
320
|
+
lastName: 'Doe'
|
|
321
|
+
})
|
|
313
322
|
|
|
314
|
-
//
|
|
315
|
-
|
|
316
|
-
const [theme] = appStore('theme') // 'dark'
|
|
323
|
+
// Auto-calculated derived state
|
|
324
|
+
store.compute('fullName', (get) => `${get('firstName')} ${get('lastName')}`)
|
|
317
325
|
|
|
318
|
-
|
|
319
|
-
initState({ namespace: 'global' })
|
|
320
|
-
const [value, setValue] = useStore('key')
|
|
326
|
+
const fullName = store.get('fullName') // "John Doe"
|
|
321
327
|
```
|
|
322
328
|
|
|
323
|
-
|
|
329
|
+
### Error Handling
|
|
324
330
|
|
|
325
|
-
|
|
331
|
+
```tsx
|
|
332
|
+
const store = gstate({ data: null }, {
|
|
333
|
+
onError: (error, context) => {
|
|
334
|
+
console.error(`Error in ${context.operation}:`, error.message)
|
|
335
|
+
// Send to Sentry, Datadog, etc.
|
|
336
|
+
}
|
|
337
|
+
})
|
|
338
|
+
```
|
|
326
339
|
|
|
327
|
-
###
|
|
340
|
+
### Size Limits (Memory Protection)
|
|
328
341
|
|
|
329
|
-
|
|
342
|
+
```tsx
|
|
343
|
+
const store = gstate({ data: {} }, {
|
|
344
|
+
maxObjectSize: 5 * 1024 * 1024, // Warn if single value > 5MB
|
|
345
|
+
maxTotalSize: 50 * 1024 * 1024 // Warn if total > 50MB
|
|
346
|
+
})
|
|
347
|
+
```
|
|
330
348
|
|
|
331
|
-
|
|
332
|
-
2. **UndoRedoPlugin**: Multi-level history management.
|
|
333
|
-
3. **PersistencePlugin**: Advanced storage with custom serialization.
|
|
334
|
-
4. **SyncPlugin**: Cross-tab state synchronization via BroadcastChannel.
|
|
335
|
-
5. **SchemaPlugin**: Runtime validation (perfect for Zod).
|
|
336
|
-
6. **DevToolsPlugin**: Redux DevTools integration.
|
|
337
|
-
7. **TTLPlugin**: Time-to-live management.
|
|
338
|
-
8. **AnalyticsPlugin**: Tracking bridge for metrics.
|
|
339
|
-
9. **SnapshotPlugin**: Manual state checkpointing.
|
|
340
|
-
10. **GuardPlugin**: Data transformation layer.
|
|
341
|
-
11. **Local-First Sync**: Built-in offline-first with auto-sync (NEW!)
|
|
349
|
+
---
|
|
342
350
|
|
|
343
|
-
|
|
344
|
-
import { createStore, PersistencePlugin, undoRedoPlugin } from '@biglogic/rgs'
|
|
351
|
+
## 📦 Build Sizes - Choose Your Weapon
|
|
345
352
|
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
store._addPlugin(undoRedoPlugin({ limit: 50 }))
|
|
353
|
+
### Minimal Version (~0.16 KB)
|
|
354
|
+
For embedded systems, widgets, IoT:
|
|
349
355
|
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
```
|
|
356
|
+
```javascript
|
|
357
|
+
import { createStore } from '@biglogic/rgs/core/minimal'
|
|
353
358
|
|
|
354
|
-
|
|
359
|
+
const store = createStore({ count: 0 })
|
|
360
|
+
store.get('count') // → 0
|
|
361
|
+
store.set('count', 5) // → true
|
|
362
|
+
```
|
|
355
363
|
|
|
356
|
-
|
|
364
|
+
### Full Version (~32 KB)
|
|
365
|
+
For production React apps with all features:
|
|
357
366
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
- `Middleware / IPlugin`: Build your own extensions.
|
|
367
|
+
```javascript
|
|
368
|
+
import { gstate, createStore } from '@biglogic/rgs'
|
|
361
369
|
|
|
362
|
-
|
|
370
|
+
const useCounter = gstate({ count: 0 })
|
|
371
|
+
const count = useCounter(s => s.count)
|
|
372
|
+
```
|
|
363
373
|
|
|
364
|
-
|
|
374
|
+
| Version | Size | Use Case |
|
|
375
|
+
|---------|------|----------|
|
|
376
|
+
| **Minimal** | 0.16 KB | Embedded, IoT, Widgets |
|
|
377
|
+
| **Full** | ~32 KB | React Apps, Enterprise |
|
|
365
378
|
|
|
366
|
-
|
|
379
|
+
---
|
|
367
380
|
|
|
368
|
-
|
|
369
|
-
- **E2E Tests (Playwright)**: Real-world browser testing for cross-tab synchronization and Web Crypto API.
|
|
370
|
-
- **Concurrency Testing**: Verification of race conditions in multi-tab environments.
|
|
381
|
+
## 🧪 Testing - Rock-Solid Reliability
|
|
371
382
|
|
|
372
383
|
```bash
|
|
373
384
|
# Run unit tests
|
|
374
385
|
npm run test
|
|
375
386
|
|
|
376
|
-
# Run E2E tests
|
|
387
|
+
# Run E2E tests (Playwright)
|
|
377
388
|
npm run test:e2e
|
|
378
389
|
```
|
|
379
390
|
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
RGS provides an **ultra-minimal** version for projects where bundle size is critical. This version includes only the core state management functionality.
|
|
385
|
-
|
|
386
|
-
> [!WARNING]
|
|
387
|
-
> ⚠️ **Not indicated for security and enterprise-level applications.**
|
|
388
|
-
> For production apps requiring AES-256 encryption, RBAC, GDPR compliance, or audit logging, use the full version.
|
|
391
|
+
- ✅ **100+ Unit Tests** (Jest) - Core logic, stores, hooks
|
|
392
|
+
- ✅ **E2E Tests** (Playwright) - Real browser, cross-tab sync
|
|
393
|
+
- ✅ **Concurrency Testing** - Race condition verification
|
|
394
|
+
- ✅ **Security Tests** - AES-256, RBAC, GDPR
|
|
389
395
|
|
|
390
396
|
---
|
|
391
397
|
|
|
392
|
-
|
|
398
|
+
## 🏗️ Architecture
|
|
393
399
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
400
|
+
```mermaid
|
|
401
|
+
graph TB
|
|
402
|
+
subgraph API
|
|
403
|
+
A[gstate] --> D[IStore]
|
|
404
|
+
B[useStore] --> D
|
|
405
|
+
C[createStore] --> D
|
|
406
|
+
end
|
|
398
407
|
|
|
399
|
-
|
|
408
|
+
D --> E[Storage Adapter]
|
|
409
|
+
D --> F[Immer Proxy]
|
|
410
|
+
D --> G[Plugins]
|
|
411
|
+
D --> H[Security]
|
|
412
|
+
D --> I[Async Store]
|
|
400
413
|
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
- ❌ Plugin system
|
|
405
|
-
- ❌ Immer integration
|
|
406
|
-
- ❌ Computed values
|
|
407
|
-
- ❌ React hooks
|
|
414
|
+
E --> J[local]
|
|
415
|
+
E --> K[session]
|
|
416
|
+
E --> L[memory]
|
|
408
417
|
|
|
409
|
-
|
|
418
|
+
G --> M[UndoRedo]
|
|
419
|
+
G --> N[Sync]
|
|
420
|
+
G --> O[Schema]
|
|
421
|
+
G --> P[Analytics]
|
|
422
|
+
```
|
|
410
423
|
|
|
411
|
-
|
|
424
|
+
### Core Components
|
|
412
425
|
|
|
413
|
-
|
|
426
|
+
| Component | Description |
|
|
427
|
+
|-----------|-------------|
|
|
428
|
+
| **gstate()** | Creates store + hook in one line |
|
|
429
|
+
| **useStore()** | React hook for subscribing to state |
|
|
430
|
+
| **createStore()** | Classic store factory |
|
|
431
|
+
| **IStore** | Core interface with get/set/subscribe |
|
|
432
|
+
| **StorageAdapters** | local, session, memory persistence |
|
|
433
|
+
| **Plugins** | Immer, Undo/Redo, Sync, Schema, etc. |
|
|
434
|
+
| **Security** | Encryption, RBAC, GDPR consent |
|
|
414
435
|
|
|
415
|
-
|
|
416
|
-
// Import minimal version
|
|
417
|
-
import { createStore } from '@biglogic/rgs/core/minimal'
|
|
436
|
+
---
|
|
418
437
|
|
|
419
|
-
|
|
438
|
+
## 📚 Documentation
|
|
420
439
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
440
|
+
- [Getting Started](docs/chapters/02-getting-started.md)
|
|
441
|
+
- [Plugin SDK](docs/chapters/05-plugin-sdk.md)
|
|
442
|
+
- [Security Architecture](docs/chapters/09-security-architecture.md)
|
|
443
|
+
- [Migration Guide](docs/chapters/08-migration-guide.md)
|
|
444
|
+
- [API Reference](docs/api.md)
|
|
426
445
|
|
|
427
|
-
|
|
446
|
+
---
|
|
428
447
|
|
|
429
|
-
|
|
448
|
+
## 🤝 Contributing
|
|
430
449
|
|
|
431
|
-
|
|
432
|
-
// Import full version (default)
|
|
433
|
-
import { gstate, createStore } from '@biglogic/rgs'
|
|
450
|
+
Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) first.
|
|
434
451
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
452
|
+
```bash
|
|
453
|
+
# Clone and setup
|
|
454
|
+
git clone https://github.com/BigLogic-ca/rgs.git
|
|
455
|
+
cd rgs
|
|
456
|
+
npm install
|
|
438
457
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
store.set('count', 5, { persist: true })
|
|
442
|
-
store._addPlugin(undoRedoPlugin())
|
|
458
|
+
# Run tests
|
|
459
|
+
npm run test
|
|
443
460
|
```
|
|
444
461
|
|
|
445
|
-
|
|
462
|
+
---
|
|
446
463
|
|
|
447
|
-
|
|
448
|
-
|----------|-----|------|
|
|
449
|
-
| Embedded/IoT | Minimal | 0.16 KB |
|
|
450
|
-
| Widgets/Badges | Minimal | 0.16 KB |
|
|
451
|
-
| React Apps | Full | ~32 KB |
|
|
452
|
-
| Enterprise | Full | ~32 KB |
|
|
464
|
+
## 📄 License
|
|
453
465
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
| Version | Size | Use Case |
|
|
457
|
-
|---------|------|----------|
|
|
458
|
-
| **Minimal** | 0.16 KB | Embedded systems, tiny apps |
|
|
459
|
-
| **Full** | ~32 KB | Production apps |
|
|
466
|
+
**MIT** © [Dario Passariello](https://github.com/passariello)
|
|
460
467
|
|
|
461
468
|
---
|
|
462
469
|
|
|
463
|
-
|
|
470
|
+
<div align="center">
|
|
464
471
|
|
|
465
|
-
|
|
472
|
+
## 🔥 Built for Those Who Demand **Excellence**
|
|
466
473
|
|
|
467
|
-
|
|
474
|
+
[](https://github.com/immerjs/immer)
|
|
475
|
+
[](https://www.typescriptlang.org/)
|
|
476
|
+
[](https://jestjs.io/)
|
|
477
|
+
[](https://playwright.dev/)
|
|
478
|
+
|
|
479
|
+
**Made with ❤️ and a lot of caffè espresso!**
|
|
480
|
+
|
|
481
|
+
[⬆ Back to top](#-argis-rgs---reactive-global-state)
|
|
468
482
|
|
|
469
|
-
|
|
470
|
-
Made with ❤️ and a lot of caffe' espresso!
|
|
483
|
+
</div>
|