Refactored to use URLs at all times

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.14f179c1.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.16398d48.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.14f179c1.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.16398d48.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.14f179c1.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.16398d48.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

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

@@ -58,7 +58,7 @@ interface MountOptions {
  */
 export function mountHeaderTitle(
   { header$, viewport$ }: MountOptions
-): OperatorFunction<HTMLElement, any> {
+): OperatorFunction<HTMLElement, boolean> {
   return pipe(
     switchMap(el => useComponent("main")
       .pipe(

src/assets/javascripts/index.ts

@@ -59,7 +59,6 @@ import {
   watchToggle,
   setToggle,
   getElements,
-  getLocation,
   watchMedia,
   watchDocument,
   watchLocation,
@@ -213,7 +212,7 @@ export function initialize(config: unknown) {
   const navigation$ = useComponent("navigation")
     .pipe(
       mountNavigation({ header$, main$, viewport$, screen$ }),
-      shareReplay(1)
+      shareReplay(1) // shareReplay because there might be late subscribers
     )
 
   const toc$ = useComponent("toc")
@@ -260,7 +259,8 @@ export function initialize(config: unknown) {
 
   // Close drawer and search on hash change
   // put into navigation...
-  hash$.subscribe(x => {
+  // TODO: replace with popstate?
+  hash$.subscribe(() => {
     useToggle("drawer").subscribe(el => {
       setToggle(el, false)
     })

src/assets/javascripts/observables/agent/document/switch/index.ts

@@ -68,7 +68,7 @@ export function watchDocumentSwitch(
 ): Observable<Document> {
   return location$
     .pipe(
-      startWith(location),        // TODO: getLocation should return URL or Location
+      startWith(getLocation()),
       distinctUntilKeyChanged("pathname"),
       skip(1),
 
@@ -81,7 +81,7 @@ export function watchDocumentSwitch(
         .pipe<Document, Document>(
           pluck("response"),
           catchError(() => {
-            setLocation(url.href) // TODO: setLocation should accept URL or location
+            setLocation(url)
             return NEVER
           })
         )

src/assets/javascripts/observables/agent/location/_/index.ts

@@ -20,8 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import { Subject, fromEvent } from "rxjs"
+import { Subject } from "rxjs"
-import { map } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -30,19 +29,24 @@ import { map } from "rxjs/operators"
 /**
  * Retrieve location
  *
- * @return Location
+ * This function will return a `URL` object (and not `Location`) in order to
+ * normalize typings across the application. Furthermore, locations need to be
+ * tracked without setting them and `Location` is a singleton which represents
+ * the current location.
+ *
+ * @return URL
  */
-export function getLocation(): string {
+export function getLocation(): URL {
-  return location.href
+  return new URL(location.href)
 }
 
 /**
  * Set location
  *
- * @param value - New location
+ * @param url - URL to change to
  */
-export function setLocation(value: string): void {
+export function setLocation(url: URL): void {
-  location.href = value
+  location.href = url.href
 }
 
 /* ------------------------------------------------------------------------- */
@@ -53,13 +57,5 @@ export function setLocation(value: string): void {
  * @return Location subject
  */
 export function watchLocation(): Subject<URL> {
-  const location$ = new Subject<URL>()
+  return new Subject<URL>()
-  // fromEvent<PopStateEvent>(window, "popstate")
-  //   .pipe(
-  //     map(getLocation)
-  //   )
-  //     .subscribe(location$)
-
-  /* Return location subject */
-  return location$
 }