@abreen/tada 1.11.3 → 1.13.4

package/src/trace/index.ts

@@ -1,4 +1,5 @@
 import type { TraceManifest, TraceChunkEntry } from './types';
+import { globals } from '../globals';
 
 interface WidgetState {
   manifest: TraceManifest;
@@ -10,7 +11,7 @@ interface WidgetElements {
   root: HTMLElement;
   source: HTMLElement;
   controls: HTMLElement;
-  output: HTMLElement;
+  content: HTMLElement;
   diagram: HTMLElement;
 }
 
@@ -33,7 +34,7 @@ async function loadChunk(
     return;
   }
   const url = chunkUrlFromManifest(manifestUrl, chunkIndex);
-  const res = await fetch(url);
+  const res = await globals.fetch(url);
   const chunk: TraceChunkEntry[] = await res.json();
   state.chunks.set(chunkIndex, chunk);
 }
@@ -135,6 +136,84 @@ function updateStepControls(
   }
 }
 
+function parsePositiveNumber(
+  rawValue: string | null | undefined,
+): number | null {
+  if (!rawValue) {
+    return null;
+  }
+
+  const parsed = Number.parseFloat(rawValue);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
+function getPresentationScale(diagram: HTMLElement, doc: Document): number {
+  if (!doc.body.classList.contains('is-presenting')) {
+    return 1;
+  }
+
+  const view = doc.defaultView;
+  const traceWidget = diagram.closest('.trace-widget') as HTMLElement | null;
+  const traceFontSize = parsePositiveNumber(
+    traceWidget && view ? view.getComputedStyle(traceWidget).fontSize : null,
+  );
+  const baseFontSize = parsePositiveNumber(
+    view ? view.getComputedStyle(doc.body).fontSize : null,
+  );
+  if (traceFontSize && baseFontSize) {
+    return traceFontSize / baseFontSize;
+  }
+
+  return 1;
+}
+
+function scaleDiagramSvg(diagram: HTMLElement, doc: Document): void {
+  const svg = diagram.querySelector('.trace-memory') as SVGElement | null;
+  if (!svg) {
+    return;
+  }
+
+  const width = svg.dataset.traceBaseWidth ?? svg.getAttribute('width');
+  const height = svg.dataset.traceBaseHeight ?? svg.getAttribute('height');
+  if (!width || !height) {
+    return;
+  }
+
+  svg.dataset.traceBaseWidth = width;
+  svg.dataset.traceBaseHeight = height;
+
+  const baseWidth = Number.parseFloat(width);
+  const baseHeight = Number.parseFloat(height);
+  if (!Number.isFinite(baseWidth) || !Number.isFinite(baseHeight)) {
+    return;
+  }
+
+  const scale = getPresentationScale(diagram, doc);
+  svg.setAttribute('width', String(baseWidth * scale));
+  svg.setAttribute('height', String(baseHeight * scale));
+}
+
+function updateOutput(
+  content: HTMLElement,
+  output: string,
+  doc: Document,
+): void {
+  const existing = content.querySelector(
+    ':scope > .trace-output',
+  ) as HTMLPreElement | null;
+  if (!output) {
+    existing?.remove();
+    return;
+  }
+
+  const outputElement = existing ?? doc.createElement('pre');
+  if (!existing) {
+    outputElement.className = 'trace-output';
+    content.append(outputElement);
+  }
+  outputElement.textContent = output;
+}
+
 function renderWidgetState(
   state: WidgetState,
   elements: WidgetElements,
@@ -157,10 +236,11 @@ function renderWidgetState(
       output += s.stdout;
     }
   }
-  elements.output.textContent = output;
+  updateOutput(elements.content, output, doc);
 
   const prevHeight = elements.diagram.scrollHeight;
   elements.diagram.innerHTML = entry.svg;
+  scaleDiagramSvg(elements.diagram, doc);
 
   // If the diagram grew past the visible area, scroll to show the new content
   if (elements.diagram.scrollHeight > prevHeight) {
@@ -177,7 +257,7 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   let res: Response;
   try {
-    res = await fetch(manifestUrl);
+    res = await globals.fetch(manifestUrl);
   } catch {
     return;
   }
@@ -190,12 +270,9 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   await loadChunk(state, manifestUrl, 0);
 
-  const entry = getStep(state);
-
   const source = root.querySelector('.trace-source') as HTMLElement;
+  const content = root.querySelector('.trace-content') as HTMLElement;
   const diagram = root.querySelector('.trace-diagram') as HTMLElement;
-  const output = root.querySelector('.trace-output') as HTMLPreElement;
-  output.textContent = entry.stdout || '';
 
   const controls = root.querySelector('.trace-controls') as HTMLElement;
   const firstBtn = controls.querySelector('.trace-first') as HTMLButtonElement;
@@ -237,22 +314,47 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
     next.focus();
   });
 
-  const elements: WidgetElements = { root, source, controls, output, diagram };
-
-  updateStepControls(controls, state.currentStep, manifest.totalSteps, doc);
+  const elements: WidgetElements = { root, source, controls, content, diagram };
 
-  diagram.innerHTML = entry.svg;
-  updateSourceHighlight(source, entry.line);
+  renderWidgetState(state, elements, doc);
 }
 
-export default function mountTrace(window: Window): void {
+export default function mountTrace(window: Window): void | (() => void) {
   const widgets = window.document.querySelectorAll('.trace-widget');
 
   if (widgets.length === 0) {
     return;
   }
 
+  const refreshDiagramScales = (): void => {
+    for (const widget of widgets) {
+      const diagram = (widget as HTMLElement).querySelector(
+        '.trace-diagram',
+      ) as HTMLElement | null;
+      if (diagram) {
+        scaleDiagramSvg(diagram, window.document);
+      }
+    }
+  };
+
+  const MutationObserverCtor = (window as Window & typeof globalThis)
+    .MutationObserver;
+  const bodyClassObserver = MutationObserverCtor
+    ? new MutationObserverCtor(() => {
+        refreshDiagramScales();
+      })
+    : null;
+
+  bodyClassObserver?.observe(window.document.body, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
   for (const widget of widgets) {
     initWidget(widget as HTMLElement, window.document);
   }
+
+  return () => {
+    bodyClassObserver?.disconnect();
+  };
 }

package/src/trace/style.scss

@@ -144,7 +144,7 @@
   max-width: 100%;
   height: auto;
   font-family: var(--mono-font, monospace);
-  font-size: var(--font-size-smaller, 15px);
+  font-size: 15px;
 
   .trace-separator {
     stroke: var(--fg2-color);

package/src/util.ts

@@ -30,18 +30,22 @@ export function getElement(
   return el as HTMLElement;
 }
 
-export function applyBasePath(subPath: string): string {
+function applyBasePathWithBasePath(subPath: string, basePath: string): string {
   if (!subPath.startsWith('/')) {
     throw new Error('invalid internal path, must start with "/": ' + subPath);
   }
 
-  let path = __SITE_BASE_PATH__;
+  let path = basePath;
   if (path.endsWith('/')) {
     path = path.slice(0, -1);
   }
   return path + subPath;
 }
 
+export function applyBasePath(subPath: string): string {
+  return applyBasePathWithBasePath(subPath, __SITE_BASE_PATH__);
+}
+
 export function scheduleTask(win: Window, fn: () => void) {
   if (typeof win.requestIdleCallback === 'function') {
     win.requestIdleCallback(fn);

package/templates/_author.html

@@ -1,14 +1,14 @@
 <aside class="author">
   Written by
   <% if (page.author.url) { %>
-  <a href="<%= applyBasePath(page.author.url) %>">
+  <a href="<%= page.author.url %>">
   <% } %>
   <span class="text"><%= page.author.name %></span>
   <% if (page.author.avatar) { %>
   <img
     width="32"
     height="32"
-    src="<%= applyBasePath(page.author.avatar) %>"
+    src="<%= page.author.avatar %>"
     alt="Picture of <%= page.author.name %>"
     class="avatar"
   />

package/templates/_heading.html

@@ -1,6 +1,6 @@
 <div class="title-and-info" data-pagefind-body>
   <% if (page.parent) { %>
-  <a class="breadcrumb" href="<%= applyBasePath(page.parent) %>" data-pagefind-ignore><%= page.parentLabel %></a>
+  <a class="breadcrumb" href="<%= page.parent %>" data-pagefind-ignore><%= page.parentLabel %></a>
   <% } %>
   <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
 

package/templates/_nav.html

@@ -1,5 +1,5 @@
 <nav>
-<% json('nav.json').forEach(function(section) { %>
+<% config('nav').forEach(function(section) { %>
   <div>
     <p><%= section.title %></p>
     <ul>
@@ -7,7 +7,7 @@
         <li>
           <a
             class="<%= cx({disabled: link.disabled, external: link.external}) %>"
-            <% if (!link.disabled) { %>href="<%= link.internal ? applyBasePath(link.internal) : link.external %>"<% } %>
+            <% if (!link.disabled) { %>href="<%= link.internal || link.external %>"<% } %>
             <% if (link.external) { %>target="_blank"<% } %>
           >
             <%= link.text %></a>

package/templates/_theme.scss

@@ -42,9 +42,9 @@
   --heading-font: var(--font);
   --heading-line-height: 1.3;
   --mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
-  --font-size: 16px;
-  --font-size-smaller: 15px;
-  --font-size-small: 13px;
+  --font-size: 1rem;
+  --font-size-smaller: 0.9375em;
+  --font-size-small: 0.8125em;
   --font-weight: 400;
   --line-height: 1.7;
   --mono-font-size: 0.94em;
@@ -58,6 +58,7 @@
   --icon-anchor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 28'><path d='M11 4 L8 20 M17 4 L14 20 M5 9 H21 M3 15 H19' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,2 22,20 2,20' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/><line x1='12' y1='9' x2='12' y2='13' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='16' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-note: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><line x1='12' y1='10' x2='12' y2='16' stroke='black' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='7' x2='12' y2='7' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>");
+  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
   --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7' stroke='<%= iconColor %>' stroke-width='2' fill='none'/><line x1='16.5' y1='16.5' x2='22' y2='22' stroke='<%= iconColor %>' stroke-width='2' stroke-linecap='round'/></svg>");
   --icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><polyline points='9 18 15 12 9 6' stroke='<%= iconColor %>' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --icon-breadcrumb: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M3 7 H17 V22' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/><polyline points='11 16 17 22 23 16' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");

package/templates/_top.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <% if (site.features.favicon) { %>
-    <link rel="icon" href="<%= applyBasePath('/favicon.ico') %>" sizes="any" />
-    <link rel="icon" type="image/svg+xml" href="<%= applyBasePath('/favicon.svg') %>" />
-    <link rel="icon" type="image/png" sizes="512x512" href="<%= applyBasePath('/favicon-512.png') %>" />
-    <link rel="icon" type="image/png" sizes="256x256" href="<%= applyBasePath('/favicon-256.png') %>" />
-    <link rel="icon" type="image/png" sizes="192x192" href="<%= applyBasePath('/favicon-192.png') %>" />
-    <link rel="icon" type="image/png" sizes="128x128" href="<%= applyBasePath('/favicon-128.png') %>" />
-    <link rel="icon" type="image/png" sizes="64x64" href="<%= applyBasePath('/favicon-64.png') %>" />
-    <link rel="icon" type="image/png" sizes="48x48" href="<%= applyBasePath('/favicon-48.png') %>" />
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= applyBasePath('/favicon-32.png') %>" />
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= applyBasePath('/favicon-16.png') %>" />
-    <link rel="apple-touch-icon" sizes="512x512" href="<%= applyBasePath('/favicon-512.png') %>" />
-    <link rel="apple-touch-icon" sizes="256x256" href="<%= applyBasePath('/favicon-256.png') %>" />
-    <link rel="manifest" href="<%= applyBasePath('/manifest.json') %>" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
+    <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
+    <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
+    <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png" />
+    <link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="/favicon-512.png" />
+    <link rel="apple-touch-icon" sizes="256x256" href="/favicon-256.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="apple-mobile-web-app-title" content="<%= site.symbol %>">
     <meta name="mobile-web-app-capable" content="yes">
     <% } %>
@@ -38,7 +38,7 @@
     {
       "prerender": [{
         "where": {
-          "href_matches": "<%= applyBasePath('/') %>*"
+          "href_matches": "<%= speculationRulesHrefMatches %>"
         },
         "eagerness": "moderate"
       }]

package/templates/default.html

@@ -3,6 +3,15 @@
 <div class="main-content">
   <%= render('_heading.html') %>
   <main class="body" data-pagefind-body>
+    <% if (page.slides) { %>
+    <div class="slides-header" data-pagefind-ignore>
+      <button type="button" data-slides-present disabled>Present</button>
+      <label>
+        <input type="checkbox" data-slides-fullscreen checked disabled>
+        Full screen
+      </label>
+    </div>
+    <% } %>
     <%= content %>
     <%= render('_footer.html') %>
   </main>

package/types/dev.d.ts

@@ -1 +1 @@
-declare const __IS_DEV__: boolean;
+declare var __IS_DEV__: boolean;

package/types/site-variables.d.ts

@@ -5,8 +5,7 @@ interface TimeZone {
   offsetMinutes?: number;
 }
 
-declare const __SITE_BASE__: string;
-declare const __SITE_BASE_PATH__: string;
-declare const __SITE_TITLE_POSTFIX__: string;
-declare const __SITE_DEFAULT_TIMEZONE__: string;
-declare const __SITE_TIMEZONES__: TimeZone[];
+declare var __SITE_BASE_PATH__: string;
+declare var __SITE_TITLE_POSTFIX__: string;
+declare var __SITE_DEFAULT_TIMEZONE__: string;
+declare var __SITE_TIMEZONES__: TimeZone[];

package/watch/fs-commit.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { globals, type Globals } from '../build/globals';
 import type {
   ApplyMutationsCommitPlan,
   CommitPlan,
@@ -7,6 +8,17 @@ import type {
   ReplaceRootCommitPlan,
 } from './types';
 
+type CommitPlanGlobals = Pick<Globals, 'now' | 'pid' | 'sleepSync'>;
+
+const TRANSIENT_RENAME_ERROR_CODES = new Set([
+  'EACCES',
+  'EBUSY',
+  'ENOTEMPTY',
+  'EPERM',
+]);
+const RENAME_RETRY_DELAY_MS = 25;
+const RENAME_RETRY_COUNT = 8;
+
 function removeDirIfExists(dir: string): void {
   fs.rmSync(dir, { recursive: true, force: true });
 }
@@ -15,6 +27,39 @@ function ensureParentDir(filePath: string): void {
   fs.mkdirSync(path.dirname(filePath), { recursive: true });
 }
 
+function isTransientRenameError(
+  error: unknown,
+  sourcePath: string,
+): error is NodeJS.ErrnoException {
+  const code = (error as NodeJS.ErrnoException | undefined)?.code;
+  return (
+    typeof code === 'string' &&
+    TRANSIENT_RENAME_ERROR_CODES.has(code) &&
+    fs.existsSync(sourcePath)
+  );
+}
+
+function renameWithRetry(
+  sourcePath: string,
+  targetPath: string,
+  globals: CommitPlanGlobals,
+): void {
+  for (let attempt = 0; attempt <= RENAME_RETRY_COUNT; attempt++) {
+    try {
+      fs.renameSync(sourcePath, targetPath);
+      return;
+    } catch (error) {
+      if (
+        attempt === RENAME_RETRY_COUNT ||
+        !isTransientRenameError(error, sourcePath)
+      ) {
+        throw error;
+      }
+      globals.sleepSync(RENAME_RETRY_DELAY_MS);
+    }
+  }
+}
+
 function pruneEmptyDirs(rootDir: string, filePath: string): void {
   let currentDir = path.dirname(filePath);
   const root = path.resolve(rootDir);
@@ -36,6 +81,7 @@ function applyFileMutation(
   rootDir: string,
   mutation: FileMutation,
   stagedRoot: string,
+  globals: CommitPlanGlobals,
 ): void {
   const targetPath = path.join(rootDir, mutation.path);
   const stagedPath = path.join(stagedRoot, mutation.path);
@@ -44,7 +90,7 @@ function applyFileMutation(
     ensureParentDir(stagedPath);
     fs.writeFileSync(stagedPath, mutation.content);
     ensureParentDir(targetPath);
-    fs.renameSync(stagedPath, targetPath);
+    renameWithRetry(stagedPath, targetPath, globals);
     return;
   }
 
@@ -52,7 +98,10 @@ function applyFileMutation(
   pruneEmptyDirs(rootDir, targetPath);
 }
 
-function applyMutations(plan: ApplyMutationsCommitPlan): void {
+function applyMutations(
+  plan: ApplyMutationsCommitPlan,
+  globals: CommitPlanGlobals,
+): void {
   const stagedRoot = fs.mkdtempSync(path.join(plan.rootDir, '.watch-stage-'));
   try {
     for (const mutation of plan.mutations) {
@@ -64,39 +113,43 @@ function applyMutations(plan: ApplyMutationsCommitPlan): void {
     }
 
     for (const mutation of plan.mutations) {
-      applyFileMutation(plan.rootDir, mutation, stagedRoot);
+      applyFileMutation(plan.rootDir, mutation, stagedRoot, globals);
     }
   } finally {
     removeDirIfExists(stagedRoot);
   }
 }
 
-function replaceRoot(plan: ReplaceRootCommitPlan): void {
+function replaceRoot(
+  plan: ReplaceRootCommitPlan,
+  globals: CommitPlanGlobals,
+): void {
   const { targetPath, stagedPath } = plan;
-  const backupDir = `${targetPath}.bak-${process.pid}-${Date.now()}`;
+  const backupDir = `${targetPath}.bak-${globals.pid()}-${globals.now()}`;
   const targetExists = fs.existsSync(targetPath);
 
   try {
     if (targetExists) {
-      fs.renameSync(targetPath, backupDir);
+      renameWithRetry(targetPath, backupDir, globals);
     }
-    fs.renameSync(stagedPath, targetPath);
+    renameWithRetry(stagedPath, targetPath, globals);
     if (targetExists) {
       removeDirIfExists(backupDir);
     }
   } catch (err) {
     if (!fs.existsSync(targetPath) && fs.existsSync(backupDir)) {
-      fs.renameSync(backupDir, targetPath);
+      renameWithRetry(backupDir, targetPath, globals);
     }
     throw err;
   }
 }
 
 export function applyCommitPlan(plan: CommitPlan): void {
+  const runtimeGlobals: CommitPlanGlobals = globals;
   if (plan.kind === 'replace-root') {
-    replaceRoot(plan);
+    replaceRoot(plan, runtimeGlobals);
     return;
   }
 
-  applyMutations(plan);
+  applyMutations(plan, runtimeGlobals);
 }