@adimm/x-injection-reactjs 1.0.3 → 1.0.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 +84 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,32 +12,32 @@
|
|
|
12
12
|
<a href="https://www.npmjs.com/package/@adimm/x-injection-reactjs" target="__blank"><img src="https://badgen.net/npm/dm/@adimm/x-injection-reactjs"></a>
|
|
13
13
|
</p>
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
Powerful dependency injection for React components using a modular architecture. Build scalable React applications with clean separation of concerns.
|
|
15
|
+
**Powerful dependency injection for React components using a modular architecture. Build scalable React applications with clean separation of concerns.** _(Inspired by Angular and NestJS IoC/DI)_
|
|
18
16
|
|
|
19
17
|
## Table of Contents
|
|
20
18
|
|
|
21
|
-
- [
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
- [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
- [
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
- [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
- [
|
|
38
|
-
- [
|
|
39
|
-
|
|
40
|
-
|
|
19
|
+
- [Table of Contents](#table-of-contents)
|
|
20
|
+
- [Overview](#overview)
|
|
21
|
+
- [Installation](#installation)
|
|
22
|
+
- [Quick Start](#quick-start)
|
|
23
|
+
- [The Problem](#the-problem)
|
|
24
|
+
- [Without xInjection](#without-xinjection)
|
|
25
|
+
- [With xInjection](#with-xinjection)
|
|
26
|
+
- [Core Concepts](#core-concepts)
|
|
27
|
+
- [Component Modules](#component-modules)
|
|
28
|
+
- [Services](#services)
|
|
29
|
+
- [Dependency Injection](#dependency-injection)
|
|
30
|
+
- [Custom Hooks](#custom-hooks)
|
|
31
|
+
- [Examples](#examples)
|
|
32
|
+
- [Zustand Integration](#zustand-integration)
|
|
33
|
+
- [Parent-Child Provider Control](#parent-child-provider-control)
|
|
34
|
+
- [Advanced Usage](#advanced-usage)
|
|
35
|
+
- [Module Imports and Exports](#module-imports-and-exports)
|
|
36
|
+
- [Multiple Dependency Injection](#multiple-dependency-injection)
|
|
37
|
+
- [Unit Testing](#unit-testing)
|
|
38
|
+
- [Documentation](#documentation)
|
|
39
|
+
- [Contributing](#contributing)
|
|
40
|
+
- [License](#license)
|
|
41
41
|
|
|
42
42
|
## Overview
|
|
43
43
|
|
|
@@ -99,6 +99,67 @@ const UserDashboard = provideModuleToComponent(UserDashboardModuleBp, () => {
|
|
|
99
99
|
});
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
+
## The Problem
|
|
103
|
+
|
|
104
|
+
React apps often suffer from **provider hell**, **prop drilling**, and **manual dependency wiring**:
|
|
105
|
+
|
|
106
|
+
### Without xInjection
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
// Problem 1: Provider Hell
|
|
110
|
+
<AuthProvider>
|
|
111
|
+
<ApiProvider>
|
|
112
|
+
<ToastProvider>
|
|
113
|
+
<App />
|
|
114
|
+
</ToastProvider>
|
|
115
|
+
</ApiProvider>
|
|
116
|
+
</AuthProvider>;
|
|
117
|
+
|
|
118
|
+
// Problem 2: Manual Dependency Wiring
|
|
119
|
+
function UserProfile() {
|
|
120
|
+
// Must manually create ALL dependencies in correct order
|
|
121
|
+
const toast = new ToastService();
|
|
122
|
+
const api = new ApiService();
|
|
123
|
+
const auth = new AuthService(api);
|
|
124
|
+
const userProfile = new UserProfileService(api, auth, toast);
|
|
125
|
+
|
|
126
|
+
// If AuthService adds a dependency, ALL consumers break!
|
|
127
|
+
return <div>{userProfile.displayName}</div>;
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### With xInjection
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
// 1. Define global services (shared across all components) - Usually in your app entrypoint/bootstrap file.
|
|
135
|
+
const AppModuleBp = ProviderModule.blueprint({
|
|
136
|
+
id: 'AppModule',
|
|
137
|
+
isGlobal: true, // Available everywhere, only created once
|
|
138
|
+
providers: [ToastService, ApiService, AuthService],
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
// 2. Define component-specific services - Per component
|
|
142
|
+
const UserProfileModuleBp = ProviderModule.blueprint({
|
|
143
|
+
id: 'UserProfileModule',
|
|
144
|
+
providers: [UserProfileService], // Automatically gets ApiService, AuthService, ToastService
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
const UserProfile = provideModuleToComponent(UserProfileModuleBp, () => {
|
|
148
|
+
const userProfile = useInject(UserProfileService);
|
|
149
|
+
// IoC automatically injects: ToastService → ApiService → AuthService → UserProfileService
|
|
150
|
+
return <div>{userProfile.displayName}</div>;
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
**What You Get:**
|
|
155
|
+
|
|
156
|
+
- **No Provider Hell** - One module replaces nested providers
|
|
157
|
+
- **Auto Dependency Resolution** - IoC wires everything automatically
|
|
158
|
+
- **Easy Refactoring** - Add/remove dependencies without breaking consumers
|
|
159
|
+
- **Clean Separation** - Business logic in services, UI in components
|
|
160
|
+
- **Fully Testable** - Mock modules or individual services
|
|
161
|
+
- **Type-Safe** - Full TypeScript support
|
|
162
|
+
|
|
102
163
|
## Core Concepts
|
|
103
164
|
|
|
104
165
|
### Component Modules
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"url": "https://github.com/AdiMarianMutu/x-injection-reactjs"
|
|
6
6
|
},
|
|
7
7
|
"description": "ReactJS integration of the `xInjection` library.",
|
|
8
|
-
"version": "1.0.
|
|
8
|
+
"version": "1.0.4",
|
|
9
9
|
"author": "Adi-Marian Mutu",
|
|
10
10
|
"homepage": "https://github.com/AdiMarianMutu/x-injection-reactjs#readme",
|
|
11
11
|
"bugs": "https://github.com/AdiMarianMutu/x-injection-reactjs/issues",
|