react-native-demo-library-by-rinkal 1.2.7 → 1.3.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 (15) hide show
  1. package/ARCHITECTURE_DIAGRAMS.md +473 -0
  2. package/COMMUNICATION_DOCS.md +336 -0
  3. package/CONTAINER_APP_SETUP.md +360 -0
  4. package/CommunicationExample.tsx +247 -0
  5. package/ContainerCommunication.ts +91 -0
  6. package/IMPLEMENTATION_SUMMARY.md +385 -0
  7. package/INDEX.md +333 -0
  8. package/MiniAppCommunication.ts +71 -0
  9. package/OFFICIAL_REFERENCES.md +278 -0
  10. package/QUICK_REFERENCE.md +298 -0
  11. package/Readme.md +514 -3
  12. package/SUMMARY.md +305 -0
  13. package/TaskCard.tsx +25 -8
  14. package/index.ts +15 -1
  15. package/package.json +16 -2
package/ARCHITECTURE_DIAGRAMS.md ADDED
@@ -0,0 +1,473 @@
1
+ # Architecture & Flow Diagrams
2
+
3
+ ## System Architecture
4
+
5
+ ```
6
+ ┌─────────────────────────────────────────────────────────────────────┐
7
+ │ MINIAPP APPLICATION │
8
+ │ │
9
+ │ ┌───────────────────────────────────────────────────────────────┐ │
10
+ │ │ MiniAppCommunication │ │
11
+ │ │ │ │
12
+ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
13
+ │ │ │EventEmitter │ │ Callbacks │ │ Promises │ │ │
14
+ │ │ │ Pattern │ │ Pattern │ │ Pattern │ │ │
15
+ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
16
+ │ │ | │ │ │
17
+ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
18
+ │ │ │Shared State │ │Native Bridge │ │Message Queue │ │ │
19
+ │ │ │ Pattern │ │ Pattern │ │ Pattern │ │ │
20
+ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
21
+ │ │ │ │
22
+ │ └───────────────────────────────────────────────────────────────┘ │
23
+ │ │
24
+ └──────────────────────────────┬──────────────────────────────────────┘
25
+ │
26
+ │ Communication Bridge
27
+ │ (Event Bus / Promises / State)
28
+ │
29
+ ┌──────────────────────────────┴──────────────────────────────────────┐
30
+ │ CONTAINER APPLICATION │
31
+ │ │
32
+ │ ┌───────────────────────────────────────────────────────────────┐ │
33
+ │ │ ContainerCommunication │ │
34
+ │ │ │ │
35
+ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
36
+ │ │ │Event Listener│ │ Request │ │Shared State │ │ │
37
+ │ │ │ │ │ Handlers │ │ Manager │ │ │
38
+ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
39
+ │ │ │ │
40
+ │ │ ┌──────────────┐ │ │
41
+ │ │ │Message Queue │ │ │
42
+ │ │ │ Handler │ │ │
43
+ │ │ └──────────────┘ │ │
44
+ │ │ │ │
45
+ │ └───────────────────────────────────────────────────────────────┘ │
46
+ │ │
47
+ └─────────────────────────────────────────────────────────────────────┘
48
+ ```
49
+
50
+ ---
51
+
52
+ ## Event Emitter Flow
53
+
54
+ ```
55
+ ┌─────────────┐ ┌─────────────┐
56
+ │ MiniApp │ │ Container │
57
+ └──────┬──────┘ └──────┬──────┘
58
+ │ │
59
+ │ 1. sendEvent('userAction', data) │
60
+ │─────────────────────────────────────────────────>│
61
+ │ │
62
+ │ 2. Event received │
63
+ │ onEvent() triggered │
64
+ │ │
65
+ │ 3. sendEvent('containerUpdate', data) │
66
+ │<─────────────────────────────────────────────────│
67
+ │ │
68
+ │ 4. Event received │
69
+ │ onEvent() triggered │
70
+ │ │
71
+ ```
72
+
73
+ **Official Ref**: https://reactnative.dev/docs/native-modules-ios#sending-events-to-javascript
74
+
75
+ ---
76
+
77
+ ## Promise-Based Request-Response Flow
78
+
79
+ ```
80
+ ┌─────────────┐ ┌─────────────┐
81
+ │ MiniApp │ │ Container │
82
+ └──────┬──────┘ └──────┬──────┘
83
+ │ │
84
+ │ 1. request('getUserData', {userId: 123}) │
85
+ │ Returns Promise │
86
+ │─────────────────────────────────────────────────>│
87
+ │ │
88
+ │ 2. Request received with ID │
89
+ │ registerHandler invoked │
90
+ │ Processing... │
91
+ │ │
92
+ │ 3. Response sent with request ID │
93
+ │<─────────────────────────────────────────────────│
94
+ │ │
95
+ │ 4. Promise resolved │
96
+ │ Data returned to caller │
97
+ │ │
98
+ ```
99
+
100
+ **Official Ref**: https://reactnative.dev/docs/native-modules-ios#promises
101
+
102
+ ---
103
+
104
+ ## Shared State Synchronization Flow
105
+
106
+ ```
107
+ ┌─────────────┐ ┌─────────────┐
108
+ │ MiniApp │ │ Container │
109
+ └──────┬──────┘ └──────┬──────┘
110
+ │ │
111
+ │ 1. setState('theme', 'dark') │
112
+ │ Local state updated │
113
+ │─────────────────────────────────────────────────>│
114
+ │ │
115
+ │ 2. State change received │
116
+ │ Local state updated │
117
+ │ Notify subscribers │
118
+ │ │
119
+ │ 3. setState('language', 'en') │
120
+ │<─────────────────────────────────────────────────│
121
+ │ │
122
+ │ 4. State change received │
123
+ │ Local state updated │
124
+ │ Notify subscribers │
125
+ │ │
126
+ ```
127
+
128
+ **Official Ref**: https://redux.js.org/introduction/getting-started
129
+
130
+ ---
131
+
132
+ ## Message Queue Flow
133
+
134
+ ```
135
+ ┌─────────────┐ ┌─────────────┐
136
+ │ MiniApp │ │ Container │
137
+ └──────┬──────┘ └──────┬──────┘
138
+ │ │
139
+ │ 1. queueMessage('analytics', data) │
140
+ │ Added to queue │
141
+ │ │
142
+ │ 2. Queue processor starts │
143
+ │ (100ms delay between messages) │
144
+ │─────────────────────────────────────────────────>│
145
+ │ │
146
+ │ 3. Message received │
147
+ │ Handler invoked │
148
+ │ │
149
+ │ 4. Next message processed │
150
+ │─────────────────────────────────────────────────>│
151
+ │ │
152
+ │ 5. Message received │
153
+ │ Handler invoked │
154
+ │ │
155
+ ```
156
+
157
+ **Official Ref**: https://en.wikipedia.org/wiki/Message_queue
158
+
159
+ ---
160
+
161
+ ## Native Bridge Flow
162
+
163
+ ```
164
+ ┌─────────────┐ ┌──────────────┐ ┌─────────────┐
165
+ │ MiniApp │ │Native Module │ │ Native │
166
+ │ │ │ (Bridge) │ │ Code │
167
+ └──────┬──────┘ └──────┬───────┘ └──────┬──────┘
168
+ │ │ │
169
+ │ 1. callNative( │ │
170
+ │ 'DeviceInfo', │ │
171
+ │ 'getBatteryLevel') │ │
172
+ │──────────────────────>│ │
173
+ │ │ │
174
+ │ │ 2. Bridge to native │
175
+ │ │──────────────────────>│
176
+ │ │ │
177
+ │ │ 3. Native executes │
178
+ │ │ Returns result │
179
+ │ │<──────────────────────│
180
+ │ │ │
181
+ │ 4. Promise resolved │ │
182
+ │ Result returned │ │
183
+ │<──────────────────────│ │
184
+ │ │ │
185
+ ```
186
+
187
+ **Official Ref**: https://reactnative.dev/docs/native-modules-intro
188
+
189
+ ---
190
+
191
+ ## Complete Communication Lifecycle
192
+
193
+ ```
194
+ ┌──────────────────────────────────────────────────────────────────┐
195
+ │ APPLICATION STARTUP │
196
+ └───────────────────────────────┬──────────────────────────────────┘
197
+ │
198
+ ┌───────────────┴───────────────┐
199
+ │ │
200
+ ┌───────▼────────┐ ┌────────▼───────┐
201
+ │ MiniApp Init │ │ Container Init │
202
+ │ - initialize() │ │ - initialize() │
203
+ └───────┬────────┘ └────────┬───────┘
204
+ │ │
205
+ └───────────────┬───────────────┘
206
+ │
207
+ ┌───────────────────────▼──────────────────────┐
208
+ │ Communication Bridge Established │
209
+ │ - Event emitters connected │
210
+ │ - Request handlers registered │
211
+ │ - State sync initialized │
212
+ │ - Message queue started │
213
+ └───────────────────────┬──────────────────────┘
214
+ │
215
+ ┌───────────────────────▼──────────────────────┐
216
+ │ RUNTIME COMMUNICATION │
217
+ │ │
218
+ │ Events ←→ Bidirectional │
219
+ │ Requests → Responses │
220
+ │ State ←→ Synchronized │
221
+ │ Messages → Queued │
222
+ │ Native → Called │
223
+ └───────────────────────┬──────────────────────┘
224
+ │
225
+ ┌───────────────────────▼──────────────────────┐
226
+ │ APPLICATION SHUTDOWN │
227
+ │ │
228
+ │ 1. Remove all listeners │
229
+ │ 2. Clear message queue │
230
+ │ 3. Clear shared state │
231
+ │ 4. cleanup() called │
232
+ └──────────────────────────────────────────────┘
233
+ ```
234
+
235
+ ---
236
+
237
+ ## Data Flow Example: User Login
238
+
239
+ ```
240
+ Step 1: User Clicks Login Button
241
+ ┌─────────────┐
242
+ │ MiniApp │
243
+ │ [UI View] │ User clicks "Login"
244
+ └──────┬──────┘
245
+ │
246
+ │ sendEvent('userAction', {action: 'login'})
247
+ ▼
248
+
249
+ Step 2: Request User Data
250
+ ┌─────────────┐
251
+ │ MiniApp │
252
+ │ [Logic] │ request('authenticate', {user, pass})
253
+ └──────┬──────┘
254
+ │
255
+ │ Promise created with requestId
256
+ ▼
257
+
258
+ Step 3: Container Processes
259
+ ┌─────────────┐
260
+ │ Container │
261
+ │ [Handler] │ Handler validates credentials
262
+ └──────┬──────┘
263
+ │
264
+ │ Async processing...
265
+ ▼
266
+
267
+ Step 4: Response Sent
268
+ ┌─────────────┐
269
+ │ Container │
270
+ │ [Handler] │ Returns {token, user}
271
+ └──────┬──────┘
272
+ │
273
+ │ sendToMiniApp('response', {requestId, data})
274
+ ▼
275
+
276
+ Step 5: Update Shared State
277
+ ┌─────────────┐
278
+ │ MiniApp │
279
+ │ [State] │ setState('currentUser', userData)
280
+ └──────┬──────┘
281
+ │
282
+ │ State synchronized
283
+ ▼
284
+ ┌─────────────┐
285
+ │ Container │
286
+ │ [State] │ Receives state update
287
+ └──────┬──────┘
288
+ │
289
+ │ Both apps in sync
290
+ ▼
291
+
292
+ Step 6: Queue Analytics
293
+ ┌─────────────┐
294
+ │ MiniApp │
295
+ │ [Queue] │ queueMessage('analytics', {event: 'login'})
296
+ └──────┬──────┘
297
+ │
298
+ │ Message processed reliably
299
+ ▼
300
+ ┌─────────────┐
301
+ │ Container │
302
+ │ [Handler] │ Logs analytics event
303
+ └─────────────┘
304
+ ```
305
+
306
+ ---
307
+
308
+ ## Error Handling Flow
309
+
310
+ ```
311
+ ┌─────────────┐ ┌─────────────┐
312
+ │ MiniApp │ │ Container │
313
+ └──────┬──────┘ └──────┬──────┘
314
+ │ │
315
+ │ 1. request('getData', {}) │
316
+ │─────────────────────────────────────────────────>│
317
+ │ │
318
+ │ 2. Handler throws error │
319
+ │ try-catch catches it │
320
+ │ │
321
+ │ 3. sendToMiniApp('error', {requestId, error}) │
322
+ │<─────────────────────────────────────────────────│
323
+ │ │
324
+ │ 4. Promise rejected │
325
+ │ try-catch in MiniApp │
326
+ │ Error displayed to user │
327
+ │ │
328
+ ```
329
+
330
+ ---
331
+
332
+ ## Pattern Decision Tree
333
+
334
+ ```
335
+ Do you need a response?
336
+ │
337
+ ├─ NO ─────────> Use Event Emitter
338
+ │ ↓
339
+ │ One-way notification
340
+ │
341
+ └─ YES ────────> Is it synchronous?
342
+ │
343
+ ├─ YES ──> Use Callback
344
+ │ ↓
345
+ │ Direct invocation
346
+ │
347
+ └─ NO ───> Use Promise
348
+ ↓
349
+ Async request-response
350
+
351
+ Do you need bidirectional sync?
352
+ │
353
+ └─ YES ────────> Use Shared State
354
+ ↓
355
+ Both sides stay in sync
356
+
357
+ Do you need native features?
358
+ │
359
+ └─ YES ────────> Use Native Bridge
360
+ ↓
361
+ Call native modules
362
+
363
+ Do you need reliability?
364
+ │
365
+ └─ YES ────────> Use Message Queue
366
+ ↓
367
+ Guaranteed delivery
368
+ ```
369
+
370
+ ---
371
+
372
+ ## Performance Considerations
373
+
374
+ ```
375
+ Event Emitter
376
+ ├─ Latency: < 1ms
377
+ ├─ Overhead: Low
378
+ └─ Best for: Frequent, small updates
379
+
380
+ Callback
381
+ ├─ Latency: < 1ms
382
+ ├─ Overhead: Very Low
383
+ └─ Best for: Synchronous operations
384
+
385
+ Promise
386
+ ├─ Latency: < 10ms
387
+ ├─ Overhead: Medium
388
+ └─ Best for: Async data fetching
389
+
390
+ Shared State
391
+ ├─ Latency: < 1ms
392
+ ├─ Overhead: Low
393
+ └─ Best for: State synchronization
394
+
395
+ Native Bridge
396
+ ├─ Latency: Variable
397
+ ├─ Overhead: High
398
+ └─ Best for: Native operations
399
+
400
+ Message Queue
401
+ ├─ Latency: 100ms+ (queued)
402
+ ├─ Overhead: Medium
403
+ └─ Best for: Reliable delivery
404
+ ```
405
+
406
+ ---
407
+
408
+ ## Security Considerations
409
+
410
+ ```
411
+ ┌────────────────────────────────────────────────┐
412
+ │ Security Best Practices │
413
+ ├────────────────────────────────────────────────┤
414
+ │ │
415
+ │ 1. Validate all incoming data │
416
+ │ ✓ Type checking │
417
+ │ ✓ Schema validation │
418
+ │ ✓ Sanitization │
419
+ │ │
420
+ │ 2. Use allowlist for actions │
421
+ │ ✓ Register handlers explicitly │
422
+ │ ✓ Reject unknown actions │
423
+ │ │
424
+ │ 3. Implement rate limiting │
425
+ │ ✓ Prevent flooding │
426
+ │ ✓ Queue management │
427
+ │ │
428
+ │ 4. Secure state management │
429
+ │ ✓ Don't expose sensitive data │
430
+ │ ✓ Encrypt if needed │
431
+ │ │
432
+ │ 5. Error handling │
433
+ │ ✓ Don't leak sensitive info in errors │
434
+ │ ✓ Log securely │
435
+ │ │
436
+ └────────────────────────────────────────────────┘
437
+ ```
438
+
439
+ ---
440
+
441
+ ## Platform-Specific Implementations
442
+
443
+ ```
444
+ ┌─────────────────────────────────────────────────────┐
445
+ │ iOS Platform │
446
+ ├─────────────────────────────────────────────────────┤
447
+ │ Event Emitter: NativeEventEmitter │
448
+ │ Bridge: RCTBridge │
449
+ │ Documentation: https://reactnative.dev/docs/ │
450
+ │ communication-ios │
451
+ └─────────────────────────────────────────────────────┘
452
+
453
+ ┌─────────────────────────────────────────────────────┐
454
+ │ Android Platform │
455
+ ├─────────────────────────────────────────────────────┤
456
+ │ Event Emitter: DeviceEventEmitter │
457
+ │ Bridge: ReactApplicationContext │
458
+ │ Documentation: https://reactnative.dev/docs/ │
459
+ │ communication-android │
460
+ └─────────────────────────────────────────────────────┘
461
+ ```
462
+
463
+ ---
464
+
465
+ ## References
466
+
467
+ All diagrams based on official documentation:
468
+ - React Native: https://reactnative.dev/docs/native-modules-intro
469
+ - Node.js Events: https://nodejs.org/api/events.html
470
+ - Redux: https://redux.js.org/
471
+ - MDN Promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
472
+
473
+ See [OFFICIAL_REFERENCES.md](./OFFICIAL_REFERENCES.md) for complete list.