Improved observable flows

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7de51c1a.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7de51c1a.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.24f9b6fb.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.24f9b6fb.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",

material/base.html

@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.7de51c1a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.24f9b6fb.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [

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

@@ -62,12 +62,6 @@ export function mountSearch(
   return pipe(
     switchMap(() => {
 
-      /* Mount search reset */
-      const reset$ = useComponent("search-reset")
-        .pipe(
-          mountSearchReset()
-        )
-
       /* Mount search query */
       const query$ = useComponent<HTMLInputElement>("search-query")
         .pipe(
@@ -75,6 +69,12 @@ export function mountSearch(
           shareReplay(1)
         )
 
+      /* Mount search reset */
+      const reset$ = useComponent("search-reset")
+        .pipe(
+          mountSearchReset()
+        )
+
       /* Mount search result */
       const result$ = useComponent("search-result")
         .pipe(

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

@@ -21,7 +21,13 @@
  */
 
 import { OperatorFunction, pipe } from "rxjs"
-import { mapTo, switchMap, switchMapTo, tap } from "rxjs/operators"
+import {
+  mapTo,
+  startWith,
+  switchMap,
+  switchMapTo,
+  tap
+} from "rxjs/operators"
 
 import { setElementFocus, watchSearchReset } from "observables"
 
@@ -44,6 +50,7 @@ export function mountSearchReset(): OperatorFunction<HTMLElement, void> {
         tap(setElementFocus),
         mapTo(undefined)
       )
-    )
+    ),
+    startWith(undefined)
   )
 }

src/assets/javascripts/components/tabs/index.ts

@@ -83,7 +83,7 @@ export function mountTabs(
 
           /* Mount tabs below screen breakpoint */
           } else {
-            return of({ hidden: screen })
+            return of({ hidden: true })
           }
         })
       )

src/assets/javascripts/index.ts

@@ -187,12 +187,18 @@ export function initialize(config: unknown) {
 
   /* ----------------------------------------------------------------------- */
 
-  setupKeyboard()
+  setupKeyboard({ keyboard$ })
 
-  // must be in another scope!
-  const dialog = renderDialog("Copied to Clipboard")
+  patchTables({ document$ })
+  patchDetails({ document$, hash$ })
+  patchSource({ document$ })
+
+  /* Force 1px scroll offset to trigger overflow scrolling */
+  if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
+    patchScrollfix({ document$ })
 
   // snackbar for copy to clipboard
+  const dialog = renderDialog("Copied to Clipboard")
   setupClipboard({ document$ })
     .pipe(
       switchMap(ev => {
@@ -211,14 +217,6 @@ export function initialize(config: unknown) {
     )
     .subscribe()
 
-  patchTables({ document$ })
-  patchDetails({ document$, hash$ })
-  patchSource({ document$ })
-
-  /* Force 1px scroll offset to trigger overflow scrolling */
-  if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
-    patchScrollfix({ document$ })
-
   // TODO: general keyboard handler...
   // put into main!?
 

src/assets/javascripts/integrations/keyboard/index.ts

@@ -32,11 +32,21 @@ import {
   setElementFocus,
   setToggle,
   useToggle,
-  watchKeyboard,
   watchToggle
 } from "observables"
 import { not, takeIf } from "utilities"
 
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Setup options
+ */
+interface SetupOptions {
+  keyboard$: Observable<Key>           /* Keyboard observable */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -46,8 +56,9 @@ import { not, takeIf } from "utilities"
  *
  * @return Keyboard observable
  */
-export function setupKeyboard(): Observable<Key> {
-  const keyboard$ = watchKeyboard()
+export function setupKeyboard(
+  { keyboard$ }: SetupOptions
+): Observable<Key> {
 
   /* Setup keyboard handlers in search mode */
   const toggle$ = useToggle("search")

src/assets/javascripts/patches/source/github/index.ts

@@ -23,7 +23,12 @@
 import { Repo, User } from "github-types"
 import { Observable, of } from "rxjs"
 import { ajax } from "rxjs/ajax"
-import { filter, pluck, shareReplay, switchMap } from "rxjs/operators"
+import {
+  filter,
+  pluck,
+  shareReplay,
+  switchMap
+} from "rxjs/operators"
 
 import { round } from "utilities"
 

src/assets/javascripts/patches/source/gitlab/index.ts

@@ -23,7 +23,12 @@
 import { ProjectSchema } from "gitlab"
 import { Observable } from "rxjs"
 import { ajax } from "rxjs/ajax"
-import { filter, map, pluck, shareReplay } from "rxjs/operators"
+import {
+  filter,
+  map,
+  pluck,
+  shareReplay
+} from "rxjs/operators"
 
 import { round } from "utilities"
 

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

@@ -21,7 +21,7 @@
  */
 
 import { NEVER, Observable } from "rxjs"
-import { catchError, filter, switchMap } from "rxjs/operators"
+import { catchError, map, switchMap, take } from "rxjs/operators"
 
 import { getElementOrThrow, getElements } from "observables"
 import { renderSource } from "templates"
@@ -100,11 +100,11 @@ export function patchSource(
 ): void {
   document$
     .pipe(
-      switchMap(() => {
-        const el = getElementOrThrow<HTMLAnchorElement>(".md-source[href]")
-        return cache(`${hash(el.href)}`, () => fetchSourceFacts(el.href))
-      }),
-      filter(facts => !!facts.length),
+      map(() => getElementOrThrow<HTMLAnchorElement>(".md-source[href]")),
+      take(1),
+      switchMap(({ href }) => (
+        cache(`${hash(href)}`, () => fetchSourceFacts(href))
+      )),
       catchError(() => NEVER)
     )
       .subscribe(facts => {