refactor: encapsulate internal members (#1)

- Encapsulate members inherited from `ComponentStore`
ngworker · Nov 19, 2021 · 99f9c9c · 99f9c9c
1 parent c7ad32e
commit 99f9c9c
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 155 deletions.
diff --git a/packages/router-component-store/src/lib/global-router-store/global-router-component-store.ts b/packages/router-component-store/src/lib/global-router-store/global-router-component-store.ts
@@ -0,0 +1,87 @@
+import { Injectable } from '@angular/core';
+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 { RouterComponentStore } from '../router-component-store';
+
+interface GlobalRouterState {
+  readonly routerState: MinimalRouterStateSnapshot;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GlobalRouterComponentStore
+  extends ComponentStore<GlobalRouterState>
+  implements RouterComponentStore
+{
+  #routerState$: Observable<MinimalRouterStateSnapshot> = this.select(
+    (state) => state.routerState
+  );
+  #rootRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
+    this.#routerState$,
+    (routerState) => routerState.root
+  );
+
+  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),
+    });
+
+    this.#updateRouterState(
+      router.events.pipe(
+        map(() => serializer.serialize(router.routerState.snapshot))
+      )
+    );
+  }
+
+  selectQueryParam<TValue>(param: string): Observable<TValue> {
+    return this.select(this.queryParams$, (params) => params[param]);
+  }
+
+  selectRouteParam<TValue>(param: string): Observable<TValue> {
+    return this.select(this.routeParams$, (params) => params[param]);
+  }
+
+  #updateRouterState = this.updater<MinimalRouterStateSnapshot>(
+    (state, routerState): GlobalRouterState => ({
+      ...state,
+      routerState,
+    })
+  );
+}
diff --git a/packages/router-component-store/src/lib/global-router-store/global-router-store.ts b/packages/router-component-store/src/lib/global-router-store/global-router-store.ts
@@ -1,87 +1,44 @@
 import { Injectable } from '@angular/core';
-import { Data, Params, Router } from '@angular/router';
-import { ComponentStore } from '@ngrx/component-store';
-import { map, Observable } from 'rxjs';
+import { Data, Params } from '@angular/router';
+import { Observable } from 'rxjs';
 
-import {
-  MinimalActivatedRouteSnapshot,
-  MinimalRouterStateSerializer,
-  MinimalRouterStateSnapshot,
-} from '../@ngrx/router-store/minimal_serializer';
+import { MinimalActivatedRouteSnapshot } from '../@ngrx/router-store/minimal_serializer';
 import { RouterComponentStore } from '../router-component-store';
-
-interface GlobalRouterStoreState {
-  readonly routerState: MinimalRouterStateSnapshot;
-}
+import { GlobalRouterComponentStore } from './global-router-component-store';
 
 @Injectable({
   providedIn: 'root',
 })
-export class GlobalRouterStore
-  extends ComponentStore<GlobalRouterStoreState>
-  implements RouterComponentStore
-{
-  #routerState$: Observable<MinimalRouterStateSnapshot> = this.select(
-    (state) => state.routerState
-  );
-  #rootRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
-    this.#routerState$,
-    (routerState) => routerState.root
-  );
-
-  readonly currentRoute$: Observable<MinimalActivatedRouteSnapshot> =
-    this.select(this.#rootRoute$, (route) => {
-      while (route.firstChild) {
-        route = route.firstChild;
-      }
+export class GlobalRouterStore implements RouterComponentStore {
+  #store: GlobalRouterComponentStore;
 
-      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),
-    });
+  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$;
+  }
 
-    this.#updateRouterState(
-      router.events.pipe(
-        map(() => serializer.serialize(router.routerState.snapshot))
-      )
-    );
+  constructor(store: GlobalRouterComponentStore) {
+    this.#store = store;
   }
 
   selectQueryParam<TValue>(param: string): Observable<TValue> {
-    return this.select(this.queryParams$, (params) => params[param]);
+    return this.#store.selectQueryParam(param);
   }
-
   selectRouteParam<TValue>(param: string): Observable<TValue> {
-    return this.select(this.routeParams$, (params) => params[param]);
+    return this.#store.selectRouteParam(param);
   }
-
-  #updateRouterState = this.updater<MinimalRouterStateSnapshot>(
-    (state, routerState): GlobalRouterStoreState => ({
-      ...state,
-      routerState,
-    })
-  );
 }
diff --git a/packages/router-component-store/src/lib/local-router-store/local-router-component-store.ts b/packages/router-component-store/src/lib/local-router-store/local-router-component-store.ts
@@ -0,0 +1,99 @@
+import { Injectable, Injector } from '@angular/core';
+import { ActivatedRoute, 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 { RouterComponentStore } from '../router-component-store';
+
+interface LocalRouterState {
+  readonly routerState: MinimalRouterStateSnapshot;
+}
+
+export function createLocalRouterStore(
+  injector: Injector
+): LocalRouterComponentStore {
+  return Injector.create({
+    name: 'LocalRouterStoreInjector',
+    parent: injector,
+    providers: [
+      {
+        provide: LocalRouterComponentStore,
+        useClass: LocalRouterComponentStore,
+      },
+    ],
+  }).get(LocalRouterComponentStore);
+}
+
+@Injectable()
+export class LocalRouterComponentStore
+  extends ComponentStore<LocalRouterState>
+  implements RouterComponentStore
+{
+  #routerState$: Observable<MinimalRouterStateSnapshot> = this.select(
+    (state) => state.routerState
+  );
+  #rootRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
+    this.#routerState$,
+    (routerState) => routerState.root
+  );
+
+  currentRoute$: Observable<MinimalActivatedRouteSnapshot> = this.select(
+    this.#rootRoute$,
+    (route) => {
+      while (route.firstChild) {
+        route = route.firstChild;
+      }
+
+      return route;
+    }
+  );
+  fragment$: Observable<string | null>;
+  queryParams$: Observable<Params>;
+  routeData$: Observable<Data>;
+  routeParams$: Observable<Params>;
+  url$: Observable<string> = this.select(
+    this.#routerState$,
+    (routerState) => routerState.url
+  );
+
+  constructor(
+    route: ActivatedRoute,
+    router: Router,
+    serializer: MinimalRouterStateSerializer
+  ) {
+    super({
+      routerState: serializer.serialize(router.routerState.snapshot),
+    });
+
+    this.fragment$ = route.fragment;
+    this.queryParams$ = route.queryParams;
+    this.routeData$ = route.data;
+    this.routeParams$ = route.params;
+
+    this.#updateRouterState(
+      router.events.pipe(
+        map(() => serializer.serialize(router.routerState.snapshot))
+      )
+    );
+  }
+
+  selectQueryParam<TValue>(param: string): Observable<TValue> {
+    return this.select(this.queryParams$, (params) => params[param]);
+  }
+
+  selectRouteParam<TValue>(param: string): Observable<TValue> {
+    return this.select(this.routeParams$, (params) => params[param]);
+  }
+
+  #updateRouterState = this.updater<MinimalRouterStateSnapshot>(
+    (state, routerState): LocalRouterState => ({
+      ...state,
+      routerState,
+    })
+  );
+}
diff --git a/...es/router-component-store/src/lib/local-router-store/local-router-store-selectors.spec.ts b/...es/router-component-store/src/lib/local-router-store/local-router-store-selectors.spec.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NavigationEnd, Router, Routes } from '@angular/router';
+import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { filter, firstValueFrom, map, Observable, withLatestFrom } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 
 import { LocalRouterStore } from './local-router-store';
 
@@ -21,17 +21,6 @@ class DummyLoginComponent {
 }
 
 describe(`${LocalRouterStore.name} selectors`, () => {
-  const afterNavigated = <TValue>(
-    observable$: Observable<TValue>
-  ): Promise<TValue> =>
-    firstValueFrom(
-      router.events.pipe(
-        withLatestFrom(observable$),
-        filter((event) => event instanceof NavigationEnd),
-        map(([_, value]) => value)
-      )
-    );
-
   const getStore = () =>
     (
       rootFixture.debugElement.query(By.directive(DummyLoginComponent))