@abreen/tada 1.15.8 → 1.15.10

package/src/navigate/runtime.ts

@@ -130,6 +130,14 @@ function getLocationKey(window: Window): string {
   );
 }
 
+function isAbortError(err: unknown): boolean {
+  return err instanceof Error && err.name === 'AbortError';
+}
+
+function isActiveNavigation(controller: AbortController): boolean {
+  return currentAbortController === controller && !controller.signal.aborted;
+}
+
 export function initNavigation(window: Window): void {
   currentAbortController = null;
   historyIndex = 0;
@@ -191,6 +199,8 @@ export async function navigateToUrl(
 
   const controller = new AbortController();
   currentAbortController = controller;
+  document.documentElement.classList.remove('nav-forward', 'nav-back');
+  cleanupViewTransitionNames(document);
 
   const header = document.querySelector('header');
   header?.classList.add('loading');
@@ -199,21 +209,46 @@ export async function navigateToUrl(
   try {
     response = await globals.fetch(url, { signal: controller.signal });
   } catch (err: unknown) {
+    if (!isActiveNavigation(controller)) {
+      return;
+    }
     header?.classList.remove('loading');
-    if (err instanceof Error && err.name === 'AbortError') {
+    if (isAbortError(err)) {
       return;
     }
     globals.setLocationHref(window, url);
     return;
   }
 
+  if (!isActiveNavigation(controller)) {
+    return;
+  }
+
   if (!response.ok) {
     header?.classList.remove('loading');
     globals.setLocationHref(window, url);
     return;
   }
 
-  const html = await response.text();
+  let html: string;
+  try {
+    html = await response.text();
+  } catch (err: unknown) {
+    if (!isActiveNavigation(controller)) {
+      return;
+    }
+    header?.classList.remove('loading');
+    if (isAbortError(err)) {
+      return;
+    }
+    globals.setLocationHref(window, url);
+    return;
+  }
+
+  if (!isActiveNavigation(controller)) {
+    return;
+  }
+
   header?.classList.remove('loading');
 
   const DOMParserCtor = (window as unknown as { DOMParser: typeof DOMParser })
@@ -233,7 +268,11 @@ export async function navigateToUrl(
 
   const parsed = new URL(url);
 
-  const doSwap = () => {
+  const doSwap = (): boolean => {
+    if (!isActiveNavigation(controller)) {
+      return false;
+    }
+
     teardownPerPageComponents();
     swapContent(document, newDoc);
     updateHead(document, newDoc);
@@ -257,6 +296,7 @@ export async function navigateToUrl(
 
     scrollByIndex.set(historyIndex, window.scrollY);
     scrollByLocation.set(getLocationKey(window), window.scrollY);
+    return true;
   };
 
   const transitionDoc = document as Document & {
@@ -295,7 +335,9 @@ export async function navigateToUrl(
     );
 
     const transition = transitionDoc.startViewTransition(() => {
-      doSwap();
+      if (!doSwap()) {
+        return;
+      }
 
       const newTitleEl = document.querySelector('.title-and-info');
       const newHeaderHeight =
@@ -323,13 +365,23 @@ export async function navigateToUrl(
     });
 
     await transition.finished;
+    if (!isActiveNavigation(controller)) {
+      return;
+    }
+
     document.documentElement.classList.remove('nav-forward', 'nav-back');
     cleanupViewTransitionNames(document);
   } else {
-    doSwap();
+    if (!doSwap()) {
+      return;
+    }
   }
 
   await mountPerPageComponents(window);
+  if (!isActiveNavigation(controller)) {
+    return;
+  }
+
   currentAbortController = null;
   dispatchNavigationEvent(window);
 }

package/src/page-update/index.ts

@@ -10,8 +10,9 @@ import { NAVIGATION_EVENT, refreshCurrentPage } from '../navigate/runtime';
 import { globals } from '../globals';
 
 const POLL_INTERVAL_MS = 600_000;
+export const PAGE_UPDATE_REFRESH_EVENT = 'tada:page-update-refresh';
 
-export interface PageUpdateOptions {
+interface PageUpdateOptions {
   pollIntervalMs?: number;
   refreshPage?: (window: Window) => Promise<void>;
 }
@@ -247,7 +248,10 @@ export function mountPageUpdate(
   }
 
   function handleReloadClick() {
-    void refreshPage(window);
+    void refreshPage(window).then(() => {
+      const EventCtor = (window as unknown as { Event: typeof Event }).Event;
+      window.dispatchEvent(new EventCtor(PAGE_UPDATE_REFRESH_EVENT));
+    });
   }
 
   reloadButton.addEventListener('click', handleReloadClick);

package/src/search/index.ts

@@ -1,15 +1,9 @@
 import { getElement, applyBasePath } from '../util';
 import { getPdfPageNumber, groupPdfResults } from './pdf-utils';
 import type { Result } from './pdf-utils';
-import {
-  getResponseValidators,
-  hasResponseValidatorsChanged,
-  type ResponseValidators,
-} from '../validators';
+import { PAGE_UPDATE_REFRESH_EVENT } from '../page-update';
 import { globals } from '../globals';
 
-const MAX_RESULTS = 24;
-
 interface PagefindSubResult {
   title?: string;
   url: string;
@@ -34,17 +28,14 @@ interface PagefindSearchResult {
 }
 
 interface Pagefind {
+  destroy(): Promise<void>;
   init(): Promise<void>;
+  options(options: { basePath: string }): Promise<void>;
   search(query: string): Promise<{ results: PagefindSearchResult[] }>;
 }
 
 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 = {
@@ -66,8 +57,7 @@ async function doSearch(query: string, window: Window): Promise<SearchState> {
   }
 
   const search = await pagefind.search(query);
-  const slice = search.results.slice(0, MAX_RESULTS);
-  const data = await Promise.all(slice.map(r => r.data()));
+  const data = await Promise.all(search.results.map(r => r.data()));
 
   const titlePostfix = __SITE_TITLE_POSTFIX__;
   const results: Result[] = data.map((d: PagefindResult) => {
@@ -144,9 +134,9 @@ function render(
   ol.tabIndex = -1;
   ol.setAttribute('aria-label', 'Search results');
 
-  const totalVisible = Math.min(state.results.length, MAX_RESULTS);
+  const totalVisible = state.results.length;
 
-  state.results.slice(0, MAX_RESULTS).forEach((result, i) => {
+  state.results.forEach((result, i) => {
     const a = doc.createElement('a');
     a.id = `result-${i}`;
     a.className = 'result';
@@ -180,7 +170,7 @@ function render(
     li.setAttribute('aria-labelledby', `title-${i}`);
     li.appendChild(a);
 
-    const subsToShow = result.subResults.slice(0, 5);
+    const subsToShow = result.subResults;
     if (subsToShow.length > 0) {
       const subList = doc.createElement('ul');
       subList.className = 'sub-results';
@@ -255,10 +245,8 @@ function render(
       countSpan.textContent = 'No results';
     } else if (n === 1) {
       countSpan.textContent = 'One result';
-    } else if (n <= MAX_RESULTS) {
-      countSpan.textContent = `${n} results`;
     } else {
-      countSpan.textContent = `Showing first ${MAX_RESULTS} results`;
+      countSpan.textContent = `${n} results`;
     }
   }
 
@@ -291,64 +279,56 @@ export default (window: Window) => {
   // Unhide (hidden via inline style in template to prevent FOUC)
   resultsDiv.style.display = '';
 
-  let entryValidators: ResponseValidators = { etag: null, lastModified: null };
-  let lastIndexCheck = 0;
-  let indexCheckInFlight = false;
-
-  async function loadPagefind() {
-    if (pagefind) {
-      return;
-    }
-
-    pagefind = (await globals.importModule(
-      applyBasePath('/pagefind/pagefind.js'),
-    )) as Pagefind;
-
-    await pagefind.init();
-
-    const res = await globals.fetch(
-      applyBasePath('/pagefind/pagefind-entry.json'),
-      { cache: 'no-cache' },
-    );
+  let pagefindLoadPromise: Promise<boolean> | null = null;
+  let pagefindLoadGeneration = 0;
 
-    if (res.ok) {
-      entryValidators = getResponseValidators(res);
+  function pagefindModulePath(generation: number) {
+    const path = applyBasePath('/pagefind/pagefind.js');
+    if (generation === 0) {
+      return path;
     }
+    return `${path}?tada-pagefind-refresh=${generation}`;
   }
 
-  async function checkForIndexUpdate() {
-    if (indexCheckInFlight || globals.now() - lastIndexCheck < 3000) {
-      return;
+  async function loadPagefind(): Promise<boolean> {
+    if (pagefind) {
+      return true;
     }
-    lastIndexCheck = globals.now();
-    indexCheckInFlight = true;
-    try {
-      const res = await globals.fetch(
-        applyBasePath('/pagefind/pagefind-entry.json'),
-        { method: 'HEAD', cache: 'no-cache' },
-      );
-      if (!res.ok) {
-        return;
+
+    const generation = pagefindLoadGeneration;
+    pagefindLoadPromise ??= (async () => {
+      const loadedPagefind = (await globals.importModule(
+        pagefindModulePath(generation),
+      )) as Pagefind;
+
+      if (generation !== pagefindLoadGeneration) {
+        return false;
+      }
+      if (generation > 0) {
+        await loadedPagefind.options({ basePath: applyBasePath('/pagefind/') });
+      }
+      if (generation !== pagefindLoadGeneration) {
+        return false;
       }
-      const newValidators = getResponseValidators(res);
-      if (hasResponseValidatorsChanged(entryValidators, newValidators)) {
-        invalidateUpdates();
-        pagefind = null;
-        await loadPagefind();
-        const updateId = ++latestUpdateId;
-        await update(updateId);
+      await loadedPagefind.init();
+      if (generation !== pagefindLoadGeneration) {
+        await loadedPagefind.destroy();
+        return false;
       }
-    } catch {
-      // best-effort
+      pagefind = loadedPagefind;
+      return true;
+    })();
+
+    const promise = pagefindLoadPromise;
+    try {
+      return await promise;
     } finally {
-      indexCheckInFlight = false;
+      if (pagefindLoadPromise === promise) {
+        pagefindLoadPromise = null;
+      }
     }
   }
 
-  loadPagefind().catch(err => {
-    console.log(`failed to load Pagefind: ${err}`);
-  });
-
   const state: State = {
     value: '',
     showResults: false,
@@ -367,10 +347,11 @@ export default (window: Window) => {
     if (updateId !== latestUpdateId) {
       return;
     }
-    if (nextState) {
-      state.results = nextState.results;
-      state.totalResults = nextState.totalResults;
+    if (!nextState) {
+      return;
     }
+    state.results = nextState.results;
+    state.totalResults = nextState.totalResults;
     if (!state.showResults) {
       return;
     }
@@ -386,6 +367,55 @@ export default (window: Window) => {
     latestUpdateId += 1;
   }
 
+  function loadPagefindAndUpdate() {
+    loadPagefind()
+      .then(loadedCurrentPagefind => {
+        if (loadedCurrentPagefind && state.showResults) {
+          queueUpdate();
+        }
+      })
+      .catch(err => {
+        console.log(`failed to load Pagefind: ${err}`);
+        if (state.showResults) {
+          render(input!, resultsContainer, state, false);
+        }
+      });
+  }
+
+  function invalidatePagefind() {
+    pagefindLoadGeneration += 1;
+    pagefind = null;
+    pagefindLoadPromise = null;
+    invalidateUpdates();
+  }
+
+  async function reloadPagefindAfterPageUpdateRefresh() {
+    const stalePagefind = pagefind;
+    invalidatePagefind();
+    if (state.showResults) {
+      render(input!, resultsContainer, state, true);
+    }
+    if (stalePagefind) {
+      try {
+        await stalePagefind.destroy();
+      } catch (err) {
+        console.log(`failed to destroy Pagefind: ${err}`);
+      }
+    }
+    loadPagefindAndUpdate();
+  }
+
+  function handlePageUpdateRefresh() {
+    reloadPagefindAfterPageUpdateRefresh().catch(err => {
+      console.log(`failed to reload Pagefind: ${err}`);
+      if (state.showResults) {
+        render(input!, resultsContainer, state, false);
+      }
+    });
+  }
+
+  loadPagefindAndUpdate();
+
   function hide() {
     if (!state.showResults) {
       return;
@@ -422,7 +452,6 @@ export default (window: Window) => {
     if (previous && !resultsContainer.contains(previous)) {
       previousFocus = previous;
     }
-    checkForIndexUpdate().catch(() => {});
     if (!state.showResults) {
       state.showResults = true;
       queueUpdate();
@@ -568,8 +597,13 @@ export default (window: Window) => {
   window.addEventListener('pointerdown', handleWindowPointerDown);
   window.addEventListener('pointermove', handleWindowPointerMove);
   window.addEventListener('keydown', handleWindowKeyDown);
+  window.addEventListener(PAGE_UPDATE_REFRESH_EVENT, handlePageUpdateRefresh);
 
   return () => {
+    window.removeEventListener(
+      PAGE_UPDATE_REFRESH_EVENT,
+      handlePageUpdateRefresh,
+    );
     window.removeEventListener('keydown', handleWindowKeyDown);
     window.removeEventListener('pointermove', handleWindowPointerMove);
     window.removeEventListener('pointerdown', handleWindowPointerDown);

package/src/search/pdf-utils.ts

@@ -1,4 +1,4 @@
-export type SubResult = { title: string; url: string; excerpt: string };
+type SubResult = { title: string; url: string; excerpt: string };
 export type Result = {
   title: string;
   titleHtml: string | null;

package/src/slides/index.ts

@@ -1,5 +1,5 @@
 interface TraceToolbarState {
-  hidden: boolean;
+  hidden: HTMLElement['hidden'];
   ariaHidden: string | null;
 }
 

package/src/timezone/index.ts

@@ -1,50 +1,14 @@
+import {
+  DEFAULT_PERIOD_STYLE,
+  detectPeriodStyle,
+  normalizeHM,
+  to12Hour,
+  type PeriodStyle,
+} from './time-format';
+
 const STORAGE_KEY = 'timezoneSelection';
 const TIMEZONE_SELECT_LABEL = 'Time zone';
 
-type PeriodStyle = [am: string, pm: string];
-
-const DEFAULT_PERIOD_STYLE: PeriodStyle = ['a.m.', 'p.m.'];
-
-const PERIOD_PATTERNS: { pattern: RegExp; style: PeriodStyle }[] = [
-  { pattern: /[AP]\.M\./, style: ['A.M.', 'P.M.'] },
-  { pattern: /[AP]M/, style: ['AM', 'PM'] },
-  { pattern: /[ap]\.m\./, style: ['a.m.', 'p.m.'] },
-  { pattern: /[ap]m/, style: ['am', 'pm'] },
-];
-
-export function detectPeriodStyle(text: string): PeriodStyle | null {
-  for (const { pattern, style } of PERIOD_PATTERNS) {
-    if (pattern.test(text)) {
-      return style;
-    }
-  }
-  return null;
-}
-
-function pad(n: number | string) {
-  return String(n).padStart(2, '0');
-}
-
-export function to12Hour(
-  h: number,
-  m: number,
-  style: PeriodStyle | null = DEFAULT_PERIOD_STYLE,
-) {
-  const hour12 = ((h + 11) % 12) + 1;
-  if (!style) {
-    return `${hour12}:${pad(m)}`;
-  }
-  const period = h >= 12 ? style[1] : style[0];
-  return `${hour12}:${pad(m)} ${period}`;
-}
-
-export function normalizeHM(totalMinutes: number) {
-  const mins = ((totalMinutes % 1440) + 1440) % 1440;
-  const h = Math.floor(mins / 60);
-  const m = mins % 60;
-  return [h, m] as const;
-}
-
 function getDayShift(totalMinutes: number) {
   // Negative partial days like -30 minutes should still count as the previous day.
   return Math.floor(totalMinutes / 1440);

package/src/timezone/time-format.ts

@@ -0,0 +1,43 @@
+export type PeriodStyle = [am: string, pm: string];
+
+export const DEFAULT_PERIOD_STYLE: PeriodStyle = ['a.m.', 'p.m.'];
+
+const PERIOD_PATTERNS: { pattern: RegExp; style: PeriodStyle }[] = [
+  { pattern: /[AP]\.M\./, style: ['A.M.', 'P.M.'] },
+  { pattern: /[AP]M/, style: ['AM', 'PM'] },
+  { pattern: /[ap]\.m\./, style: ['a.m.', 'p.m.'] },
+  { pattern: /[ap]m/, style: ['am', 'pm'] },
+];
+
+export function detectPeriodStyle(text: string): PeriodStyle | null {
+  for (const { pattern, style } of PERIOD_PATTERNS) {
+    if (pattern.test(text)) {
+      return style;
+    }
+  }
+  return null;
+}
+
+function pad(n: number | string) {
+  return String(n).padStart(2, '0');
+}
+
+export function to12Hour(
+  h: number,
+  m: number,
+  style: PeriodStyle | null = DEFAULT_PERIOD_STYLE,
+) {
+  const hour12 = ((h + 11) % 12) + 1;
+  if (!style) {
+    return `${hour12}:${pad(m)}`;
+  }
+  const period = h >= 12 ? style[1] : style[0];
+  return `${hour12}:${pad(m)} ${period}`;
+}
+
+export function normalizeHM(totalMinutes: number) {
+  const mins = ((totalMinutes % 1440) + 1440) % 1440;
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  return [h, m] as const;
+}

package/src/toc/index.ts

@@ -1,14 +1,14 @@
 import { debounce } from '../util';
+import {
+  alertToTableItem,
+  getHighlightIndexes,
+  headingToTableItem,
+  switchCurrent,
+  type Dinkus,
+} from './model';
 
 const LATENCY_MS = 50;
 
-export type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
-export type AlertType = 'warning' | 'note';
-
-export type Alert = { type: AlertType; title: string };
-export type Heading = { level: HeadingLevel; innerHtml: string; id: string };
-export type Dinkus = { type: 'dinkus' };
-
 function getContainer(parent: HTMLElement): HTMLElement | null {
   return parent.querySelector('nav.toc');
 }
@@ -40,27 +40,6 @@ function scrollIfNeeded(element: HTMLElement, doc: Document) {
   container.scrollTo({ top: desiredScrollTop });
 }
 
-export function getHighlightIndexes(items: (Heading | Alert | Dinkus)[]) {
-  const indexes: (number | null)[] = [];
-  let currentHeadingIndex: number | null = null;
-  let tocIndex = 0;
-
-  items.forEach(item => {
-    if (!('level' in item) && item.type === 'dinkus') {
-      return;
-    }
-
-    if ('level' in item) {
-      currentHeadingIndex = tocIndex;
-    }
-
-    indexes.push(currentHeadingIndex ?? tocIndex);
-    tocIndex++;
-  });
-
-  return indexes;
-}
-
 function getHeadingsAndAlerts(
   parent: HTMLElement,
 ): (HTMLHeadingElement | HTMLDivElement)[] {
@@ -97,57 +76,6 @@ function getViewportActivationPoint(win: Window, doc: Document) {
   return headerOffset + (win.innerHeight - headerOffset) / 3;
 }
 
-export function headingToTableItem(el: HTMLHeadingElement): Heading {
-  const level = el.tagName[1] as HeadingLevel;
-
-  const subtitle = el.querySelector('.heading-subtitle');
-  const subtitleText = subtitle?.textContent || '';
-  let mainText = el.textContent || '';
-
-  if (mainText.length > 0 && subtitleText.length > 0) {
-    mainText = mainText.replace(subtitleText, '').trim();
-    return {
-      level,
-      id: el.id,
-      innerHtml: `${mainText}: <span class="heading-subtitle">${subtitleText}</span>`,
-    };
-  }
-  return { level, id: el.id, innerHtml: el.innerHTML };
-}
-
-export function alertToTableItem(el: HTMLElement): Alert | null {
-  const classes = el.className
-    .split(' ')
-    .map(cl => cl.trim())
-    .filter(cl => cl != 'alert');
-
-  const firstClass = classes[0];
-  if (firstClass === 'warning' || firstClass === 'note') {
-    let title = el.querySelector('.title')?.innerHTML;
-    if (!title) {
-      if (firstClass === 'warning') {
-        title = 'Warning';
-      } else {
-        title = 'Note';
-      }
-    }
-
-    return { type: firstClass, title };
-  }
-
-  return null;
-}
-
-export function switchCurrent(
-  oldCurrent: HTMLElement | null,
-  newCurrent: HTMLElement,
-) {
-  if (oldCurrent) {
-    oldCurrent.classList.remove('current');
-  }
-  newCurrent.classList.add('current');
-}
-
 export default (window: Window) => {
   const toc = window.document.querySelector('nav.toc') as HTMLElement;
   if (toc == null) {