refactor(signal): extract withParameterizedSelectors SignalStore feature

Author: LayZeeDK

packages/router-signal-store/src/lib/global-router-signal-store/global-router-signal-store.ts

@@ -1,31 +1,29 @@
-import { InjectionToken, Signal, Type, computed, inject } from '@angular/core';
+import { InjectionToken, Type, computed, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   NavigationCancel,
   NavigationEnd,
   NavigationError,
   NavigationStart,
   Router,
-  Event as RouterEvent,
-  RoutesRecognized,
+  RoutesRecognized
 } from '@angular/router';
 import {
   patchState,
   signalStore,
   withComputed,
   withHooks,
-  withMethods,
-  withState,
+  withState
 } from '@ngrx/signals';
-import { Observable, map } from 'rxjs';
+import { map } from 'rxjs';
 import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal-activated-route-state-snapshot';
 import { MinimalRouterStateSnapshot } from '../@ngrx/router-store/minimal-router-state-snapshot';
 import { MinimalRouterStateSerializer } from '../@ngrx/router-store/minimal_serializer';
-import { filterRouterEvents } from '../filter-router-event.operator';
 import { InternalStrictQueryParams } from '../internal-strict-query-params';
 import { InternalStrictRouteData } from '../internal-strict-route-data';
 import { InternalStrictRouteParams } from '../internal-strict-route-params';
 import { RouterSignalStore } from '../router-signal-store';
+import { withParameterizedSelectors } from '../with-parameterized-selectors';
 
 interface GlobalRouterSignalState {
   readonly _routerState: MinimalRouterStateSnapshot;
@@ -80,26 +78,7 @@ export const GlobalRouterSignalStore: Type<RouterSignalStore> = signalStore(
     title: computed((): string | undefined => currentRoute().title),
     url: computed((): string => _routerState().url),
   })),
-  withMethods((store, router = inject(Router)) => ({
-    selectQueryParam(
-      param: string
-    ): Signal<string | readonly string[] | undefined> {
-      return computed(() => store.queryParams()[param]);
-    },
-    selectRouteDataParam(key: string): Signal<unknown> {
-      return computed(() => store.routeData()[key]);
-    },
-    selectRouteParam(param: string): Signal<string | undefined> {
-      return computed(() => store.routeParams()[param]);
-    },
-    selectRouterEvents<TAcceptedRouterEvents extends Type<RouterEvent>[]>(
-      ...acceptedEventTypes: [...TAcceptedRouterEvents]
-    ): Observable<InstanceType<TAcceptedRouterEvents[number]>> {
-      return router.events.pipe(
-        filterRouterEvents(...acceptedEventTypes)
-      ) as Observable<InstanceType<TAcceptedRouterEvents[number]>>;
-    },
-  })),
+  withParameterizedSelectors(),
   withHooks({
     onInit(
       store,

packages/router-signal-store/src/lib/local-router-signal-store/local-router-signal-store.ts

@@ -7,11 +7,11 @@ import {
   NavigationError,
   NavigationStart,
   Router,
-  Event as RouterEvent,
   RouterStateSnapshot,
   RoutesRecognized,
   createUrlTreeFromSnapshot,
 } from '@angular/router';
+import { MinimalActivatedRouteSnapshot } from '@ngrx/router-store';
 import {
   patchState,
   signalStore,
@@ -20,15 +20,14 @@ import {
   withMethods,
   withState,
 } from '@ngrx/signals';
-import { Observable, map } from 'rxjs';
+import { map } from 'rxjs';
 import { MinimalRouterStateSnapshot } from '../@ngrx/router-store/minimal-router-state-snapshot';
 import { MinimalRouterStateSerializer } from '../@ngrx/router-store/minimal_serializer';
-import { filterRouterEvents } from '../filter-router-event.operator';
-import { RouterSignalStore } from '../router-signal-store';
-import { MinimalActivatedRouteSnapshot } from '@ngrx/router-store';
 import { InternalStrictQueryParams } from '../internal-strict-query-params';
 import { InternalStrictRouteData } from '../internal-strict-route-data';
 import { InternalStrictRouteParams } from '../internal-strict-route-params';
+import { RouterSignalStore } from '../router-signal-store';
+import { withParameterizedSelectors } from '../with-parameterized-selectors';
 
 interface LocalRouterSignalState {
   readonly _routerState: MinimalRouterStateSnapshot;
@@ -117,26 +116,7 @@ export const LocalRouterSignalStore: Type<RouterSignalStore> = signalStore(
       },
     })
   ),
-  withMethods((store, router = inject(Router)) => ({
-    selectQueryParam(
-      param: string
-    ): Signal<string | readonly string[] | undefined> {
-      return computed(() => store.queryParams()[param]);
-    },
-    selectRouteDataParam(key: string): Signal<unknown> {
-      return computed(() => store.routeData()[key]);
-    },
-    selectRouteParam(param: string): Signal<string | undefined> {
-      return computed(() => store.routeParams()[param]);
-    },
-    selectRouterEvents<TAcceptedRouterEvents extends Type<RouterEvent>[]>(
-      ...acceptedEventTypes: [...TAcceptedRouterEvents]
-    ): Observable<InstanceType<TAcceptedRouterEvents[number]>> {
-      return router.events.pipe(
-        filterRouterEvents(...acceptedEventTypes)
-      ) as Observable<InstanceType<TAcceptedRouterEvents[number]>>;
-    },
-  })),
+  withParameterizedSelectors(),
   withHooks({
     onInit(store, route = inject(ActivatedRoute)): void {
       store

packages/router-signal-store/src/lib/with-parameterized-selectors.ts

@@ -0,0 +1,42 @@
+import { Signal, computed, inject, Type } from '@angular/core';
+import { Event as RouterEvent, Router } from '@angular/router';
+import { signalStoreFeature, withMethods, type } from '@ngrx/signals';
+import { InternalStrictQueryParams } from './internal-strict-query-params';
+import { Observable } from 'rxjs';
+import { InternalStrictRouteData } from './internal-strict-route-data';
+import { InternalStrictRouteParams } from './internal-strict-route-params';
+import { filterRouterEvents } from './filter-router-event.operator';
+
+export function withParameterizedSelectors() {
+  return signalStoreFeature(
+    {
+      signals: type<{
+        queryParams: Signal<InternalStrictQueryParams>;
+        routeData: Signal<InternalStrictRouteData>;
+        routeParams: Signal<InternalStrictRouteParams>;
+      }>(),
+    },
+    withMethods(
+      ({ queryParams, routeData, routeParams }, router = inject(Router)) => ({
+        selectQueryParam(
+          param: string
+        ): Signal<string | readonly string[] | undefined> {
+          return computed(() => queryParams()[param]);
+        },
+        selectRouteDataParam(key: string): Signal<unknown> {
+          return computed(() => routeData()[key]);
+        },
+        selectRouteParam(param: string): Signal<string | undefined> {
+          return computed(() => routeParams()[param]);
+        },
+        selectRouterEvents<TAcceptedRouterEvents extends Type<RouterEvent>[]>(
+          ...acceptedEventTypes: [...TAcceptedRouterEvents]
+        ): Observable<InstanceType<TAcceptedRouterEvents[number]>> {
+          return router.events.pipe(
+            filterRouterEvents(...acceptedEventTypes)
+          ) as Observable<InstanceType<TAcceptedRouterEvents[number]>>;
+        },
+      })
+    )
+  );
+}