afterbefore 0.1.4 → 0.1.6

package/dist/cli.js

@@ -4,6 +4,7 @@
 import { Command } from "commander";
 
 // src/logger.ts
+import { writeFileSync } from "fs";
 import chalk from "chalk";
 import ora from "ora";
 var BAR_WIDTH = 20;
@@ -14,7 +15,13 @@ var Logger = class {
   lastStep = 0;
   lastLabel = "";
   pipelineActive = false;
+  logBuffer = [];
+  log(level, message) {
+    const ts = (/* @__PURE__ */ new Date()).toISOString();
+    this.logBuffer.push(`${ts} [${level}] ${message}`);
+  }
   info(message) {
+    this.log("info", message);
     if (this.pipelineActive) return;
     if (this.spinner) {
       this.spinner.clear();
@@ -25,6 +32,7 @@ var Logger = class {
     }
   }
   success(message) {
+    this.log("ok", message);
     if (this.pipelineActive) return;
     if (this.spinner) {
       this.spinner.clear();
@@ -35,6 +43,7 @@ var Logger = class {
     }
   }
   warn(message) {
+    this.log("warn", message);
     if (this.spinner) {
       this.spinner.clear();
       console.log(chalk.yellow("\u26A0"), message);
@@ -44,6 +53,7 @@ var Logger = class {
     }
   }
   error(message) {
+    this.log("error", message);
     if (this.spinner) {
       this.spinner.clear();
       console.error(chalk.red("\u2716"), message);
@@ -53,6 +63,7 @@ var Logger = class {
     }
   }
   dim(message) {
+    this.log("debug", message);
     if (this.pipelineActive) return;
     if (this.spinner) {
       this.spinner.clear();
@@ -63,6 +74,7 @@ var Logger = class {
     }
   }
   spin(message) {
+    this.log("info", message);
     this.clearSpinner();
     this.spinner = ora(message).start();
     return this.spinner;
@@ -76,6 +88,7 @@ var Logger = class {
     this.lastLabel = "";
     this.pipelineActive = true;
     this.clearSpinner();
+    this.log("info", `Pipeline started (${total} steps)`);
     const text = this.renderPipeline(0, "Starting...");
     this.spinner = ora({
       text: chalk.dim(text),
@@ -86,6 +99,7 @@ var Logger = class {
     if (step === this.lastStep && label === this.lastLabel) return;
     this.lastStep = step;
     this.lastLabel = label;
+    this.log("step", `${step}/${this.pipelineTotal} ${label}`);
     const text = chalk.dim(this.renderPipeline(step, label));
     if (!this.spinner) {
       this.spinner = ora({
@@ -98,28 +112,33 @@ var Logger = class {
   }
   completePipeline(finished = false) {
     this.pipelineActive = false;
+    this.log("info", `Pipeline ${finished ? "completed" : "stopped"}`);
     if (this.spinner) {
       if (finished) {
         this.spinner.stop();
-        const bar = "\u2588".repeat(BAR_WIDTH);
+        const bar = "#".repeat(BAR_WIDTH);
         console.log(`${chalk.green("\u2714")}  ${bar}`);
       } else {
         this.spinner.stop();
       }
       this.spinner = null;
     } else if (finished) {
-      const bar = "\u2588".repeat(BAR_WIDTH);
+      const bar = "#".repeat(BAR_WIDTH);
       console.log(`${chalk.green("\u2714")} ${bar}`);
     }
     this.pipelineTotal = 0;
     this.lastStep = 0;
     this.lastLabel = "";
   }
+  writeLogFile(filePath) {
+    if (this.logBuffer.length === 0) return;
+    writeFileSync(filePath, this.logBuffer.join("\n") + "\n", "utf-8");
+  }
   renderPipeline(step, label) {
     const total = this.pipelineTotal || 1;
     const clampedStep = Math.max(0, Math.min(step, total));
     const filled = Math.round(clampedStep / total * BAR_WIDTH);
-    const bar = "\u2588".repeat(filled) + "\u2591".repeat(BAR_WIDTH - filled);
+    const bar = "#".repeat(filled) + "-".repeat(BAR_WIDTH - filled);
     return `  ${bar} ${clampedStep}/${total} ${label}`;
   }
   clearSpinner() {
@@ -1311,13 +1330,19 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
           tagChangedComponentInstances(afterPage, changedComponents),
           tagChangedComponentInstances(beforePage, changedComponents)
         ]);
+        logger.dim(`  Component detection on ${task.route}: ${changedComponents.length} source(s), ${afterInstances.length} after / ${beforeInstances.length} before instance(s)`);
         const afterBySource = groupBySource(afterInstances);
         const beforeBySource = groupBySource(beforeInstances);
         for (const source of changedComponents) {
           const afterList = afterBySource.get(source) ?? [];
           const beforeList = beforeBySource.get(source) ?? [];
           const pairCount = Math.min(afterList.length, beforeList.length);
-          if (pairCount === 0) continue;
+          if (pairCount === 0) {
+            if (afterList.length > 0 || beforeList.length > 0) {
+              logger.dim(`  ${source}: ${afterList.length} after / ${beforeList.length} before (skipping unpaired)`);
+            }
+            continue;
+          }
           for (let pairIndex = 0; pairIndex < pairCount; pairIndex++) {
             const afterInstance = afterList[pairIndex];
             const beforeInstance = beforeList[pairIndex];
@@ -1325,13 +1350,6 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
             const itemSlug = `${sourceSlug}-${pairIndex + 1}`;
             const componentName = afterInstance.name || beforeInstance.name || source.split("/").pop() || source;
             const baseLabel = `${task.label} [${componentName} #${pairIndex + 1}]`;
-            const contextPrefix = `${task.prefix}~cmp.${itemSlug}~context`;
-            results.push({
-              route: `${baseLabel} [context]`,
-              prefix: contextPrefix,
-              beforePath,
-              afterPath
-            });
             const parentPrefix = `${task.prefix}~cmp.${itemSlug}~parent`;
             const parentBeforePath = join6(outputDir, `${parentPrefix}-before.png`);
             const parentAfterPath = join6(outputDir, `${parentPrefix}-after.png`);
@@ -1382,6 +1400,15 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
                 afterPath: componentAfterPath
               });
             }
+            if (parentBeforeOk && parentAfterOk || componentBeforeOk && componentAfterOk) {
+              const contextPrefix = `${task.prefix}~cmp.${itemSlug}~context`;
+              results.push({
+                route: `${baseLabel} [context]`,
+                prefix: contextPrefix,
+                beforePath,
+                afterPath
+              });
+            }
           }
         }
       }
@@ -1571,7 +1598,7 @@ async function compareScreenshots(captures, outputDir, threshold = 0.1, options)
 }
 
 // src/stages/report.ts
-import { writeFileSync } from "fs";
+import { writeFileSync as writeFileSync2 } from "fs";
 import { join as join8 } from "path";
 import { execSync as execSync4 } from "child_process";
 
@@ -1744,11 +1771,11 @@ async function generateReport(results, outputDir, options) {
   await ensureDir(outputDir);
   const summaryMd = generateSummaryMd(results);
   const summaryPath = join8(outputDir, "summary.md");
-  writeFileSync(summaryPath, summaryMd, "utf-8");
+  writeFileSync2(summaryPath, summaryMd, "utf-8");
   logger.success(`Written summary to ${summaryPath}`);
   const reportHtml = generateReportHtml(results, outputDir);
   const indexPath = join8(outputDir, "index.html");
-  writeFileSync(indexPath, reportHtml, "utf-8");
+  writeFileSync2(indexPath, reportHtml, "utf-8");
   logger.success(`Written report to ${indexPath}`);
   if (options.post) {
     const prNumber = findPrNumber();
@@ -1851,7 +1878,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.4" : "dev";
+    const version = true ? "0.1.6" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -1989,6 +2016,10 @@ afterbefore v${version} \xB7 Comparing against ${base}
       openInBrowser(resolve4(outputDir, "index.html"));
     }
   } finally {
+    try {
+      logger.writeLogFile(resolve4(outputDir, "debug.log"));
+    } catch {
+    }
     await cleanupRegistry.runAll();
   }
 }
@@ -1997,7 +2028,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
 var program = new Command();
 program.name("afterbefore").description(
   "Automatic before/after screenshot capture for PRs. Git diff is the config."
-).version("0.1.4").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
+).version("0.1.6").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
   "--threshold <percent>",
   "Diff threshold percentage (changes below this are ignored)",
   "0.1"