@abreen/tada 1.13.9 → 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/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>