ng-simple-state 18.0.2 → 19.0.1

package/README.md

@@ -19,9 +19,9 @@ See the demos:
 npm i ng-simple-state
 ```
 
-### Step 2: Import `NgSimpleStateModule` into your `AppModule`
+### Step 2: Import `provideNgSimpleState` into your providers
 
-`NgSimpleStateModule` has some global optional config defined by `NgSimpleStateConfig` interface:
+`provideNgSimpleState` has some global optional config defined by `NgSimpleStateConfig` interface:
 
 | Option               | Description                                                                                     | Default    |
 | -------------------- | ----------------------------------------------------------------------------------------------- | ---------- |
@@ -33,26 +33,21 @@ npm i ng-simple-state
 _Side note: each store can be override the global configuration implementing `storeConfig()` method (see "Override global config")._
 
 ```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { isDevMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
 import { AppComponent } from './app.component';
-import { CommonModule } from '@angular/common';
-import { NgSimpleStateModule } from 'ng-simple-state';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    CommonModule,
-    NgSimpleStateModule.forRoot({
-      enableDevTool: !environment.production, // Enable Redux DevTools only in development mode
-      enableLocalStorage: false // Local storage state persistence is globally disabled
-    }) 
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+import { provideNgSimpleState } from 'ng-simple-state';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideNgSimpleState({
+      enableDevTool: isDevMode(),
+      enableLocalStorage: true,
+      persistentStorage: 'local'
+    })
+  ]
+});
 ```
 
 ### Step 3: Chose your store
@@ -191,31 +186,19 @@ export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {
 }
 ```
 
-#### Step 3: Inject your store into the providers of the module you want (or the providers of component), eg.:
+#### Step 3: Inject your store into the providers, eg.:
 
 ```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { CommonModule } from '@angular/common';
-import { NgSimpleStateModule } from 'ng-simple-state';
-import { environment } from '../environments/environment';
+import { Component } from '@angular/core';
 import { CounterStore } from './counter-store';
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    CommonModule,
-    NgSimpleStateModule.forRoot({
-      enableDevTool: !environment.production, // Enable Redux DevTools only in developing
-      enableLocalStorage: false // Local storage state persistence is globally disabled
-    })
-  ],
-  bootstrap: [AppComponent],
-  providers: [CounterStore]  // The CounterStore state is shared at AppModule level
+@Component({
+  selector: 'app-root',
+  imports: [CounterStore]
 })
-export class AppModule {}
+export class AppComponent {
+
+}
 ```
 
 #### Step 4: Use your store into the components, eg.:
@@ -227,6 +210,7 @@ import { CounterStore } from './counter-store';
 
 @Component({
   selector: 'app-root',
+  imports: [CounterStore],
   template: `
   <h1>Counter: {{ counter$ | async }}</h1>
   <button (click)="counterStore.decrement()">Decrement</button>
@@ -252,8 +236,7 @@ export class AppComponent {
 If you want manage just a component state without make a new service, your component can extend directly `NgSimpleStateBaseRxjsStore`:
 
 ```ts
-import { Component, Injector } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';
 import { Observable } from 'rxjs';
 
@@ -273,10 +256,6 @@ export class CounterComponent extends NgSimpleStateBaseRxjsStore<CounterState> {
 
     public counter$: Observable<number> = this.selectState(state => state.count);
 
-    constructor(injector: Injector) {
-      super(injector);
-    }
-
     storeConfig(): NgSimpleStateStoreConfig {
       return {
         storeName: 'CounterComponent'
@@ -299,36 +278,9 @@ export class CounterComponent extends NgSimpleStateBaseRxjsStore<CounterState> {
 }
 ```
 
-### Store's dependency injection
-
-If you need to inject something into your store (eg. `HttpClient`), you need to also inject the Angular `Injector` service to the super, eg.:
-
-```ts
-import { Injectable, Injector } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { NgSimpleStateBaseRxjsStore } from 'ng-simple-state';
-
-@Injectable()
-export class CounterStore extends NgSimpleStateBaseRxjsStore<CounterState> {
-
-  constructor(injector: Injector, private http: HttpClient) {
-    super(injector);
-  }
-
-  increment(increment: number = 1): void {
-    this.http.post<CounterState>('https://localhost:300/api/increment', { increment }).subscribe(response => {
-      // setState() from default use parent function name as action name for Redux DevTools.
-      // In this case we provide a second parameter `actionName` because the parent function is anonymous function
-      this.setState(() => ({ count: response.count }), 'increment');
-    });
-  }
-
-}
-```
-
 ### Override global config
 
-If you need to override the global module configuration provided by `NgSimpleStateModule.forRoot()` you can implement `storeConfig()` and return a specific configuration for the single store, eg.:
+If you need to override the global configuration provided by `provideNgSimpleState()` you can implement `storeConfig()` and return a specific configuration for the single store, eg.:
 
 ```ts
 import { Injectable } from '@angular/core';
@@ -365,7 +317,7 @@ The options are defined by `NgSimpleStateStoreConfig` interface:
 
 ```ts
 import { TestBed } from '@angular/core/testing';
-import { NgSimpleStateModule } from 'ng-simple-state';
+import { provideNgSimpleState } from 'ng-simple-state';
 import { CounterStore } from './counter-store';
 
 describe('CounterStore', () => {
@@ -374,15 +326,16 @@ describe('CounterStore', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        NgSimpleStateModule.forRoot({
+      providers: [
+        provideNgSimpleState({
           enableDevTool: false,
           enableLocalStorage: false
-        })
+        }),
+        CounterStore
       ]
     });
 
-    counterStore = new CounterStore(TestBed);
+    counterStore = TestBed.inject(CounterStore);
   });
 
   it('initialState', () => {
@@ -498,8 +451,6 @@ export abstract class NgSimpleStateBaseRxjsStore<S extends object | Array<any>>
      */
     public get state(): BehaviorSubject<S>;
 
-    constructor(@Inject(Injector) injector: Injector);
-
     /**
      * When you override this method, you have to call the `super.ngOnDestroy()` method in your `ngOnDestroy()` method.
      */
@@ -525,10 +476,9 @@ export abstract class NgSimpleStateBaseRxjsStore<S extends object | Array<any>>
 
     /**
      * Set into the store the initial state
-     * @param injector current Injector
      * @returns The state object
      */
-    initialState(injector?: Injector): S;
+    initialState(): S;
 
     /**
      * Select a store state
@@ -688,31 +638,19 @@ export class CounterStore extends NgSimpleStateBaseSignalStore<CounterState> {
 }
 ```
 
-#### Step 3: Inject your store into the providers of the module you want (or the providers of component), eg.:
+#### Step 3: Inject your store into the providers, eg.:
 
 ```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { CommonModule } from '@angular/common';
-import { NgSimpleStateModule } from 'ng-simple-state';
-import { environment } from '../environments/environment';
+import { Component } from '@angular/core';
 import { CounterStore } from './counter-store';
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    CommonModule,
-    NgSimpleStateModule.forRoot({
-      enableDevTool: !environment.production, // Enable Redux DevTools only in developing
-      enableLocalStorage: false // Local storage state persistence is globally disabled
-    })
-  ],
-  bootstrap: [AppComponent],
-  providers: [CounterStore]  // The CounterStore state is shared at AppModule level
+@Component({
+  selector: 'app-root',
+  imports: [CounterStore]
 })
-export class AppModule {}
+export class AppComponent {
+
+}
 ```
 
 #### Step 4: Use your store into the components, eg.:
@@ -748,8 +686,7 @@ export class AppComponent {
 If you want manage just a component state without make a new service, your component can extend directly `NgSimpleStateBaseSignalStore`:
 
 ```ts
-import { Component, Injector, Signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Signal } from '@angular/core';
 import { NgSimpleStateBaseSignalStore } from 'ng-simple-state';
 
 export interface CounterState {
@@ -768,10 +705,6 @@ export class CounterComponent extends NgSimpleStateBaseSignalStore<CounterState>
 
     public counterSig: Signal<number> = this.selectState(state => state.count);
 
-    constructor(injector: Injector) {
-      super(injector);
-    }
-
     storeConfig(): NgSimpleStateStoreConfig {
       return {
         storeName: 'CounterComponent'
@@ -794,36 +727,9 @@ export class CounterComponent extends NgSimpleStateBaseSignalStore<CounterState>
 }
 ```
 
-### Store's dependency injection
-
-If you need to inject something into your store (eg. `HttpClient`), you need to also inject the Angular `Injector` service to the super, eg.:
-
-```ts
-import { Injectable, Injector } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { NgSimpleStateBaseSignalStore } from 'ng-simple-state';
-
-@Injectable()
-export class CounterStore extends NgSimpleStateBaseSignalStore<CounterState> {
-
-  constructor(injector: Injector, private http: HttpClient) {
-    super(injector);
-  }
-
-  increment(increment: number = 1): void {
-    this.http.post<CounterState>('https://localhost:300/api/increment', { increment }).subscribe(response => {
-      // setState() from default use parent function name as action name for Redux DevTools.
-      // In this case we provide a second parameter `actionName` because the parent function is anonymous function
-      this.setState(() => ({ count: response.count }), 'increment');
-    });
-  }
-
-}
-```
-
 ### Override global config
 
-If you need to override the global module configuration provided by `NgSimpleStateModule.forRoot()` you can implement `storeConfig()` and return a specific configuration for the single store, eg.:
+If you need to override the global configuration provided by `provideNgSimpleState()` you can implement `storeConfig()` and return a specific configuration for the single store, eg.:
 
 ```ts
 import { Injectable } from '@angular/core';
@@ -859,7 +765,7 @@ The options are defined by `NgSimpleStateStoreConfig` interface:
 
 ```ts
 import { TestBed } from '@angular/core/testing';
-import { NgSimpleStateModule } from 'ng-simple-state';
+import { provideNgSimpleState } from 'ng-simple-state';
 import { CounterStore } from './counter-store';
 
 describe('CounterStore', () => {
@@ -868,15 +774,16 @@ describe('CounterStore', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        NgSimpleStateModule.forRoot({
+      providers: [
+        provideNgSimpleState({
           enableDevTool: false,
           enableLocalStorage: false
-        })
+        }),
+        CounterStore
       ]
     });
 
-    counterStore = new CounterStore(TestBed);
+    counterStore = TestBed.inject(CounterStore);
   });
 
   it('initialState', () => {
@@ -988,8 +895,6 @@ export abstract class NgSimpleStateBaseSignalStore<S extends object | Array<any>
      */
     public get state(): Signal<S>;
 
-    constructor(@Inject(Injector) injector: Injector);
-
     /**
      * When you override this method, you have to call the `super.ngOnDestroy()` method in your `ngOnDestroy()` method.
      */
@@ -1015,10 +920,9 @@ export abstract class NgSimpleStateBaseSignalStore<S extends object | Array<any>
 
     /**
      * Set into the store the initial state
-     * @param injector current Injector
      * @returns The state object
      */
-    initialState(injector?: Injector): S;
+    initialState(): S;
 
     /**
      * Select a store state