refactor: create internal state and reduce RxJS behavior subjects

Closes #5

Author: brandonroberts

libs/angular-routing/src/lib/route.component.ts

@@ -14,13 +14,14 @@ import {
   OnDestroy,
 } from '@angular/core';
 
-import { Subject, BehaviorSubject, merge, of, from } from 'rxjs';
+import { Subject, BehaviorSubject, of, from } from 'rxjs';
 import {
   distinctUntilChanged,
   filter,
   takeUntil,
   mergeMap,
   withLatestFrom,
+  map,
 } from 'rxjs/operators';
 
 import { Load, Route, RouteOptions } from './route';
@@ -36,6 +37,12 @@ export function getRoutePath(routeComponent: RouteComponent) {
   return routeComponent.routePath$;
 }
 
+interface State {
+  params: Params;
+  path: string;
+  shouldRender: boolean;
+}
+
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'route',
@@ -81,13 +88,23 @@ export class RouteComponent implements OnInit, OnDestroy {
 
   private _path: string;
   private destroy$ = new Subject();
-  private _routeParams$ = new BehaviorSubject<Params>({});
-  private _routePath$ = new BehaviorSubject<string>('');
-  private _shouldRender$ = new BehaviorSubject<boolean>(false);
-
-  readonly shouldRender$ = this._shouldRender$.asObservable();
-  readonly routeParams$ = this._routeParams$.pipe(takeUntil(this.destroy$));
-  readonly routePath$ = this._routePath$.pipe(takeUntil(this.destroy$));
+  private readonly state$ = new BehaviorSubject<State>({
+    params: {},
+    path: '',
+    shouldRender: false,
+  });
+
+  readonly shouldRender$ = this.state$.pipe(map((state) => state.shouldRender));
+  readonly routeParams$ = this.state$.pipe(
+    map((state) => state.params),
+    distinctUntilChanged(),
+    takeUntil(this.destroy$)
+  );
+  readonly routePath$ = this.state$.pipe(
+    map((state) => state.path),
+    distinctUntilChanged(),
+    takeUntil(this.destroy$)
+  );
   route!: Route;
 
   constructor(
@@ -106,38 +123,41 @@ export class RouteComponent implements OnInit, OnDestroy {
 
     this.route = this.registerRoute(path, this.exact, this.load);
 
-    const activeRoute$ = this.routerComponent.activeRoute$.pipe(
-      filter((ar) => ar !== null),
-      distinctUntilChanged(),
-      withLatestFrom(this.shouldRender$),
-      mergeMap(([current, rendered]) => {
-        if (current.route === this.route) {
-          this._routeParams$.next(current.params);
-          this._routePath$.next(current.path);
-
-          if (this.redirectTo) {
-            this.router.go(this.redirectTo);
-            return of(null);
-          }
+    this.routerComponent.activeRoute$
+      .pipe(
+        filter((ar) => ar !== null),
+        distinctUntilChanged(),
+        withLatestFrom(this.shouldRender$),
+        mergeMap(([current, rendered]) => {
+          if (current.route === this.route) {
+            if (this.redirectTo) {
+              this.router.go(this.redirectTo);
+              return of(null);
+            }
+
+            this.updateState({
+              params: current.params,
+              path: current.path,
+            });
 
-          if (!rendered) {
-            if (!this.reuse) {
-              this.clearView();
+            if (!rendered) {
+              if (!this.reuse) {
+                this.clearView();
+              }
+
+              return this.loadAndRender(current.route);
             }
 
-            return this.loadAndRender(current.route);
+            return of(null);
+          } else if (rendered) {
+            return of(this.clearView());
           }
 
           return of(null);
-        } else if (rendered) {
-          return of(this.clearView());
-        }
-
-        return of(null);
-      })
-    );
-
-    merge(activeRoute$).pipe(takeUntil(this.destroy$)).subscribe();
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
   }
 
   ngOnDestroy() {
@@ -206,12 +226,12 @@ export class RouteComponent implements OnInit, OnDestroy {
 
   private showTemplate() {
     setTimeout(() => {
-      this._shouldRender$.next(true);
+      this.updateState({ shouldRender: true });
     });
   }
 
   private hideTemplate() {
-    this._shouldRender$.next(false);
+    this.updateState({ shouldRender: false });
   }
 
   private clearView() {
@@ -226,4 +246,8 @@ export class RouteComponent implements OnInit, OnDestroy {
     const trimmed = path.trim();
     return trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
   }
+
+  private updateState(newState: Partial<State>) {
+    this.state$.next({ ...this.state$.value, ...newState });
+  }
 }

libs/angular-routing/src/lib/router.component.ts

@@ -5,14 +5,13 @@ import {
   OnInit,
   OnDestroy,
 } from '@angular/core';
-import { Location } from '@angular/common';
 import { combineLatest, Subject, BehaviorSubject } from 'rxjs';
 import {
   tap,
   takeUntil,
   distinctUntilChanged,
-  scan,
   debounceTime,
+  map,
 } from 'rxjs/operators';
 
 import { pathToRegexp, match } from 'path-to-regexp';
@@ -22,22 +21,31 @@ import { Router } from './router.service';
 import { compareParams, Params } from './route-params.service';
 import { compareRoutes } from './utils/compare-routes';
 
+interface State {
+  activeRoute: ActiveRoute | null;
+  routes: Route[];
+}
+
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'router',
   template: '<ng-content></ng-content>',
 })
 export class RouterComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject();
-
-  private _activeRoute$ = new BehaviorSubject<ActiveRoute>(null);
-  readonly activeRoute$ = this._activeRoute$.pipe(
-    distinctUntilChanged(this.compareActiveRoutes)
+  private readonly state$ = new BehaviorSubject<State>({
+    activeRoute: null,
+    routes: [],
+  });
+
+  readonly activeRoute$ = this.state$.pipe(
+    map((state) => state.activeRoute),
+    distinctUntilChanged(this.compareActiveRoutes),
+    takeUntil(this.destroy$)
   );
-
-  private _routes$ = new BehaviorSubject<Route[]>([]);
-  readonly routes$ = this._routes$.pipe(
-    scan((routes, route) => routes.concat(route).sort(compareRoutes))
+  readonly routes$ = this.state$.pipe(
+    map((state) => state.routes),
+    takeUntil(this.destroy$)
   );
 
   public basePath = '';
@@ -52,7 +60,6 @@ export class RouterComponent implements OnInit, OnDestroy {
 
   constructor(
     private router: Router,
-    private location: Location,
     @SkipSelf() @Optional() public parentRouterComponent: RouterComponent
   ) {}
 
@@ -108,17 +115,19 @@ export class RouterComponent implements OnInit, OnDestroy {
     });
 
     route.matcher = route.matcher || routeRegex;
-    this._routes$.next([route]);
+
+    const routes = this.state$.value.routes;
+    this.updateState({ routes: routes.concat(route).sort(compareRoutes) });
 
     return route;
   }
 
-  setActiveRoute(active: ActiveRoute) {
-    this._activeRoute$.next(active);
+  setActiveRoute(activeRoute: ActiveRoute) {
+    this.updateState({ activeRoute });
   }
 
   normalizePath(path: string) {
-    return this.location.normalize(path);
+    return this.router.normalizePath(path);
   }
 
   ngOnDestroy() {
@@ -142,4 +151,8 @@ export class RouterComponent implements OnInit, OnDestroy {
       previous.route.options.exact === current.route.options.exact
     );
   }
+
+  private updateState(newState: Partial<State>) {
+    this.state$.next({ ...this.state$.value, ...newState });
+  }
 }

libs/angular-routing/src/lib/router.service.ts

@@ -2,28 +2,42 @@ import { Injectable } from '@angular/core';
 import { PlatformLocation, Location } from '@angular/common';
 
 import { BehaviorSubject } from 'rxjs';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import * as queryString from 'query-string';
 
 import { UrlParser } from './url-parser';
 import { Params, compareParams } from './route-params.service';
 
+interface State {
+  url: string;
+  queryParams: Params;
+  hash: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class Router {
-  private _url$ = new BehaviorSubject<string>(this.location.path());
-  readonly url$ = this._url$.pipe(distinctUntilChanged());
-
-  private _queryParams$ = new BehaviorSubject<Params>({});
-  readonly queryParams$ = this._queryParams$.pipe(
+  private readonly state$ = new BehaviorSubject<State>({
+    url: this.location.path(),
+    queryParams: {},
+    hash: '',
+  });
+
+  readonly url$ = this.state$.pipe(
+    map((state) => state.url),
+    distinctUntilChanged()
+  );
+  readonly hash$ = this.state$.pipe(
+    map((state) => state.hash),
+    distinctUntilChanged()
+  );
+  readonly queryParams$ = this.state$.pipe(
+    map((state) => state.queryParams),
     distinctUntilChanged(compareParams)
   );
 
-  private _hash$ = new BehaviorSubject<string>('');
-  readonly hash$ = this._hash$.pipe(distinctUntilChanged());
-
   constructor(
     private location: Location,
     private platformLocation: PlatformLocation,
@@ -53,6 +67,7 @@ export class Router {
     if (!url.startsWith('/')) {
       url = this.urlParser.joinUrls(this.location.path(), url);
     }
+
     return (
       url +
       (queryParams ? `?${queryString.stringify(queryParams)}` : '') +
@@ -64,17 +79,6 @@ export class Router {
     return this.location.prepareExternalUrl(url);
   }
 
-  private getLocation() {
-    return this.platformLocation.href;
-  }
-
-  private nextState(url: string) {
-    const parsedUrl = this._parseUrl(url);
-    this._nextUrl(parsedUrl.pathname);
-    this._nextQueryParams(this.parseSearchParams(parsedUrl.searchParams));
-    this._nextHash(parsedUrl.hash ? parsedUrl.hash.split('#')[0] : '');
-  }
-
   parseSearchParams(searchParams: URLSearchParams) {
     const queryParams: Params = {};
 
@@ -85,19 +89,25 @@ export class Router {
     return queryParams;
   }
 
-  private _parseUrl(path: string): URL {
-    return this.urlParser.parse(path);
+  normalizePath(path: string) {
+    return this.location.normalize(path);
   }
 
-  private _nextUrl(url: string) {
-    this._url$.next(url);
+  private getLocation() {
+    return this.platformLocation.href;
   }
 
-  private _nextQueryParams(params: Params) {
-    this._queryParams$.next(params);
+  private nextState(url: string) {
+    const parsedUrl = this._parseUrl(url);
+
+    this.state$.next({
+      url: parsedUrl.pathname,
+      queryParams: this.parseSearchParams(parsedUrl.searchParams),
+      hash: parsedUrl.hash ? parsedUrl.hash.split('#')[0] : '',
+    });
   }
 
-  private _nextHash(hash: string) {
-    this._hash$.next(hash);
+  private _parseUrl(path: string): URL {
+    return this.urlParser.parse(path);
   }
 }