@abreen/tada 1.13.7 → 1.14.1

package/src/trace/index.ts

@@ -1,4 +1,4 @@
-import type { TraceManifest, TraceChunkEntry } from './types';
+import type { TraceManifest, TraceChunkEntry, TraceOutputEvent } from './types';
 import { globals } from '../globals';
 
 interface WidgetState {
@@ -9,7 +9,7 @@ interface WidgetState {
 
 interface WidgetElements {
   root: HTMLElement;
-  source: HTMLElement;
+  sourceWrapper: HTMLElement;
   controls: HTMLElement;
   content: HTMLElement;
   diagram: HTMLElement;
@@ -77,6 +77,22 @@ function updateSourceHighlight(panel: HTMLElement, currentLine: number): void {
   }
 }
 
+function updateVisibleSourcePanel(
+  sourceWrapper: HTMLElement,
+  currentFile: string,
+): HTMLElement | null {
+  let activePanel: HTMLElement | null = null;
+  sourceWrapper.querySelectorAll('.trace-source').forEach(panel => {
+    const sourcePanel = panel as HTMLElement;
+    const matches = sourcePanel.dataset.traceSourceFile === currentFile;
+    sourcePanel.hidden = !matches;
+    if (matches) {
+      activePanel = sourcePanel;
+    }
+  });
+  return activePanel;
+}
+
 function updateStepControls(
   container: HTMLElement,
   currentStep: number,
@@ -202,13 +218,13 @@ function scaleDiagramSvg(diagram: HTMLElement, doc: Document): void {
 
 function updateOutput(
   content: HTMLElement,
-  output: string,
+  output: TraceOutputEvent[],
   doc: Document,
 ): void {
   const existing = content.querySelector(
     ':scope > .trace-output',
   ) as HTMLPreElement | null;
-  if (!output) {
+  if (output.length === 0) {
     existing?.remove();
     return;
   }
@@ -218,7 +234,16 @@ function updateOutput(
     outputElement.className = 'trace-output';
     content.append(outputElement);
   }
-  outputElement.textContent = output;
+  outputElement.replaceChildren(
+    ...output.map(event => {
+      const span = doc.createElement('span');
+      if (event.stream === 'stderr') {
+        span.className = 'trace-output-stderr';
+      }
+      span.textContent = event.text;
+      return span;
+    }),
+  );
 }
 
 function renderWidgetState(
@@ -227,21 +252,25 @@ function renderWidgetState(
   doc: Document,
 ): void {
   const entry = getStep(state);
-  updateSourceHighlight(elements.source, entry.line);
+  const sourcePanel = updateVisibleSourcePanel(
+    elements.sourceWrapper,
+    entry.file,
+  );
+  if (sourcePanel) {
+    updateSourceHighlight(sourcePanel, entry.line);
+  }
   updateStepControls(
     elements.controls,
     state.currentStep,
     state.manifest.totalSteps,
     doc,
   );
-  let output = '';
+  const output: TraceOutputEvent[] = [];
   for (let i = 0; i <= state.currentStep; i++) {
     const ci = Math.floor(i / state.manifest.chunkSize);
     const off = i % state.manifest.chunkSize;
     const s = state.chunks.get(ci)![off];
-    if (s.stdout) {
-      output += s.stdout;
-    }
+    output.push(...(s.output ?? []));
   }
   updateOutput(elements.content, output, doc);
 
@@ -277,7 +306,9 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
 
   await loadChunk(state, manifestUrl, 0);
 
-  const source = root.querySelector('.trace-source') as HTMLElement;
+  const sourceWrapper = root.querySelector(
+    '.trace-source-wrapper',
+  ) as HTMLElement;
   const content = root.querySelector('.trace-content') as HTMLElement;
   const diagram = root.querySelector('.trace-diagram') as HTMLElement;
 
@@ -321,7 +352,13 @@ async function initWidget(root: HTMLElement, doc: Document): Promise<void> {
     next.focus();
   });
 
-  const elements: WidgetElements = { root, source, controls, content, diagram };
+  const elements: WidgetElements = {
+    root,
+    sourceWrapper,
+    controls,
+    content,
+    diagram,
+  };
 
   renderWidgetState(state, elements, doc);
 }

package/src/trace/style.scss

@@ -141,6 +141,16 @@
   content: 'Output';
 }
 
+.trace-output-stderr {
+  color: hsl(0deg 70% 45%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .trace-output-stderr {
+    color: hsl(0deg 85% 72%);
+  }
+}
+
 .trace-memory {
   max-width: 100%;
   height: auto;

package/src/trace/types.d.ts

@@ -1,7 +1,12 @@
 export interface TraceManifest {
   totalSteps: number;
   chunkSize: number;
-  sourceFile: string;
+  primaryFile: string;
+  sources: TraceSource[];
+}
+
+export interface TraceSource {
+  file: string;
   source: string;
   lineToSteps: Record<number, number[]>;
 }
@@ -11,7 +16,13 @@ export interface TraceStep {
   file: string;
   stack: TraceStackFrame[];
   heap: Record<string, TraceHeapObject>;
-  stdout: string;
+  output?: TraceOutputEvent[];
+  transientHeapRoots?: string[];
+}
+
+export interface TraceOutputEvent {
+  stream: 'stdout' | 'stderr';
+  text: string;
 }
 
 export interface TraceStackFrame {
@@ -37,11 +48,12 @@ export type TraceValue =
 export type TraceHeapObject =
   | { type: string; elements: TraceValue[] }
   | { type: string; fields: Record<string, TraceValue> }
-  | { type: string; value: string };
+  | { type: string; value: string | number | boolean };
 
 /** A single entry in a chunk file (new format with precomputed SVG). */
 export interface TraceChunkEntry {
+  file: string;
   line: number;
-  stdout: string;
+  output?: TraceOutputEvent[];
   svg: string;
 }

package/build/utils/include.ts

@@ -1,57 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import _ from 'lodash';
-import { isPartial } from './file-types';
-import { stripHtmlComments } from './render';
-import type { RenderDependencyCollector } from '../types';
-
-const MAX_INCLUDE_DEPTH = 10;
-
-export function createIncludeFunction(
-  callerFilePath: string,
-  templateParams: Record<string, unknown>,
-  collector?: RenderDependencyCollector,
-  depth: number = 0,
-): (relativePath: string) => string {
-  return (relativePath: string): string => {
-    const callerDir = path.dirname(callerFilePath);
-    const resolved = path.resolve(callerDir, relativePath);
-
-    if (!fs.existsSync(resolved)) {
-      throw new Error(
-        `${callerFilePath}: partial not found: ${relativePath} (resolved to ${resolved})`,
-      );
-    }
-    if (!isPartial(resolved)) {
-      throw new Error(
-        `${callerFilePath}: include target must start with "_": ${relativePath}`,
-      );
-    }
-    collector?.partials?.add(resolved);
-    if (depth >= MAX_INCLUDE_DEPTH) {
-      throw new Error(
-        `${callerFilePath}: maximum include depth (${MAX_INCLUDE_DEPTH}) exceeded`,
-      );
-    }
-
-    const raw = fs.readFileSync(resolved, 'utf-8');
-    const content = stripHtmlComments(raw);
-
-    const nestedInclude = createIncludeFunction(
-      resolved,
-      templateParams,
-      collector,
-      depth + 1,
-    );
-    const nestedParams = { ...templateParams, include: nestedInclude };
-
-    try {
-      return _.template(content)(nestedParams);
-    } catch (err) {
-      throw new Error(
-        `${resolved}: Lodash template error in partial: ${(err as Error).message}`,
-        { cause: err },
-      );
-    }
-  };
-}

package/build/watch-reachability-state.ts

@@ -1,305 +0,0 @@
-import { collectOutgoingHtmlAssetPaths } from './reachability';
-import type { HtmlOutputAnalysis } from './types';
-
-type ReadAnalysisForAsset = (assetPath: string) => HtmlOutputAnalysis;
-
-function cloneSet(values: Iterable<string> | undefined): Set<string> {
-  return new Set(values || []);
-}
-
-interface IncrementalOptions {
-  changedAssetPaths?: Iterable<string>;
-  removedAssetPaths?: Iterable<string>;
-  readAnalysisForAsset: ReadAnalysisForAsset;
-}
-
-class WatchReachabilityState {
-  private rootPath: string;
-  private knownAssets: Set<string>;
-  private outgoingBySource: Map<string, Set<string>>;
-  private incomingByTarget: Map<string, Set<string>>;
-  private reachable: Set<string>;
-  private initialized: boolean;
-
-  constructor({ rootPath = 'index.html' }: { rootPath?: string } = {}) {
-    this.rootPath = rootPath;
-    this.knownAssets = new Set();
-    this.outgoingBySource = new Map();
-    this.incomingByTarget = new Map();
-    this.reachable = new Set();
-    this.initialized = false;
-  }
-
-  reset(): void {
-    this.knownAssets = new Set();
-    this.outgoingBySource = new Map();
-    this.incomingByTarget = new Map();
-    this.reachable = new Set();
-    this.initialized = false;
-  }
-
-  setKnownAssets(assetPaths: Iterable<string>): void {
-    this.knownAssets = cloneSet(assetPaths);
-    this.reachable = new Set(
-      [...this.reachable].filter(assetPath => this.knownAssets.has(assetPath)),
-    );
-
-    const nextOutgoingBySource = new Map<string, Set<string>>();
-    for (const [sourcePath, targets] of this.outgoingBySource) {
-      if (!this.knownAssets.has(sourcePath)) {
-        continue;
-      }
-
-      nextOutgoingBySource.set(
-        sourcePath,
-        new Set(
-          [...targets].filter(targetPath => this.knownAssets.has(targetPath)),
-        ),
-      );
-    }
-
-    this.outgoingBySource = nextOutgoingBySource;
-    this.rebuildIncomingByTarget();
-  }
-
-  rebuild(readAnalysisForAsset: ReadAnalysisForAsset): void {
-    if (!this.knownAssets.has(this.rootPath)) {
-      throw new Error(`Pagefind reachability root not found: ${this.rootPath}`);
-    }
-
-    this.outgoingBySource = new Map();
-    this.incomingByTarget = new Map();
-    this.reachable = new Set();
-
-    const knownAssetPaths = [...this.knownAssets].sort();
-    for (const sourcePath of knownAssetPaths) {
-      const outgoingPaths = this.readOutgoingPaths(
-        sourcePath,
-        readAnalysisForAsset,
-      );
-      this.outgoingBySource.set(sourcePath, outgoingPaths);
-      this.addIncomingEdges(sourcePath, outgoingPaths);
-    }
-
-    this.reachable = this.collectClosure(new Set([this.rootPath]));
-    this.initialized = true;
-  }
-
-  applyIncremental({
-    changedAssetPaths,
-    removedAssetPaths,
-    readAnalysisForAsset,
-  }: IncrementalOptions): void {
-    if (!this.initialized) {
-      this.rebuild(readAnalysisForAsset);
-      return;
-    }
-
-    const normalizedChanged = new Set<string>();
-    for (const assetPath of changedAssetPaths || []) {
-      if (this.knownAssets.has(assetPath)) {
-        normalizedChanged.add(assetPath);
-      }
-    }
-
-    const normalizedRemoved = new Set<string>();
-    for (const assetPath of removedAssetPaths || []) {
-      if (
-        !this.knownAssets.has(assetPath) &&
-        !normalizedChanged.has(assetPath)
-      ) {
-        normalizedRemoved.add(assetPath);
-      }
-    }
-
-    const previouslyReachableRoots = new Set<string>();
-    for (const assetPath of normalizedChanged) {
-      if (this.reachable.has(assetPath)) {
-        previouslyReachableRoots.add(assetPath);
-      }
-    }
-    for (const assetPath of normalizedRemoved) {
-      if (this.reachable.has(assetPath)) {
-        previouslyReachableRoots.add(assetPath);
-      }
-    }
-
-    const oldAffectedClosure = this.collectClosure(previouslyReachableRoots);
-
-    for (const assetPath of normalizedRemoved) {
-      this.removeAsset(assetPath);
-    }
-
-    const changedAssetList = [...normalizedChanged].sort();
-    for (const assetPath of changedAssetList) {
-      const outgoingPaths = this.readOutgoingPaths(
-        assetPath,
-        readAnalysisForAsset,
-      );
-      this.replaceOutgoing(assetPath, outgoingPaths);
-    }
-
-    const stillKnownRoots = new Set(
-      [...previouslyReachableRoots].filter(assetPath =>
-        this.knownAssets.has(assetPath),
-      ),
-    );
-    const newAffectedClosure = this.collectClosure(stillKnownRoots);
-    const affected = new Set([...oldAffectedClosure, ...newAffectedClosure]);
-
-    if (affected.size === 0) {
-      this.initialized = true;
-      return;
-    }
-
-    for (const assetPath of affected) {
-      this.reachable.delete(assetPath);
-    }
-
-    const seedPaths = new Set<string>();
-    for (const assetPath of stillKnownRoots) {
-      if (affected.has(assetPath)) {
-        seedPaths.add(assetPath);
-      }
-    }
-
-    if (this.knownAssets.has(this.rootPath) && affected.has(this.rootPath)) {
-      seedPaths.add(this.rootPath);
-    }
-
-    for (const assetPath of affected) {
-      const incomingPaths = this.incomingByTarget.get(assetPath);
-      if (!incomingPaths) {
-        continue;
-      }
-
-      for (const sourcePath of incomingPaths) {
-        if (this.reachable.has(sourcePath) && !affected.has(sourcePath)) {
-          seedPaths.add(assetPath);
-          break;
-        }
-      }
-    }
-
-    const restoredReachable = this.collectClosure(seedPaths, affected);
-    for (const assetPath of restoredReachable) {
-      this.reachable.add(assetPath);
-    }
-
-    this.initialized = true;
-  }
-
-  getReachablePaths(): string[] {
-    return [...this.reachable].sort();
-  }
-
-  private readOutgoingPaths(
-    sourcePath: string,
-    readAnalysisForAsset: ReadAnalysisForAsset,
-  ): Set<string> {
-    if (!this.knownAssets.has(sourcePath)) {
-      return new Set();
-    }
-
-    const analysis = readAnalysisForAsset(sourcePath);
-    return new Set(collectOutgoingHtmlAssetPaths(analysis, this.knownAssets));
-  }
-
-  private addIncomingEdges(
-    sourcePath: string,
-    outgoingPaths: Set<string>,
-  ): void {
-    for (const targetPath of outgoingPaths) {
-      let incomingPaths = this.incomingByTarget.get(targetPath);
-      if (!incomingPaths) {
-        incomingPaths = new Set();
-        this.incomingByTarget.set(targetPath, incomingPaths);
-      }
-      incomingPaths.add(sourcePath);
-    }
-  }
-
-  private rebuildIncomingByTarget(): void {
-    this.incomingByTarget = new Map();
-    for (const [sourcePath, outgoingPaths] of this.outgoingBySource) {
-      this.addIncomingEdges(sourcePath, outgoingPaths);
-    }
-  }
-
-  private removeOutgoingEdges(sourcePath: string): void {
-    const outgoingPaths = this.outgoingBySource.get(sourcePath);
-    if (!outgoingPaths) {
-      return;
-    }
-
-    for (const targetPath of outgoingPaths) {
-      const incomingPaths = this.incomingByTarget.get(targetPath);
-      if (!incomingPaths) {
-        continue;
-      }
-
-      incomingPaths.delete(sourcePath);
-      if (incomingPaths.size === 0) {
-        this.incomingByTarget.delete(targetPath);
-      }
-    }
-  }
-
-  private replaceOutgoing(
-    sourcePath: string,
-    outgoingPaths: Set<string>,
-  ): void {
-    this.removeOutgoingEdges(sourcePath);
-    if (!this.knownAssets.has(sourcePath)) {
-      this.outgoingBySource.delete(sourcePath);
-      return;
-    }
-
-    this.outgoingBySource.set(sourcePath, outgoingPaths);
-    this.addIncomingEdges(sourcePath, outgoingPaths);
-  }
-
-  private removeAsset(assetPath: string): void {
-    this.removeOutgoingEdges(assetPath);
-    this.outgoingBySource.delete(assetPath);
-    this.incomingByTarget.delete(assetPath);
-    this.reachable.delete(assetPath);
-  }
-
-  private collectClosure(
-    rootPaths: Set<string>,
-    allowedPaths: Set<string> | null = null,
-  ): Set<string> {
-    const pending = [...rootPaths];
-    const visited = new Set<string>();
-
-    while (pending.length > 0) {
-      const currentPath = pending.pop()!;
-      if (visited.has(currentPath)) {
-        continue;
-      }
-      if (allowedPaths && !allowedPaths.has(currentPath)) {
-        continue;
-      }
-
-      visited.add(currentPath);
-      const outgoingPaths = this.outgoingBySource.get(currentPath);
-      if (!outgoingPaths) {
-        continue;
-      }
-
-      for (const targetPath of outgoingPaths) {
-        if (allowedPaths && !allowedPaths.has(targetPath)) {
-          continue;
-        }
-        if (!visited.has(targetPath)) {
-          pending.push(targetPath);
-        }
-      }
-    }
-
-    return visited;
-  }
-}
-
-export default WatchReachabilityState;

package/init/content/lectures/02/subdir/_foobar.html

@@ -1,3 +0,0 @@
-<p>Here's an HTML partial in a subdirectory.</p>
-
-<p>Here's the title of the page including this partial: <%= page.title %></p>