fix: changed name of withLogger to withStateLogger, fixed docs

apps/example-app/src/app/examples/signals/product-shop-page/products-shop.store.ts

@@ -11,7 +11,7 @@ import {
   withEntitiesRemotePagination,
   withEntitiesRemoteSort,
   withEntitiesSingleSelection,
-  withLogger,
+  withStateLogger,
 } from '@ngrx-traits/signals';
 import {
   patchState,
@@ -94,7 +94,7 @@ const orderItemsStoreFeature = signalStoreFeature(
     entity: orderEntity,
     collection: orderItemsCollection,
   }),
-  withLogger({
+  withStateLogger({
     name: 'orderItemsStore',
     filterState: ({ orderItemsEntityMap }) => ({ orderItemsEntityMap }),
   }),

libs/ngrx-traits/signals/README.md

@@ -13,10 +13,9 @@ Set of prebuilt Custom Store Features that solve common problems that normally n
 - ✅ Store Feature to add single or multi selection entities list
 - ✅ Store Feature to reduce boilerplate needed when calling backend apis
 - ✅ Store Feature to sync the state to local or session storage
-- ✅ Caching
 
 # Installation and Usage
 
 `npm i @ngrx-traits/signals --save`
 
-For more documentation go to our [github page](https://github.com/gabrielguerrero/docs/signals.md)
+For more documentation go to our [github page](https://github.com/gabrielguerrero/ngrx-traits/blob/main/docs/signals.md)

libs/ngrx-traits/signals/api-docs.md

@@ -45,12 +45,15 @@ and call the api with the [collection]PagedRequest params and use set[Collection
 and changing the status errors manually
 or use withEntitiesLoadingCall to call the api with the [collection]PagedRequest params which handles setting
 the result and errors automatically. Requires withEntities and withCallStatus to be used.
-Requires withEntities and withCallStatus to be present in the store.</p></dd>
+This will only keeps pagesToCache pages in memory, so previous pages will be removed from the cache.
+If you need to keep all previous pages in memory, use withEntitiesRemoteScrollPagination instead.</p>
+<p>Requires withEntities and withCallStatus to be present in the store.</p></dd>
 <dt><a href="#withEntitiesRemoteScrollPagination">withEntitiesRemoteScrollPagination(config)</a></dt>
-<dd><p>Generates necessary state, computed and methods for remote infinite scroll pagination of entities in the store. The
-different between this and withEntitiesRemotePagination this will can only got to next and previous page, and the cache
-of entities keeps growing, ideally for implementing infinite scroll style ui.
-When the page changes, it will try to load the current page from cache if it's not present,
+<dd><p>Generates necessary state, computed and methods for remote infinite scroll pagination of entities in the store.
+This is ideal for implementing infinite scroll where the entities cache keeps growing, or for a paginated list that only
+allows going to the next and previous page because you dont know the total number of entities
+probably because the data is top big and partitioned in multiple nodes.</p>
+<p>When the page changes, it will try to load the current page from cache if it's not present,
 it will call set[collection]Loading(), and you should either create an effect that listens to is[Collection]Loading
 and call the api with the [collection]PagedRequest params and use set[Collection]Result to set the result
 and changing the status errors manually
@@ -81,19 +84,13 @@ or use withEntitiesLoadingCall to call the api with the [collection]Sort params
 the result and errors automatically.</p>
 <p>Requires withEntities and withCallStatus to be present before this function.</p></dd>
 <dt><a href="#withEventHandler">withEventHandler(eventHandlerFactory)</a></dt>
-<dd><p>Adds an event handler to the store, allowing the store to listen to events and react to them.
-This helps with the communications between different store feature functions, normally a store feature can only
-call methods generated by other store featured if it is declared before. With event handlers, you can send events
-to other store features, and they can react to them regardless of the order of declaration. This is useful for example between
-the filter and pagination store features, filter fires an event when the filter is changed and the pagination store
-feature can listen to it and reset the current page back to 0, by using  withEventHandler pagination avoids creating a dependency
-on the filter store feature, and the order in which they get declared won't affect the communication .</p></dd>
+<dd></dd>
 <dt><a href="#createEvent">createEvent(type, config)</a></dt>
 <dd><p>Creates a configured <code>Creator</code> function that, when called, returns an object in the shape of the <code>Event</code> interface.</p>
 <p>Event creators reduce the explicitness of class-based event creators.</p></dd>
-<dt><a href="#withLogger">withLogger(name)</a></dt>
+<dt><a href="#withStateLogger">withStateLogger(name, filterState)</a></dt>
 <dd><p>Log the state of the store on every change</p></dd>
-<dt><a href="#withSyncToWebStorage">withSyncToWebStorage(key, type, saveStateChangesAfterMs, restoreOnInit)</a></dt>
+<dt><a href="#withSyncToWebStorage">withSyncToWebStorage(key, type, saveStateChangesAfterMs, restoreOnInit, filterState, onRestore)</a></dt>
 <dd><p>Sync the state of the store to the web storage</p></dd>
 </dl>
 
@@ -157,6 +154,13 @@ withCalls(({ productsSelectedEntity }) => ({
       call: ({ id }: { id: string }) =>
         inject(ProductService).getProductDetail(id),
       resultProp: 'productDetail',
+      mapPipe: 'switchMap', // default is 'exhaustMap'
+      onSuccess: (result) => {
+      // do something with the result
+      },
+      onError: (error) => {
+      // do something with the error
+      },
     },
     checkout: () =>
       inject(OrderService).checkout({
@@ -324,7 +328,9 @@ if an error occurs it will set the error to the store using set[Collection]Error
 | --- | --- |
 | config | <p>Configuration object</p> |
 | config.fetchEntities | <p>A function that fetches the entities from a remote source the return type</p> |
-| config.collection | <p>The collection name can be an array of entities or an object with entities and total</p> |
+| config.collection | <p>The collection name</p> |
+| config.onSuccess | <p>A function that is called when the fetchEntities is successful</p> |
+| config.onError | <p>A function that is called when the fetchEntities fails can be an array of entities or an object with entities and total</p> |
 
 **Example**  
 ```js
@@ -421,7 +427,9 @@ and call the api with the [collection]PagedRequest params and use set[Collection
 and changing the status errors manually
 or use withEntitiesLoadingCall to call the api with the [collection]PagedRequest params which handles setting
 the result and errors automatically. Requires withEntities and withCallStatus to be used.
-Requires withEntities and withCallStatus to be present in the store.</p>
+This will only keeps pagesToCache pages in memory, so previous pages will be removed from the cache.
+If you need to keep all previous pages in memory, use withEntitiesRemoteScrollPagination instead.</p>
+<p>Requires withEntities and withCallStatus to be present in the store.</p>
 
 **Kind**: global function  
 
@@ -507,10 +515,11 @@ export const store = signalStore(
 <a name="withEntitiesRemoteScrollPagination"></a>
 
 ## withEntitiesRemoteScrollPagination(config)
-<p>Generates necessary state, computed and methods for remote infinite scroll pagination of entities in the store. The
-different between this and withEntitiesRemotePagination this will can only got to next and previous page, and the cache
-of entities keeps growing, ideally for implementing infinite scroll style ui.
-When the page changes, it will try to load the current page from cache if it's not present,
+<p>Generates necessary state, computed and methods for remote infinite scroll pagination of entities in the store.
+This is ideal for implementing infinite scroll where the entities cache keeps growing, or for a paginated list that only
+allows going to the next and previous page because you dont know the total number of entities
+probably because the data is top big and partitioned in multiple nodes.</p>
+<p>When the page changes, it will try to load the current page from cache if it's not present,
 it will call set[collection]Loading(), and you should either create an effect that listens to is[Collection]Loading
 and call the api with the [collection]PagedRequest params and use set[Collection]Result to set the result
 and changing the status errors manually
@@ -528,6 +537,7 @@ or a hasMore param set[Collection]Result({entities, hasMore}) that you can set t
 | --- | --- |
 | config |  |
 | config.pageSize | <p>The number of entities to show per page</p> |
+| config.pagesToCache | <p>The number of pages to cache</p> |
 | config.entity | <p>The entity type</p> |
 | config.collection | <p>The name of the collection</p> |
 
@@ -577,11 +587,8 @@ export const store = signalStore(
 //           .pipe(
 //             takeUntilDestroyed(),
 //             tap((res) =>
-//               patchState(
-//                 state,
 //                 // total is not required, you can use hasMore or none see docs
-//                 setProductsPagedResult({ entities: res.resultList, total: res.total } ),
-//               ),
+//                 setProductsPagedResult({ entities: res.resultList, total: res.total } )
 //             ),
 //             catchError((error) => {
 //               setProductsError(error);
@@ -598,14 +605,15 @@ export const store = signalStore(
  store = inject(ProductsRemoteStore);
  dataSource = getInfiniteScrollDataSource(store, { collection: 'products' }) // pass this to your cdkVirtualFor see examples section
   // generates the following signals
-  store.productsPagination // { currentPage: number, requestPage: number, pageSize: 5, total: number, pagesToCache: number, cache: { start: number, end: number } } used internally
+  store.productsPagination // { currentPage: number,  pageSize: number,  pagesToCache: number, hasMore: boolean } used internally
  // generates the following computed signals
- store.productsPageInfo // {  pageIndex: number, total: number, pageSize: 5, pagesCount: number, hasPrevious: boolean, hasNext: boolean, isLoading: boolean }
- store.productsPagedRequest // { startIndex: number, size: number, page: number }
+ store.productsCurrentPage // {  entities: Entity[], pageIndex: number, total: number, pageSize: number,  hasPrevious: boolean, hasNext: boolean, isLoading: boolean }
+ store.productsPagedRequest // { startIndex: number, size: number }
  // generates the following methods
  store.loadProductsNextPage() // loads next page
  store.loadProductsPreviousPage() // loads previous page
  store.loadProductsFirstPage() // loads first page
+ store.loadMoreProducts() // loads more entities (used for infinite scroll datasource)
  store.setProductsPagedResult(entities: Product[], total: number) // appends the entities to the cache of entities and total
 ```
 <a name="withEntitiesMultiSelection"></a>
@@ -801,15 +809,14 @@ store.sortProductsEntities // (options: { sort: Sort<Entity>; }) => void;
 <a name="withEventHandler"></a>
 
 ## withEventHandler(eventHandlerFactory)
-<p>Adds an event handler to the store, allowing the store to listen to events and react to them.
+**Kind**: global function  
+**Experimental**: Adds an event handler to the store, allowing the store to listen to events and react to them.
 This helps with the communications between different store feature functions, normally a store feature can only
 call methods generated by other store featured if it is declared before. With event handlers, you can send events
 to other store features, and they can react to them regardless of the order of declaration. This is useful for example between
 the filter and pagination store features, filter fires an event when the filter is changed and the pagination store
 feature can listen to it and reset the current page back to 0, by using  withEventHandler pagination avoids creating a dependency
-on the filter store feature, and the order in which they get declared won't affect the communication .</p>
-
-**Kind**: global function  
+on the filter store feature, and the order in which they get declared won't affect the communication .  
 
 | Param |
 | --- |
@@ -922,20 +929,21 @@ effectName$ = createEffect(
 | type | <p>Describes the event that will be dispatched</p> |
 | config | <p>Additional metadata needed for the handling of the event.  See [Usage Notes](createEvent#usage-notes).</p> |
 
-<a name="withLogger"></a>
+<a name="withStateLogger"></a>
 
-## withLogger(name)
+## withStateLogger(name, filterState)
 <p>Log the state of the store on every change</p>
 
 **Kind**: global function  
 
 | Param | Description |
 | --- | --- |
 | name | <p>The name of the store to log</p> |
+| filterState | <p>optional filter the state before logging</p> |
 
 <a name="withSyncToWebStorage"></a>
 
-## withSyncToWebStorage(key, type, saveStateChangesAfterMs, restoreOnInit)
+## withSyncToWebStorage(key, type, saveStateChangesAfterMs, restoreOnInit, filterState, onRestore)
 <p>Sync the state of the store to the web storage</p>
 
 **Kind**: global function  
@@ -946,6 +954,8 @@ effectName$ = createEffect(
 | type | <p>'session' or 'local' storage</p> |
 | saveStateChangesAfterMs | <p>save the state to the storage after this many milliseconds, 0 to disable</p> |
 | restoreOnInit | <p>restore the state from the storage on init</p> |
+| filterState | <p>filter the state before saving to the storage</p> |
+| onRestore | <p>callback after the state is restored from the storage</p> |
 
 **Example**  
 ```js
@@ -964,4 +974,5 @@ const store = signalStore(
  // generates the following methods
  store.saveToStorage();
  store.loadFromStorage();
+ store.clearFromStore();
 ```

libs/ngrx-traits/signals/src/lib/index.ts

@@ -18,7 +18,7 @@ export * from './with-entities-selection/with-entities-single-selection.model';
 export * from './with-entities-selection/with-entities-multi-selection';
 export * from './with-entities-selection/with-entities-multi-selection.model';
 export * from './with-entities-loading-call/with-entities-loading-call';
-export * from './with-logger/with-logger';
+export * from './with-logger/with-state-logger';
 export * from './with-calls/with-calls';
 export * from './with-calls/with-calls.model';
 export * from './with-sync-to-web-storage/with-sync-to-web-storage';

libs/ngrx-traits/signals/src/lib/with-logger/with-logger.ts → libs/ngrx-traits/signals/src/lib/with-logger/with-state-logger.ts

@@ -13,9 +13,9 @@ import type {
 /**
  * Log the state of the store on every change
  * @param name - The name of the store to log
- * @param filterState - filter the state before logging
+ * @param filterState - optional filter the state before logging
  */
-export function withLogger<Input extends SignalStoreFeatureResult>({
+export function withStateLogger<Input extends SignalStoreFeatureResult>({
   name,
   filterState,
 }: {