afterbefore 0.1.7 → 0.1.8

package/dist/index.d.ts

@@ -1,22 +1,3 @@
-import * as child_process from 'child_process';
-import * as playwright from 'playwright';
-
-type DiffStatus = "A" | "M" | "D" | "R" | "C";
-interface DiffFile {
-    status: DiffStatus;
-    path: string;
-    oldPath?: string;
-}
-type FileCategory = "page" | "component" | "style" | "layout" | "utility" | "config" | "test" | "other";
-interface ClassifiedFile extends DiffFile {
-    category: FileCategory;
-}
-interface ImportGraph {
-    /** file → set of files it imports */
-    forward: Map<string, Set<string>>;
-    /** file → set of files that import it */
-    reverse: Map<string, Set<string>>;
-}
 interface AffectedRoute {
     /** File system path to the page file (e.g. app/about/page.tsx) */
     pagePath: string;
@@ -48,16 +29,6 @@ interface ScenarioConfig {
 interface AfterbeforeConfig {
     scenarios?: Record<string, ScenarioConfig[]>;
 }
-interface CaptureTask {
-    route: string;
-    label: string;
-    prefix: string;
-    actions?: ScenarioAction[];
-    selector?: string;
-    skipAutoTabs?: boolean;
-    skipAutoSections?: boolean;
-    changedComponents?: string[];
-}
 interface CompareResult {
     route: string;
     prefix: string;
@@ -69,28 +40,6 @@ interface CompareResult {
     diffPercentage: number;
     changed: boolean;
 }
-interface CaptureOptions {
-    /** Browser instance to reuse (avoids double launch) */
-    browser?: playwright.Browser;
-    /** Viewport width (default: 1280) */
-    width: number;
-    /** Viewport height (default: 720) */
-    height: number;
-    /** Playwright device descriptor name (e.g. "iPhone 14") */
-    device?: string;
-    /** Extra delay in ms after page load (default: 0) */
-    delay: number;
-    /** Auto-detect and capture ARIA tab states (default: true) */
-    autoTabs: boolean;
-    /** Maximum auto-detected tabs per route (default: 5) */
-    maxTabsPerRoute: number;
-    /** Auto-detect and capture heading-labeled sections (default: false) */
-    autoSections: boolean;
-    /** Maximum auto-detected sections per page state (default: 10) */
-    maxSectionsPerRoute: number;
-    /** Progress callback: called with (1-based index, route) for each route */
-    onProgress?: (index: number, route: string) => void;
-}
 interface PipelineOptions {
     /** Base branch/ref to compare against (default: "main") */
     base: string;
@@ -116,24 +65,14 @@ interface PipelineOptions {
     autoTabs: boolean;
     /** Maximum auto-detected tabs per route (default: 5) */
     maxTabsPerRoute: number;
-    /** Auto-detect and capture heading-labeled sections (default: false) */
+    /** Auto-detect and capture heading-labeled sections (default: true) */
     autoSections: boolean;
     /** Maximum auto-detected sections per page state (default: 10) */
     maxSectionsPerRoute: number;
 }
-interface ServerInfo {
-    port: number;
-    process: child_process.ChildProcess;
-    url: string;
-}
-interface WorktreeInfo {
-    path: string;
-    ref: string;
-    cleanup: () => Promise<void>;
-}
 
 declare function runPipeline(options: PipelineOptions): Promise<void>;
 
 declare function loadConfig(cwd: string): Promise<AfterbeforeConfig | null>;
 
-export { type AffectedRoute, type AfterbeforeConfig, type CaptureOptions, type CaptureResult, type CaptureTask, type ClassifiedFile, type CompareResult, type DiffFile, type DiffStatus, type FileCategory, type ImportGraph, type PipelineOptions, type ScenarioConfig, type ServerInfo, type WorktreeInfo, loadConfig, runPipeline };
+export { type AffectedRoute, type AfterbeforeConfig, type CaptureResult, type CompareResult, type PipelineOptions, loadConfig, runPipeline };

package/dist/index.js

@@ -108,6 +108,7 @@ var Logger = class {
       return;
     }
     this.spinner.text = text;
+    this.spinner.render();
   }
   completePipeline(finished = false) {
     this.pipelineActive = false;
@@ -410,12 +411,6 @@ function isGlobalVisualFile(filePath) {
   const p = filePath.replace(/^src\//, "");
   return GLOBAL_FILES.has(p) || /globals?\.(css|scss)$/.test(p);
 }
-var VISUAL_CATEGORIES = /* @__PURE__ */ new Set([
-  "page",
-  "component",
-  "style",
-  "layout"
-]);
 function classifyFile(filePath) {
   const p = filePath.replace(/^src\//, "");
   if (/\.(test|spec)\.[tj]sx?$/.test(p) || /^tests?\//.test(p) || /\/__tests__\//.test(p) || p.includes(".test.") || p.includes(".spec.")) {
@@ -452,9 +447,6 @@ function classifyFiles(files) {
     category: classifyFile(f.path)
   }));
 }
-function filterVisuallyRelevant(files) {
-  return files.filter((f) => VISUAL_CATEGORIES.has(f.category));
-}
 
 // src/stages/graph.ts
 import { readdirSync, readFileSync as readFileSync4 } from "fs";
@@ -706,6 +698,14 @@ function getLayoutDir(filePath) {
   return match[1];
 }
 
+// src/utils/path.ts
+function normalizePath(filePath) {
+  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
+}
+function sanitizeLabel(label, maxLength = 40) {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, maxLength);
+}
+
 // src/stages/impact.ts
 var MAX_DEPTH = 3;
 function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
@@ -773,6 +773,28 @@ function findAffectedRoutes(changedFiles, graph, projectRoot, maxRoutes = 0) {
   logger.dim(`Found ${routes.length} affected route(s)`);
   return routes;
 }
+function findRoutesForFile(file, graph) {
+  const routes = /* @__PURE__ */ new Set();
+  const start = normalizePath(file);
+  const queue = [{ path: start, depth: 0 }];
+  const visited = /* @__PURE__ */ new Set([start]);
+  while (queue.length > 0) {
+    const { path, depth } = queue.shift();
+    if (isPageFile(path)) {
+      const route = pagePathToRoute(path);
+      if (route) routes.add(route);
+    }
+    if (depth >= MAX_DEPTH) continue;
+    const importers = graph.reverse.get(path);
+    if (!importers) continue;
+    for (const importer of importers) {
+      if (visited.has(importer)) continue;
+      visited.add(importer);
+      queue.push({ path: importer, depth: depth + 1 });
+    }
+  }
+  return Array.from(routes);
+}
 
 // src/stages/worktree.ts
 import { execSync as execSync2 } from "child_process";
@@ -956,7 +978,7 @@ async function detectTabs(page, maxTabs) {
   return allTabs.filter((t) => !t.selected).slice(0, maxTabs);
 }
 function sanitizeTabLabel(label) {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+  return sanitizeLabel(label);
 }
 
 // src/utils/sections.ts
@@ -1048,7 +1070,7 @@ async function cleanupSectionTags(page) {
   });
 }
 function sanitizeSectionLabel(label) {
-  return label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40);
+  return sanitizeLabel(label);
 }
 
 // src/stages/capture.ts
@@ -1064,11 +1086,9 @@ async function launchBrowser() {
   }
 }
 var MAX_COMPONENT_INSTANCES_PER_SOURCE = 20;
-function normalizePath(filePath) {
-  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
-}
 function sanitizeComponentLabel(label) {
-  return label.toLowerCase().replace(/\.[a-z0-9]+$/i, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 60);
+  const noExt = label.replace(/\.[a-z0-9]+$/i, "");
+  return sanitizeLabel(noExt, 60);
 }
 function groupBySource(instances) {
   const map = /* @__PURE__ */ new Map();
@@ -1383,6 +1403,88 @@ async function captureAutoSections(afterPage, beforePage, parentPrefix, parentLa
   await cleanupSectionTags(afterPage);
   await cleanupSectionTags(beforePage);
 }
+async function captureAutoTabs(afterPage, beforePage, task, beforeUrl, afterUrl, outputDir, options, settle, results) {
+  const tabs = await detectTabs(afterPage, options.maxTabsPerRoute);
+  const usedPrefixes = /* @__PURE__ */ new Set();
+  for (const tab of tabs) {
+    let slug = sanitizeTabLabel(tab.label);
+    if (!slug) continue;
+    if (usedPrefixes.has(slug)) {
+      let suffix = 2;
+      while (usedPrefixes.has(`${slug}-${suffix}`)) suffix++;
+      slug = `${slug}-${suffix}`;
+    }
+    usedPrefixes.add(slug);
+    const tabPrefix = `${task.prefix}~${slug}`;
+    const tabLabel = `${task.label} [${tab.label}]`;
+    const tabBeforePath = join6(outputDir, `${tabPrefix}-before.png`);
+    const tabAfterPath = join6(outputDir, `${tabPrefix}-after.png`);
+    try {
+      const afterUrlBefore = afterPage.url();
+      await afterPage.getByRole("tab", { name: tab.label }).first().click();
+      await settle(afterPage);
+      if (afterPage.url() !== afterUrlBefore) {
+        await afterPage.goBack({ waitUntil: "networkidle" });
+        await settle(afterPage);
+        continue;
+      }
+      await afterPage.screenshot({ path: tabAfterPath, fullPage: true });
+      try {
+        const beforeUrlBefore = beforePage.url();
+        await beforePage.getByRole("tab", { name: tab.label }).first().click({ timeout: 2e3 });
+        await settle(beforePage);
+        if (beforePage.url() !== beforeUrlBefore) {
+          await beforePage.goBack({ waitUntil: "networkidle" });
+          await settle(beforePage);
+          await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+        } else {
+          await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+        }
+      } catch {
+        await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
+      }
+      results.push({
+        route: tabLabel,
+        prefix: tabPrefix,
+        beforePath: tabBeforePath,
+        afterPath: tabAfterPath
+      });
+      if ((task.changedComponents?.length ?? 0) > 0) {
+        await captureComponentInstances(
+          afterPage,
+          beforePage,
+          task.changedComponents,
+          tabPrefix,
+          tabLabel,
+          outputDir,
+          tabBeforePath,
+          tabAfterPath,
+          results
+        );
+      }
+      if (options.autoSections && !task.skipAutoSections) {
+        await captureAutoSections(
+          afterPage,
+          beforePage,
+          tabPrefix,
+          tabLabel,
+          outputDir,
+          options,
+          settle,
+          results
+        );
+      }
+    } catch {
+      logger.dim(`  Skipped tab "${tab.label}" on ${task.route}`);
+    }
+  }
+  if (tabs.length > 0) {
+    await Promise.all([
+      beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }),
+      afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" })
+    ]);
+  }
+}
 async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
   const browser = options.browser ?? await launchBrowser();
   const ownsBrowser = !options.browser;
@@ -1465,86 +1567,17 @@ async function captureRoutes(tasks, beforeUrl, afterUrl, outputDir, options) {
         );
       }
       if (options.autoTabs && !task.actions && !task.selector && !task.skipAutoTabs) {
-        const tabs = await detectTabs(afterPage, options.maxTabsPerRoute);
-        const usedPrefixes = /* @__PURE__ */ new Set();
-        for (const tab of tabs) {
-          let slug = sanitizeTabLabel(tab.label);
-          if (!slug) continue;
-          if (usedPrefixes.has(slug)) {
-            let suffix = 2;
-            while (usedPrefixes.has(`${slug}-${suffix}`)) suffix++;
-            slug = `${slug}-${suffix}`;
-          }
-          usedPrefixes.add(slug);
-          const tabPrefix = `${task.prefix}~${slug}`;
-          const tabLabel = `${task.label} [${tab.label}]`;
-          const tabBeforePath = join6(outputDir, `${tabPrefix}-before.png`);
-          const tabAfterPath = join6(outputDir, `${tabPrefix}-after.png`);
-          try {
-            const afterUrlBefore = afterPage.url();
-            await afterPage.getByRole("tab", { name: tab.label }).first().click();
-            await settle(afterPage);
-            if (afterPage.url() !== afterUrlBefore) {
-              await afterPage.goBack({ waitUntil: "networkidle" });
-              await settle(afterPage);
-              continue;
-            }
-            await afterPage.screenshot({ path: tabAfterPath, fullPage: true });
-            try {
-              const beforeUrlBefore = beforePage.url();
-              await beforePage.getByRole("tab", { name: tab.label }).first().click({ timeout: 2e3 });
-              await settle(beforePage);
-              if (beforePage.url() !== beforeUrlBefore) {
-                await beforePage.goBack({ waitUntil: "networkidle" });
-                await settle(beforePage);
-                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-              } else {
-                await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-              }
-            } catch {
-              await beforePage.screenshot({ path: tabBeforePath, fullPage: true });
-            }
-            results.push({
-              route: tabLabel,
-              prefix: tabPrefix,
-              beforePath: tabBeforePath,
-              afterPath: tabAfterPath
-            });
-            if ((task.changedComponents?.length ?? 0) > 0) {
-              await captureComponentInstances(
-                afterPage,
-                beforePage,
-                task.changedComponents,
-                tabPrefix,
-                tabLabel,
-                outputDir,
-                tabBeforePath,
-                tabAfterPath,
-                results
-              );
-            }
-            if (options.autoSections && !task.skipAutoSections) {
-              await captureAutoSections(
-                afterPage,
-                beforePage,
-                tabPrefix,
-                tabLabel,
-                outputDir,
-                options,
-                settle,
-                results
-              );
-            }
-          } catch {
-            logger.dim(`  Skipped tab "${tab.label}" on ${task.route}`);
-          }
-        }
-        if (tabs.length > 0) {
-          await Promise.all([
-            beforePage.goto(`${beforeUrl}${task.route}`, { waitUntil: "networkidle" }),
-            afterPage.goto(`${afterUrl}${task.route}`, { waitUntil: "networkidle" })
-          ]);
-        }
+        await captureAutoTabs(
+          afterPage,
+          beforePage,
+          task,
+          beforeUrl,
+          afterUrl,
+          outputDir,
+          options,
+          settle,
+          results
+        );
       }
     }
     await Promise.all([beforeCtx.close(), afterCtx.close()]);
@@ -1775,36 +1808,10 @@ function routeToPrefix(route) {
   if (route === "/") return "_root";
   return route.replace(/^\//, "").replace(/\//g, "-");
 }
-var ROUTE_IMPACT_MAX_DEPTH = 3;
-function normalizePath2(filePath) {
-  return filePath.replace(/\\/g, "/").replace(/^\.\//, "");
-}
-function findRoutesForChangedFile(changedFile, graph) {
-  const routes = /* @__PURE__ */ new Set();
-  const start = normalizePath2(changedFile);
-  const queue = [{ file: start, depth: 0 }];
-  const visited = /* @__PURE__ */ new Set([start]);
-  while (queue.length > 0) {
-    const { file, depth } = queue.shift();
-    if (isPageFile(file)) {
-      const route = pagePathToRoute(file);
-      if (route) routes.add(route);
-    }
-    if (depth >= ROUTE_IMPACT_MAX_DEPTH) continue;
-    const importers = graph.reverse.get(file);
-    if (!importers) continue;
-    for (const importer of importers) {
-      if (visited.has(importer)) continue;
-      visited.add(importer);
-      queue.push({ file: importer, depth: depth + 1 });
-    }
-  }
-  return Array.from(routes);
-}
 function mapRouteToChangedComponents(changedComponentFiles, graph) {
   const routeMap = /* @__PURE__ */ new Map();
   for (const componentPath of changedComponentFiles) {
-    const routes = findRoutesForChangedFile(componentPath, graph);
+    const routes = findRoutesForFile(componentPath, graph);
     for (const route of routes) {
       const next = routeMap.get(route) ?? [];
       next.push(componentPath);
@@ -1847,7 +1854,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.7" : "dev";
+    const version = true ? "0.1.8" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -1862,7 +1869,6 @@ afterbefore v${version} \xB7 Comparing against ${base}
       return;
     }
     const classified = classifyFiles(diffFiles);
-    const visualFiles = filterVisuallyRelevant(classified);
     const impactfulFiles = classified.filter(
       (f) => f.category !== "test" && f.category !== "other"
     );