Refactored patches by making them self-contained

src/assets/javascripts/index.ts

@@ -206,15 +206,11 @@ export function initialize(config: unknown) {
     .subscribe()
 
   patchTables({ document$ })
-    .subscribe()
-
   patchDetails({ document$, hash$ })
-    .subscribe()
 
   /* Force 1px scroll offset to trigger overflow scrolling */
   if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
     patchScrollfix({ document$ })
-      .subscribe()
 
 
 

src/assets/javascripts/patches/details/index.ts

@@ -21,12 +21,18 @@
  */
 
 import { identity } from "ramda"
-import { Observable, animationFrameScheduler, fromEvent, merge, of } from "rxjs"
+import {
+  Observable,
+  animationFrameScheduler,
+  fromEvent,
+  merge,
+  of
+} from "rxjs"
 import {
   filter,
   map,
+  mapTo,
   observeOn,
-  shareReplay,
   switchMap,
   switchMapTo,
   tap
@@ -57,16 +63,13 @@ interface MountOptions {
  * printing, so the whole content of the page is included.
  *
  * @param options - Options
- *
- * @return Details elements observable
  */
 export function patchDetails(
   { document$, hash$ }: MountOptions
-): Observable<HTMLDetailsElement[]> {
+): void {
   const els$ = document$
     .pipe(
-      map(() => getElements<HTMLDetailsElement>("details")),
-      shareReplay(1)
+      map(() => getElements<HTMLDetailsElement>("details"))
     )
 
   /* Open all details before printing */
@@ -99,14 +102,11 @@ export function patchDetails(
 
           /* Defer anchor jump to next animation frame */
           observeOn(animationFrameScheduler),
-          tap(() => {
+          mapTo(hash)
+        )
+      )
+    )
+      .subscribe(hash => {
         location.hash = hash
       })
-        )
-      )
-    )
-      .subscribe()
-
-  /* Return details elements */
-  return els$
 }

src/assets/javascripts/patches/scrollfix/index.ts

@@ -21,13 +21,7 @@
  */
 
 import { Observable, fromEvent, merge } from "rxjs"
-import {
-  map,
-  mapTo,
-  shareReplay,
-  switchMap,
-  tap
-} from "rxjs/operators"
+import { map, mapTo, switchMap } from "rxjs/operators"
 
 import { getElements } from "observables"
 
@@ -56,19 +50,18 @@ interface MountOptions {
  * @see https://bit.ly/2SCtAOO - Original source
  *
  * @param options - Options
- *
- * @return Elements observable
  */
 export function patchScrollfix(
   { document$ }: MountOptions
-): Observable<HTMLElement> {
-  return document$
+): void {
+  document$
     .pipe(
       map(() => getElements("[data-md-scrollfix]")),
-      switchMap(els => merge(
-        ...els.map(el => fromEvent(el, "touchstart").pipe(mapTo(el))))
-      ),
-      tap(el => {
+      switchMap(els => merge(...els.map(el => (
+        fromEvent(el, "touchstart").pipe(mapTo(el))
+      ))))
+    )
+      .subscribe(el => {
         const top = el.scrollTop
 
         /* We're at the top of the container */
@@ -79,7 +72,5 @@ export function patchScrollfix(
         } else if (top + el.offsetHeight === el.scrollHeight) {
           el.scrollTop = top - 1
         }
-      }),
-      shareReplay(1)
-    )
+      })
 }

src/assets/javascripts/patches/table/index.ts

@@ -21,7 +21,7 @@
  */
 
 import { Observable } from "rxjs"
-import { map, shareReplay, tap } from "rxjs/operators"
+import { map } from "rxjs/operators"
 
 import { getElements } from "observables"
 import { renderTable } from "templates"
@@ -48,22 +48,19 @@ interface MountOptions {
  * scrolling on smaller screen sizes.
  *
  * @param options - Options
- *
- * @return Table elements observable
  */
 export function patchTables(
   { document$ }: MountOptions
-): Observable<HTMLTableElement[]> {
+): void {
   const placeholder = document.createElement("table")
-  return document$
+  document$
     .pipe(
-      map(() => getElements<HTMLTableElement>("table:not([class])")),
-      tap(els => {
+      map(() => getElements<HTMLTableElement>("table:not([class])"))
+    )
+      .subscribe(els => {
         for (const el of els) {
           el.replaceWith(placeholder)
           placeholder.replaceWith(renderTable(el))
         }
-      }),
-      shareReplay(1)
-    )
+      })
 }