snapdiff-cli 0.1.4 → 0.1.6

package/README.md

@@ -3,7 +3,7 @@
   <p align="center">一行命令的视觉回归测试工具</p>
   <p align="center">
     <a href="https://www.npmjs.com/package/snapdiff-cli"><img src="https://img.shields.io/npm/v/snapdiff-cli" alt="npm"></a>
-    <a href="https://github.com/zixuanlongxi/snapdiff"><img src="https://img.shields.io/badge/license-MIT-blue" alt="license"></a>
+    <a href="https://github.com/zixuan57/snapdiff"><img src="https://img.shields.io/badge/license-MIT-blue" alt="license"></a>
   </p>
 </p>
 
@@ -19,6 +19,8 @@
 - PR 提交前自动对比视觉差异
 - CI 流水线中集成视觉回归检查
 
+<img src="https://raw.githubusercontent.com/zixuan57/snapdiff/main/packages/cli/demo.svg" alt="snapdiff demo" width="800">
+
 ---
 
 ## 快速开始

package/dist/commands/approve.js

@@ -1,10 +1,9 @@
 import pc from "picocolors";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
-import { baselineImagePath, ensureDirs, captureSnapshot, saveBaselineMeta, loadConfig } from "../core/index.js";
+import { baselineImagePath, ensureDirs, captureSnapshot, saveBaselineMeta, loadConfig, baselineExists } from "@snapdiff/core";
 export async function approveCommand(name) {
     const cwd = process.cwd();
-    const { baselineExists } = await import("@snapdiff/core");
     if (!(await baselineExists(cwd, name))) {
         console.log(pc.yellow(`⚠  "${name}" 没有基线截图，无法接受。`));
         console.log(`  请先运行: ${pc.bold(`npx snapdiff capture <url> --name ${name}`)}`);

package/dist/commands/capture.js

@@ -1,4 +1,4 @@
-import { ensureDirs, captureSnapshotsParallel, baselineImagePath, saveBaselineMeta, loadConfig, } from "../core/index.js";
+import { ensureDirs, captureSnapshotsParallel, captureSnapshot, baselineImagePath, saveBaselineMeta, loadConfig } from "@snapdiff/core";
 import pc from "picocolors";
 export async function captureCommand(url, options) {
     const cwd = process.cwd();
@@ -34,7 +34,6 @@ export async function captureCommand(url, options) {
         return;
     }
     await ensureDirs(cwd);
-    const { captureSnapshot } = await import("@snapdiff/core");
     const snap = {
         name: options.name,
         url,

package/dist/commands/diff.js

@@ -1,15 +1,44 @@
-import { ensureDirs, captureSnapshot, captureSnapshotsParallel, baselineImagePath, diffImagePath, compareSnapshots, loadConfig, generateReportSummary, generateHtmlReport, baselineExists, } from "../core/index.js";
+import { join } from "node:path";
+import { unlink, readdir } from "node:fs/promises";
+import { existsSync } from "node:fs";
 import pc from "picocolors";
-import { unlink } from "node:fs/promises";
+import { ensureDirs, captureSnapshot, captureSnapshotsParallel, baselineImagePath, diffImagePath, compareSnapshots, loadConfig, generateReportSummary, generateHtmlReport, baselineExists, makePercentBar, } from "@snapdiff/core";
+const TEMP_DIR = ".snapdiff/tmp";
+function tempImagePath(cwd, name) {
+    return join(cwd, TEMP_DIR, `current-${name}.png`);
+}
+async function cleanupOldFiles(cwd) {
+    const maxAge = 7 * 24 * 60 * 60 * 1000;
+    const now = Date.now();
+    for (const subDir of ["diffs", "reports"]) {
+        const dir = join(cwd, ".snapdiff", subDir);
+        if (!existsSync(dir))
+            continue;
+        try {
+            const files = await readdir(dir);
+            for (const file of files) {
+                const filePath = join(dir, file);
+                try {
+                    const stat = await import("node:fs/promises").then(m => m.stat(filePath));
+                    if (now - stat.mtimeMs > maxAge) {
+                        await unlink(filePath);
+                    }
+                }
+                catch { }
+            }
+        }
+        catch { }
+    }
+}
 export async function diffCommand(url, options) {
     const cwd = process.cwd();
     await ensureDirs(cwd);
     const threshold = parseFloat(options.threshold || "0.1");
-    // No args → run all snaps from config (parallel capture)
+    // No args -> run all snaps from config (parallel capture)
     if (!url && !options.name) {
         const config = await loadConfig(cwd);
         if (!config || config.snaps.length === 0) {
-            console.log(pc.yellow("⚠ 未找到配置，请先运行 snapdiff init 或提供参数"));
+            console.log(pc.yellow("\u26a0 \u672a\u627e\u5230\u914d\u7f6e\uff0c\u8bf7\u5148\u8fd0\u884c snapdiff init \u6216\u63d0\u4f9b\u53c2\u6570"));
             console.log(`  ${pc.bold("npx snapdiff diff <url> --name <name>")}`);
             return;
         }
@@ -20,79 +49,102 @@ export async function diffCommand(url, options) {
                 validSnaps.push(snap);
             }
             else {
-                console.log(pc.yellow(`\n  ⚠ "${snap.name}" 还没有基线截图。`));
+                console.log(pc.yellow(`\n  \u26a0 "${snap.name}" \u8fd8\u6ca1\u6709\u57fa\u7ebf\u622a\u56fe\u3002`));
                 console.log(`     ${pc.bold("npx snapdiff capture " + snap.url + " --name " + snap.name)}`);
             }
         }
         if (validSnaps.length === 0) {
-            console.log(pc.dim("\n  没有需要对比的页面。"));
+            console.log(pc.dim("\n  \u6ca1\u6709\u9700\u8981\u5bf9\u6bd4\u7684\u9875\u9762\u3002"));
             return;
         }
-        console.log(pc.cyan(`\n  正在并行截取 ${validSnaps.length} 个页面...`));
+        await cleanupOldFiles(cwd);
+        console.log(pc.cyan(`\n  \u6b63\u5728\u5e76\u884c\u622a\u53d6 ${validSnaps.length} \u4e2a\u9875\u9762...`));
         const timestamp = String(Math.floor(Date.now() / 1000));
-        // Phase 1: capture all current states in parallel
+        // Phase 1: capture all current states in parallel (to tmp dir)
         const captureTasks = validSnaps.map((snap) => ({
             config: {
                 ...snap,
                 viewport: snap.viewport ?? { width: 1440, height: 900 },
                 threshold: snap.threshold ?? 0.1,
             },
-            outputPath: baselineImagePath(cwd, "current-" + snap.name),
+            outputPath: tempImagePath(cwd, snap.name),
         }));
         const captureResults = await captureSnapshotsParallel(captureTasks, 3);
-        // Phase 2: compare all diffs (sequential, fast operations)
+        // Phase 2: compare all diffs
         const results = [];
+        const currentPaths = {};
         for (let i = 0; i < validSnaps.length; i++) {
             const snap = validSnaps[i];
-            const currentPath = captureResults[i].imagePath;
+            const captureResult = captureResults[i];
+            if (captureResult.error) {
+                results.push({
+                    name: snap.name,
+                    url: snap.url,
+                    diffPixels: 0,
+                    totalPixels: 0,
+                    diffPercent: 0,
+                    error: '\u622a\u56fe\u5931\u8d25: ' + captureResult.error,
+                    passed: false,
+                });
+                console.log('  \u26a0 ' + snap.name + ': \u622a\u56fe\u5931\u8d25 - ' + captureResult.error);
+                continue;
+            }
+            const currentPath = captureResult.imagePath;
+            currentPaths[snap.name] = currentPath;
             const diffOut = diffImagePath(cwd, snap.name, timestamp);
             const result = await compareSnapshots({
                 baselinePath: baselineImagePath(cwd, snap.name),
                 currentPath,
                 diffOutputPath: diffOut,
                 threshold: threshold / 100,
+                maskRegions: snap.maskRegions,
             });
             result.name = snap.name;
             result.url = snap.url;
             results.push(result);
-            await unlink(currentPath).catch(() => { });
             if (result.error) {
-                console.log("  ⚠ " + snap.name + ": " + result.error);
+                console.log("  \u26a0 " + snap.name + ": " + result.error);
             }
             else if (result.passed) {
-                console.log(pc.green("  ✅ " + snap.name + " ── 无变化 (差异 " + result.diffPercent + "%)"));
+                console.log(pc.green("  \u2705 " + snap.name + " \u2014\u2014 \u65e0\u53d8\u5316 (\u5dee\u5f02 " + result.diffPercent + "%)"));
             }
             else {
-                const bar = makeBar(result.diffPercent, 20);
-                console.log("  ❌ " + snap.name);
-                console.log("     " + bar + " " + result.diffPercent + "% (" + result.diffPixels + " 像素)");
-                console.log(pc.dim("     📄 diff 图: " + result.diffImagePath));
-                console.log(pc.cyan("     如果这是预期的变更: " + pc.bold("npx snapdiff approve " + snap.name)));
+                const bar = makePercentBar(result.diffPercent, 20);
+                console.log("  \u274c " + snap.name);
+                console.log("     " + bar + " " + result.diffPercent + "% (" + result.diffPixels + " \u50cf\u7d20)");
+                console.log(pc.dim("     \ud83d\udcc4 diff \u56fe: " + result.diffImagePath));
+                console.log(pc.cyan("     \u5982\u679c\u8fd9\u662f\u9884\u671f\u7684\u53d8\u66f4: " + pc.bold("npx snapdiff approve " + snap.name)));
             }
         }
+        // Generate report BEFORE cleanup (so current images are available)
         if (results.length > 0) {
             console.log(generateReportSummary(results));
-            const htmlPath = await generateHtmlReport(results, cwd);
-            console.log(pc.cyan("\n  📊 HTML 报告: " + htmlPath));
+            const htmlPath = await generateHtmlReport(results, cwd, { currentPaths });
+            console.log(pc.cyan("\n  \ud83d\udcca HTML \u62a5\u544a: " + htmlPath));
+        }
+        // Cleanup temp current images
+        for (const path of Object.values(currentPaths)) {
+            await unlink(path).catch(() => { });
         }
         return;
     }
     // Single URL mode
     if (!url || !options.name) {
-        console.log(pc.yellow("请提供 URL 和名称："));
+        console.log(pc.yellow("\u8bf7\u63d0\u4f9b URL \u548c\u540d\u79f0\uff1a"));
         console.log("  " + pc.bold("npx snapdiff diff <url> --name <name>"));
         return;
     }
     const name = options.name;
     if (!(await baselineExists(cwd, name))) {
-        console.log(pc.yellow('\n  ⚠ "' + name + '" 还没有基线截图。'));
-        console.log("  请先运行: " + pc.bold("npx snapdiff capture " + url + " --name " + name));
+        console.log(pc.yellow('\n  \u26a0 "' + name + '" \u8fd8\u6ca1\u6709\u57fa\u7ebf\u622a\u56fe\u3002'));
+        console.log("  \u8bf7\u5148\u8fd0\u884c: " + pc.bold("npx snapdiff capture " + url + " --name " + name));
         return;
     }
-    console.log(pc.cyan("正在对比 " + name + "..."));
+    await cleanupOldFiles(cwd);
+    console.log(pc.cyan("\u6b63\u5728\u5bf9\u6bd4 " + name + "..."));
     const viewport = { width: 1440, height: 900 };
     const t = String(Math.floor(Date.now() / 1000));
-    const currentPath = baselineImagePath(cwd, "current-" + name);
+    const currentPath = tempImagePath(cwd, name);
     const { imagePath: curPath } = await captureSnapshot({
         config: { name, url, viewport, threshold: threshold / 100 },
         outputPath: currentPath,
@@ -103,28 +155,26 @@ export async function diffCommand(url, options) {
         currentPath: curPath,
         diffOutputPath: diffOut,
         threshold: threshold / 100,
+        maskRegions: undefined,
     });
     result.name = name;
     result.url = url;
+    // Generate report before cleanup
+    const htmlPath = await generateHtmlReport([result], cwd, { currentPaths: { [name]: curPath } });
+    // Cleanup temp
     await unlink(curPath).catch(() => { });
     if (result.error) {
-        console.log("  ⚠ " + result.error);
+        console.log("  \u26a0 " + result.error);
     }
     else if (result.passed) {
-        console.log(pc.green("  ✅ 无变化 (差异 " + result.diffPercent + "%)"));
+        console.log(pc.green("  \u2705 \u65e0\u53d8\u5316 (\u5dee\u5f02 " + result.diffPercent + "%)"));
     }
     else {
-        const bar = makeBar(result.diffPercent, 20);
-        console.log("  ❌ " + name);
-        console.log("     " + bar + " " + result.diffPercent + "% (" + result.diffPixels + " 像素)");
-        console.log(pc.dim("     📄 diff 图: " + result.diffImagePath));
-        console.log(pc.cyan("  如果这是预期的变更: " + pc.bold("npx snapdiff approve " + name)));
+        const bar = makePercentBar(result.diffPercent, 20);
+        console.log("  \u274c " + name);
+        console.log("     " + bar + " " + result.diffPercent + "% (" + result.diffPixels + " \u50cf\u7d20)");
+        console.log(pc.dim("     \ud83d\udcc4 diff \u56fe: " + result.diffImagePath));
+        console.log(pc.cyan("  \u5982\u679c\u8fd9\u662f\u9884\u671f\u7684\u53d8\u66f4: " + pc.bold("npx snapdiff approve " + name)));
     }
-    const htmlPath = await generateHtmlReport([result], cwd);
-    console.log(pc.cyan("\n  📊 HTML 报告: " + htmlPath));
-}
-function makeBar(percent, width) {
-    const filled = Math.min(Math.round((percent / 100) * width), width);
-    const empty = width - filled;
-    return pc.red("█".repeat(filled)) + pc.dim("░".repeat(empty));
+    console.log(pc.cyan("\n  \ud83d\udcca HTML \u62a5\u544a: " + htmlPath));
 }

package/dist/commands/init.js

@@ -1,3 +1,4 @@
+import { ensureDirs, captureSnapshot, baselineImagePath, saveBaselineMeta } from "@snapdiff/core";
 import path from "node:path";
 import { writeFile, mkdir, readFile, appendFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
@@ -86,7 +87,6 @@ async function setupGitignore(cwd) {
     }
 }
 async function takeFirstBaseline(cwd, configPath) {
-    const { ensureDirs, captureSnapshot, baselineImagePath, saveBaselineMeta } = await import("@snapdiff/core");
     const config = JSON.parse(await readFile(configPath, "utf-8"));
     await ensureDirs(cwd);
     console.log(pc.cyan("\n  正在截取基线..."));
@@ -111,17 +111,17 @@ async function maybeSetupCi(cwd, ci) {
     if (!existsSync(ciDir)) {
         await mkdir(ciDir, { recursive: true });
     }
-    const ciYaml = `name: Visual Regression Test
-on: [pull_request]
-jobs:
-  snapdiff:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npx snapdiff diff
+    const ciYaml = `name: Visual Regression Test
+on: [pull_request]
+jobs:
+  snapdiff:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npx snapdiff diff
 `;
     await writeFile(path.join(ciDir, "snapdiff.yml"), ciYaml, "utf-8");
     console.log(pc.green("  ✔ 已创建 .github/workflows/snapdiff.yml"));

package/dist/commands/status.js

@@ -1,5 +1,5 @@
 import pc from "picocolors";
-import { listBaselines, loadConfig } from "../core/index.js";
+import { listBaselines, loadConfig } from "@snapdiff/core";
 export async function statusCommand() {
     const cwd = process.cwd();
     const baselines = await listBaselines(cwd);

package/dist/index.js

@@ -67,5 +67,5 @@ program
     .description("\u67e5\u770b\u6240\u6709\u57fa\u7ebf\u72b6\u6001\uff08\u8868\u683c\u5c55\u793a\uff09")
     .addHelpText("after", pc.dim("\n\u793a\u4f8b:\n  $ snapdiff status   \u67e5\u770b\u54ea\u4e9b\u9875\u9762\u6709\u57fa\u7ebf\uff0c\u54ea\u4e9b\u8fd8\u672a\u622a\u53d6\n"))
     .action(statusCommand);
-program.addHelpText("afterAll", "\n" + pc.bold("\u5feb\u901f\u5f00\u59cb") + ":\n  $ snapdiff init                    \u9996\u6b21\u8fd0\u884c\uff0c\u8d70\u4e00\u904d\u5411\u5bfc\n  $ snapdiff diff                    \u6539\u5b8c\u4ee3\u7801\u540e\u5bf9\u6bd4\u53d8\u5316\n\n" + pc.bold("\u5178\u578b\u5de5\u4f5c\u6d41") + ":\n  1. " + pc.dim("snapdiff init") + "             \u521d\u59cb\u5316\u9879\u76ee\uff0c\u81ea\u52a8\u622a\u53d6\u9996\u5f20\u57fa\u7ebf\n  2. " + pc.dim("\u4fee\u6539\u4ee3\u7801") + "                    \u6539\u4f60\u7684 CSS/\u7ec4\u4ef6/\u9875\u9762\n  3. " + pc.dim("snapdiff diff") + "             \u5bf9\u6bd4\u53d8\u5316\uff0c\u67e5\u770b\u5dee\u5f02\n  4. " + pc.dim("snapdiff approve <name>") + "  \u786e\u8ba4\u53d8\u66f4\uff0c\u66f4\u65b0\u57fa\u7ebf\n\n" + pc.dim("\u5b8c\u6574\u6587\u6863: https://github.com/your-org/snapdiff") + "\n");
+program.addHelpText("afterAll", "\n" + pc.bold("\u5feb\u901f\u5f00\u59cb") + ":\n  $ snapdiff init                    \u9996\u6b21\u8fd0\u884c\uff0c\u8d70\u4e00\u904d\u5411\u5bfc\n  $ snapdiff diff                    \u6539\u5b8c\u4ee3\u7801\u540e\u5bf9\u6bd4\u53d8\u5316\n\n" + pc.bold("\u5178\u578b\u5de5\u4f5c\u6d41") + ":\n  1. " + pc.dim("snapdiff init") + "             \u521d\u59cb\u5316\u9879\u76ee\uff0c\u81ea\u52a8\u622a\u53d6\u9996\u5f20\u57fa\u7ebf\n  2. " + pc.dim("\u4fee\u6539\u4ee3\u7801") + "                    \u6539\u4f60\u7684 CSS/\u7ec4\u4ef6/\u9875\u9762\n  3. " + pc.dim("snapdiff diff") + "             \u5bf9\u6bd4\u53d8\u5316\uff0c\u67e5\u770b\u5dee\u5f02\n  4. " + pc.dim("snapdiff approve <name>") + "  \u786e\u8ba4\u53d8\u66f4\uff0c\u66f4\u65b0\u57fa\u7ebf\n\n" + pc.dim("\u5b8c\u6574\u6587\u6863: https://github.com/zixuan57/snapdiff") + "\n");
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snapdiff-cli",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "????????????????????????? Playwright + pixelmatch",
   "type": "module",
   "bin": {
@@ -16,6 +16,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@snapdiff/core": "*",
     "playwright": "^1.52.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
@@ -32,11 +33,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zixuanlongxi/snapdiff.git"
+    "url": "git+https://github.com/zixuan57/snapdiff.git"
   },
-  "homepage": "https://github.com/zixuanlongxi/snapdiff",
+  "homepage": "https://github.com/zixuan57/snapdiff",
   "bugs": {
-    "url": "https://github.com/zixuanlongxi/snapdiff/issues"
+    "url": "https://github.com/zixuan57/snapdiff/issues"
   },
   "license": "MIT",
   "keywords": [
@@ -47,4 +48,4 @@
     "diff",
     "cli"
   ]
-}
+}