@abreen/tada 1.14.1 → 1.14.2

package/build/utils/trace-core.ts

@@ -42,6 +42,10 @@ function hashTraceFiles(files: { name: string; content: string }[]): string {
   return `sha256-${hasher.digest('hex').slice(0, 16)}`;
 }
 
+function safeSvgIdPart(value: string): string {
+  return value.replace(/[^A-Za-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
 function buildTraceOutputPath(
   relDir: string,
   traceName: string,
@@ -181,13 +185,19 @@ export function chunkTraceOutput(
 
   const layoutSteps = allSteps.map(step => ({ ...step, ...filterStep(step) }));
   const layout = computeLayout(layoutSteps, ignoreFields);
+  const svgIdPrefix = safeSvgIdPart(traceName) || 'trace';
 
   let chunkEntries: TraceChunkEntry[] = [];
   let chunkIndex = 0;
   const chunkFiles: { name: string; content: string }[] = [];
 
-  for (const step of allSteps) {
-    const svg = generateStepSvg(step, layout);
+  for (const [stepIndex, step] of allSteps.entries()) {
+    const svg = generateStepSvg(
+      step,
+      layout,
+      undefined,
+      `trace-${svgIdPrefix}-${stepIndex}`,
+    );
     chunkEntries.push({
       file: path.basename(step.file),
       line: step.line,

package/build/utils/trace-svg.ts

@@ -545,6 +545,7 @@ function generateArrows(
   stackLayouts: FrameLayout[],
   heapObjMap: Map<string, HeapObjInfo>,
   dims: { rowH: number; fontSize: number },
+  markerIds: { arrowhead: string; arrowheadDim: string },
 ): string[] {
   const parts: string[] = [];
 
@@ -558,7 +559,8 @@ function generateArrows(
     const ep = heapTargetBoundaryPoint(sx, sy, target, heap[target.id], dims);
     const cpx = Math.round((sx + ep.x) / 2);
     const cls = style === 'fg' ? 'trace-arrow' : 'trace-arrow-dim';
-    const marker = style === 'fg' ? 'trace-arrowhead' : 'trace-arrowhead-dim';
+    const marker =
+      style === 'fg' ? markerIds.arrowhead : markerIds.arrowheadDim;
     return (
       `<path class="${cls}" d="` +
       `M ${sx} ${sy} Q ${cpx} ${sy}, ${ep.x} ${ep.y}" ` +
@@ -577,7 +579,7 @@ function generateArrows(
     if (Math.abs(tx - sx) < 4) {
       return (
         `<path class="trace-arrow-heap" d="M ${sx} ${sy} L ${tx} ${ty}" ` +
-        `marker-end="url(#trace-arrowhead-dim)"/>`
+        `marker-end="url(#${markerIds.arrowheadDim})"/>`
       );
     }
 
@@ -600,7 +602,7 @@ function generateArrows(
 
     return (
       `<path class="trace-arrow-heap" d="${path}" ` +
-      `marker-end="url(#trace-arrowhead-dim)"/>`
+      `marker-end="url(#${markerIds.arrowheadDim})"/>`
     );
   }
 
@@ -644,7 +646,7 @@ function generateArrows(
       `<path class="trace-arrow-heap" d="` +
       `M ${sx} ${sy} C ${Math.round(cp1x)} ${Math.round(cp1y)}, ` +
       `${Math.round(cp2x)} ${Math.round(cp2y)}, ${ep.x} ${ep.y}" ` +
-      `marker-end="url(#trace-arrowhead-dim)"/>`
+      `marker-end="url(#${markerIds.arrowheadDim})"/>`
     );
   }
 
@@ -772,6 +774,7 @@ export function generateStepSvg(
   step: TraceStep,
   layout: TraceLayout,
   fontSize: number = DEFAULT_FONT_SIZE,
+  markerIdPrefix = 'trace',
 ): string {
   const { stack, heap } = filterStep(step);
 
@@ -836,6 +839,10 @@ export function generateStepSvg(
 
   // Build SVG
   const parts: string[] = [];
+  const markerIds = {
+    arrowhead: `${markerIdPrefix}-arrowhead`,
+    arrowheadDim: `${markerIdPrefix}-arrowhead-dim`,
+  };
   parts.push(
     `<svg class="trace-memory" viewBox="0 0 ${totalWidth} ${totalHeight}" ` +
       `width="${totalWidth}" height="${totalHeight}" ` +
@@ -845,13 +852,13 @@ export function generateStepSvg(
   // Defs: arrowhead markers
   parts.push('<defs>');
   parts.push(
-    '<marker id="trace-arrowhead" markerWidth="8" markerHeight="6" ' +
+    `<marker id="${markerIds.arrowhead}" markerWidth="8" markerHeight="6" ` +
       'refX="8" refY="3" orient="auto" markerUnits="strokeWidth">',
   );
   parts.push('<polygon class="trace-arrowhead" points="0 0, 8 3, 0 6"/>');
   parts.push('</marker>');
   parts.push(
-    '<marker id="trace-arrowhead-dim" markerWidth="8" markerHeight="6" ' +
+    `<marker id="${markerIds.arrowheadDim}" markerWidth="8" markerHeight="6" ` +
       'refX="8" refY="3" orient="auto" markerUnits="strokeWidth">',
   );
   parts.push('<polygon class="trace-arrowhead-dim" points="0 0, 8 3, 0 6"/>');
@@ -884,6 +891,7 @@ export function generateStepSvg(
     stackLayouts,
     heapObjMap,
     dims,
+    markerIds,
   );
   for (const arrow of arrowParts) {
     parts.push(arrow);

package/package.json

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

package/src/question/index.ts

@@ -13,10 +13,22 @@ export default (window: Window) => {
       el.removeAttribute('aria-label');
     };
 
-    el.addEventListener('click', reveal);
+    el.addEventListener('click', (e: MouseEvent) => {
+      if (el.hasAttribute('data-revealed')) {
+        return;
+      }
+
+      e.stopPropagation();
+      reveal();
+    });
     el.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (el.hasAttribute('data-revealed')) {
+        return;
+      }
+
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
+        e.stopPropagation();
         reveal();
       }
     });

package/src/slides/index.ts

@@ -23,7 +23,7 @@ function isInteractive(
     target instanceof view.Element ? target : target.parentElement;
   return Boolean(
     element?.closest(
-      'a, button, input, select, textarea, summary, label, [role="button"], [contenteditable=""], [contenteditable="true"], .question-a-body',
+      'a, button, input, select, textarea, summary, label, [role="button"], [contenteditable=""], [contenteditable="true"]',
     ),
   );
 }