refactor: final improvements

Author: rainerhahnekamp

modules/signals/spec/with-feature.spec.ts

@@ -1,14 +1,27 @@
-import { lastValueFrom, of } from 'rxjs';
+import {
+  computed,
+  inject,
+  Injectable,
+  ResourceStatus,
+  Signal,
+} from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { computed, Signal } from '@angular/core';
+import { tapResponse } from '@ngrx/operators';
+import { lastValueFrom, Observable, of, pipe, switchMap, tap } from 'rxjs';
+import { describe, expect, it } from 'vitest';
+import { EntityState, setAllEntities, withEntities } from '../entities';
+import { rxMethod } from '../rxjs-interop';
 import {
   getState,
   patchState,
   signalStore,
   signalStoreFeature,
+  type,
   withComputed,
   withFeature,
+  withHooks,
   withMethods,
+  withProps,
   withState,
 } from '../src';
 
@@ -17,35 +30,23 @@ type User = {
   name: string;
 };
 
-function withMyEntity<Entity>(loadMethod: (id: number) => Promise<Entity>) {
-  return signalStoreFeature(
-    withState({
-      currentId: 1 as number | undefined,
-      entity: undefined as undefined | Entity,
-    }),
-    withMethods((store) => ({
-      async load(id: number) {
-        const entity = await loadMethod(1);
-        patchState(store, { entity, currentId: id });
-      },
-    }))
-  );
-}
-
-describe('withFeatureFactory', () => {
-  it('should allow a sum feature', () => {
-    function withSum(a: Signal<number>, b: Signal<number>) {
+describe('withFeature', () => {
+  it('provides methods', async () => {
+    function withMyEntity<Entity>(loadMethod: (id: number) => Promise<Entity>) {
       return signalStoreFeature(
-        withComputed(() => ({ sum: computed(() => a() + b()) }))
+        withState({
+          currentId: 1 as number | undefined,
+          entity: undefined as undefined | Entity,
+        }),
+        withMethods((store) => ({
+          async load(id: number) {
+            const entity = await loadMethod(1);
+            patchState(store, { entity, currentId: id });
+          },
+        }))
       );
     }
-    signalStore(
-      withState({ a: 1, b: 2 }),
-      withFeature((store) => withSum(store.a, store.b))
-    );
-  });
 
-  it('should allow to pass elements from a SignalStore to a feature', async () => {
     const UserStore = signalStore(
       { providedIn: 'root' },
       withMethods(() => ({
@@ -66,4 +67,119 @@ describe('withFeatureFactory', () => {
       entity: { id: 1, name: 'Konrad' },
     });
   });
+
+  it('provides state signals', async () => {
+    const withDouble = (n: Signal<number>) =>
+      signalStoreFeature(
+        withComputed((state) => ({ double: computed(() => n() * 2) }))
+      );
+
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withState({ counter: 1 }),
+      withMethods((store) => ({
+        increaseCounter() {
+          patchState(store, ({ counter }) => ({ counter: counter + 1 }));
+        },
+      })),
+      withFeature(({ counter }) => withDouble(counter))
+    );
+
+    const store = TestBed.inject(Store);
+
+    expect(store.double()).toBe(2);
+    store.increaseCounter();
+    expect(store.double()).toBe(4);
+  });
+
+  it('provides properties', () => {
+    @Injectable({ providedIn: 'root' })
+    class Config {
+      baseUrl = 'https://www.ngrx.io';
+    }
+    const withUrlizer = (baseUrl: string) =>
+      signalStoreFeature(
+        withMethods(() => ({
+          createUrl: (path: string) =>
+            `${baseUrl}${path.startsWith('/') ? '' : '/'}${path}`,
+        }))
+      );
+
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withProps(() => ({
+        _config: inject(Config),
+      })),
+      withFeature((store) => withUrlizer(store._config.baseUrl))
+    );
+
+    const store = TestBed.inject(Store);
+    expect(store.createUrl('docs')).toBe('https://www.ngrx.io/docs');
+  });
+
+  it('can be cominbed with inputs', () => {
+    function withLoadEntities<Entity extends { id: number }, Filter>(config: {
+      filter: Signal<Filter>;
+      loader: (filter: Filter) => Observable<Entity[]>;
+    }) {
+      return signalStoreFeature(
+        type<{ state: EntityState<Entity> & { status: ResourceStatus } }>(),
+        withMethods((store) => ({
+          _loadEntities: rxMethod<Filter>(
+            pipe(
+              tap(() => patchState(store, { status: ResourceStatus.Loading })),
+              switchMap((filter) =>
+                config.loader(filter).pipe(
+                  tapResponse({
+                    next: (entities) =>
+                      patchState(
+                        store,
+                        { status: ResourceStatus.Resolved },
+                        setAllEntities(entities)
+                      ),
+                    error: () =>
+                      patchState(store, { status: ResourceStatus.Error }),
+                  })
+                )
+              )
+            )
+          ),
+        })),
+        withHooks({
+          onInit: ({ _loadEntities }) => _loadEntities(config.filter),
+        })
+      );
+    }
+
+    const Store = signalStore(
+      { providedIn: 'root' },
+      withEntities<User>(),
+      withState({ filter: { name: '' }, status: ResourceStatus.Idle }),
+      withMethods((store) => ({
+        setFilter(name: string) {
+          patchState(store, { filter: { name } });
+        },
+        _load(filters: { name: string }) {
+          return of(
+            [{ id: 1, name: 'Konrad' }].filter((person) =>
+              person.name.startsWith(filters.name)
+            )
+          );
+        },
+      })),
+      withFeature((store) =>
+        withLoadEntities({ filter: store.filter, loader: store._load })
+      )
+    );
+
+    const store = TestBed.inject(Store);
+
+    expect(store.entities()).toEqual([]);
+    store.setFilter('K');
+    TestBed.flushEffects();
+    expect(store.entities()).toEqual([{ id: 1, name: 'Konrad' }]);
+    store.setFilter('Sabine');
+    TestBed.flushEffects();
+    expect(store.entities()).toEqual([]);
+  });
 });

modules/signals/src/with-feature.ts

@@ -4,12 +4,6 @@ import {
   StateSignals,
 } from './signal-store-models';
 
-type StoreForFactory<Input extends SignalStoreFeatureResult> = StateSignals<
-  Input['state']
-> &
-  Input['props'] &
-  Input['methods'];
-
 /**
  * Allows passing properties, methods, or signals from a SignalStore
  * to a feature.
@@ -30,68 +24,22 @@ type StoreForFactory<Input extends SignalStoreFeatureResult> = StateSignals<
  * );
  * ```
  *
- * **Explanation:**
- *
- * Typically, a `signalStoreFeature` can have input constraints like:
- *
- * ```typescript
- * function withLoader() {
- *   return signalStoreFeature(
- *     type<{
- *       methods: { load: (id: number) => Promise<Entity> };
- *     }>()
- *     // ...
- *   );
- * }
- * ```
- *
- * It is not possible for every store to fulfill these constraints.
- * For example, a required method already might already with a different
- * signature and can't be replaced.
- *
- * `withFeature` allows replacing the hard input constraint with
- * a parameter that can be provided at the call site.
- *
- *
- * ```typescript
- * function withLoader(load: (id: number) => Promise<Entity>) {
- *   return signalStoreFeature(
- *     // ...
- *   );
- * }
- *
- * signalStore(
- *   withMethods((store) => ({
- *     // returns Observable instead Promise,
- *     // can't be changed.  👇
- *     load(id: number): Obsevable<Entity> {
- *       // some dummy implementation
- *     },
- *   })),
- *   withFeature((store) =>
- *     // provides the Promise-version without exposing
- *     // it to the Store 👇
- *     withEntityLoader((id) => firstValueFrom(store.load(id)))
- *   )
- * );
- * ```
- *
  * @param featureFactory function returning the actual feature
  */
 export function withFeature<
   Input extends SignalStoreFeatureResult,
   Output extends SignalStoreFeatureResult
 >(
   featureFactory: (
-    store: StoreForFactory<Input>
+    store: StateSignals<Input['state']> & Input['props'] & Input['methods']
   ) => SignalStoreFeature<Input, Output>
 ): SignalStoreFeature<Input, Output> {
   return (store) => {
     const storeForFactory = {
       ...store['stateSignals'],
       ...store['props'],
       ...store['methods'],
-    } as StoreForFactory<Input>;
+    };
 
     return featureFactory(storeForFactory)(store);
   };

projects/ngrx.io/content/guide/signals/signal-store/custom-store-features.md

@@ -319,35 +319,40 @@ const Store = signalStore(
 ); // ✅ works as expected
 ```
 
-As an alternative, you can also consider using `withFeature`.
+For more complicated use cases, `withFeature` offers an alternative approach. 
 
 ## Connecting a Custom Feature with the Store
 
-The `withFeature` function allows you to pass properties, methods, or signals from a SignalStore to a custom feature.
+The `withFeature` function allows passing properties, methods, or signals from a SignalStore to a custom feature.
 
 This is an alternative to the input approach above and allows more flexibility:
 
 <code-example header="loader.store.ts">
 
-import { Signal } from '@angular/core';
-import { signalStore, signalStoreFeature, withFeature, withMethods } from '@ngrx/signals';
-import { firstValueFrom, Observable } from 'rxjs';
-
-type Entity = { id: number };
+import { computed, Signal } from '@angular/core';
+import { patchState, signalStore, signalStoreFeature, withComputed, withFeature, withMethods, withState } from '@ngrx/signals';
+import { withEntities } from '@ngrx/signals/entities';
 
-function withLoader(load: (id: number) => Promise<Entity>) {
+export function withBooksFilter(books: Signal<Book[]>) {
   return signalStoreFeature(
-    // some code...
-  );
-}
+    withState({ query: '' }),
+    withComputed(({ query }) => ({
+      filteredBooks: computed(() =>
+        books().filter((b) => b.name.includes(query()))
+      ),
+    })),
+    withMethods((store) => ({
+      setQuery(query: string): void {
+        patchState(store, { query });
+      },
+    })),
+)};
 
-const LoaderStore = signalStore(
-  withMethods((store) => ({
-    load(id: number): Observable<Entity> {
-      // some code...
-    },
-  })),
-  withFeature((store) => withLoader((id) => firstValueFrom(store.load(id))))
+export const BooksStore = signalStore(
+  withEntities<Book>(),
+  withFeature(({ entities }) =>
+    withBooksFilter(entities)
+  ),
 );
 
 </code-example>