Replaced operators: ajax -> fetch, pluck -> map

CHANGELOG

@@ -3,7 +3,7 @@ mkdocs-material-6.x.x (2020-09-xx)
   * Fixed stemmer support for file:// protocol through `iframe-worker`
   * Fixed details marker showing for search result in Firefox
   * Fixed tabbing behavior when search query is not empty
-  * Reduced size of vendor bundle by 25% (67kb → 65kb)
+  * Reduced size of vendor bundle by 10% (67kb → 61kb)
   * Removed mkdocs and readthedocs themes from Docker image
 
 mkdocs-material-6.0.0 (2020-09-25)

material/assets/manifest.json

@@ -1,14 +1,14 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.a50b2d70.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.a50b2d70.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.bdf98b33.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.bdf98b33.min.js.map",
-  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.e0a2b82c.min.js",
-  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.e0a2b82c.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.40703c20.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.40703c20.min.css.map",
-  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.082f5519.min.css",
-  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.082f5519.min.css.map",
-  "assets/stylesheets/palette.css": "assets/stylesheets/palette.0eb3995c.min.css",
-  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.0eb3995c.min.css.map"
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.6f400298.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.6f400298.min.js.map",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.e3b5b4d0.min.js",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.e3b5b4d0.min.js.map",
+  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2693be28.min.js",
+  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2693be28.min.js.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.6a8334c2.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.6a8334c2.min.css.map",
+  "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.2ca3414a.min.css",
+  "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.2ca3414a.min.css.map",
+  "assets/stylesheets/palette.css": "assets/stylesheets/palette.037a1494.min.css",
+  "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.037a1494.min.css.map"
 }

material/assets/stylesheets/overrides.2ca3414a.min.css

@@ -1,3 +1,3 @@
 .md-typeset .tx-insiders{color:#e91e63}.md-typeset .tx-switch button{cursor:pointer;transition:opacity 250ms}.md-typeset .tx-switch button:hover{opacity:.75}.md-typeset .tx-switch button>code{display:block;color:var(--md-primary-bg-color);background-color:var(--md-primary-fg-color)}.md-typeset .tx-columns{-moz-columns:2;columns:2}.md-typeset .tx-columns>*{-moz-column-break-inside:avoid;break-inside:avoid}.md-announce a,.md-announce a:focus,.md-announce a:hover{color:currentColor}.md-announce strong{white-space:nowrap}.md-announce .twitter{margin-left:.2em;color:#00acee}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}[data-md-color-scheme=slate] .tx-container{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%)}@-webkit-keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}@keyframes tx-heart{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.15)}}.tx-content__footer{margin-top:1rem;text-align:center}.tx-content__footer a{display:inline-block;color:#e91e63;transition:transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),color 125ms}.tx-content__footer a:focus,.tx-content__footer a:hover{transform:scale(1.2)}.tx-content__footer hr{display:inline-block;width:2rem;margin:1em;vertical-align:middle;background-color:currentColor;border:none}.tx-heart{-webkit-animation:tx-heart 1000ms infinite;animation:tx-heart 1000ms infinite}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}@media screen and (max-width: 29.9375em){.tx-hero h1{font-size:1.4rem}}.tx-hero__content{padding-bottom:6rem}@media screen and (min-width: 60em){.tx-hero{display:flex;align-items:stretch}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{order:1;width:38rem;transform:translateX(4rem)}}@media screen and (min-width: 76.25em){.tx-hero__image{transform:translateX(8rem)}}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button:hover,.tx-hero .md-button:focus{color:var(--md-default-bg-color);background-color:var(--md-accent-fg-color);border-color:var(--md-accent-fg-color)}.tx-hero .md-button--primary{color:#894da8;background-color:var(--md-primary-bg-color);border-color:var(--md-primary-bg-color)}
 
-/*# sourceMappingURL=overrides.082f5519.min.css.map*/
+/*# sourceMappingURL=overrides.2ca3414a.min.css.map*/

material/base.html

@@ -34,10 +34,10 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.40703c20.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.6a8334c2.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.0eb3995c.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.037a1494.min.css' | url }}">
         {% if palette.primary %}
           {% import "partials/palette.html" as map %}
           {% set primary = map.primary(
@@ -172,8 +172,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.bdf98b33.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.a50b2d70.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.e3b5b4d0.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.6f400298.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",
@@ -200,7 +200,7 @@
           base: "{{ base_url }}",
           features: {{ config.theme.features or [] | tojson }},
           search: Object.assign({
-            worker: "{{ 'assets/javascripts/worker/search.e0a2b82c.min.js' | url }}"
+            worker: "{{ 'assets/javascripts/worker/search.2693be28.min.js' | url }}"
           }, typeof search !== "undefined" && search)
         })
       </script>

material/overrides/main.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="{{ title }}">
   <meta name="twitter:description" content="{{ config.site_description }}">
   <meta name="twitter:image" content="{{ image }}">
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.082f5519.min.css' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/overrides.2ca3414a.min.css' | url }}">
 {% endblock %}
 {% block announce %}
   <a href="https://twitter.com/squidfunk">

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

@@ -22,7 +22,7 @@
 
 import { Observable, Subject, fromEvent } from "rxjs"
 import {
-  pluck,
+  map,
   share,
   switchMapTo,
   tap,
@@ -90,7 +90,7 @@ export function watchWorker<T extends WorkerMessage>(
   /* Intercept messages from worker-like objects */
   const rx$ = fromEvent<MessageEvent>(worker, "message")
     .pipe<T>(
-      pluck("data")
+      map(({ data }) => data)
     )
 
   /* Send and receive messages, return hot observable */

src/assets/javascripts/components/main/react/index.ts

@@ -33,7 +33,6 @@ import {
   finalize,
   map,
   observeOn,
-  pluck,
   switchMap,
   tap
 } from "rxjs/operators"
@@ -82,7 +81,7 @@ export function watchMain(
   /* Compute necessary adjustment for header */
   const adjust$ = header$
     .pipe(
-      pluck("height"),
+      map(({ height }) => height),
       distinctUntilChanged()
     )
 

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

@@ -26,7 +26,6 @@ import {
   filter,
   map,
   mapTo,
-  pluck,
   startWith,
   switchMap
 } from "rxjs/operators"
@@ -93,7 +92,7 @@ export function mountSearchResult(
       return rx$
         .pipe(
           filter(isSearchResultMessage),
-          pluck("data"),
+          map(({ data }) => data),
           applySearchResult(el, { query$, ready$, fetch$ }),
           startWith([])
         )

src/assets/javascripts/index.ts

@@ -36,7 +36,6 @@ import {
   of,
   NEVER
 } from "rxjs"
-import { ajax } from "rxjs/ajax"
 import {
   delay,
   switchMap,
@@ -46,7 +45,6 @@ import {
   observeOn,
   take,
   shareReplay,
-  pluck,
   catchError,
   map
 } from "rxjs/operators"
@@ -94,7 +92,7 @@ import {
   patchSource,
   patchScripts
 } from "patches"
-import { isConfig, translate } from "utilities"
+import { isConfig } from "utilities"
 
 /* ------------------------------------------------------------------------- */
 
@@ -134,38 +132,6 @@ export function resetScrollLock(
     window.scrollTo(0, value)
 }
 
-/* ----------------------------------------------------------------------------
- * Helper functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Set up search index
- *
- * @param data - Search index
- *
- * @return Search index
- */
-function setupSearchIndex(                                                      // Hack: move this outside here, temporarily...
-  { config, docs, index }: SearchIndex
-): SearchIndex {
-
-  /* Override default language with value from translation */
-  if (config.lang.length === 1 && config.lang[0] === "en")
-    config.lang = [translate("search.config.lang")]
-
-  /* Override default separator with value from translation */
-  if (config.separator === "[\\s\\-]+")
-    config.separator = translate("search.config.separator")
-
-  /* Set pipeline from translation */
-  const pipeline = translate("search.config.pipeline")
-    .split(/\s*,\s*/)
-    .filter(Boolean) as SearchIndexPipeline
-
-  /* Return search index after defaulting */
-  return { config, docs, index, pipeline }
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -277,21 +243,11 @@ export function initialize(config: unknown) {
             ? from(index)
             : base$
                 .pipe(
-                  switchMap(base => ajax({
-                    url: `${base}/search/search_index.json`,
-                    responseType: "json",
-                    withCredentials: true
-                  })
-                    .pipe<SearchIndex>(
-                      pluck("response")
+                  switchMap(base => fetch(`${base}/search/search_index.json`, {
+                    credentials: "same-origin"
+                  }).then(res => res.json())) // SearchIndex
                 )
         )
-                )
-        )
-          .pipe(
-            map(setupSearchIndex),
-            shareReplay(1)
-          )
 
         return of(setupSearchWorker(config.search.worker, {
           base$, index$
@@ -396,19 +352,15 @@ export function initialize(config: unknown) {
     config.features.includes("navigation.instant") &&
     location.protocol !== "file:"
   ) {
+    const dom = new DOMParser()
 
     /* Fetch sitemap and extract URL whitelist */
     base$
       .pipe(
-        switchMap(base => ajax({
-          url: `${base}/sitemap.xml`,
-          responseType: "document",
-          withCredentials: true
-        })
-          .pipe<Document>(
-            pluck("response")
-          )
-        ),
+        switchMap(base => from(fetch(`${base}/sitemap.xml`)
+          .then(res => res.text())
+          .then(text => dom.parseFromString(text, "text/xml"))
+        )),
         withLatestFrom(base$),
         map(([document, base]) => {
           const urls = getElements("loc", document)

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

@@ -20,8 +20,7 @@
  * IN THE SOFTWARE.
  */
 
-import { NEVER, Observable, Subject, fromEvent, merge, of } from "rxjs"
-import { ajax } from "rxjs//ajax"
+import { NEVER, Observable, Subject, from, fromEvent, merge, of } from "rxjs"
 import {
   bufferCount,
   catchError,
@@ -30,7 +29,6 @@ import {
   distinctUntilKeyChanged,
   filter,
   map,
-  pluck,
   sample,
   share,
   skip,
@@ -168,7 +166,7 @@ export function setupInstantLoading(
   merge(push$, pop$)
     .pipe(
       distinctUntilChanged((prev, next) => prev.url.href === next.url.href),
-      pluck("url")
+      map(({ url }) => url)
     )
       .subscribe(location$)
 
@@ -177,11 +175,9 @@ export function setupInstantLoading(
     .pipe(
       distinctUntilKeyChanged("pathname"),
       skip(1),
-      switchMap(url => ajax({
-        url: url.href,
-        responseType: "text",
-        withCredentials: true
-      })
+      switchMap(url => from(fetch(url.href, {
+        credentials: "same-origin"
+      }).then(res => res.text()))
         .pipe(
           catchError(() => {
             setLocation(url)
@@ -205,7 +201,7 @@ export function setupInstantLoading(
   const dom = new DOMParser()
   ajax$
     .pipe(
-      map(({ response }) => dom.parseFromString(response, "text/html"))
+      map(response => dom.parseFromString(response, "text/html"))
     )
       .subscribe(document$)
 

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

@@ -82,7 +82,7 @@ export type SearchIndexPipeline = SearchIndexPipelineFn[]
 export interface SearchIndex {
   config: SearchIndexConfig            /* Search index configuration */
   docs: SearchIndexDocument[]          /* Search index documents */
-  index?: object | string              /* Prebuilt or serialized index */
+  index?: object                       /* Prebuilt index */
   pipeline?: SearchIndexPipeline       /* Search index pipeline */
 }
 
@@ -204,13 +204,9 @@ export class Search {
           this.add(doc)
       })
 
-    /* Handle prebuilt or serialized index */
+    /* Handle prebuilt index */
     } else {
-      this.index = lunr.Index.load(
-        typeof index === "string"
-          ? JSON.parse(index)
-          : index
-      )
+      this.index = lunr.Index.load(index)
     }
   }
 

src/assets/javascripts/integrations/search/document/index.ts

@@ -20,6 +20,7 @@
  * IN THE SOFTWARE.
  */
 
+// @ts-ignore
 import * as escapeHTML from "escape-html"
 
 import { SearchIndexDocument } from "../_"

src/assets/javascripts/integrations/search/worker/_/index.ts

@@ -30,13 +30,14 @@ import {
 
 import { WorkerHandler, watchWorker } from "browser"
 
-import { SearchIndex } from "../../_"
+import { SearchIndex, SearchIndexPipeline } from "../../_"
 import {
   SearchMessage,
   SearchMessageType,
   SearchSetupMessage,
   isSearchResultMessage
 } from "../message"
+import { translate } from "utilities"
 
 /* ----------------------------------------------------------------------------
  * Helper types
@@ -54,6 +55,38 @@ interface SetupOptions {
  * Functions
  * ------------------------------------------------------------------------- */
 
+/**
+ * Set up search index
+ *
+ * @param data - Search index
+ *
+ * @return Search index
+ */
+function setupSearchIndex(
+  { config, docs, index }: SearchIndex
+): SearchIndex {
+
+  /* Override default language with value from translation */
+  if (config.lang.length === 1 && config.lang[0] === "en")
+    config.lang = [translate("search.config.lang")]
+
+  /* Override default separator with value from translation */
+  if (config.separator === "[\\s\\-]+")
+    config.separator = translate("search.config.separator")
+
+  /* Set pipeline from translation */
+  const pipeline = translate("search.config.pipeline")
+    .split(/\s*,\s*/)
+    .filter(Boolean) as SearchIndexPipeline
+
+  /* Return search index after defaulting */
+  return { config, docs, index, pipeline }
+}
+
+/* ----------------------------------------------------------------------------
+ * Helper functions
+ * ------------------------------------------------------------------------- */
+
 /**
  * Set up search web worker
  *
@@ -92,7 +125,7 @@ export function setupSearchWorker(
     .pipe(
       map<SearchIndex, SearchSetupMessage>(data => ({
         type: SearchMessageType.SETUP,
-        data
+        data: setupSearchIndex(data)
       })),
       observeOn(asyncScheduler)
     )

src/assets/javascripts/integrations/search/worker/main/index.ts

@@ -22,11 +22,7 @@
 
 import "lunr"
 
-import {
-  Search,
-  SearchIndex,
-  SearchIndexConfig
-} from "../../_"
+import { Search, SearchIndexConfig } from "../../_"
 import {
   SearchMessage,
   SearchMessageType
@@ -63,20 +59,6 @@ let index: Search
  * Helper functions
  * ------------------------------------------------------------------------- */
 
-/**
- * Fetch search index from given URL
- *
- * @param url - Search index URL
- *
- * @return Promise resolving with search index
- */
-async function fetchSearchIndex(url: string): Promise<SearchIndex> {
-  return fetch(url, {
-    credentials: "same-origin"
-  })
-    .then(res => res.json())
-}
-
 /**
  * Fetch (= import) multi-language support through `lunr-languages`
  *
@@ -143,13 +125,8 @@ export async function handler(
 
     /* Search setup message */
     case SearchMessageType.SETUP:
-      const data = typeof message.data === "string"
-        ? await fetchSearchIndex(message.data)
-        : message.data
-
-      /* Set up search index with multi-language support */
-      await setupSearchLanguages(data.config)
-      index = new Search(data)
+      await setupSearchLanguages(message.data.config)
+      index = new Search(message.data)
       return {
         type: SearchMessageType.READY
       }

src/assets/javascripts/integrations/search/worker/message/index.ts

@@ -43,7 +43,7 @@ export const enum SearchMessageType {
  */
 export interface SearchSetupMessage {
   type: SearchMessageType.SETUP        /* Message type */
-  data: SearchIndex | string           /* Message data */
+  data: SearchIndex                    /* Message data */
 }
 
 /**

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

@@ -21,9 +21,8 @@
  */
 
 import { Repo, User } from "github-types"
-import { Observable } from "rxjs"
-import { ajax } from "rxjs/ajax"
-import { filter, map, pluck } from "rxjs/operators"
+import { Observable, from } from "rxjs"
+import { filter, map } from "rxjs/operators"
 
 import { round } from "utilities"
 
@@ -44,20 +43,17 @@ import { SourceFacts } from ".."
 export function fetchSourceFactsFromGitHub(
   user: string, repo?: string
 ): Observable<SourceFacts> {
-  return ajax({
-    url: typeof repo !== "undefined"
+  const url = typeof repo !== "undefined"
     ? `https://api.github.com/repos/${user}/${repo}`
-      : `https://api.github.com/users/${user}`,
-    responseType: "json"
-  })
+    : `https://api.github.com/users/${user}`
+  return from(fetch(url).then(res => res.json()))
     .pipe(
       filter(({ status }) => status === 200),
-      pluck("response"),
-      map(data => {
+      map(({ response }) => {
 
         /* GitHub repository */
         if (typeof repo !== "undefined") {
-          const { stargazers_count, forks_count }: Repo = data
+          const { stargazers_count, forks_count }: Repo = response
           return [
             `${round(stargazers_count || 0)} Stars`,
             `${round(forks_count || 0)} Forks`
@@ -65,7 +61,7 @@ export function fetchSourceFactsFromGitHub(
 
         /* GitHub user/organization */
         } else {
-          const { public_repos }: User = data
+          const { public_repos }: User = response
           return [
             `${round(public_repos || 0)} Repositories`
           ]

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

@@ -21,9 +21,8 @@
  */
 
 import { ProjectSchema } from "gitlab"
-import { Observable } from "rxjs"
-import { ajax } from "rxjs/ajax"
-import { filter, map, pluck } from "rxjs/operators"
+import { Observable, from } from "rxjs"
+import { filter, map } from "rxjs/operators"
 
 import { round } from "utilities"
 
@@ -44,13 +43,11 @@ import { SourceFacts } from ".."
 export function fetchSourceFactsFromGitLab(
   base: string, project: string
 ): Observable<SourceFacts> {
-  return ajax({
-    url: `https://${base}/api/v4/projects/${encodeURIComponent(project)}`,
-    responseType: "json"
-  })
+  const url = `https://${base}/api/v4/projects/${encodeURIComponent(project)}`
+  return from(fetch(url).then(res => res.json()))
     .pipe(
       filter(({ status }) => status === 200),
-      pluck("response"),
+      map(({ response }) => response),
       map(({ star_count, forks_count }: ProjectSchema) => ([
         `${round(star_count)} Stars`,
         `${round(forks_count)} Forks`