difflens 0.0.1

package/dist/chunk-LVDSHTE4.mjs

@@ -0,0 +1,433 @@
+// src/config.ts
+import path from "path";
+import fs from "fs";
+import { build } from "esbuild";
+var DEFAULT_CONFIG = {
+  scenarios: [],
+  threshold: 0.1,
+  outDir: ".difflens"
+};
+async function loadConfig(configPath) {
+  const searchPlaces = [
+    "difflens.config.ts",
+    "difflens.config.js",
+    "difflens.config.mjs",
+    "difflens.config.cjs"
+  ];
+  let resolvedPath;
+  if (configPath) {
+    resolvedPath = path.resolve(process.cwd(), configPath);
+  } else {
+    for (const place of searchPlaces) {
+      const p = path.resolve(process.cwd(), place);
+      if (fs.existsSync(p)) {
+        resolvedPath = p;
+        break;
+      }
+    }
+  }
+  if (!resolvedPath) {
+    console.warn("No configuration file found. Using default config.");
+    return DEFAULT_CONFIG;
+  }
+  try {
+    let importPath = resolvedPath;
+    let isTs = resolvedPath.endsWith(".ts");
+    let tempFile = null;
+    if (isTs) {
+      const outfile = resolvedPath.replace(/\.ts$/, ".js.tmp.mjs");
+      await build({
+        entryPoints: [resolvedPath],
+        outfile,
+        bundle: true,
+        platform: "node",
+        format: "esm",
+        external: ["difflens"]
+        // Exclude self if referenced?
+      });
+      importPath = outfile;
+      tempFile = outfile;
+    }
+    const importUrl = `file://${importPath}`;
+    const userConfigModule = await import(importUrl);
+    const userConfig = userConfigModule.default || userConfigModule;
+    if (tempFile && fs.existsSync(tempFile)) {
+      fs.unlinkSync(tempFile);
+    }
+    return {
+      ...DEFAULT_CONFIG,
+      ...userConfig
+    };
+  } catch (error) {
+    console.error(`Failed to load configuration from ${resolvedPath}:`, error);
+    throw error;
+  }
+}
+
+// src/core/runner.ts
+import { chromium } from "playwright";
+import path3 from "path";
+import fs4 from "fs";
+
+// src/core/capture.ts
+async function captureScreenshot(page, url, outputPath, options = {}) {
+  if (url) {
+    await page.goto(url, { waitUntil: "networkidle" });
+  }
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after {
+        animation-duration: 0s !important;
+        transition-duration: 0s !important;
+        animation-iteration-count: 1 !important;
+      }
+    `
+  });
+  if (options.hideSelectors) {
+    for (const selector of options.hideSelectors) {
+      await page.locator(selector).evaluate((el) => el.style.visibility = "hidden");
+    }
+  }
+  if (options.maskSelectors) {
+    for (const selector of options.maskSelectors) {
+      await page.locator(selector).evaluate((el) => el.style.backgroundColor = "#FF00FF");
+    }
+  }
+  await page.screenshot({
+    path: outputPath,
+    fullPage: options.fullPage ?? true,
+    animations: "disabled"
+  });
+}
+
+// src/core/compare.ts
+import fs2 from "fs";
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+function compareImages(img1Path, img2Path, diffPath, threshold = 0.1) {
+  const img1 = PNG.sync.read(fs2.readFileSync(img1Path));
+  const img2 = PNG.sync.read(fs2.readFileSync(img2Path));
+  const { width, height } = img1;
+  const diff = new PNG({ width, height });
+  if (img1.width !== img2.width || img1.height !== img2.height) {
+    return {
+      diffPixels: -1,
+      diffPercentage: -1,
+      isSameDimensions: false
+    };
+  }
+  const diffPixels = pixelmatch(
+    img1.data,
+    img2.data,
+    diff.data,
+    width,
+    height,
+    { threshold }
+  );
+  fs2.writeFileSync(diffPath, PNG.sync.write(diff));
+  const totalPixels = width * height;
+  const diffPercentage = diffPixels / totalPixels * 100;
+  return {
+    diffPixels,
+    diffPercentage,
+    isSameDimensions: true
+  };
+}
+
+// src/core/a11y.ts
+import AxeBuilder from "@axe-core/playwright";
+async function runAxeAudit(page) {
+  const results = await new AxeBuilder({ page }).analyze();
+  if (results.violations.length > 0) {
+    console.error(`Found ${results.violations.length} accessibility violations:`);
+    results.violations.forEach((violation) => {
+      console.error(`- [${violation.impact}] ${violation.help} (${violation.id})`);
+      violation.nodes.forEach((node) => {
+        console.error(`  Target: ${node.target}`);
+      });
+    });
+  }
+  return {
+    violations: results.violations
+  };
+}
+
+// src/core/report.ts
+import fs3 from "fs";
+import path2 from "path";
+function generateHtmlReport(data, outDir) {
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DiffLens Report</title>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
+    .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; }
+    .summary { margin-bottom: 20px; padding: 15px; background: #eef; border-radius: 4px; }
+    .scenario { border: 1px solid #ddd; margin-bottom: 20px; border-radius: 4px; overflow: hidden; }
+    .scenario-header { padding: 10px 15px; background: #f9f9f9; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
+    .scenario-title { font-weight: bold; font-size: 1.1em; }
+    .status { padding: 4px 8px; border-radius: 4px; font-size: 0.9em; font-weight: bold; color: white; }
+    .status.pass { background: #28a745; }
+    .status.fail { background: #dc3545; }
+    .status.new { background: #17a2b8; }
+    .scenario-body { padding: 15px; }
+    .images { display: flex; gap: 20px; margin-bottom: 15px; overflow-x: auto; }
+    .image-container { flex: 0 0 auto; }
+    .image-container img { max-width: 300px; border: 1px solid #ddd; border-radius: 4px; }
+    .image-label { font-size: 0.9em; color: #666; margin-bottom: 5px; }
+    .a11y { margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px; }
+    .a11y-title { font-weight: bold; color: #666; margin-bottom: 5px; }
+    .violation { margin-bottom: 5px; color: #d63384; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>DiffLens Report</h1>
+    <div class="summary">
+      <p><strong>Generated at:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
+      <p><strong>Total Scenarios:</strong> ${data.results.length}</p>
+      <p><strong>Failed:</strong> ${data.results.filter((r) => r.status === "fail").length}</p>
+    </div>
+
+    ${data.results.map((result) => `
+      <div class="scenario">
+        <div class="scenario-header">
+          <span class="scenario-title">${result.scenario}</span>
+          <span class="status ${result.status}">${result.status.toUpperCase()}</span>
+        </div>
+        <div class="scenario-body">
+          <div class="images">
+            ${result.baselinePath ? `
+              <div class="image-container">
+                <div class="image-label">Baseline</div>
+                <img src="${path2.relative(path2.resolve(outDir), path2.resolve(result.baselinePath))}" alt="Baseline">
+              </div>
+            ` : ""}
+            <div class="image-container">
+              <div class="image-label">Current</div>
+              <img src="${path2.relative(path2.resolve(outDir), path2.resolve(result.screenshotPath))}" alt="Current">
+            </div>
+            ${result.diffPath ? `
+              <div class="image-container">
+                <div class="image-label">Diff</div>
+                <img src="${path2.relative(path2.resolve(outDir), path2.resolve(result.diffPath))}" alt="Diff">
+              </div>
+            ` : ""}
+          </div>
+          
+          ${result.diffPixels === -1 ? `
+            <p style="color: #dc3545; font-weight: bold;">[FAIL] Dimension mismatch! Baseline and current images have different sizes.</p>
+          ` : `
+            <p><strong>Diff:</strong> ${result.diffPixels} pixels (${result.diffPercentage.toFixed(2)}%)</p>
+          `}
+
+          ${result.a11yViolations.length > 0 ? `
+            <div class="a11y">
+              <div class="a11y-title">Accessibility Violations (${result.a11yViolations.length})</div>
+              ${result.a11yViolations.map((v) => `
+                <div class="violation">
+                  [${v.impact}] ${v.help} (${v.id})
+                </div>
+              `).join("")}
+            </div>
+          ` : '<div class="a11y"><div class="a11y-title">No Accessibility Violations</div></div>'}
+        </div>
+      </div>
+    `).join("")}
+  </div>
+</body>
+</html>
+  `;
+  fs3.writeFileSync(path2.join(outDir, "index.html"), html);
+  fs3.writeFileSync(path2.join(outDir, "report.json"), JSON.stringify(data, null, 2));
+  console.log(`Report generated: ${path2.join(outDir, "index.html")}`);
+}
+
+// src/core/runner.ts
+async function runTests(config) {
+  const browser = await chromium.launch();
+  const context = await browser.newContext();
+  const page = await context.newPage();
+  const outDir = config.outDir || ".difflens";
+  const dirs = {
+    baseline: path3.join(outDir, "baseline"),
+    current: path3.join(outDir, "current"),
+    diff: path3.join(outDir, "diff")
+  };
+  Object.values(dirs).forEach((dir) => {
+    if (!fs4.existsSync(dir)) {
+      fs4.mkdirSync(dir, { recursive: true });
+    }
+  });
+  const results = [];
+  if (!config.scenarios || config.scenarios.length === 0) {
+    console.error("Error: No scenarios defined in configuration.");
+    return false;
+  }
+  for (const scenario of config.scenarios) {
+    const viewports = scenario.viewports || config.viewports && Object.entries(config.viewports).map(([label, { width, height }]) => ({ label, width, height })) || [{ width: 1280, height: 720, label: "default" }];
+    for (const viewport of viewports) {
+      const viewportLabel = viewport.label || `${viewport.width}x${viewport.height}`;
+      const label = viewports.length > 1 || viewport.label ? `${scenario.label}-${viewportLabel}` : scenario.label;
+      console.error(`Running scenario: ${label}`);
+      const url = config.baseUrl ? new URL(scenario.path, config.baseUrl).toString() : scenario.path;
+      await page.setViewportSize({ width: viewport.width, height: viewport.height });
+      let retries = 2;
+      let navigationSuccess = false;
+      while (retries >= 0) {
+        try {
+          await page.goto(url, { waitUntil: "networkidle" });
+          navigationSuccess = true;
+          break;
+        } catch (e) {
+          if (retries === 0) {
+            console.error(`  [WARN] Navigation failed: ${e}`);
+          } else {
+            console.error(`  [WARN] Navigation failed, retrying... (${retries} attempts left)`);
+            retries--;
+            await page.waitForTimeout(1e3);
+          }
+        }
+      }
+      if (!navigationSuccess) {
+        if (config.failOnNavigationError) {
+          console.error(`  [FAIL] Navigation failed.`);
+          results.push({
+            scenario: label,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            status: "fail",
+            diffPixels: 0,
+            diffPercentage: 0,
+            screenshotPath: "",
+            a11yViolations: []
+          });
+          continue;
+        }
+      }
+      let actionFailed = false;
+      if (scenario.actions) {
+        for (const action of scenario.actions) {
+          console.error(`  Action: ${action.type} ${action.selector || ""}`);
+          try {
+            if (action.type === "click" && action.selector) {
+              await page.click(action.selector);
+            } else if (action.type === "type" && action.selector && action.value) {
+              await page.fill(action.selector, action.value);
+            } else if (action.type === "wait" && action.timeout) {
+              await page.waitForTimeout(action.timeout);
+            }
+          } catch (e) {
+            console.error(`  [WARN] Action failed: ${e}`);
+            actionFailed = true;
+            if (config.failOnActionError) {
+              break;
+            }
+          }
+        }
+        await page.waitForTimeout(500);
+      }
+      const currentPath = path3.join(dirs.current, `${label}.png`);
+      retries = 2;
+      while (retries >= 0) {
+        try {
+          await captureScreenshot(page, null, currentPath, {
+            fullPage: true,
+            maskSelectors: scenario.maskSelectors,
+            hideSelectors: scenario.hideSelectors
+          });
+          break;
+        } catch (e) {
+          if (retries === 0) throw e;
+          console.error(`  [WARN] Screenshot failed, retrying... (${retries} attempts left)`);
+          retries--;
+          await page.waitForTimeout(1e3);
+        }
+      }
+      console.error(`  Screenshot captured: ${currentPath}`);
+      const a11yResult = await runAxeAudit(page);
+      if (a11yResult.violations.length > 0) {
+        console.error(`  Accessibility violations: ${a11yResult.violations.length}`);
+      }
+      const baselinePath = path3.join(dirs.baseline, `${label}.png`);
+      const diffPath = path3.join(dirs.diff, `${label}.png`);
+      let status = "new";
+      let diffPixels = 0;
+      let diffPercentage = 0;
+      let finalDiffPath;
+      let finalBaselinePath;
+      let dimensionMismatch = false;
+      if (fs4.existsSync(baselinePath)) {
+        finalBaselinePath = baselinePath;
+        console.error("  Comparing with baseline...");
+        const result = compareImages(baselinePath, currentPath, diffPath, config.threshold);
+        diffPixels = result.diffPixels;
+        diffPercentage = result.diffPercentage;
+        dimensionMismatch = !result.isSameDimensions;
+        if (!result.isSameDimensions) {
+          status = "fail";
+          console.error(`  [FAIL] Dimension mismatch! Baseline and current images have different sizes.`);
+        } else if (result.diffPixels > 0) {
+          status = "fail";
+          finalDiffPath = diffPath;
+          console.error(`  [FAIL] Visual regression detected! Diff pixels: ${result.diffPixels} (${result.diffPercentage.toFixed(2)}%)`);
+          console.error(`  Diff image saved to: ${diffPath}`);
+        } else {
+          status = "pass";
+          console.error("  [PASS] No visual regression detected.");
+        }
+      } else {
+        console.error("  Baseline not found. Saving current as baseline.");
+        fs4.copyFileSync(currentPath, baselinePath);
+        console.error(`  Baseline saved to: ${baselinePath}`);
+        finalBaselinePath = baselinePath;
+      }
+      if (a11yResult.violations.length > 0) {
+        status = "fail";
+        console.error(`  [FAIL] Accessibility violations detected: ${a11yResult.violations.length}`);
+      }
+      if (actionFailed && config.failOnActionError) {
+        status = "fail";
+        console.error(`  [FAIL] Action execution failed.`);
+      }
+      results.push({
+        scenario: label,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        status,
+        diffPixels,
+        diffPercentage,
+        screenshotPath: currentPath,
+        diffPath: finalDiffPath,
+        baselinePath: finalBaselinePath,
+        a11yViolations: a11yResult.violations,
+        dimensionMismatch
+      });
+    }
+  }
+  await browser.close();
+  const reportData = {
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    results
+  };
+  if (config.format === "json") {
+    console.log(JSON.stringify(results, null, 2));
+  } else if (config.format === "ai") {
+    const { formatAiReport } = await import("./ai-reporter-GPDXP36M.mjs");
+    console.log(formatAiReport(results, outDir));
+  } else {
+    generateHtmlReport(reportData, outDir);
+  }
+  const hasFailures = results.some((r) => r.status === "fail");
+  return !hasFailures;
+}
+
+export {
+  DEFAULT_CONFIG,
+  loadConfig,
+  runTests
+};

package/dist/cli.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+
+export {  }