Make UI observables hot

src/assets/javascripts/ui/location/index.ts

@@ -21,7 +21,12 @@
  */
 
 import { Observable, fromEvent } from "rxjs"
-import { filter, map, startWith } from "rxjs/operators"
+import {
+  filter,
+  map,
+  shareReplay,
+  startWith
+} from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Data
@@ -39,12 +44,13 @@ const hash$ = fromEvent<HashChangeEvent>(window, "hashchange")
 /**
  * Create an observable emitting changes in location hashes
  *
- * @return Hash change observable
+ * @return Location hash observable
  */
 export function fromLocationHash(): Observable<string> {
   return hash$.pipe(
-    startWith(document.location.hash),
     map(() => document.location.hash),
-    filter(hash => hash.length > 0)
+    startWith(document.location.hash),
+    filter(hash => hash.length > 0),
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }

src/assets/javascripts/ui/viewport/_/index.ts

@@ -20,9 +20,8 @@
  * IN THE SOFTWARE.
  */
 
-import { equals } from "ramda"
 import { Observable, fromEvent, merge } from "rxjs"
-import { distinctUntilChanged, map, startWith } from "rxjs/operators"
+import { map, shareReplay, startWith } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Data
@@ -97,7 +96,7 @@ export function fromViewportOffset(): Observable<ViewportOffset> {
   return merge(scroll$, resize$).pipe(
     map(getViewportOffset),
     startWith(getViewportOffset()),
-    distinctUntilChanged<ViewportOffset>(equals)
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }
 
@@ -110,6 +109,6 @@ export function fromViewportSize(): Observable<ViewportSize> {
   return resize$.pipe(
     map(getViewportSize),
     startWith(getViewportSize()),
-    distinctUntilChanged<ViewportSize>(equals)
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }

src/assets/javascripts/ui/viewport/breakpoint/index.ts

@@ -21,7 +21,7 @@
  */
 
 import { Observable, fromEventPattern } from "rxjs"
-import { startWith } from "rxjs/operators"
+import { shareReplay, startWith } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -39,6 +39,7 @@ export function fromMediaQuery(query: string): Observable<boolean> {
   return fromEventPattern<boolean>(next =>
     media.addListener(() => next(media.matches))
   ).pipe(
-    startWith(media.matches)
+    startWith(media.matches),
+    shareReplay({ bufferSize: 1, refCount: true })
   )
 }