@abreen/tada 1.11.3 → 1.13.4

package/src/navigate/index.ts

@@ -12,6 +12,7 @@ import {
   setCurrentPath,
   setHistoryIndex,
 } from './runtime';
+import { globals } from '../globals';
 
 function findAnchor(event: MouseEvent): HTMLAnchorElement | null {
   const target = event.target as HTMLElement | null;
@@ -77,11 +78,7 @@ export default function mountNavigate(window: Window): () => void {
       clearSearch(window.document);
       closeHeaderDetails(window.document);
       if (url.hash) {
-        // location.hash assignment performs a real fragment navigation:
-        // updates :target, fires hashchange (which the TOC listens for),
-        // creates a new history entry, and scrolls to the element.
-        // pushState would do none of those things.
-        window.location.hash = url.hash.slice(1);
+        globals.setLocationHash(window, url.hash);
       }
       return;
     }

package/src/navigate/lifecycle.ts

@@ -5,6 +5,7 @@ import mountTimeZone from '../timezone';
 import mountCode from '../code';
 import mountTrace from '../trace';
 import mountPrint from '../print';
+import mountSlides from '../slides';
 import { scheduleTask } from '../util';
 
 const PER_PAGE_COMPONENTS: Record<
@@ -17,6 +18,7 @@ const PER_PAGE_COMPONENTS: Record<
   timeZone: mountTimeZone,
   code: mountCode,
   trace: mountTrace,
+  slides: mountSlides,
   print: mountPrint,
 };
 
@@ -39,7 +41,7 @@ export async function mountPerPageComponents(
           }
           resolve();
         } catch (err) {
-          if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+          if (__IS_DEV__) {
             console.error(`Failed to mount ${name} component:`, String(err));
           }
           reject();

package/src/navigate/runtime.ts

@@ -1,4 +1,5 @@
 import { mountPerPageComponents, teardownPerPageComponents } from './lifecycle';
+import { globals } from '../globals';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
@@ -196,19 +197,19 @@ export async function navigateToUrl(
 
   let response: Response;
   try {
-    response = await fetch(url, { signal: controller.signal });
+    response = await globals.fetch(url, { signal: controller.signal });
   } catch (err: unknown) {
     header?.classList.remove('loading');
     if (err instanceof Error && err.name === 'AbortError') {
       return;
     }
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
   if (!response.ok) {
     header?.classList.remove('loading');
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
@@ -226,7 +227,7 @@ export async function navigateToUrl(
     .querySelector('meta[name="generator"]')
     ?.getAttribute('content');
   if (!currentGenerator || !newGenerator || newGenerator !== currentGenerator) {
-    window.location.href = url;
+    globals.setLocationHref(window, url);
     return;
   }
 
@@ -246,7 +247,7 @@ export async function navigateToUrl(
 
     if (typeof scrollTarget === 'string') {
       const urlWithHash = parsed.pathname + parsed.search + '#' + scrollTarget;
-      window.location.replace(urlWithHash);
+      globals.replaceLocation(window, urlWithHash);
       window.history.replaceState({ navIndex: historyIndex }, '', urlWithHash);
     } else if (typeof scrollTarget === 'number') {
       window.scrollTo({ top: scrollTarget });

package/src/page-update/index.ts

@@ -7,6 +7,7 @@ import {
   type ResponseValidators,
 } from '../validators';
 import { NAVIGATION_EVENT, refreshCurrentPage } from '../navigate/runtime';
+import { globals } from '../globals';
 
 const POLL_INTERVAL_MS = 600_000;
 
@@ -96,7 +97,7 @@ export function mountPageUpdate(
 
   function scheduleNextCheck() {
     clearTimer();
-    if (document.hidden) {
+    if (globals.isDocumentHidden(document)) {
       return;
     }
     timer = window.setTimeout(() => {
@@ -107,17 +108,20 @@ export function mountPageUpdate(
   async function fetchValidators(
     path: string,
   ): Promise<ResponseValidators | null> {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] HEAD ${path} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] HEAD ${path} hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
-    const res = await fetch(path, { method: 'HEAD', cache: 'no-cache' });
+    const res = await globals.fetch(path, {
+      method: 'HEAD',
+      cache: 'no-cache',
+    });
 
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] HEAD ${path} -> ${res.status} etag=${res.headers.get('ETag')} last-modified=${res.headers.get('Last-Modified')} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] HEAD ${path} -> ${res.status} etag=${res.headers.get('ETag')} last-modified=${res.headers.get('Last-Modified')} hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
@@ -170,7 +174,7 @@ export function mountPageUpdate(
       // best-effort
     } finally {
       checkInFlight = false;
-      if (rerunAfterCurrentCheck && !document.hidden) {
+      if (rerunAfterCurrentCheck && !globals.isDocumentHidden(document)) {
         rerunAfterCurrentCheck = false;
         shouldRerun = true;
       } else {
@@ -191,20 +195,20 @@ export function mountPageUpdate(
     hasBaseline = false;
     hideToast();
     clearTimer();
-    if (!document.hidden) {
+    if (!globals.isDocumentHidden(document)) {
       void checkForUpdate();
     }
   }
 
   function handleVisibilityChange() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
-        `[page-update] visibilitychange hidden=${document.hidden} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
+        `[page-update] visibilitychange hidden=${globals.isDocumentHidden(document)} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
 
     clearTimer();
-    if (document.hidden) {
+    if (globals.isDocumentHidden(document)) {
       return;
     }
 
@@ -212,7 +216,7 @@ export function mountPageUpdate(
   }
 
   function handleNavigation() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] navigation path=${window.location.pathname} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -227,7 +231,7 @@ export function mountPageUpdate(
   }
 
   function handleWindowFocus() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] window focus visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -235,7 +239,7 @@ export function mountPageUpdate(
   }
 
   function handleWindowBlur() {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] window blur visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
@@ -253,8 +257,8 @@ export function mountPageUpdate(
   window.addEventListener('blur', handleWindowBlur);
   window.addEventListener(NAVIGATION_EVENT, handleNavigation);
 
-  if (!document.hidden) {
-    if (typeof __IS_DEV__ !== 'undefined' && __IS_DEV__) {
+  if (!globals.isDocumentHidden(document)) {
+    if (__IS_DEV__) {
       console.log(
         `[page-update] mount path=${currentPath} interval=${pollIntervalMs} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );

package/src/print/style.scss

@@ -82,10 +82,6 @@
     border: none;
   }
 
-  a.heading-anchor::after {
-    display: none;
-  }
-
   .external-link-tail::after,
   a.external:not(:has(.external-link-tail))::after {
     content: none;

package/src/search/index.ts

@@ -6,6 +6,7 @@ import {
   hasResponseValidatorsChanged,
   type ResponseValidators,
 } from '../validators';
+import { globals } from '../globals';
 
 const MAX_RESULTS = 24;
 
@@ -39,6 +40,11 @@ interface Pagefind {
 
 let pagefind: Pagefind | null = null;
 
+// Unit tests need to clear the module-scoped Pagefind instance between cases.
+export function resetPagefindForTest() {
+  pagefind = null;
+}
+
 type SubResult = { title: string; url: string; excerpt: string };
 
 type State = {
@@ -48,18 +54,18 @@ type State = {
   totalResults: number;
 };
 
-async function doSearch(state: State) {
+type SearchState = Pick<State, 'results' | 'totalResults'> | null;
+
+async function doSearch(query: string, window: Window): Promise<SearchState> {
   if (pagefind == null) {
-    return;
+    return null;
   }
 
-  if (!state.value) {
-    state.results = [];
-    state.totalResults = 0;
-    return;
+  if (!query) {
+    return { results: [], totalResults: 0 };
   }
 
-  const search = await pagefind.search(state.value);
+  const search = await pagefind.search(query);
   const slice = search.results.slice(0, MAX_RESULTS);
   const data = await Promise.all(slice.map(r => r.data()));
 
@@ -95,8 +101,7 @@ async function doSearch(state: State) {
   });
 
   const grouped = groupPdfResults(results);
-  state.totalResults = grouped.length;
-  state.results = grouped;
+  return { totalResults: grouped.length, results: grouped };
 }
 
 function applyHighlight(
@@ -295,15 +300,16 @@ export default (window: Window) => {
       return;
     }
 
-    pagefind = (await import(
-      applyBasePath('/pagefind/pagefind.js')
+    pagefind = (await globals.importModule(
+      applyBasePath('/pagefind/pagefind.js'),
     )) as Pagefind;
 
     await pagefind.init();
 
-    const res = await fetch(applyBasePath('/pagefind/pagefind-entry.json'), {
-      cache: 'no-cache',
-    });
+    const res = await globals.fetch(
+      applyBasePath('/pagefind/pagefind-entry.json'),
+      { cache: 'no-cache' },
+    );
 
     if (res.ok) {
       entryValidators = getResponseValidators(res);
@@ -311,24 +317,26 @@ export default (window: Window) => {
   }
 
   async function checkForIndexUpdate() {
-    if (indexCheckInFlight || Date.now() - lastIndexCheck < 3000) {
+    if (indexCheckInFlight || globals.now() - lastIndexCheck < 3000) {
       return;
     }
-    lastIndexCheck = Date.now();
+    lastIndexCheck = globals.now();
     indexCheckInFlight = true;
     try {
-      const res = await fetch(applyBasePath('/pagefind/pagefind-entry.json'), {
-        method: 'HEAD',
-        cache: 'no-cache',
-      });
+      const res = await globals.fetch(
+        applyBasePath('/pagefind/pagefind-entry.json'),
+        { method: 'HEAD', cache: 'no-cache' },
+      );
       if (!res.ok) {
         return;
       }
       const newValidators = getResponseValidators(res);
       if (hasResponseValidatorsChanged(entryValidators, newValidators)) {
+        invalidateUpdates();
         pagefind = null;
         await loadPagefind();
-        await update();
+        const updateId = ++latestUpdateId;
+        await update(updateId);
       }
     } catch {
       // best-effort
@@ -348,17 +356,36 @@ export default (window: Window) => {
     totalResults: 0,
   };
 
-  async function update() {
+  let latestUpdateId = 0;
+
+  async function update(updateId: number) {
     if (state.showResults) {
       render(input!, resultsContainer, state, true);
     }
-    await doSearch(state);
+    const query = state.value;
+    const nextState = await doSearch(query, window);
+    if (updateId !== latestUpdateId) {
+      return;
+    }
+    if (nextState) {
+      state.results = nextState.results;
+      state.totalResults = nextState.totalResults;
+    }
     if (!state.showResults) {
       return;
     }
     render(input!, resultsContainer, state, false);
   }
 
+  function queueUpdate() {
+    const updateId = ++latestUpdateId;
+    update(updateId).catch(() => {});
+  }
+
+  function invalidateUpdates() {
+    latestUpdateId += 1;
+  }
+
   function hide() {
     if (!state.showResults) {
       return;
@@ -374,13 +401,14 @@ export default (window: Window) => {
     }
     state.value = value;
     if (value.length === 0) {
+      invalidateUpdates();
       hide();
       state.results = [];
       state.totalResults = 0;
       return;
     }
     state.showResults = true;
-    update().catch(() => {});
+    queueUpdate();
   }
 
   function handleWindowPointerMove() {
@@ -397,7 +425,7 @@ export default (window: Window) => {
     checkForIndexUpdate().catch(() => {});
     if (!state.showResults) {
       state.showResults = true;
-      update().catch(() => {});
+      queueUpdate();
     }
   }