Improved overall structure

src/assets/javascripts/components/header/title/index.ts

@@ -20,9 +20,9 @@
  * IN THE SOFTWARE.
  */
 
-import { NEVER, Observable, OperatorFunction, pipe } from "rxjs"
+import { Observable, OperatorFunction, pipe } from "rxjs"
 import {
-  catchError,
+  filter,
   map,
   shareReplay,
   switchMap
@@ -31,7 +31,7 @@ import {
 import {
   Header,
   Viewport,
-  getElementOrThrow,
+  getElement,
   paintHeaderTitle,
   watchViewportAt
 } from "observables"
@@ -67,15 +67,15 @@ export function mountHeaderTitle(
   return pipe(
     switchMap(el => useComponent("main")
       .pipe(
-        map(main => getElementOrThrow("h1, h2, h3, h4, h5, h6", main)),
-        switchMap(headline => watchViewportAt(headline, { header$, viewport$ })
+        map(main => getElement("h1, h2, h3, h4, h5, h6", main)!),
+        filter(hx => typeof hx !== "undefined"),
+        switchMap(hx => watchViewportAt(hx, { header$, viewport$ })
           .pipe(
-            map(({ offset: { y } }) => y >= headline.offsetHeight),
+            map(({ offset: { y } }) => y >= hx.offsetHeight),
             paintHeaderTitle(el)
           )
         ),
-        shareReplay(1),
-        catchError(() => NEVER)
+        shareReplay(1)
       )
     )
   )

src/assets/javascripts/components/search/_/index.ts

@@ -20,17 +20,11 @@
  * IN THE SOFTWARE.
  */
 
-import { OperatorFunction, combineLatest, pipe } from "rxjs"
+import { Observable, OperatorFunction, combineLatest, pipe } from "rxjs"
 import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import { SearchResult } from "integrations/search"
-import { SearchQuery, WorkerHandler } from "observables"
-import { SearchMessage } from "workers"
-
-import { useComponent } from "../../_"
-import { mountSearchQuery } from "../query"
-import { mountSearchReset } from "../reset"
-import { mountSearchResult } from "../result"
+import { SearchQuery } from "observables"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -44,6 +38,19 @@ export interface Search {
   result: SearchResult[]               /* Search result list */
 }
 
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mount options
+ */
+interface MountOptions {
+  query$: Observable<SearchQuery>      /* Search query observable */
+  reset$: Observable<void>             /* Search reset observable */
+  result$: Observable<SearchResult[]>  /* Search result observable */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -51,42 +58,18 @@ export interface Search {
 /**
  * Mount search from source observable
  *
- * @param handler - Worker handler
  * @param options - Options
  *
  * @return Search observable
  */
 export function mountSearch(
-  handler: WorkerHandler<SearchMessage>
+  { query$, reset$, result$ }: MountOptions
 ): OperatorFunction<HTMLElement, Search> {
   return pipe(
-    switchMap(() => {
-
-      /* Mount search query */
-      const query$ = useComponent<HTMLInputElement>("search-query")
-        .pipe(
-          mountSearchQuery(handler),
-          shareReplay(1)
-        )
-
-      /* Mount search reset */
-      const reset$ = useComponent("search-reset")
-        .pipe(
-          mountSearchReset()
-        )
-
-      /* Mount search result */
-      const result$ = useComponent("search-result")
-        .pipe(
-          mountSearchResult(handler, { query$ })
-        )
-
-      /* Combine into a single hot observable */
-      return combineLatest([query$, result$, reset$])
-        .pipe(
-          map(([query, result]) => ({ query, result })),
-          shareReplay(1)
-        )
-    })
+    switchMap(() => combineLatest([query$, result$, reset$])
+      .pipe(
+        map(([query, result]) => ({ query, result })),
+        shareReplay(1)
+      ))
   )
 }

src/assets/javascripts/components/search/query/index.ts

@@ -41,6 +41,17 @@ import {
   SearchQueryMessage
 } from "workers"
 
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mount options
+ */
+interface MountOptions {
+  transform?(value: string): string    /* Transformation function */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -49,16 +60,17 @@ import {
  * Mount search query from source observable
  *
  * @param handler - Worker handler
+ * @param options - Options
  *
  * @return Operator function
  */
 export function mountSearchQuery(
-  { tx$ }: WorkerHandler<SearchMessage>
+  { tx$ }: WorkerHandler<SearchMessage>, options: MountOptions = {}
 ): OperatorFunction<HTMLInputElement, SearchQuery> {
   const toggle$ = useToggle("search")
   return pipe(
     switchMap(el => {
-      const query$ = watchSearchQuery(el)
+      const query$ = watchSearchQuery(el, options)
 
       /* Subscribe worker to search query */
       query$