Cleaned up search worker integration

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7d91fa9c.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7d91fa9c.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
-  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
-  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.659deb65.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.659deb65.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.3340e0de.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.3340e0de.min.js.map",
+  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.0ec816aa.min.js",
+  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.0ec816aa.min.js.map",
   "assets/stylesheets/main.css": "assets/stylesheets/main.b32d3181.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
 }

material/base.html

@@ -177,8 +177,8 @@ <h1>{{ page.title | default(config.site_name, true)}}</h1>
       <script>var __config={}</script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.7d91fa9c.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.3340e0de.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.659deb65.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",
@@ -194,18 +194,16 @@ <h1>{{ page.title | default(config.site_name, true)}}</h1>
         {%- set _ = translations.update({ key: lang.t(key) }) -%}
       {%- endfor -%}
       <script id="__lang" type="application/json">
-        {{ translations | tojson }}
+        {{- translations | tojson -}}
       </script>
       <script>
-        __material = initialize(Object.assign({
-          url: {
-            base: "{{ base_url }}",
-            worker: {
-              search: "{{ 'assets/javascripts/worker/search.2613054f.min.js' | url }}"
-            }
-          },
-          features: {{ config.theme.features | tojson }}
-        }, typeof __config !== "undefined" ? __config : {}))
+        app = initialize({
+          base: "{{ base_url }}",
+          features: {{ config.theme.features | tojson }},
+          search: {
+            worker: "{{ 'assets/javascripts/worker/search.0ec816aa.min.js' | url }}"
+          }
+        })
       </script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>

src/assets/javascripts/browser/document/switch/index.ts

@@ -51,7 +51,7 @@ interface WatchOptions {
 /**
  * Watch document switch
  *
- * This function returns an observables that fetches a document if the provided
+ * This function returns an observable that fetches a document if the provided
  * location observable emits a new value (i.e. URL). If the emitted URL points
  * to the same page, the request is effectively ignored (i.e. when only the
  * fragment identifier changes).

src/assets/javascripts/browser/element/_/index.ts

@@ -87,3 +87,17 @@ export function getElements<T extends HTMLElement>(
 ): T[] {
   return Array.from(node.querySelectorAll<T>(selector))
 }
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Replace an element with another element
+ *
+ * @param source - Source element
+ * @param target - Target element
+ */
+export function replaceElement(
+  source: HTMLElement, target: Node
+): void {
+  source.replaceWith(target)
+}

src/assets/javascripts/browser/element/focus/index.ts

@@ -21,7 +21,7 @@
  */
 
 import { Observable, fromEvent, merge } from "rxjs"
-import { mapTo, shareReplay, startWith } from "rxjs/operators"
+import { map, shareReplay, startWith } from "rxjs/operators"
 
 import { getActiveElement } from "../_"
 
@@ -56,15 +56,12 @@ el: HTMLElement, value: boolean = true
 export function watchElementFocus(
   el: HTMLElement
 ): Observable<boolean> {
-  const focus$ = fromEvent(el, "focus")
-  const blur$  = fromEvent(el, "blur")
-
-  /* Map events to boolean state */
   return merge(
-    focus$.pipe(mapTo(true)),
-    blur$.pipe(mapTo(false))
+    fromEvent<FocusEvent>(el, "focus"),
+    fromEvent<FocusEvent>(el, "blur")
   )
     .pipe(
+      map(({ type }) => type === "focus"),
       startWith(el === getActiveElement()),
       shareReplay(1)
     )

src/assets/javascripts/browser/element/offset/index.ts

@@ -66,8 +66,8 @@ export function watchElementOffset(
   el: HTMLElement
 ): Observable<ElementOffset> {
   return merge(
-    fromEvent<UIEvent>(el, "scroll"),
-    fromEvent<UIEvent>(window, "resize")
+    fromEvent(el, "scroll"),
+    fromEvent(window, "resize")
   )
     .pipe(
       map(() => getElementOffset(el)),

src/assets/javascripts/browser/location/_/index.ts

@@ -20,7 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import { BehaviorSubject } from "rxjs"
+import { BehaviorSubject, Subject } from "rxjs"
 
 /* ----------------------------------------------------------------------------
  * Functions
@@ -52,14 +52,14 @@ export function setLocation(url: URL): void {
 /* ------------------------------------------------------------------------- */
 
 /**
- * Check whether a URL is an internal link or a file (except `.html`)
+ * Check whether a URL is a local link or a file (except `.html`)
  *
  * @param url - URL or HTML anchor element
  * @param ref - Reference URL
  *
  * @return Test result
  */
-export function isLocationInternal(
+export function isLocalLocation(
   url: URL | HTMLAnchorElement,
   ref: URL | Location = location
 ): boolean {
@@ -75,7 +75,7 @@ export function isLocationInternal(
  *
  * @return Test result
  */
-export function isLocationAnchor(
+export function isAnchorLocation(
   url: URL | HTMLAnchorElement,
   ref: URL | Location = location
 ): boolean {
@@ -90,6 +90,6 @@ export function isLocationAnchor(
  *
  * @return Location subject
  */
-export function watchLocation(): BehaviorSubject<URL> {
+export function watchLocation(): Subject<URL> {
   return new BehaviorSubject<URL>(getLocation())
 }

src/assets/javascripts/browser/location/base/index.ts

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <[email protected]>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { Observable } from "rxjs"
+import { map, shareReplay, take } from "rxjs/operators"
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch options
+ */
+interface WatchOptions {
+  location$: Observable<URL>           /* Location observable */
+}
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Watch location base
+ *
+ * @return Location base observable
+ */
+export function watchLocationBase(
+  base: string, { location$ }: WatchOptions
+): Observable<string> {
+  return location$
+    .pipe(
+      take(1),
+      map(({ href }) => new URL(base, href)
+        .toString()
+        .replace(/\/$/, "")
+      ),
+      shareReplay(1)
+    )
+}

src/assets/javascripts/browser/location/hash/index.ts

@@ -40,9 +40,9 @@ export function getLocationHash(): string {
  * Set location hash
  *
  * Setting a new fragment identifier via `location.hash` will have no effect
- * if the value doesn't change. However, when a new fragment identifier is set,
- * we want the browser to target the respective element at all times, which is
- * why we use this dirty little trick.
+ * if the value doesn't change. When a new fragment identifier is set, we want
+ * the browser to target the respective element at all times, which is why we
+ * use this dirty little trick.
  *
  * @param hash - Location hash
  */

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

@@ -21,4 +21,5 @@
  */
 
 export * from "./_"
+export * from "./base"
 export * from "./hash"

src/assets/javascripts/browser/viewport/offset/index.ts

@@ -74,8 +74,8 @@ export function setViewportOffset(
  */
 export function watchViewportOffset(): Observable<ViewportOffset> {
   return merge(
-    fromEvent<UIEvent>(window, "scroll", { passive: true }),
-    fromEvent<UIEvent>(window, "resize", { passive: true })
+    fromEvent(window, "scroll", { passive: true }),
+    fromEvent(window, "resize", { passive: true })
   )
     .pipe(
       map(getViewportOffset),

src/assets/javascripts/browser/viewport/size/index.ts

@@ -59,7 +59,7 @@ export function getViewportSize(): ViewportSize {
  * @return Viewport size observable
  */
 export function watchViewportSize(): Observable<ViewportSize> {
-  return fromEvent<UIEvent>(window, "resize")
+  return fromEvent(window, "resize")
     .pipe(
       map(getViewportSize),
       startWith(getViewportSize())

src/assets/javascripts/browser/worker/index.ts

@@ -38,7 +38,7 @@ import {
  */
 export interface WorkerMessage {
   type: unknown                        /* Message type */
-  data: unknown                        /* Message data */
+  data?: unknown                       /* Message data */
 }
 
 /**

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

@@ -29,7 +29,7 @@ import {
   switchMap
 } from "rxjs/operators"
 
-import { getElement } from "browser"
+import { getElement, replaceElement } from "browser"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -85,7 +85,7 @@ let components$: Observable<ComponentMap>
  * ------------------------------------------------------------------------- */
 
 /**
- * Setup bindings to components with given names
+ * Set up bindings to components with given names
  *
  * This function will maintain bindings to the elements identified by the given
  * names in-between document switches and update the elements in-place.
@@ -118,7 +118,7 @@ export function setupComponents(
             case "container":
             case "skip":
               if (name in prev && typeof prev[name] !== "undefined") {
-                prev[name]!.replaceWith(next[name]!)
+                replaceElement(prev[name]!, next[name]!)
                 prev[name] = next[name]
               }
               break

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

@@ -31,8 +31,9 @@ import { WorkerHandler, setToggle } from "browser"
 import {
   SearchMessage,
   SearchMessageType,
-  SearchQueryMessage
-} from "workers"
+  SearchQueryMessage,
+  SearchTransformFn
+} from "integrations"
 
 import { watchSearchQuery } from "../react"
 
@@ -56,7 +57,7 @@ export interface SearchQuery {
  * Mount options
  */
 interface MountOptions {
-  transform?(value: string): string    /* Transformation function */
+  transform?: SearchTransformFn        /* Transformation function */
 }
 
 /* ----------------------------------------------------------------------------

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

@@ -29,6 +29,7 @@ import {
 } from "rxjs/operators"
 
 import { watchElementFocus } from "browser"
+import { SearchTransformFn, defaultTransform } from "integrations"
 
 import { SearchQuery } from "../_"
 
@@ -40,28 +41,7 @@ import { SearchQuery } from "../_"
  * Watch options
  */
 interface WatchOptions {
-  transform?(value: string): string    /* Transformation function */
-}
-
-/* ----------------------------------------------------------------------------
- * Helper functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Default transformation function
- *
- * Rogue control characters are filtered before handing the query to the
- * search index, as `lunr` will throw otherwise.
- *
- * @param value - Query value
- *
- * @return Transformed query value
- */
-function defaultTransform(value: string): string {
-  return value
-    .replace(/(?:^|\s+)[*+-:^~]+(?=\s+|$)/g, "")
-    .trim()
-    .replace(/\s+|\b$/g, "* ")
+  transform?: SearchTransformFn        /* Transformation function */
 }
 
 /* ----------------------------------------------------------------------------

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

@@ -31,11 +31,11 @@ import {
 } from "rxjs/operators"
 
 import { WorkerHandler, watchElementOffset } from "browser"
-import { SearchResult } from "integrations/search"
 import {
   SearchMessage,
+  SearchResult,
   isSearchResultMessage
-} from "workers"
+} from "integrations"
 
 import { SearchQuery } from "../../query"
 import { applySearchResult } from "../react"

src/assets/javascripts/components/search/result/set/index.ts

@@ -73,7 +73,7 @@ export function resetSearchResultMeta(
  * @param child - Search result element
  */
 export function addToSearchResultList(
-  el: HTMLElement, child: HTMLElement
+  el: HTMLElement, child: Element
 ): void {
   el.appendChild(child)
 }