@abreen/tada 1.17.1 → 1.18.1

package/src/navigate/runtime.ts

@@ -1,11 +1,26 @@
-import { mountPerPageComponents, teardownPerPageComponents } from './lifecycle';
+import { getResponseValidators, type ResponseValidators } from '../validators';
+import {
+  mountAppearancePickerForPage,
+  mountPerPageComponents,
+  teardownPerPageComponents,
+} from './lifecycle';
 import { globals } from '../globals';
+import {
+  cleanupBreadcrumbTransitionNames,
+  getBreadcrumbItems,
+  prepareBreadcrumbTransitionStyles,
+  setBreadcrumbTransitionNames,
+  sharedBreadcrumbCount,
+} from './breadcrumbs';
 
 export const NAVIGATION_EVENT = 'tada:navigation';
 
 let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
 let currentPath = '';
+// Unlike the browser URL (which already changes on popstate), this tracks the
+// page whose content is currently displayed, for relative breadcrumb identity.
+let renderedPageUrl = '';
 
 const scrollByIndex = new Map<number, number>();
 const scrollByLocation = new Map<string, number>();
@@ -93,12 +108,22 @@ export function closeHeaderDetails(document: Document): void {
   }
 }
 
-function dispatchNavigationEvent(window: Window): void {
+export interface NavigationEventDetail {
+  path: string;
+  validators: ResponseValidators;
+}
+
+function dispatchNavigationEvent(
+  window: Window,
+  validators: ResponseValidators,
+): void {
   const CustomEventCtor = (
     window as unknown as { CustomEvent: typeof CustomEvent }
   ).CustomEvent;
   window.dispatchEvent(
-    new CustomEventCtor(NAVIGATION_EVENT, { detail: { path: currentPath } }),
+    new CustomEventCtor(NAVIGATION_EVENT, {
+      detail: { path: currentPath, validators },
+    }),
   );
 }
 
@@ -109,9 +134,6 @@ function cleanupViewTransitionNames(document: Document): void {
   const newInfo = document.querySelector(
     '.title-and-info .info',
   ) as HTMLElement | null;
-  const newBreadcrumb = document.querySelector(
-    '.title-and-info a.breadcrumb',
-  ) as HTMLElement | null;
 
   if (newH1) {
     newH1.style.viewTransitionName = '';
@@ -119,9 +141,7 @@ function cleanupViewTransitionNames(document: Document): void {
   if (newInfo) {
     newInfo.style.viewTransitionName = '';
   }
-  if (newBreadcrumb) {
-    newBreadcrumb.style.viewTransitionName = '';
-  }
+  cleanupBreadcrumbTransitionNames(document);
 }
 
 function getLocationKey(window: Window): string {
@@ -157,6 +177,7 @@ export function initNavigation(window: Window): void {
   scrollByLocation.clear();
   window.history.scrollRestoration = 'manual';
   currentPath = window.location.pathname + window.location.search;
+  renderedPageUrl = window.location.href;
   scrollByIndex.set(historyIndex, window.scrollY);
   scrollByLocation.set(getLocationKey(window), window.scrollY);
 }
@@ -288,7 +309,9 @@ export async function navigateToUrl(
     teardownPerPageComponents();
     swapContent(document, newDoc);
     updateHead(document, newDoc);
+    mountAppearancePickerForPage(window);
     currentPath = parsed.pathname + parsed.search;
+    renderedPageUrl = parsed.href;
 
     if (pushHistory) {
       historyIndex++;
@@ -320,6 +343,18 @@ export async function navigateToUrl(
     !prefersReducedMotion(window) &&
     typeof transitionDoc.startViewTransition === 'function'
   ) {
+    const oldBreadcrumbItems = getBreadcrumbItems(document, renderedPageUrl);
+    const newBreadcrumbItems = getBreadcrumbItems(newDoc, parsed.href);
+    const sharedCount = sharedBreadcrumbCount(
+      oldBreadcrumbItems,
+      newBreadcrumbItems,
+    );
+    prepareBreadcrumbTransitionStyles(
+      document,
+      oldBreadcrumbItems.length,
+      newBreadcrumbItems.length,
+      sharedCount,
+    );
     const titleEl = document.querySelector('.title-and-info');
     const headerHeight =
       document.querySelector('header')?.getBoundingClientRect().height ?? 0;
@@ -329,18 +364,18 @@ export async function navigateToUrl(
     if (titleVisible) {
       const h1 = titleEl.querySelector('h1') as HTMLElement | null;
       const info = titleEl.querySelector('.info') as HTMLElement | null;
-      const breadcrumb = titleEl.querySelector(
-        'a.breadcrumb',
-      ) as HTMLElement | null;
       if (h1) {
         h1.style.viewTransitionName = 'page-title';
       }
       if (info) {
         info.style.viewTransitionName = 'page-info';
       }
-      if (breadcrumb) {
-        breadcrumb.style.viewTransitionName = 'page-breadcrumb';
-      }
+      setBreadcrumbTransitionNames(
+        document,
+        renderedPageUrl,
+        sharedCount,
+        'leave',
+      );
     }
 
     document.documentElement.classList.add(
@@ -362,18 +397,18 @@ export async function navigateToUrl(
       if (newTitleVisible && newTitleEl) {
         const h1 = newTitleEl.querySelector('h1') as HTMLElement | null;
         const info = newTitleEl.querySelector('.info') as HTMLElement | null;
-        const breadcrumb = newTitleEl.querySelector(
-          'a.breadcrumb',
-        ) as HTMLElement | null;
         if (h1) {
           h1.style.viewTransitionName = 'page-title';
         }
         if (info) {
           info.style.viewTransitionName = 'page-info';
         }
-        if (breadcrumb) {
-          breadcrumb.style.viewTransitionName = 'page-breadcrumb';
-        }
+        setBreadcrumbTransitionNames(
+          document,
+          renderedPageUrl,
+          sharedCount,
+          'enter',
+        );
       }
     });
 
@@ -396,7 +431,7 @@ export async function navigateToUrl(
   }
 
   currentAbortController = null;
-  dispatchNavigationEvent(window);
+  dispatchNavigationEvent(window, getResponseValidators(response));
 }
 
 export async function refreshCurrentPage(window: Window): Promise<void> {

package/src/page-update/index.ts

@@ -72,7 +72,9 @@ export function mountPageUpdate(
   const { container, toast, reloadButton, dismissButton } =
     createToast(document);
 
-  let currentPath = window.location.pathname;
+  let currentPath = window.location.pathname + window.location.search;
+  let navigationGeneration = 0;
+  let disposed = false;
   let baseline = EMPTY_RESPONSE_VALIDATORS;
   let dismissedValidatorKey: string | null = null;
   let nextValidator: ResponseValidators | null = null;
@@ -98,7 +100,7 @@ export function mountPageUpdate(
 
   function scheduleNextCheck() {
     clearTimer();
-    if (globals.isDocumentHidden(document)) {
+    if (disposed || globals.isDocumentHidden(document)) {
       return;
     }
     timer = window.setTimeout(() => {
@@ -145,11 +147,16 @@ export function mountPageUpdate(
     }
 
     const requestedPath = currentPath;
-    let shouldRerun = false;
+    const requestedGeneration = navigationGeneration;
     checkInFlight = true;
     try {
       const validators = await fetchValidators(requestedPath);
-      if (!validators || requestedPath !== currentPath) {
+      if (
+        !validators ||
+        disposed ||
+        requestedGeneration !== navigationGeneration ||
+        requestedPath !== currentPath
+      ) {
         return;
       }
 
@@ -175,30 +182,32 @@ export function mountPageUpdate(
       // best-effort
     } finally {
       checkInFlight = false;
-      if (rerunAfterCurrentCheck && !globals.isDocumentHidden(document)) {
+      if (
+        rerunAfterCurrentCheck &&
+        !disposed &&
+        !globals.isDocumentHidden(document)
+      ) {
         rerunAfterCurrentCheck = false;
-        shouldRerun = true;
-      } else {
+        void checkForUpdate();
+      } else if (requestedGeneration === navigationGeneration) {
         scheduleNextCheck();
       }
     }
-
-    if (shouldRerun) {
-      void checkForUpdate();
-    }
   }
 
-  function resetState() {
-    currentPath = window.location.pathname;
-    baseline = EMPTY_RESPONSE_VALIDATORS;
+  function resetState(
+    validators: ResponseValidators = EMPTY_RESPONSE_VALIDATORS,
+  ) {
+    navigationGeneration++;
+    rerunAfterCurrentCheck = false;
+    currentPath = window.location.pathname + window.location.search;
+    baseline = validators;
     dismissedValidatorKey = null;
     nextValidator = null;
-    hasBaseline = false;
+    hasBaseline = hasUsableResponseValidators(validators);
     hideToast();
     clearTimer();
-    if (!globals.isDocumentHidden(document)) {
-      void checkForUpdate();
-    }
+    scheduleNextCheck();
   }
 
   function handleVisibilityChange() {
@@ -216,13 +225,16 @@ export function mountPageUpdate(
     void checkForUpdate();
   }
 
-  function handleNavigation() {
+  function handleNavigation(event: Event) {
     if (__IS_DEV__) {
       console.log(
         `[page-update] navigation path=${window.location.pathname} visibility=${document.visibilityState} focus=${document.hasFocus()}`,
       );
     }
-    resetState();
+    resetState(
+      (event as CustomEvent<{ validators?: ResponseValidators }>).detail
+        ?.validators,
+    );
   }
 
   function handleDismiss() {
@@ -272,6 +284,7 @@ export function mountPageUpdate(
   }
 
   return () => {
+    disposed = true;
     clearTimer();
     document.removeEventListener('visibilitychange', handleVisibilityChange);
     window.removeEventListener('focus', handleWindowFocus);

package/src/print/{style.scss → _index.scss}

@@ -17,11 +17,13 @@
   }
 
   header,
-  footer {
+  footer,
+  .page-bottom {
     display: none !important;
   }
 
   body > .container {
+    min-height: 0;
     margin-top: 0;
   }
 

package/src/search/index.ts

@@ -141,6 +141,10 @@ function render(
     a.id = `result-${i}`;
     a.className = 'result';
     a.href = result.url;
+    const isGeneratedPage = Boolean(result.template);
+    if (isGeneratedPage) {
+      a.setAttribute('data-tada-page', '');
+    }
     a.tabIndex = 0;
 
     const titleEl = doc.createElement('div');
@@ -177,6 +181,9 @@ function render(
       for (const sub of subsToShow) {
         const subA = doc.createElement('a');
         subA.href = sub.url;
+        if (isGeneratedPage) {
+          subA.setAttribute('data-tada-page', '');
+        }
         subA.className = 'sub-result';
 
         const subTitle = doc.createElement('div');

package/src/slides/{style.scss → _index.scss}

@@ -93,6 +93,7 @@ body.is-presenting [data-slides-annotation-layer] {
 body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
+body.is-presenting .page-bottom,
 body.is-presenting footer,
 body.is-presenting .appearance-pickers,
 body.is-presenting .slides-header,
@@ -177,3 +178,7 @@ body.is-presenting .slide:has(> .trace-widget) > .trace-widget > .trace-body {
   height: 100%;
   min-height: 0;
 }
+
+body.is-presenting > .container {
+  min-height: 0;
+}