@abreen/tada 1.19.2 → 1.19.3

package/build/watch/engine.ts

@@ -22,6 +22,10 @@ export function runWatchEngine<Meta>(
   const debounceMs = options.debounceMs ?? 300;
   const watchers: ReturnType<typeof chokidar.watch>[] = [];
   const pending = new Set<string>();
+  const removed = new Map<
+    string,
+    { watcher: ReturnType<typeof chokidar.watch>; root: string }
+  >();
   let uncommitted = new Set<string>();
   let closed = false;
   let fatal: { error: unknown } | undefined;
@@ -33,6 +37,7 @@ export function runWatchEngine<Meta>(
   function stop(): void {
     closed = true;
     pending.clear();
+    removed.clear();
     if (timer !== undefined) {
       clock.clearTimeout(timer);
     }
@@ -78,6 +83,52 @@ export function runWatchEngine<Meta>(
     }
   }
 
+  function isFile(filePath: string): boolean {
+    try {
+      return dependencies.stat(filePath)?.isFile() ?? false;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOTDIR') {
+        return false;
+      }
+      throw error;
+    }
+  }
+
+  function isInside(root: string, filePath: string): boolean {
+    const relative = path.relative(root, filePath);
+    return (
+      relative !== '' &&
+      relative !== '..' &&
+      !relative.startsWith(`..${path.sep}`) &&
+      !path.isAbsolute(relative)
+    );
+  }
+
+  /**
+   * Chokidar tracks entries by name, so a directory replaced by a file keeps
+   * its directory subscription and edits to the file are never reported. When
+   * a poll misses the moment between the two, the only events are removals of
+   * what was inside the directory. Once changes have settled, resubscribe any
+   * parent of a removed path that is now a file.
+   */
+  function resubscribeReplacedDirectories(): void {
+    const checked = new Set<string>();
+    for (const [removedPath, { watcher, root }] of removed) {
+      for (
+        let dir = path.dirname(removedPath);
+        isInside(root, dir) && !checked.has(dir);
+        dir = path.dirname(dir)
+      ) {
+        checked.add(dir);
+        if (isFile(dir)) {
+          watcher.unwatch(dir);
+          watcher.add(dir);
+        }
+      }
+    }
+    removed.clear();
+  }
+
   async function emit(event: WatchLifecycleEvent<Meta>): Promise<void> {
     if (!closed) {
       await options.onEvent?.(event);
@@ -139,7 +190,13 @@ export function runWatchEngine<Meta>(
           fail(error);
         }
       };
-      watcher.on('add', included).on('unlink', included);
+      const removedPath = (filePath: string) => {
+        if (!closed) {
+          removed.set(filePath, { watcher, root: target.path });
+        }
+        included(filePath);
+      };
+      watcher.on('add', included).on('unlink', removedPath);
       watcher.on('change', (filePath, stats) => {
         if (closed) {
           return;
@@ -156,20 +213,18 @@ export function runWatchEngine<Meta>(
       });
       watcher.on('addDir', included);
       watcher.on('unlinkDir', filePath => {
-        included(filePath);
+        removedPath(filePath);
         // Wait until Chokidar finishes closing the old directory subscription.
         queueMicrotask(() => {
           if (closed) {
             return;
           }
           try {
-            if (dependencies.stat(filePath)?.isFile()) {
+            if (isFile(filePath)) {
               watcher.add(filePath);
             }
           } catch (error) {
-            if ((error as NodeJS.ErrnoException).code !== 'ENOTDIR') {
-              fail(error);
-            }
+            fail(error);
           }
         });
       });
@@ -197,6 +252,7 @@ export function runWatchEngine<Meta>(
       while (!closed && pending.size) {
         const paths = new Set([...uncommitted, ...pending]);
         pending.clear();
+        resubscribeReplacedDirectories();
         const outcome = await build(paths);
         if (!outcome?.ok) {
           uncommitted = paths;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.19.2",
+  "version": "1.19.3",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/navigate/runtime.ts

@@ -11,6 +11,13 @@ import { swapHeaderTitle } from '../header';
 export const NAVIGATION_EVENT = 'tada:navigation';
 
 const LOADING_CURSOR_DELAY = 400;
+const HOLD_SCROLL_FRAMES = 6;
+const HOLD_SCROLL_RELEASE_EVENTS = [
+  'wheel',
+  'touchstart',
+  'keydown',
+  'pointerdown',
+] as const;
 
 let currentAbortController: AbortController | null = null;
 let historyIndex = 0;
@@ -263,33 +270,49 @@ export function isApplyingFragment(): boolean {
 // WebKit defers fragment scrolling until pending stylesheets load, which would
 // later move the page away from the restored scroll position. Wait for them
 // first, and skip the update if another request or navigation replaced it.
-export function applyFragmentTarget(window: Window): void {
+//
+// That deferred scroll can also set :target before the wait ends, which would
+// leave nothing to replace. WebKit then scrolls to the target again on the next
+// frame, undoing a scroll back to the saved position. A fragment navigation of
+// our own does not have that problem, so after waiting, repeat it even when
+// :target matches, restoring the saved position the caller passed in. When the
+// last stylesheet finishes loading just after the content swap, WebKit can
+// still scroll to the target in the next rendering update, after our restore,
+// so hold that position for a few frames.
+export function applyFragmentTarget(
+  window: Window,
+  restoredTop?: number,
+): void {
   const request = ++fragmentTargetRequest;
   const { href } = window.location;
+  let waited = false;
   const apply = (): void => {
     if (request !== fragmentTargetRequest || window.location.href !== href) {
       return;
     }
     const pending = Array.from(pendingStylesheets.values());
     if (pending.length > 0) {
+      waited = true;
       void Promise.all(pending).then(apply);
       return;
     }
-    replaceFragmentTarget(window);
+    replaceFragmentTarget(window, waited ? restoredTop : undefined);
   };
   apply();
 }
 
-function replaceFragmentTarget(window: Window): void {
+function replaceFragmentTarget(window: Window, forcedTop?: number): void {
   const { document, history, location } = window;
   if (
+    forcedTop === undefined &&
     document.querySelector(':target') === getHashTarget(document, location.hash)
   ) {
     return;
   }
   const { href } = location;
   const state = history.state;
-  const { scrollX, scrollY } = window;
+  const { scrollX } = window;
+  const scrollY = forcedTop ?? window.scrollY;
   applyingFragment = true;
   try {
     globals.replaceLocation(
@@ -301,6 +324,41 @@ function replaceFragmentTarget(window: Window): void {
   }
   history.replaceState(state, '', href);
   window.scrollTo({ left: scrollX, top: scrollY });
+  if (forcedTop !== undefined) {
+    holdScroll(window, scrollX, scrollY);
+  }
+}
+
+// Scroll back to the given position on each of the next few frames if the
+// browser moved the page, until the visitor scrolls or the URL changes
+function holdScroll(window: Window, left: number, top: number): void {
+  const { href } = window.location;
+  let held = true;
+  const release = (): void => {
+    held = false;
+    for (const type of HOLD_SCROLL_RELEASE_EVENTS) {
+      window.removeEventListener(type, release);
+    }
+  };
+  for (const type of HOLD_SCROLL_RELEASE_EVENTS) {
+    window.addEventListener(type, release, { passive: true });
+  }
+  let frames = 0;
+  const tick = (): void => {
+    if (!held || window.location.href !== href) {
+      release();
+      return;
+    }
+    if (Math.abs(window.scrollY - top) > 1) {
+      window.scrollTo({ left, top });
+    }
+    if (++frames < HOLD_SCROLL_FRAMES) {
+      window.requestAnimationFrame(tick);
+    } else {
+      release();
+    }
+  };
+  window.requestAnimationFrame(tick);
 }
 
 export async function navigateToUrl(
@@ -416,7 +474,10 @@ export async function navigateToUrl(
     if (!pushHistory) {
       // Restore the entry's :target before updateHead adds stylesheets, so it
       // applies right away unless an earlier stylesheet is still loading
-      applyFragmentTarget(window);
+      applyFragmentTarget(
+        window,
+        typeof scrollTarget === 'number' ? scrollTarget : undefined,
+      );
     }
     updateHead(document, newDoc);
     mountAppearancePickerForPage(window);

package/src/toc/_index.scss

@@ -149,10 +149,15 @@ body.code .toc ol a {
   width: var(--toc-alert-icon-size);
   height: var(--toc-alert-icon-size);
   margin-right: 4px;
-  vertical-align: sub;
+  vertical-align: middle;
   content: '';
 
   @include contained-mask(var(--toc-alert-icon));
+
+  // Center the icon on the cap height, which scales with each level's font
+  @supports (width: 1cap) {
+    vertical-align: calc(0.5cap - var(--toc-alert-icon-size) / 2);
+  }
 }
 
 .toc ol li.label {