refactor: implement LocalRouterSignalState using best NgRx Signals practices

Author: LayZeeDK

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

@@ -49,7 +49,9 @@ const initialGlobalRouterSignalStateToken =
   );
 
 export const GlobalRouterSignalStore: Type<RouterSignalStore> = signalStore(
-  withState(() => inject(initialGlobalRouterSignalStateToken)),
+  withState<GlobalRouterSignalState>(() =>
+    inject(initialGlobalRouterSignalStateToken)
+  ),
   withComputed(({ _routerState }) => ({
     _rootRoute: computed(
       (): MinimalActivatedRouteSnapshot => _routerState().root

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

@@ -1,134 +1,160 @@
-import { computed, inject, Injectable, Signal, Type } from '@angular/core';
+import { InjectionToken, Signal, Type, computed, inject } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import {
   ActivatedRoute,
-  createUrlTreeFromSnapshot,
-  Event as RouterEvent,
   NavigationCancel,
   NavigationEnd,
   NavigationError,
   NavigationStart,
   Router,
+  Event as RouterEvent,
   RouterStateSnapshot,
   RoutesRecognized,
+  createUrlTreeFromSnapshot,
 } from '@angular/router';
-import { patchState, signalStore, withState } from '@ngrx/signals';
-import { map, Observable } from 'rxjs';
-import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal-activated-route-state-snapshot';
+import {
+  patchState,
+  signalStore,
+  withComputed,
+  withHooks,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
+import { Observable, 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';
 
-interface LocalRouterState {
-  readonly routerState: MinimalRouterStateSnapshot;
+interface LocalRouterSignalState {
+  readonly _routerState: MinimalRouterStateSnapshot;
 }
 
-const LocalRouterSignalStoreBase = signalStore(
-  withState<LocalRouterState>({
-    routerState: {} as MinimalRouterStateSnapshot,
-  })
-);
-
-@Injectable()
-export class LocalRouterSignalStore
-  extends LocalRouterSignalStoreBase
-  implements RouterSignalStore
-{
-  #route = inject(ActivatedRoute);
-  #router = inject(Router);
-  #serializer = inject(MinimalRouterStateSerializer);
-
-  #localRoute: Signal<MinimalActivatedRouteSnapshot> = computed(
-    () => this.routerState().root
-  );
-
-  currentRoute: Signal<MinimalActivatedRouteSnapshot> = this.#localRoute;
-
-  fragment: Signal<string | null> = toSignal(this.#route.fragment, {
-    initialValue: null,
-  });
-  queryParams: Signal<InternalStrictQueryParams> = toSignal(
-    this.#route.queryParams,
-    { initialValue: {} }
-  );
-  routeData: Signal<InternalStrictRouteData> = toSignal(this.#route.data, {
-    initialValue: {},
-  });
-  routeParams: Signal<InternalStrictRouteParams> = toSignal(
-    this.#route.params,
-    { initialValue: {} }
-  );
-  title: Signal<string | undefined> = computed(() => this.currentRoute().title);
-
-  url: Signal<string> = computed(() => this.routerState().url);
+function createInitialLocalRouterSignalState(): LocalRouterSignalState {
+  const route = inject(ActivatedRoute);
+  const router = inject(Router);
+  const serializer = inject(MinimalRouterStateSerializer);
 
-  constructor() {
-    super();
-
-    // Initialize state with current router snapshot
-    patchState(this, {
-      routerState: this.#serializeRouterState(this.#route),
-    });
+  return {
+    _routerState: serializeRouterState(route, router, serializer),
+  };
+}
 
-    // Subscribe to router events and update state
-    this.selectRouterEvents(
-      NavigationStart,
-      RoutesRecognized,
-      NavigationEnd,
-      NavigationCancel,
-      NavigationError
-    )
-      .pipe(
-        map(() => this.#route),
-        map((route) => this.#serializeRouterState(route)),
-        takeUntilDestroyed()
+function createRouterStateSnapshot(
+  route: ActivatedRoute,
+  router: Router
+): RouterStateSnapshot {
+  return {
+    root: route.snapshot,
+    url: router.serializeUrl(
+      createUrlTreeFromSnapshot(
+        route.snapshot,
+        [],
+        route.snapshot.queryParams,
+        route.snapshot.fragment
       )
-      .subscribe((routerState) => {
-        patchState(this, { routerState });
-      });
-  }
-
-  selectQueryParam(
-    param: string
-  ): Signal<string | readonly string[] | undefined> {
-    return computed(() => this.queryParams()[param]);
-  }
+    ),
+  };
+}
 
-  selectRouteDataParam(key: string): Signal<unknown> {
-    return computed(() => this.routeData()[key]);
-  }
+function serializeRouterState(
+  route: ActivatedRoute,
+  router: Router,
+  serializer: MinimalRouterStateSerializer
+): MinimalRouterStateSnapshot {
+  return serializer.serialize(createRouterStateSnapshot(route, router));
+}
 
-  selectRouteParam(param: string): Signal<string | undefined> {
-    return computed(() => this.routeParams()[param]);
-  }
+const initialLocalRouterSignalStateToken =
+  new InjectionToken<LocalRouterSignalState>(
+    'initialLocalRouterSignalStateToken',
+    {
+      factory: createInitialLocalRouterSignalState,
+    }
+  );
 
-  selectRouterEvents<TAcceptedRouterEvents extends Type<RouterEvent>[]>(
-    ...acceptedEventTypes: [...TAcceptedRouterEvents]
-  ): Observable<InstanceType<TAcceptedRouterEvents[number]>> {
-    return this.#router.events.pipe(
-      filterRouterEvents(...acceptedEventTypes)
-    ) as Observable<InstanceType<TAcceptedRouterEvents[number]>>;
-  }
+export const LocalRouterSignalStore: Type<RouterSignalStore> = signalStore(
+  withState<LocalRouterSignalState>(() =>
+    inject(initialLocalRouterSignalStateToken)
+  ),
+  withComputed(({ _routerState }) => {
+    const route = inject(ActivatedRoute);
 
-  #createRouterStateSnapshot(route: ActivatedRoute): RouterStateSnapshot {
     return {
-      root: route.snapshot,
-      url: this.#router.serializeUrl(
-        createUrlTreeFromSnapshot(
-          route.snapshot,
-          [],
-          route.snapshot.queryParams,
-          route.snapshot.fragment
-        )
+      currentRoute: computed(
+        (): MinimalActivatedRouteSnapshot => _routerState().root
       ),
+      fragment: toSignal(route.fragment, {
+        requireSync: true,
+      }) satisfies Signal<string | null>,
+      queryParams: toSignal(route.queryParams, {
+        requireSync: true,
+      }) satisfies Signal<InternalStrictQueryParams>,
+      routeData: toSignal(route.data, {
+        requireSync: true,
+      }) satisfies Signal<InternalStrictRouteData>,
+      routeParams: toSignal(route.params, {
+        requireSync: true,
+      }) satisfies Signal<InternalStrictRouteParams>,
+      title: toSignal(route.title, { requireSync: true }) satisfies Signal<
+        string | undefined
+      >,
+      url: computed((): string => _routerState().url),
     };
-  }
-
-  #serializeRouterState(route: ActivatedRoute): MinimalRouterStateSnapshot {
-    return this.#serializer.serialize(this.#createRouterStateSnapshot(route));
-  }
-}
+  }),
+  withMethods(
+    (
+      _store,
+      router = inject(Router),
+      serializer = inject(MinimalRouterStateSerializer)
+    ) => ({
+      _serializeRouterState(route: ActivatedRoute): MinimalRouterStateSnapshot {
+        return serializeRouterState(route, router, serializer);
+      },
+    })
+  ),
+  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]>>;
+    },
+  })),
+  withHooks({
+    onInit(store, route = inject(ActivatedRoute)): void {
+      store
+        .selectRouterEvents(
+          NavigationStart,
+          RoutesRecognized,
+          NavigationEnd,
+          NavigationCancel,
+          NavigationError
+        )
+        .pipe(
+          map(() => route),
+          map((route) => store._serializeRouterState(route)),
+          takeUntilDestroyed()
+        )
+        .subscribe((routerState) =>
+          patchState(store, { _routerState: routerState })
+        );
+    },
+  })
+);