refactor: implement GlobalRouterSignalState using best NgRx Signals practices

Author: LayZeeDK

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

@@ -1,16 +1,23 @@
-import { computed, inject, Injectable, Signal, Type } from '@angular/core';
+import { InjectionToken, Signal, Type, computed, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
-  Event as RouterEvent,
   NavigationCancel,
   NavigationEnd,
   NavigationError,
   NavigationStart,
   Router,
+  Event as RouterEvent,
   RoutesRecognized,
 } from '@angular/router';
-import { patchState, signalStore, withState } from '@ngrx/signals';
-import { map, Observable } from 'rxjs';
+import {
+  patchState,
+  signalStore,
+  withComputed,
+  withHooks,
+  withMethods,
+  withState,
+} from '@ngrx/signals';
+import { Observable, 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';
@@ -20,102 +27,98 @@ import { InternalStrictRouteData } from '../internal-strict-route-data';
 import { InternalStrictRouteParams } from '../internal-strict-route-params';
 import { RouterSignalStore } from '../router-signal-store';
 
-interface GlobalRouterState {
-  readonly routerState: MinimalRouterStateSnapshot;
+interface GlobalRouterSignalState {
+  readonly _routerState: MinimalRouterStateSnapshot;
 }
 
-const GlobalRouterSignalStoreBase = signalStore(
-  withState<GlobalRouterState>({
-    routerState: {} as MinimalRouterStateSnapshot,
-  })
-);
-
-@Injectable()
-export class GlobalRouterSignalStore
-  extends GlobalRouterSignalStoreBase
-  implements RouterSignalStore
-{
-  #router = inject(Router);
-  #serializer = inject(MinimalRouterStateSerializer);
+function createInitialGlobalRouterSignalState(): GlobalRouterSignalState {
+  const router = inject(Router);
+  const serializer = inject(MinimalRouterStateSerializer);
 
-  #rootRoute: Signal<MinimalActivatedRouteSnapshot> = computed(
-    () => this.routerState().root
-  );
+  return {
+    _routerState: serializer.serialize(router.routerState.snapshot),
+  };
+}
 
-  currentRoute: Signal<MinimalActivatedRouteSnapshot> = computed(() => {
-    let route = this.#rootRoute();
-    while (route.firstChild) {
-      route = route.firstChild;
+const initialGlobalRouterSignalStateToken =
+  new InjectionToken<GlobalRouterSignalState>(
+    'initialGlobalRouterSignalStateToken',
+    {
+      factory: createInitialGlobalRouterSignalState,
     }
-    return route;
-  });
-
-  fragment: Signal<string | null> = computed(() => this.#rootRoute().fragment);
-
-  queryParams: Signal<InternalStrictQueryParams> = computed(
-    () => this.#rootRoute().queryParams
   );
 
-  routeData: Signal<InternalStrictRouteData> = computed(
-    () => this.currentRoute().data
-  );
-
-  routeParams: Signal<InternalStrictRouteParams> = computed(
-    () => this.currentRoute().params
-  );
-
-  title: Signal<string | undefined> = computed(() => this.currentRoute().title);
-
-  url: Signal<string> = computed(() => this.routerState().url);
-
-  constructor() {
-    super();
-
-    // Initialize state with current router snapshot
-    patchState(this, {
-      routerState: this.#serializer.serialize(
-        this.#router.routerState.snapshot
-      ),
-    });
-
-    // Subscribe to router events and update state
-    this.selectRouterEvents(
-      NavigationStart,
-      RoutesRecognized,
-      NavigationEnd,
-      NavigationCancel,
-      NavigationError
-    )
-      .pipe(
-        map(() =>
-          this.#serializer.serialize(this.#router.routerState.snapshot)
-        ),
-        takeUntilDestroyed()
-      )
-      .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]);
-  }
-
-  selectRouteParam(param: string): Signal<string | undefined> {
-    return computed(() => this.routeParams()[param]);
-  }
-
-  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 GlobalRouterSignalStore: Type<RouterSignalStore> = signalStore(
+  withState(() => inject(initialGlobalRouterSignalStateToken)),
+  withComputed(({ _routerState }) => ({
+    _rootRoute: computed(
+      (): MinimalActivatedRouteSnapshot => _routerState().root
+    ),
+  })),
+  withComputed(({ _rootRoute }) => ({
+    currentRoute: computed((): MinimalActivatedRouteSnapshot => {
+      let route = _rootRoute();
+
+      while (route.firstChild) {
+        route = route.firstChild;
+      }
+
+      return route;
+    }),
+  })),
+  withComputed(({ _rootRoute, _routerState, currentRoute }) => ({
+    fragment: computed((): string | null => _rootRoute().fragment),
+    queryParams: computed(
+      (): InternalStrictQueryParams => _rootRoute().queryParams
+    ),
+    routeData: computed((): InternalStrictRouteData => currentRoute().data),
+    routeParams: computed(
+      (): InternalStrictRouteParams => currentRoute().params
+    ),
+    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]>>;
+    },
+  })),
+  withHooks({
+    onInit(
+      store,
+      router = inject(Router),
+      serializer = inject(MinimalRouterStateSerializer)
+    ): void {
+      store
+        .selectRouterEvents(
+          NavigationStart,
+          RoutesRecognized,
+          NavigationEnd,
+          NavigationCancel,
+          NavigationError
+        )
+        .pipe(
+          map(() => serializer.serialize(router.routerState.snapshot)),
+          takeUntilDestroyed()
+        )
+        .subscribe((routerState) =>
+          patchState(store, { _routerState: routerState })
+        );
+    },
+  })
+);