@adimm/x-injection-reactjs 1.0.2 → 1.0.3

package/README.md

@@ -12,61 +12,53 @@
 <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>
 </p>
 
+# xInjection for React
+
+Powerful dependency injection for React components using a modular architecture. Build scalable React applications with clean separation of concerns.
+
 ## Table of Contents
 
-- [Table of Contents](#table-of-contents)
-- [Overview](#overview)
-- [Installation](#installation)
-  - [TypeScript Configuration](#typescript-configuration)
-- [Getting Started](#getting-started)
+- [xInjection for React](#xinjection-for-react)
+  - [Table of Contents](#table-of-contents)
+  - [Overview](#overview)
+  - [Installation](#installation)
   - [Quick Start](#quick-start)
-  - [Conventions](#conventions)
-  - [Component Module](#component-module)
-  - [Component Service](#component-service)
-  - [How to tie a `ProviderModule` to a `Component`?](#how-to-tie-a-providermodule-to-a-component)
-    - [Is your component re-usable?](#is-your-component-re-usable)
-      - [Yes](#yes)
-      - [No](#no)
-  - [How to control a Child component providers from Parent component?](#how-to-control-a-child-component-providers-from-parent-component)
-    - [Override the entire Child Module](#override-the-entire-child-module)
-    - [Override only specific Child Providers](#override-only-specific-child-providers)
-  - [Hook Injection](#hook-injection)
-- [Examples](#examples)
-  - [Composable components](#composable-components)
-- [Unit Tests](#unit-tests)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-- [Credits](#credits)
+  - [Core Concepts](#core-concepts)
+    - [Component Modules](#component-modules)
+    - [Services](#services)
+    - [Dependency Injection](#dependency-injection)
+    - [Custom Hooks](#custom-hooks)
+  - [Examples](#examples)
+    - [Zustand Integration](#zustand-integration)
+    - [Parent-Child Provider Control](#parent-child-provider-control)
+  - [Advanced Usage](#advanced-usage)
+    - [Module Imports and Exports](#module-imports-and-exports)
+    - [Multiple Dependency Injection](#multiple-dependency-injection)
+  - [Unit Testing](#unit-testing)
+  - [Documentation](#documentation)
+  - [Contributing](#contributing)
+  - [License](#license)
 
 ## Overview
 
-This is the _official_ [ReactJS](https://react.dev/) implementation of the [xInjection](https://github.com/AdiMarianMutu/x-injection) library.
-
-> [!Warning]
->
-> The usage of the `base` library will not be explained here, I'll assume you already know how to use the `xInjection` library, if that's not the case, please refer to the `xInjection` [Gettng Started](https://github.com/AdiMarianMutu/x-injection?tab=readme-ov-file#getting-started) section.
+xInjection for React brings dependency injection to your React components, enabling:
 
-## Installation
-
-First, ensure you have [`reflect-metadata`](https://www.npmjs.com/package/reflect-metadata) installed:
+- **Service-based architecture**: Separate business logic from UI components
+- **Modular design**: Create reusable, testable component modules
+- **State management integration**: Works seamlessly with Zustand, Redux, or any state library
+- **Parent-child provider control**: Parent components can control child component dependencies
 
-```sh
-npm i reflect-metadata
-```
+This is the official [ReactJS](https://react.dev/) implementation of [xInjection](https://github.com/AdiMarianMutu/x-injection).
 
-Then install `xInjection` for React:
+## Installation
 
 ```sh
-npm i @adimm/x-injection-reactjs
+npm i @adimm/x-injection-reactjs reflect-metadata
 ```
 
-> [!Note]
->
-> You may also have to install the parent library via `npm i @adimm/x-injection`
-
-### TypeScript Configuration
+**TypeScript Configuration**
 
-Add the following options to your `tsconfig.json` to enable decorator metadata:
+Add to your `tsconfig.json`:
 
 ```json
 {
@@ -77,17 +69,25 @@ Add the following options to your `tsconfig.json` to enable decorator metadata:
 }
 ```
 
-## Getting Started
-
-### Quick Start
+## Quick Start
 
 ```tsx
+import { Injectable, provideModuleToComponent, ProviderModule, useInject } from '@adimm/x-injection-reactjs';
+
+// 1. Define a service
+@Injectable()
+class UserService {
+  firstName = 'John';
+  lastName = 'Doe';
+}
+
+// 2. Create a module blueprint
 const UserDashboardModuleBp = ProviderModule.blueprint({
-  id: 'ComponentUserDashboardModule',
-  imports: [UserModule],
-  exports: [UserModule],
+  id: 'UserDashboardModule',
+  providers: [UserService],
 });
 
+// 3. Create a component with dependency injection
 const UserDashboard = provideModuleToComponent(UserDashboardModuleBp, () => {
   const userService = useInject(UserService);
 
@@ -97,505 +97,327 @@ const UserDashboard = provideModuleToComponent(UserDashboardModuleBp, () => {
     </h1>
   );
 });
-
-const App = () => {
-  return (
-    <>
-      <Navbar />
-      <UserDashboard />
-      <Footer />
-    </>
-  );
-};
 ```
 
-### Conventions
-
-Before continuing you should read also the [Conventions](https://github.com/AdiMarianMutu/x-injection?tab=readme-ov-file#conventions) section of the _parent_ library.
+## Core Concepts
 
-### Component Module
+### Component Modules
 
-You should create a separate file which you'll use to declare the `blueprint` of the _component_ `module`:
-
-`user-dashboard/user-dashboard.module.ts`
+Create a module blueprint that defines your component's dependencies:
 
 ```ts
+// user-dashboard.module.ts
 export const UserDashboardModuleBp = ProviderModule.blueprint({
-  id: 'ComponentUserDashboardModule',
-  ...
+  id: 'UserDashboardModule',
+  providers: [UserService],
+  exports: [UserService],
 });
 ```
 
-> [!Note]
->
-> You should also prefix the `id` of the `blueprints` with `Component` as this will help you to debug your app much more easier when something goes wrong.
-
-### Component Service
+**Blueprint vs Module:** Use a **blueprint** for reusable components (multiple instances), use a raw **module** for singleton components (single instance).
 
-You should create a separate file which you'll use to declare the _(main)_ `service` of the _component_.
+### Services
 
-`user-dashboard/user-dashboard.service.ts`
+Define services using the `@Injectable()` decorator:
 
 ```ts
+// user-dashboard.service.ts
 @Injectable()
 export class UserDashboardService {
   firstName: string;
   lastName: string;
+
+  getFullName() {
+    return `${this.firstName} ${this.lastName}`;
+  }
 }
 ```
 
-### How to tie a `ProviderModule` to a `Component`?
-
-You first have to either create a `module` or `blueprint`, most of the times you'll use the `blueprint` option, if you are asking yourself how you should decide:
-
-#### Is your component re-usable?
+### Dependency Injection
 
-> Will you have **more** than **one** instance of that component?
-
-##### Yes
-
-- Then you have to use a `blueprint`, the reason can be understood by reading [this](https://github.com/AdiMarianMutu/x-injection?tab=readme-ov-file#import-behavior).
-
-##### No
-
-- Then you have to use a raw `module`, the reason is the opposite of the `blueprint` motive.
-
-> [!Tip] If the above explaination is clear, please skip to the next section, otherwise keep reading.
-
-Imagine that we have a `Button` component, clearly we'll have more than one instance of that component, this means that **each** _instance_ of the `Button` component must have its own `module`, where all the `singletons` will act as singletons _only inside_ the component **instance**.
-
-> Therefore we leverage the `blueprint` _import_ behavior to achieve that naturally without additional overhead.
-
----
-
-After you created the `component module`, you can provide it to the actual component by using the [provideModuleToComponent](https://adimarianmutu.github.io/x-injection-reactjs/functions/provideModuleToComponent.html) _([HoC](https://legacy.reactjs.org/docs/higher-order-components.html))_ `method`.
+Use `useInject` to access services in your components:
 
 ```tsx
-const UserDashboard = provideModuleToComponent(UserDashboardModuleBp, (props: UserDashboardProps) => {
-  ...
-});
-```
-
-### How to control a Child component providers from Parent component?
-
-If you need this design pattern, it is very easy to implement with `xInjection`, you actually have 2 options:
-
-#### Override the entire Child Module
-
-Let's say that the `Child` component has this `module`:
-
-```ts
-const ChildModuleBp = ProviderModule.blueprint({
-  id: 'ComponentChildModule',
-  providers: [ChildService],
-  exports: [ChildService],
-});
-```
-
-What you can now do is to provide the `ChildService` from the `Parent` component, like this:
-
-```ts
-const ParentModuleBp = ProviderModule.blueprint({
-  id: 'ComponentParentModule',
-  providers: [ParentService, ChildService],
-  exports: [ParentService, ChildService],
-});
-```
-
-Then, when you are rendering the `Child` component from **within** the `Parent` component:
-
-```ts
-const ParentComponent = provideModuleToComponent(ParentModuleBp, ({ module }) => {
-  // the `module` prop is always available and automatically injected into the `props` object.
-
-  return <ChildComponent module={module} />;
-});
-```
-
-Now the `ChildComponent` will be instantiated with the `module` received from the `ParentComponent`, therefore it'll use the `ChildService` managed into the `ParentModule`.
-
-> [!Tip]
->
-> This is perfect to use when you are writing _unit tests_ and you want to mock an entire component `module`
-
-#### Override only specific Child Providers
-
-> This is the approach which you should strive to use most of the times as it is less prone to _"human error"_ than overriding the entire module.
-
-Let's re-use the same example as the one from the above, the `ParentModule`:
-
-```ts
-const ParentModuleBp = ProviderModule.blueprint({
-  id: 'ComponentParentModule',
-  providers: [ParentService, ChildService],
-  exports: [ParentService, ChildService],
-});
-```
-
-And now the rendering part:
-
-```ts
-const ParentComponent = provideModuleToComponent(ParentModuleBp, () => {
-  // notice that we are not using the `module` prop anymore.
-  const childService = useInject(ChildService);
+const UserDashboard = provideModuleToComponent(UserDashboardModuleBp, () => {
+  const userService = useInject(UserService);
 
-  return <ChildComponent inject={[{ provide: ChildService, useValue: childService }]} />;
+  return <div>{userService.getFullName()}</div>;
 });
 ```
 
-By using the `inject` prop _(which as the `module` prop is always available)_ you'll _"swap"_ the `ChildService` provider with a [ProviderValueToken](https://adimarianmutu.github.io/x-injection/types/ProviderValueToken.html) which provides the `ChildService` **instance** instantiated by the `ParentComponent`.
-
-> [!Note]
->
-> If you are asking yourself `Why would I want to do that?`, that's a valid question, and most of the times you'll **not** need this feature, but sometimes, when you _compose_ components, being able to control the _providers_ of the children components becomes very useful. Check the [Composable Components](#composable-components) example to understand.
-
-### Hook Injection
-
-You already have seen in action the low-level [useInject](https://adimarianmutu.github.io/x-injection-reactjs/functions/useInject.html) hook _(take a look also at the [useInjectMany](https://adimarianmutu.github.io/x-injection-reactjs/functions/useInjectMany.html) hook)_. It is quite useful when you just have to inject quickly some dependencies into a component quite simple.
+### Custom Hooks
 
-But, as your UI will _grow_, you'll soon discover that you may inject _more_ dependencies into a component, or even in multiple components, therefore you'll end up writing a lot of duplicated code, well, as per the [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself#:~:text=%22Don't%20repeat%20yourself%22,redundancy%20in%20the%20first%20place.) principle, we want to _avoid_ that.
-
-This means that we can actually use the [hookFactory](https://adimarianmutu.github.io/x-injection-reactjs/functions/hookFactory.html) method to compose a _custom_ hook with access to any dependency available in the component module.
+Create reusable hooks with dependency injection using `hookFactory`:
 
 ```ts
-// The `HookWithDeps` generic type will help
-// in making sure that the `useGenerateUserFullName` hooks params are correctly visible.
-// The 1st generic param must be the hook params (Like `UserInfoProps`)
-// and the 2nd generic param must be an `array` with the providers type.
-const useGenerateUserFullName = hookFactory({
-  // The `use` property is where you write your hook implementation.
-  use: ({ firstName, lastName, deps: [userService] }: HookWithDeps<UserInfoProps, [UserService]>) => {
+const useUserFullName = hookFactory({
+  use: ({ firstName, lastName, deps: [userService] }) => {
     userService.firstName = firstName;
     userService.lastName = lastName;
-
-    return userService.generateFullName();
+    return userService.getFullName();
   },
-  // The `inject` array is very important,
-  // here we basically specify which dependencies should be injected into the custom hook.
-  // Also, keep in mind that the order of the `inject` array matters, the order of the `deps` prop
-  // is determined by the order of the `inject` array!
   inject: [UserService],
 });
-```
-
-Now you can use it in inside any component which is using a `module` which can provide the `UserService`.
-
-```tsx
-export function UserInfo({ firstName, lastName }: UserInfoProps) {
-  const userFullName = useGenerateFullName({ firstName, lastName });
 
-  return <p>Hello {userFullName}!</p>;
-}
+// Use in any component
+const fullName = useUserFullName({ firstName: 'John', lastName: 'Doe' });
 ```
 
-> **Note:** _If your custom hook does not accept any parameter, you can provide `void` to the 1st generic type._
->
-> e.g: `use: ({ deps: [userService] }: HookWithDeps<void, [UserService]>)`
-
 ## Examples
 
-### Composable components
-
-In a real world scenario, you'll definitely have custom components which render other custom components and so on... _(like a [Matryoshka doll](https://en.wikipedia.org/wiki/Matryoshka_doll))_
+### Zustand Integration
 
-So you may find yourself wanting to be able to control a dependency/service of a child component from a parent component, with `xInjection` this is very easy to achieve thanks to the `ProviderModule` architecture, because each `module` can `import` and `export` other dependencies _(or modules)_ it fits in perfectly within the [declarative programming](https://en.wikipedia.org/wiki/Declarative_programming) world!
+This example shows how to integrate Zustand store within a service, allowing the service to manipulate the store while components only subscribe to state changes.
 
-In this example, we'll build 4 components, each with its own purpose. However, the `autocomplete` component will be the one capable of accessing the services of all of them.
-
-- An `inputbox`
-- A `list viewer`
-- A `dropdown`
-- An `autocomplete`
-
-<hr>
+```ts
+// counter.service.ts
 
-> Inputbox
+import { Injectable } from '@adimm/x-injection-reactjs';
+import { create } from 'zustand';
 
-`inputbox.service.ts`
+interface CounterStore {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+  reset: () => void;
+}
 
-```ts
 @Injectable()
-export class InputboxService {
-  currentValue = '';
+export class CounterService {
+  // Store instance encapsulated within the service
+  private readonly store = create<CounterStore>((set) => ({
+    count: 0,
+    increment: () => set((state) => ({ count: state.count + 1 })),
+    decrement: () => set((state) => ({ count: state.count - 1 })),
+    reset: () => set({ count: 0 }),
+  }));
+
+  // Expose store hook for components to subscribe
+  get useStore() {
+    return this.store;
+  }
 
-  // We'll initialize this soon enough.
-  setStateValue!: (newValue: string) => void;
+  // Getter to access current state from within the service
+  private get storeState() {
+    return this.store.getState();
+  }
 
-  /** Can be used to update the {@link currentValue} of the `inputbox`. */
-  setValue(newValue: string): void {
-    this.currentValue = newValue;
+  // Business logic methods
+  increment() {
+    this.storeState.increment();
+  }
 
-    this.setStateValue(this.currentValue);
+  decrement() {
+    this.storeState.decrement();
   }
-}
 
-export const InputboxModuleBp = ProviderModule.blueprint({
-  id: 'ComponentInputboxModule',
-  provides: [InputboxService],
-  exports: [InputboxService],
-});
-```
+  reset() {
+    this.storeState.reset();
+  }
 
-`inputbox.tsx`
+  incrementBy(amount: number) {
+    // Complex logic lives in the service
+    const currentCount = this.storeState.count;
+    this.store.setState({ count: currentCount + amount });
+  }
 
-```tsx
-export interface InputboxProps {
-  initialValue: string;
+  async incrementAsync() {
+    // Handle async operations in the service
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    this.increment();
+  }
 }
-
-export const Inputbox = provideModuleToComponent<InputboxProps>(InputboxModuleBp, ({ initialValue }) => {
-  const service = useInject(InputboxService);
-  const [, setCurrentValue] = useState(initialValue);
-  service.setStateValue = setCurrentValue;
-
-  useEffect(() => {
-    service.currentValue = initialValue;
-  }, [initialValue]);
-
-  return <input value={service.currentValue} onChange={(e) => service.setValue(e.currentTarget.value)} />;
-});
 ```
 
-<hr>
-
-> Listview
-
-`listview.service.ts`
-
 ```ts
-@Injectable()
-export class ListviewService {
-  items = [];
+// counter.module.ts
 
-  /* Remaining fancy implementation */
-}
+import { ProviderModule } from '@adimm/x-injection-reactjs';
 
-export const ListviewModuleBp = ProviderModule.blueprint({
-  id: 'ComponentListviewModule',
-  provides: [ListviewService],
-  exports: [ListviewService],
+import { CounterService } from './counter.service';
+
+export const CounterModuleBp = ProviderModule.blueprint({
+  id: 'CounterModule',
+  providers: [CounterService],
+  exports: [CounterService],
 });
 ```
 
-`listview.tsx`
-
 ```tsx
-export interface ListviewProps {
-  items: any[];
-}
+// counter.component.tsx
 
-export const Listview = provideModuleToComponent<ListviewProps>(ListviewModuleBp, ({ items }) => {
-  const service = useInject(ListviewService);
+import { provideModuleToComponent, useInject } from '@adimm/x-injection-reactjs';
 
-  /* Remaining fancy implementation */
+import { CounterModuleBp } from './counter.module';
+import { CounterService } from './counter.service';
+
+const Counter = provideModuleToComponent(CounterModuleBp, () => {
+  // Inject service for business logic
+  const counterService = useInject(CounterService);
+
+  // Subscribe to store for reactive state
+  const count = counterService.useStore((state) => state.count);
 
   return (
     <div>
-      {service.items.map((item) => (
-        <span key={item}>{item}</span>
-      ))}
+      <h2>Count: {count}</h2>
+      <button onClick={() => counterService.increment()}>+1</button>
+      <button onClick={() => counterService.decrement()}>-1</button>
+      <button onClick={() => counterService.incrementBy(5)}>+5</button>
+      <button onClick={() => counterService.incrementAsync()}>+1 Async</button>
+      <button onClick={() => counterService.reset()}>Reset</button>
     </div>
   );
 });
+
+export default Counter;
 ```
 
-<hr>
+**Key Benefits:**
 
-> Dropdown
+- **Encapsulation**: Store is encapsulated within the service, not exposed globally
+- **Separation of concerns**: Business logic in services, UI only subscribes to state
+- **Testability**: Services are self-contained and easy to test
+- **Reusability**: Services with stores can be shared across components via dependency injection
+- **Type safety**: Full TypeScript support throughout
 
-Now keep close attention to how we implement the `Dropdown` component, as it'll actually be the _parent_ controlling the `Listview` component own service.
+### Parent-Child Provider Control
 
-`dropdown.service.ts`
+Parent components can control child component dependencies using the `inject` prop:
 
 ```ts
-@Injectable()
-export class DropdownService {
-  constructor(readonly listviewService: ListviewService) {
-    // We can already take control of the children `ListviewService`!
-    this.listviewService.items = [1, 2, 3, 4, 5];
-  }
-
-  /* Remaining fancy implementation */
-}
-
-export const DropdownModuleBp = ProviderModule.blueprint({
-  id: 'ComponentDropdownModule',
-  // It is very important that we import all the exportable dependencies from the `ListviewModule`!
-  imports: [ListviewModuleBp],
-  provides: [DropdownService],
-  exports: [
-    // Let's also re-export the dependencies of the `ListviewModule` so once we import the `DropdownModule`
-    // somewhere elese, we get access to the `ListviewModule` exported dependencies as well!
-    ListviewModuleBp,
-    // Let's not forget to also export our `DropdownService` :)
-    DropdownService,
-  ],
+// Child module and service
+const ChildModuleBp = ProviderModule.blueprint({
+  id: 'ChildModule',
+  providers: [ChildService],
+  exports: [ChildService],
 });
-```
-
-`dropdown.tsx`
-
-```tsx
-export interface DropdownProps {
-  listviewProps: ListviewProps;
 
-  initialSelectedValue: number;
-}
-
-export const Dropdown = provideModuleToComponent<DropdownProps>(
-  ListviewModuleBp,
-  ({ listviewProps, initialSelectedValue }) => {
-    const service = useInject(DropdownService);
-
-    /* Remaining fancy implementation */
+// Parent module
+const ParentModuleBp = ProviderModule.blueprint({
+  id: 'ParentModule',
+  providers: [ParentService, ChildService],
+  exports: [ParentService, ChildService],
+});
 
-    return (
-      <div className="fancy-dropdown">
-        <span>{initialSelectedValue}</span>
+// Parent component controls child's service
+const ParentComponent = provideModuleToComponent(ParentModuleBp, () => {
+  const childService = useInject(ChildService);
 
-        {/* Here we tell the `ListView` component to actually use the `ListviewService` instance we provide via the `useValue` property. */}
-        {/* Each `useInject(ListviewService)` used inside the `ListView` component will automatically resolve to `service.listviewService`. */}
-        <Listview {...listviewProps} inject={[{ provide: ListviewService, useValue: service.listviewService }]} />
-      </div>
-    );
-  }
-);
+  // Override child's ChildService with parent's instance
+  return <ChildComponent inject={[{ provide: ChildService, useValue: childService }]} />;
+});
 ```
 
-<hr>
+This pattern is useful for:
 
-> Autocomplete
+- Building composable component hierarchies
+- Sharing state between parent and child components
+- Creating flexible component APIs
 
-And finally the grand finale!
+## Advanced Usage
 
-`autocomplete.service.ts`
+### Module Imports and Exports
 
-```ts
-@Injectable()
-export class AutocompleteService {
-  constructor(
-    readonly inputboxService: InputboxService,
-    readonly dropdownService: DropdownService
-  ) {
-    // Here we can override even what the `Dropdown` has already overriden!
-    this.dropdownService.listviewService.items = [29, 9, 1969];
-
-    // However doing the following, will throw an error because the `Inputbox` component
-    // at this time is not yet mounted, therefore the `setStateValue` state setter
-    // method doesn't exist yet.
-    //
-    // A better way would be to use a store manager so you can generate your application state through
-    // the services, rather than inside the UI (components should be used only to render the data, not to manipulate/manage it).
-    this.inputboxService.setValue('xInjection');
-  }
+Modules can import and re-export other modules:
 
-  /* Remaining fancy implementation */
-}
-
-export const AutocompleteModuleBp = ProviderModule.blueprint({
-  id: 'ComponentAutocompleteModule',
-  imports: [InputboxModuleBp, DropdownModuleBp],
-  provides: [AutocompleteService],
-  // If we don't plan to share the internal dependencies of the
-  // Autocomplete component, then we can omit the `exports` array declaration.
+```ts
+const DropdownModuleBp = ProviderModule.blueprint({
+  id: 'DropdownModule',
+  imports: [ListviewModuleBp], // Import ListviewModule
+  providers: [DropdownService],
+  exports: [
+    ListviewModuleBp, // Re-export imported module
+    DropdownService,
+  ],
 });
 ```
 
-`autocomplete.tsx`
-
-```tsx
-export interface AutocompleteProps {
-  inputboxProps: InputboxProps;
-  dropdownProps: DropdownProps;
-
-  currentText: string;
-}
-
-export const Autocomplete = provideModuleToComponent<AutocompleteProps>(AutocompleteModuleBp, ({ inputboxProps, dropdownProps, currentText }) => {
-    const service = useInject(AutocompleteService);
-
-    service.inputboxService.currentValue = currentText;
+### Multiple Dependency Injection
 
-    console.log(service.dropdownService.listviewService.items);
-    // Produces: [29, 9, 1969]
+Use `useInjectMany` to inject multiple dependencies:
 
-    /* Remaining fancy implementation */
-
-    return (
-      <div className="fancy-autocomplete">
-        {/* Let's not forget to replace the injection providers of both components we want to control */}
-        <Inputbox {...inputboxProps} inject={[{ provide: InputboxService, useValue: service.inputboxService }]} >
-        <Dropdown {...dropdownProps} inject={[{ provide: DropdownService, useValue: service.dropdownService }]} />
-      </div>
-    );
-  }
-);
+```ts
+const [userService, apiService] = useInjectMany([UserService, ApiService]);
 ```
 
-This should cover the fundamentals of how you can build a scalable UI by using the `xInjection` Dependency Injection 😊
+## Unit Testing
 
-## Unit Tests
-
-It is very easy to create mock modules so you can provide them to your components in your unit tests.
+Mock modules easily for testing:
 
 ```tsx
-class ApiService {
-  constructor(private readonly userService: UserService) {}
-
-  async sendRequest<T>(location: LocationParams): Promise<T> {
-    // Pseudo Implementation
-    return this.sendToLocation(user, location);
-  }
+import { act, render } from '@testing-library/react';
 
-  private async sendToLocation(user: User, location: any): Promise<any> {}
-}
-
-const ApiModuleBp = new ProviderModule.blueprint({
+// Original module
+const ApiModuleBp = ProviderModule.blueprint({
   id: 'ApiModule',
   providers: [UserService, ApiService],
 });
 
-// Clone returns a `deep` clone and wraps all the `methods` to break their reference!
+// Create mocked version
 const ApiModuleBpMocked = ApiModuleBp.clone().updateDefinition({
   id: 'ApiModuleMocked',
   providers: [
-    {
-      provide: UserService,
-      useClass: UserService_Mock,
-    },
+    { provide: UserService, useClass: UserServiceMock },
     {
       provide: ApiService,
       useValue: {
-        sendRequest: async (location) => {
-          console.log(location);
-        },
+        sendRequest: vi.fn().mockResolvedValue({ data: 'mocked' }),
       },
     },
   ],
 });
 
-// Now all the dependencies used inside the "RealComponent" will be automatically resolved from the `ApiModuleBpMocked` module.
-await act(async () => render(<RealComponent module={ApiModuleBpMocked} />));
+// Test with mocked module
+await act(async () => render(<MyComponent module={ApiModuleBpMocked} />));
+```
+
+**Testing with Zustand:**
+
+```tsx
+import { act, renderHook } from '@testing-library/react';
+
+import { CounterService } from './counter.service';
+
+it('should increment counter via service', () => {
+  const service = new CounterService();
+
+  const { result } = renderHook(() => service.useStore((s) => s.count));
+
+  expect(result.current).toBe(0);
+
+  act(() => {
+    service.increment();
+  });
+
+  expect(result.current).toBe(1);
+});
+
+it('should handle complex business logic', () => {
+  const service = new CounterService();
+
+  act(() => {
+    service.incrementBy(10);
+  });
+
+  expect(service.useStore.getState().count).toBe(10);
+});
 ```
 
 ## Documentation
 
-Comprehensive, auto-generated documentation is available at:
+📚 **Full API Documentation:** [https://adimarianmutu.github.io/x-injection-reactjs](https://adimarianmutu.github.io/x-injection-reactjs/index.html)
 
-👉 [https://adimarianmutu.github.io/x-injection-reactjs/index.html](https://adimarianmutu.github.io/x-injection-reactjs/index.html)
+For more information about the base library, see [xInjection Documentation](https://github.com/AdiMarianMutu/x-injection#readme).
 
 ## Contributing
 
-Pull requests are warmly welcomed! 😃
-
-Please ensure your contributions adhere to the project's code style. See the repository for more details.
+Pull requests are welcome! Please ensure your contributions follow the project's code style.
 
-## Credits
+## License
 
-- [Adi-Marian Mutu](https://www.linkedin.com/in/mutu-adi-marian/) - Author of `xInjection` & `xInjection ReactJS`
+MIT © [Adi-Marian Mutu](https://www.linkedin.com/in/mutu-adi-marian/)
 
 ---
 
-> [!NOTE]
->
-> **For questions, feature requests, or bug reports, feel free to open an [issue](https://github.com/AdiMarianMutu/x-injection-react/issues) on GitHub.**
+**Questions or issues?** Open an [issue on GitHub](https://github.com/AdiMarianMutu/x-injection-reactjs/issues)

package/dist/index.cjs

@@ -9,91 +9,92 @@ var e, r = Object.create, t = Object.defineProperty, o = Object.getOwnPropertyDe
         enumerable: !(c = o(r, a)) || c.enumerable
     });
     return e;
-}, d = {};
+}, s = {};
 
 ((e, r) => {
     for (var o in r) t(e, o, {
         get: r[o],
         enumerable: !0
     });
-})(d, {
+})(s, {
     REACT_X_INJECTION_PROVIDER_MODULE_CONTEXT: () => l,
-    hookFactory: () => _,
+    hookFactory: () => q,
     provideModuleToComponent: () => T,
-    useComponentModule: () => m,
-    useInject: () => f,
+    useComponentModule: () => f,
+    useInject: () => m,
     useInjectMany: () => v
-}), module.exports = (e = d, a(t({}, "__esModule", {
+}), module.exports = (e = s, a(t({}, "__esModule", {
     value: !0
 }), e));
 
-var s = require("@adimm/x-injection"), l = (0, require("react").createContext)(s.AppModule), p = require("react");
+var d = require("@adimm/x-injection"), l = (0, require("react").createContext)(d.AppModule), p = require("react");
 
-function m() {
+function f() {
     return (0, p.useContext)(l);
 }
 
-function f(e, r) {
-    return m().get(e, r?.isOptional, r?.asList);
+function m(e, r) {
+    return f().get(e, r?.isOptional, r?.asList);
 }
 
 function v(...e) {
-    return m().getMany(...e);
+    return f().getMany(...e);
 }
 
-c(m, "useComponentModule"), c(f, "useInject"), c(v, "useInjectMany");
+c(f, "useComponentModule"), c(m, "useInject"), c(v, "useInjectMany");
 
-var M = ((e, o, n) => (n = null != e ? r(u(e)) : {}, a(!o && e && e.__esModule ? n : t(n, "default", {
+var M, y = ((e, o, n) => (n = null != e ? r(u(e)) : {}, a(!o && e && e.__esModule ? n : t(n, "default", {
     value: e,
     enumerable: !0
-}), e)))(require("react"), 1), j = require("@adimm/x-injection"), P = require("react"), y = require("react");
+}), e)))(require("react"), 1), j = require("@adimm/x-injection"), P = require("react"), b = require("react");
 
-function b(e) {
-    const r = (0, y.useRef)(void 0), t = (0, y.useRef)(!1), o = (0, y.useRef)(!1), [, n] = (0, 
-    y.useState)(0);
-    t.current && (o.current = !0), (0, y.useEffect)(() => (t.current || (r.current = e(), 
-    t.current = !0), n(e => e + 1), () => {
+function h(e) {
+    const r = (0, b.useRef)(void 0), t = (0, b.useRef)(!1), o = (0, b.useRef)(!1), [, n] = (0, 
+    b.useState)(0);
+    t.current && (o.current = !0), (0, b.useEffect)((() => (t.current || (r.current = e(), 
+    t.current = !0), n((e => e + 1)), () => {
         o.current && r.current?.();
-    }), []);
+    })), []);
 }
 
 function O(e, r) {
-    const t = (0, P.useMemo)(() => {
+    const t = (0, P.useMemo)((() => {
         const {module: t, inject: o} = r ?? {}, n = j.ProviderModuleHelpers.tryBlueprintToModule(t ?? e);
         if (n.options.isGlobal) throw new j.InjectionProviderModuleError(n, "A 'global' module can't be supplied to a component!");
-        return o?.forEach(e => {
+        return o?.forEach((e => {
             if (!n.hasProvider(e)) throw new j.InjectionProviderModuleError(n, `The [${j.ProviderTokenHelpers.providerTokenToString(e)}] provider can't be replaced because it is not part of the component module!`);
             n.update.removeProvider(j.ProviderTokenHelpers.toProviderIdentifier(e)), n.update.addProvider(e);
-        }), n;
-    }, [ e, r?.inject ]);
-    return b(() => () => {
+        })), n;
+    }), [ e, r?.inject ]);
+    return h((() => () => {
         t.dispose();
-    }), t;
+    })), t;
 }
 
-c(b, "useEffectOnce"), c(O, "useMakeOrGetComponentModule");
-
-var h, E = require("@adimm/x-injection");
+function g(e) {
+    return "function" == typeof e && !Function.prototype.toString.call(e).startsWith("class ");
+}
 
-!function(e) {
+c(h, "useEffectOnce"), c(O, "useMakeOrGetComponentModule"), c(g, "isFunction"), 
+function(e) {
     function r(e, r, t) {
         const o = {
             ...r
         };
-        return ("object" == typeof e && "type" in e && (0, E.isFunction)(e.type) || (0, 
-        E.isFunction)(e)) && (o.module = t), o;
+        return ("object" == typeof e && "type" in e && g(e.type) || g(e)) && (o.module = t), 
+        o;
     }
     c(r, "forwardPropsWithModule"), e.forwardPropsWithModule = r;
-}(h || (h = {}));
+}(M || (M = {}));
 
-var g = M.default.memo(w);
+var E = y.default.memo(w);
 
 function T(e, r) {
     return t => {
         const o = O(e, t);
-        return M.default.createElement(l.Provider, {
+        return y.default.createElement(l.Provider, {
             value: o
-        }, M.default.createElement(g, {
+        }, y.default.createElement(E, {
             module: o,
             componentProps: t,
             component: r
@@ -102,24 +103,24 @@ function T(e, r) {
 }
 
 function w({module: e, component: r, componentProps: t}) {
-    return M.default.createElement(M.default.Fragment, null, r(h.forwardPropsWithModule(r, t, e)));
+    return y.default.createElement(y.default.Fragment, null, r(M.forwardPropsWithModule(r, t, e)));
 }
 
 c(T, "provideModuleToComponent"), c(w, "_ComponentRenderer");
 
-var I = require("react"), C = require("@adimm/x-injection"), q = class e extends C.InjectionProviderModuleError {
+var I = require("react"), C = require("@adimm/x-injection"), _ = class e extends C.InjectionProviderModuleError {
     static {
         c(this, "InjectionHookFactoryError");
     }
     name=e.name;
 };
 
-function _({use: e, inject: r}) {
+function q({use: e, inject: r}) {
     return t => {
-        const o = m(), n = (0, I.useMemo)(() => {
-            if (0 === r.length) throw new q(o, "The 'deps' property array is missing!");
+        const o = f(), n = (0, I.useMemo)((() => {
+            if (0 === r.length) throw new _(o, "The 'deps' property array is missing!");
             return o.getMany(...r);
-        }, [ r ]);
+        }), [ r ]);
         return e({
             ...t,
             deps: [ ...n ]
@@ -127,4 +128,4 @@ function _({use: e, inject: r}) {
     };
 }
 
-c(_, "hookFactory");
+c(q, "hookFactory");

package/dist/index.js

@@ -1,13 +1,13 @@
-var e = Object.defineProperty, r = (r, o) => e(r, "name", {
-    value: o,
+var e = Object.defineProperty, o = (o, r) => e(o, "name", {
+    value: r,
     configurable: !0
 });
 
-import { AppModule as o } from "@adimm/x-injection";
+import { AppModule as r } from "@adimm/x-injection";
 
 import { createContext as t } from "react";
 
-var n, i = t(o);
+var n, i = t(r);
 
 import { useContext as c } from "react";
 
@@ -15,106 +15,107 @@ function u() {
     return c(i);
 }
 
-function m(e, r) {
-    return u().get(e, r?.isOptional, r?.asList);
+function a(e, o) {
+    return u().get(e, o?.isOptional, o?.asList);
 }
 
-function a(...e) {
+function m(...e) {
     return u().getMany(...e);
 }
 
-r(u, "useComponentModule"), r(m, "useInject"), r(a, "useInjectMany");
+o(u, "useComponentModule"), o(a, "useInject"), o(m, "useInjectMany");
 
 import p from "react";
 
-import { InjectionProviderModuleError as d, ProviderModuleHelpers as s, ProviderTokenHelpers as f } from "@adimm/x-injection";
+import { InjectionProviderModuleError as s, ProviderModuleHelpers as d, ProviderTokenHelpers as f } from "@adimm/x-injection";
 
 import { useMemo as l } from "react";
 
-import { useEffect as v, useRef as h, useState as j } from "react";
+import { useEffect as v, useRef as h, useState as y } from "react";
 
 function M(e) {
-    const r = h(void 0), o = h(!1), t = h(!1), [, n] = j(0);
-    o.current && (t.current = !0), v(() => (o.current || (r.current = e(), o.current = !0), 
-    n(e => e + 1), () => {
-        t.current && r.current?.();
-    }), []);
+    const o = h(void 0), r = h(!1), t = h(!1), [, n] = y(0);
+    r.current && (t.current = !0), v((() => (r.current || (o.current = e(), r.current = !0), 
+    n((e => e + 1)), () => {
+        t.current && o.current?.();
+    })), []);
 }
 
-function y(e, r) {
-    const o = l(() => {
-        const {module: o, inject: t} = r ?? {}, n = s.tryBlueprintToModule(o ?? e);
-        if (n.options.isGlobal) throw new d(n, "A 'global' module can't be supplied to a component!");
-        return t?.forEach(e => {
-            if (!n.hasProvider(e)) throw new d(n, `The [${f.providerTokenToString(e)}] provider can't be replaced because it is not part of the component module!`);
+function j(e, o) {
+    const r = l((() => {
+        const {module: r, inject: t} = o ?? {}, n = d.tryBlueprintToModule(r ?? e);
+        if (n.options.isGlobal) throw new s(n, "A 'global' module can't be supplied to a component!");
+        return t?.forEach((e => {
+            if (!n.hasProvider(e)) throw new s(n, `The [${f.providerTokenToString(e)}] provider can't be replaced because it is not part of the component module!`);
             n.update.removeProvider(f.toProviderIdentifier(e)), n.update.addProvider(e);
-        }), n;
-    }, [ e, r?.inject ]);
-    return M(() => () => {
-        o.dispose();
-    }), o;
+        })), n;
+    }), [ e, o?.inject ]);
+    return M((() => () => {
+        r.dispose();
+    })), r;
 }
 
-r(M, "useEffectOnce"), r(y, "useMakeOrGetComponentModule");
-
-import { isFunction as P } from "@adimm/x-injection";
+function P(e) {
+    return "function" == typeof e && !Function.prototype.toString.call(e).startsWith("class ");
+}
 
-!function(e) {
-    function o(e, r, o) {
+o(M, "useEffectOnce"), o(j, "useMakeOrGetComponentModule"), o(P, "isFunction"), 
+function(e) {
+    function r(e, o, r) {
         const t = {
-            ...r
+            ...o
         };
-        return ("object" == typeof e && "type" in e && P(e.type) || P(e)) && (t.module = o), 
+        return ("object" == typeof e && "type" in e && P(e.type) || P(e)) && (t.module = r), 
         t;
     }
-    r(o, "forwardPropsWithModule"), e.forwardPropsWithModule = o;
+    o(r, "forwardPropsWithModule"), e.forwardPropsWithModule = r;
 }(n || (n = {}));
 
 var g = p.memo(b);
 
-function w(e, r) {
-    return o => {
-        const t = y(e, o);
+function w(e, o) {
+    return r => {
+        const t = j(e, r);
         return p.createElement(i.Provider, {
             value: t
         }, p.createElement(g, {
             module: t,
-            componentProps: o,
-            component: r
+            componentProps: r,
+            component: o
         }));
     };
 }
 
-function b({module: e, component: r, componentProps: o}) {
-    return p.createElement(p.Fragment, null, r(n.forwardPropsWithModule(r, o, e)));
+function b({module: e, component: o, componentProps: r}) {
+    return p.createElement(p.Fragment, null, o(n.forwardPropsWithModule(o, r, e)));
 }
 
-r(w, "provideModuleToComponent"), r(b, "_ComponentRenderer");
+o(w, "provideModuleToComponent"), o(b, "_ComponentRenderer");
 
 import { useMemo as E } from "react";
 
-import { InjectionProviderModuleError as x } from "@adimm/x-injection";
+import { InjectionProviderModuleError as T } from "@adimm/x-injection";
 
-var T = class e extends x {
+var x = class e extends T {
     static {
-        r(this, "InjectionHookFactoryError");
+        o(this, "InjectionHookFactoryError");
     }
     name=e.name;
 };
 
-function I({use: e, inject: r}) {
-    return o => {
-        const t = u(), n = E(() => {
-            if (0 === r.length) throw new T(t, "The 'deps' property array is missing!");
-            return t.getMany(...r);
-        }, [ r ]);
+function F({use: e, inject: o}) {
+    return r => {
+        const t = u(), n = E((() => {
+            if (0 === o.length) throw new x(t, "The 'deps' property array is missing!");
+            return t.getMany(...o);
+        }), [ o ]);
         return e({
-            ...o,
+            ...r,
             deps: [ ...n ]
         });
     };
 }
 
-r(I, "hookFactory");
+o(F, "hookFactory");
 
-export { i as REACT_X_INJECTION_PROVIDER_MODULE_CONTEXT, I as hookFactory, w as provideModuleToComponent, u as useComponentModule, m as useInject, a as useInjectMany };
+export { i as REACT_X_INJECTION_PROVIDER_MODULE_CONTEXT, F as hookFactory, w as provideModuleToComponent, u as useComponentModule, a as useInject, m as useInjectMany };

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@adimm/x-injection-reactjs",
+  "private": false,
+  "repository": {
+    "url": "https://github.com/AdiMarianMutu/x-injection-reactjs"
+  },
   "description": "ReactJS integration of the `xInjection` library.",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Adi-Marian Mutu",
   "homepage": "https://github.com/AdiMarianMutu/x-injection-reactjs#readme",
   "bugs": "https://github.com/AdiMarianMutu/x-injection-reactjs/issues",
@@ -38,7 +42,7 @@
     "v:bump-major": "npm version major -m \"chore: update lib major version %s\""
   },
   "dependencies": {
-    "@adimm/x-injection": "^2.1.0",
+    "@adimm/x-injection": "^3.0.0",
     "react": ">=18.0.0"
   },
   "devDependencies": {