Fixed regression with header title not being updated correctly

material/base.html

@@ -217,7 +217,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.35272152.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.8c3a7438.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/bundle.ts

@@ -63,7 +63,8 @@ import {
 import {
   SearchIndex,
   setupClipboardJS,
-  setupInstantLoading
+  setupInstantLoading,
+  setupVersionSelector
 } from "./integrations"
 import {
   patchIndeterminate,
@@ -107,6 +108,10 @@ setupClipboardJS({ alert$ })
 if (feature("navigation.instant"))
   setupInstantLoading({ document$, location$, viewport$ })
 
+/* Set up version selector */
+if (config.version?.provider === "mike")
+  setupVersionSelector()
+
 /* Always close drawer and search on navigation */
 merge(location$, target$)
   .pipe(
@@ -168,10 +173,6 @@ const control$ = merge(
   ...getComponentElements("header")
     .map(el => mountHeader(el, { viewport$, header$, main$ })),
 
-  /* Header title */
-  ...getComponentElements("header-title")
-    .map(el => mountHeaderTitle(el, { viewport$, header$ })),
-
   /* Search */
   ...getComponentElements("search")
     .map(el => mountSearch(el, { index$, keyboard$ })),
@@ -192,6 +193,10 @@ const content$ = defer(() => merge(
   ...getComponentElements("content")
     .map(el => mountContent(el, { target$, viewport$, print$ })),
 
+  /* Header title */
+  ...getComponentElements("header-title")
+    .map(el => mountHeaderTitle(el, { viewport$, header$ })),
+
   /* Sidebar */
   ...getComponentElements("sidebar")
     .map(el => el.getAttribute("data-md-type") === "navigation"

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

@@ -34,7 +34,6 @@ import {
   tap
 } from "rxjs/operators"
 
-import { configuration } from "~/_"
 import {
   resetHeaderTitleState,
   setHeaderTitleState
@@ -42,15 +41,9 @@ import {
 import {
   Viewport,
   getElement,
-  getElementOrThrow,
   getElementSize,
-  requestJSON,
   watchViewportAt
 } from "~/browser"
-import {
-  Version,
-  renderVersionSelector
-} from "~/templates"
 
 import { Component } from "../../_"
 import { Header } from "../_"
@@ -130,7 +123,7 @@ export function mountHeaderTitle(
   const internal$ = new Subject<HeaderTitle>()
   internal$
     .pipe(
-      observeOn(animationFrameScheduler),
+      observeOn(animationFrameScheduler)
     )
       .subscribe(({ active }) => {
         if (active)
@@ -139,15 +132,6 @@ export function mountHeaderTitle(
           resetHeaderTitleState(el)
       })
 
-  /* Render version selector */
-  const config = configuration()
-  if (config.version?.provider === "mike")
-    requestJSON<Version[]>(new URL("versions.json", config.base))
-      .subscribe(versions => {
-        const topic = getElementOrThrow(".md-header__topic", el)
-        topic.appendChild(renderVersionSelector(versions))
-      })
-
   /* Obtain headline, if any */
   const headline = getElement<HTMLHeadingElement>("article h1")
   if (typeof headline === "undefined")

src/assets/javascripts/integrations/index.ts

@@ -23,3 +23,4 @@
 export * from "./clipboard"
 export * from "./instant"
 export * from "./search"
+export * from "./version"

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * 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 { configuration } from "~/_"
+import { getElementOrThrow, requestJSON } from "~/browser"
+import { Version, renderVersionSelector } from "~/templates"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Set up version selector
+ */
+export function setupVersionSelector(): void {
+  const config = configuration()
+  requestJSON<Version[]>(new URL("versions.json", config.base))
+    .subscribe(versions => {
+      const topic = getElementOrThrow(".md-header__topic")
+      topic.appendChild(renderVersionSelector(versions))
+    })
+}