Fixed eager anchor tracking through debouncing

CHANGELOG

@@ -1,3 +1,25 @@
+mkdocs-material-8.0.0 (2021-11-28)
+
+  * Added support for code annotations
+  * Added support for anchor tracking
+  * Added support for version warning
+  * Added copyright partial for easier override
+  * Removed deprecated content tabs legacy implementation
+  * Removed deprecated seealso admonition type
+  * Removed deprecated site_keywords setting (unsupported by MkDocs)
+  * Removed deprecated prebuilt search index support
+  * Removed deprecated web app manifest – use customization
+  * Removed extracopyright variable – use new copyright partial
+  * Removed Disqus integation – use customization
+  * Switched to :is() selectors for simple selector lists
+  * Switched autoprefixer from last 4 years to last 2 years
+  * Improved CSS overall to match modern standards
+  * Improved CSS variable semantics for fonts
+  * Improved extensibility by restructuring partials
+  * Improved handling of details when printing
+  * Improved keyboard navigation for footnotes
+  * Fixed #3214: Search highlighting breaks site when empty
+
 mkdocs-material-7.3.6+insiders-3.2.3 (2021-11-20)
 
   * Updated Swedish and French translations

material/base.html

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

mkdocs.yml

@@ -60,7 +60,7 @@ theme:
     - navigation.tabs
     # - navigation.tabs.sticky
     - navigation.top
-    # - navigation.tracking
+    - navigation.tracking
     - search.highlight
     - search.share
     - search.suggest

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

@@ -25,6 +25,7 @@ import {
   Subject,
   bufferCount,
   combineLatest,
+  debounceTime,
   defer,
   distinctUntilChanged,
   distinctUntilKeyChanged,
@@ -34,7 +35,10 @@ import {
   scan,
   startWith,
   switchMap,
-  tap
+  takeLast,
+  takeUntil,
+  tap,
+  withLatestFrom
 } from "rxjs"
 
 import { feature } from "~/_"
@@ -243,7 +247,7 @@ export function watchTableOfContents(
  * @returns Table of contents component observable
  */
 export function mountTableOfContents(
-  el: HTMLElement, options: MountOptions
+  el: HTMLElement, { viewport$, header$ }: MountOptions
 ): Observable<Component<TableOfContents>> {
   return defer(() => {
     const push$ = new Subject<TableOfContents>()
@@ -265,31 +269,39 @@ export function mountTableOfContents(
           index === prev.length - 1
         )
       }
-
-      /* Set up anchor tracking, if enabled */
-      if (feature("navigation.tracking")) {
-        const url = getLocation()
-
-        /* Set hash fragment to active anchor */
-        const anchor = prev[prev.length - 1]
-        if (anchor && anchor.length) {
-          const [active] = anchor
-          const { hash } = new URL(active.href)
-          if (url.hash !== hash) {
-            url.hash = hash
-            history.replaceState({}, "", `${url}`)
-          }
-
-        /* Reset anchor when at the top */
-        } else {
-          url.hash = ""
-          history.replaceState({}, "", `${url}`)
-        }
-      }
     })
 
+    /* Set up anchor tracking, if enabled */
+    if (feature("navigation.tracking"))
+      viewport$
+        .pipe(
+          takeUntil(push$.pipe(takeLast(1))),
+          debounceTime(250),
+          distinctUntilKeyChanged("offset"),
+          withLatestFrom(push$)
+        )
+          .subscribe(([, { prev }]) => {
+            const url = getLocation()
+
+            /* Set hash fragment to active anchor */
+            const anchor = prev[prev.length - 1]
+            if (anchor && anchor.length) {
+              const [active] = anchor
+              const { hash } = new URL(active.href)
+              if (url.hash !== hash) {
+                url.hash = hash
+                history.replaceState({}, "", `${url}`)
+              }
+
+            /* Reset anchor when at the top */
+            } else {
+              url.hash = ""
+              history.replaceState({}, "", `${url}`)
+            }
+          })
+
     /* Create and return component */
-    return watchTableOfContents(el, options)
+    return watchTableOfContents(el, { viewport$, header$ })
       .pipe(
         tap(state => push$.next(state)),
         finalize(() => push$.complete()),