feat!: replace implementations with RouterStore and provider factories (#273)

# Features
- Remove `LocalRouterStore` from the public API
- Add `provideLocalRouterStore` to the public API
- Remove `GlobalRouterStore` from the public API
- Add `provideGlobalRouterStore` to the public API
- Add `RouterStore` to the public API

# Refactorings
- Rename `RouterComponentStore` to `RouterStore` and decorate with
`Injectable`
- Remove unused `ComponentStore` port of `@ngrx/router-store`

Fixes #272

BREAKING CHANGE: `LocalRouterStore` is replaced by `RouterStore` and `provideLocalRouterStore`. `GlobalRouterStore` is replaced by `RouterStore` and `provideGlobalRouterStore`.

Author: LayZeeDK

README.md

@@ -15,7 +15,7 @@ Published with partial Ivy compilation.
 
 ## API
 
-Two router stores are available and implement the same public API:
+A `RouterStore` service has the following public properties:
 
 | API                                                         | Description                                |
 | ----------------------------------------------------------- | ------------------------------------------ |
@@ -28,52 +28,86 @@ Two router stores are available and implement the same public API:
 | selectQueryParam<TValue>(param: string): Observable<TValue> | Select the specified query parameter.      |
 | selectRouteParam<TValue>(param: string): Observable<TValue> | Select the specified route paramter.       |
 
-The `GlobalRouterStore` is never destroyed but can be injected in any class.
+A `RouterStore` service is provided by using either `provideGlobalRouterStore` or `provideLocalRouterStore`.
 
-The `LocalRouterStore` requires a component-level provider, follows the
+The _global_ `RouterStore` service is provided in a root environment injector and is never destroyed but can be injected in any class.
+
+A _local_ `RouterStore` requires a component-level provider, follows the
 lifecycle of that component, and can be injected in declarables as well as
 other component-level services.
 
-### GlobalRouterStore
+### Global router store
 
-An application-wide router store. Can be injected in any class. Implicitly
-provided in the root module injector.
+An application-wide router store. Can be injected in any class. Provide
+in a root environment injector by using `provideGlobalRouterStore`.
 
 Usage:
 
-```ts
+```typescript
+// app.module.ts
 // (...)
-import { GlobalRouterStore } from '@ngworker/router-component-store';
+import { provideGlobalRouterStore } from '@ngworker/router-component-store';
+
+@NgModule({
+  // (...)
+  providers: [provideGlobalRouterStore()],
+})
+export class AppModule {}
+```
+
+```typescript
+// hero.service.ts
+// (...)
+import { RouterStore } from '@ngworker/router-component-store';
 
 @Injectable({
   providedIn: 'root',
 })
 export class HeroService {
-  activeHeroId$: Observable<number> = this.routerStore.selectQueryParam('id');
+  activeHeroId$: Observable<string> = this.routerStore.selectQueryParam('id');
+
+  constructor(private routerStore: RouterStore) {}
+}
+```
+
+```typescript
+// hero-detail.component.ts
+// (...)
+import { RouterStore } from '@ngworker/router-component-store';
+
+@Component({
+  // (...)
+})
+export class HeroDetailComponent {
+  heroId$: Observable<string> = this.routerStore.selectQueryParam('id');
 
-  constructor(private routerStore: GlobalRouterStore) {}
+  constructor(private routerStore: RouterStore) {}
 }
 ```
 
-### LocalRouterStore
+### Local router store
 
 A component-level router store. Can be injected in any directive, component,
 pipe, or component-level service. Explicitly provided in a component sub-tree
 using `Component.providers` or `Component.viewProviders`.
 
 Usage:
 
-```ts
+```typescript
+// hero-detail.component.ts
 // (...)
-import { LocalRouterStore } from '@ngworker/router-component-store';
+import {
+  provideLocalRouterStore,
+  RouterStore,
+} from '@ngworker/router-component-store';
 
 @Component({
   // (...)
-  providers: [LocalRouterStore],
+  providers: [provideLocalRouterStore()],
 })
 export class HeroDetailComponent {
-  heroId$: Observable<number> = this.routerStore.selectQueryParam('id');
+  heroId$: Observable<string> = this.routerStore.selectQueryParam('id');
 
-  constructor(private routerStore: LocalRouterStore) {}
+  constructor(private routerStore: RouterStore) {}
 }
 ```

packages/router-component-store/src/index.ts

@@ -1,23 +1,11 @@
-// // RouterStore state
-// export { RouterStore } from './lib/router-store/router-store';
-
-// // RouterStore configuration
-// export { RouterStoreModule } from './lib/router-store/router-store.module';
-// export { RouterStoreConfig } from './lib/router-store/router-store-config';
-
-// // RouterStore events
-// export * from './lib/router-store/router-store-events/router-store-cancel-event';
-// export * from './lib/router-store/router-store-events/router-store-error-event';
-// export * from './lib/router-store/router-store-events/router-store-event';
-// export * from './lib/router-store/router-store-events/router-store-navigated-event';
-// export * from './lib/router-store/router-store-events/router-store-navigation-event';
-// export * from './lib/router-store/router-store-events/router-store-request-event';
-
 // GlobalRouterStore
-export * from './lib/global-router-store/global-router-store';
+export * from './lib/global-router-store/provide-global-router-store';
 
 // LocalRouterStore
-export * from './lib/local-router-store/local-router-store';
+export * from './lib/local-router-store/provide-local-router-store';
+
+// RouterStore
+export * from './lib/router-store';
 
 // Serializable route state
 export { MinimalActivatedRouteSnapshot } from './lib/@ngrx/router-store/minimal_serializer';

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

@@ -3,8 +3,9 @@ import { TestBed } from '@angular/core/testing';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { firstValueFrom } from 'rxjs';
-
+import { RouterStore } from '../router-store';
 import { GlobalRouterStore } from './global-router-store';
+import { provideGlobalRouterStore } from './provide-global-router-store';
 
 @Component({
   template: '<router-outlet></router-outlet>',
@@ -34,17 +35,18 @@ describe(`${GlobalRouterStore.name} selectors`, () => {
     TestBed.configureTestingModule({
       declarations: [DummyAppComponent, DummyLoginComponent],
       imports: [RouterTestingModule.withRoutes(routes)],
+      providers: [provideGlobalRouterStore()],
     });
 
     const rootFixture = TestBed.createComponent(DummyAppComponent);
     rootFixture.autoDetectChanges(true);
 
     router = TestBed.inject(Router);
-    store = TestBed.inject(GlobalRouterStore);
+    store = TestBed.inject(RouterStore);
   });
 
   let router: Router;
-  let store: GlobalRouterStore;
+  let store: RouterStore;
 
   it('exposes a selector for the current route', async () => {
     await router.navigateByUrl('/login/etyDDwAAQBAJ?ref=ngrx.io#test-fragment');

packages/router-component-store/src/lib/global-router-store/global-router-store-selectors.spec.ts

@@ -1,44 +1,84 @@
 import { Injectable } from '@angular/core';
-import { Data, Params } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Data, Params, Router } from '@angular/router';
+import { ComponentStore } from '@ngrx/component-store';
+import { map, Observable } from 'rxjs';
+import {
+  MinimalActivatedRouteSnapshot,
+  MinimalRouterStateSerializer,
+  MinimalRouterStateSnapshot,
+} from '../@ngrx/router-store/minimal_serializer';
+import { RouterStore } from '../router-store';
 
-import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal_serializer';
-import { RouterComponentStore } from '../router-component-store';
-import { GlobalRouterComponentStore } from './global-router-component-store';
+interface GlobalRouterState {
+  readonly routerState: MinimalRouterStateSnapshot;
+}
 
-@Injectable({
-  providedIn: 'root',
-})
-export class GlobalRouterStore implements RouterComponentStore {
-  #store: GlobalRouterComponentStore;
+@Injectable()
+export class GlobalRouterStore
+  extends ComponentStore<GlobalRouterState>
+  implements RouterStore
+{
+  #routerState$: Observable<MinimalRouterStateSnapshot> = this.select(
+    (state) => state.routerState
+  );
+  #rootRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
+    this.#routerState$,
+    (routerState) => routerState.root
+  );
 
-  get currentRoute$(): Observable<MinimalActivatedRouteSnapshot> {
-    return this.#store.currentRoute$;
-  }
-  get fragment$(): Observable<string | null> {
-    return this.#store.fragment$;
-  }
-  get queryParams$(): Observable<Params> {
-    return this.#store.queryParams$;
-  }
-  get routeData$(): Observable<Data> {
-    return this.#store.routeData$;
-  }
-  get routeParams$(): Observable<Params> {
-    return this.#store.routeParams$;
-  }
-  get url$(): Observable<string> {
-    return this.#store.url$;
-  }
+  readonly currentRoute$: Observable<MinimalActivatedRouteSnapshot> =
+    this.select(this.#rootRoute$, (route) => {
+      while (route.firstChild) {
+        route = route.firstChild;
+      }
+
+      return route;
+    });
+  readonly fragment$: Observable<string | null> = this.select(
+    this.#rootRoute$,
+    (route) => route.fragment
+  );
+  readonly queryParams$: Observable<Params> = this.select(
+    this.#rootRoute$,
+    (route) => route.queryParams
+  );
+  readonly routeData$: Observable<Data> = this.select(
+    this.currentRoute$,
+    (route) => route.data
+  );
+  readonly routeParams$: Observable<Params> = this.select(
+    this.currentRoute$,
+    (route) => route.params
+  );
+  readonly url$: Observable<string> = this.select(
+    this.#routerState$,
+    (routerState) => routerState.url
+  );
+
+  constructor(router: Router, serializer: MinimalRouterStateSerializer) {
+    super({
+      routerState: serializer.serialize(router.routerState.snapshot),
+    });
 
-  constructor(store: GlobalRouterComponentStore) {
-    this.#store = store;
+    this.#updateRouterState(
+      router.events.pipe(
+        map(() => serializer.serialize(router.routerState.snapshot))
+      )
+    );
   }
 
+  #updateRouterState = this.updater<MinimalRouterStateSnapshot>(
+    (state, routerState): GlobalRouterState => ({
+      ...state,
+      routerState,
+    })
+  );
+
   selectQueryParam<TValue>(param: string): Observable<TValue> {
-    return this.#store.selectQueryParam(param);
+    return this.select(this.queryParams$, (params) => params[param]);
   }
+
   selectRouteParam<TValue>(param: string): Observable<TValue> {
-    return this.#store.selectRouteParam(param);
+    return this.select(this.routeParams$, (params) => params[param]);
   }
 }

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

@@ -0,0 +1,12 @@
+import { ClassProvider, Provider } from '@angular/core';
+import { RouterStore } from '../router-store';
+import { GlobalRouterStore } from './global-router-store';
+
+export function provideGlobalRouterStore(): Provider {
+  const globalRouterStoreProvider: ClassProvider = {
+    provide: RouterStore,
+    useClass: GlobalRouterStore,
+  };
+
+  return globalRouterStoreProvider;
+}