laxy-verify 1.2.0 → 1.2.1

package/dist/visual-diff.js

@@ -1,178 +1,178 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatVisualDiffSummary = formatVisualDiffSummary;
-exports.runVisualDiff = runVisualDiff;
-const fs = __importStar(require("node:fs"));
-const path = __importStar(require("node:path"));
-const puppeteer_1 = __importDefault(require("puppeteer"));
-const pngjs_1 = require("pngjs");
-const VISUAL_DIFF_VIEWPORTS = [
-    { viewport: "desktop", width: 1280, height: 720 },
-    { viewport: "tablet", width: 768, height: 1024 },
-    { viewport: "mobile", width: 375, height: 812, isMobile: true, deviceScaleFactor: 2 },
-];
-function formatViewportResult(viewport) {
-    return viewport.hasBaseline
-        ? `${viewport.viewport} ${viewport.diffPercentage}% (${viewport.verdict})`
-        : `${viewport.viewport} baseline seeded`;
-}
-function formatVisualDiffSummary(result) {
-    return result.viewports.map(formatViewportResult).join(", ");
-}
-function ensureDir(dir) {
-    fs.mkdirSync(dir, { recursive: true });
-}
-async function captureScreenshot(url, outputPath, viewport) {
-    const browser = await puppeteer_1.default.launch({ headless: true, args: ["--no-sandbox", "--disable-setuid-sandbox"] });
-    try {
-        const page = await browser.newPage();
-        await page.setViewport({
-            width: viewport.width,
-            height: viewport.height,
-            isMobile: viewport.isMobile ?? false,
-            deviceScaleFactor: viewport.deviceScaleFactor ?? 1,
-        });
-        await page.goto(url, { waitUntil: "networkidle2", timeout: 20000 });
-        await page.waitForSelector("body", { timeout: 5000 });
-        await page.screenshot({ path: outputPath, fullPage: true, type: "png" });
-    }
-    finally {
-        await browser.close();
-    }
-}
-async function loadPixelmatch() {
-    const dynamicImport = new Function("specifier", "return import(specifier)");
-    const mod = await dynamicImport("pixelmatch");
-    return mod.default;
-}
-async function compareImages(baselinePath, currentPath, diffOutputPath) {
-    const baselinePng = pngjs_1.PNG.sync.read(fs.readFileSync(baselinePath));
-    const currentPng = pngjs_1.PNG.sync.read(fs.readFileSync(currentPath));
-    const width = Math.min(baselinePng.width, currentPng.width);
-    const height = Math.min(baselinePng.height, currentPng.height);
-    const cropData = (png, w, h) => {
-        if (png.width === w && png.height === h)
-            return png.data;
-        const cropped = Buffer.alloc(w * h * 4);
-        for (let y = 0; y < h; y++) {
-            png.data.copy(cropped, y * w * 4, y * png.width * 4, y * png.width * 4 + w * 4);
-        }
-        return cropped;
-    };
-    const baseData = cropData(baselinePng, width, height);
-    const currData = cropData(currentPng, width, height);
-    const diff = new pngjs_1.PNG({ width, height });
-    const pixelmatch = await loadPixelmatch();
-    const diffPixels = pixelmatch(baseData, currData, diff.data, width, height, { threshold: 0.1 });
-    ensureDir(path.dirname(diffOutputPath));
-    fs.writeFileSync(diffOutputPath, pngjs_1.PNG.sync.write(diff));
-    const totalPixels = width * height;
-    const diffPercentage = Math.round((diffPixels / totalPixels) * 10000) / 100;
-    return { diffPixels, totalPixels, diffPercentage };
-}
-async function runVisualDiff(projectDir, url, label = "current") {
-    const dir = path.join(projectDir, ".laxy-verify", "visual");
-    ensureDir(dir);
-    const viewportResults = [];
-    for (const viewport of VISUAL_DIFF_VIEWPORTS) {
-        const baselinePath = path.join(dir, `${viewport.viewport}.baseline.png`);
-        const currentPath = path.join(dir, `${label}.${viewport.viewport}.png`);
-        const diffPath = path.join(dir, `${label}.${viewport.viewport}.diff.png`);
-        await captureScreenshot(url, currentPath, viewport);
-        if (!fs.existsSync(baselinePath)) {
-            fs.copyFileSync(currentPath, baselinePath);
-            viewportResults.push({
-                viewport: viewport.viewport,
-                hasBaseline: false,
-                diffPercentage: 0,
-                verdict: "pass",
-                diffPixels: 0,
-                totalPixels: 0,
-                baselinePath,
-                currentPath,
-                diffPath: "",
-            });
-            continue;
-        }
-        const comparison = await compareImages(baselinePath, currentPath, diffPath);
-        let verdict = "pass";
-        if (comparison.diffPercentage >= 60) {
-            verdict = "rollback";
-        }
-        else if (comparison.diffPercentage >= 30) {
-            verdict = "warn";
-        }
-        if (verdict === "pass") {
-            fs.copyFileSync(currentPath, baselinePath);
-        }
-        viewportResults.push({
-            viewport: viewport.viewport,
-            hasBaseline: true,
-            diffPercentage: comparison.diffPercentage,
-            verdict,
-            diffPixels: comparison.diffPixels,
-            totalPixels: comparison.totalPixels,
-            baselinePath,
-            currentPath,
-            diffPath,
-        });
-    }
-    const comparableResults = viewportResults.filter((viewport) => viewport.hasBaseline);
-    const summary = viewportResults.map(formatViewportResult).join(", ");
-    const worstVerdict = comparableResults.some((viewport) => viewport.verdict === "rollback")
-        ? "rollback"
-        : comparableResults.some((viewport) => viewport.verdict === "warn")
-            ? "warn"
-            : "pass";
-    const maxDiffPercentage = comparableResults.reduce((max, viewport) => Math.max(max, viewport.diffPercentage), 0);
-    const totalDiffPixels = comparableResults.reduce((sum, viewport) => sum + viewport.diffPixels, 0);
-    const totalPixels = comparableResults.reduce((sum, viewport) => sum + viewport.totalPixels, 0);
-    return {
-        hasBaseline: comparableResults.length === viewportResults.length,
-        diffPercentage: Math.round(maxDiffPercentage * 100) / 100,
-        verdict: worstVerdict,
-        diffPixels: totalDiffPixels,
-        totalPixels,
-        baselinePath: viewportResults[0]?.baselinePath ?? "",
-        currentPath: viewportResults[0]?.currentPath ?? "",
-        diffPath: viewportResults[0]?.diffPath ?? "",
-        viewports: viewportResults,
-        summary,
-    };
-}
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatVisualDiffSummary = formatVisualDiffSummary;
+exports.runVisualDiff = runVisualDiff;
+const fs = __importStar(require("node:fs"));
+const path = __importStar(require("node:path"));
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const pngjs_1 = require("pngjs");
+const VISUAL_DIFF_VIEWPORTS = [
+    { viewport: "desktop", width: 1280, height: 720 },
+    { viewport: "tablet", width: 768, height: 1024 },
+    { viewport: "mobile", width: 375, height: 812, isMobile: true, deviceScaleFactor: 2 },
+];
+function formatViewportResult(viewport) {
+    return viewport.hasBaseline
+        ? `${viewport.viewport} ${viewport.diffPercentage}% (${viewport.verdict})`
+        : `${viewport.viewport} baseline seeded`;
+}
+function formatVisualDiffSummary(result) {
+    return result.viewports.map(formatViewportResult).join(", ");
+}
+function ensureDir(dir) {
+    fs.mkdirSync(dir, { recursive: true });
+}
+async function captureScreenshot(url, outputPath, viewport) {
+    const browser = await puppeteer_1.default.launch({ headless: true, args: ["--no-sandbox", "--disable-setuid-sandbox"] });
+    try {
+        const page = await browser.newPage();
+        await page.setViewport({
+            width: viewport.width,
+            height: viewport.height,
+            isMobile: viewport.isMobile ?? false,
+            deviceScaleFactor: viewport.deviceScaleFactor ?? 1,
+        });
+        await page.goto(url, { waitUntil: "networkidle2", timeout: 20000 });
+        await page.waitForSelector("body", { timeout: 5000 });
+        await page.screenshot({ path: outputPath, fullPage: true, type: "png" });
+    }
+    finally {
+        await browser.close();
+    }
+}
+async function loadPixelmatch() {
+    const dynamicImport = new Function("specifier", "return import(specifier)");
+    const mod = await dynamicImport("pixelmatch");
+    return mod.default;
+}
+async function compareImages(baselinePath, currentPath, diffOutputPath) {
+    const baselinePng = pngjs_1.PNG.sync.read(fs.readFileSync(baselinePath));
+    const currentPng = pngjs_1.PNG.sync.read(fs.readFileSync(currentPath));
+    const width = Math.min(baselinePng.width, currentPng.width);
+    const height = Math.min(baselinePng.height, currentPng.height);
+    const cropData = (png, w, h) => {
+        if (png.width === w && png.height === h)
+            return png.data;
+        const cropped = Buffer.alloc(w * h * 4);
+        for (let y = 0; y < h; y++) {
+            png.data.copy(cropped, y * w * 4, y * png.width * 4, y * png.width * 4 + w * 4);
+        }
+        return cropped;
+    };
+    const baseData = cropData(baselinePng, width, height);
+    const currData = cropData(currentPng, width, height);
+    const diff = new pngjs_1.PNG({ width, height });
+    const pixelmatch = await loadPixelmatch();
+    const diffPixels = pixelmatch(baseData, currData, diff.data, width, height, { threshold: 0.1 });
+    ensureDir(path.dirname(diffOutputPath));
+    fs.writeFileSync(diffOutputPath, pngjs_1.PNG.sync.write(diff));
+    const totalPixels = width * height;
+    const diffPercentage = Math.round((diffPixels / totalPixels) * 10000) / 100;
+    return { diffPixels, totalPixels, diffPercentage };
+}
+async function runVisualDiff(projectDir, url, label = "current") {
+    const dir = path.join(projectDir, ".laxy-verify", "visual");
+    ensureDir(dir);
+    const viewportResults = [];
+    for (const viewport of VISUAL_DIFF_VIEWPORTS) {
+        const baselinePath = path.join(dir, `${viewport.viewport}.baseline.png`);
+        const currentPath = path.join(dir, `${label}.${viewport.viewport}.png`);
+        const diffPath = path.join(dir, `${label}.${viewport.viewport}.diff.png`);
+        await captureScreenshot(url, currentPath, viewport);
+        if (!fs.existsSync(baselinePath)) {
+            fs.copyFileSync(currentPath, baselinePath);
+            viewportResults.push({
+                viewport: viewport.viewport,
+                hasBaseline: false,
+                diffPercentage: 0,
+                verdict: "pass",
+                diffPixels: 0,
+                totalPixels: 0,
+                baselinePath,
+                currentPath,
+                diffPath: "",
+            });
+            continue;
+        }
+        const comparison = await compareImages(baselinePath, currentPath, diffPath);
+        let verdict = "pass";
+        if (comparison.diffPercentage >= 60) {
+            verdict = "rollback";
+        }
+        else if (comparison.diffPercentage >= 30) {
+            verdict = "warn";
+        }
+        if (verdict === "pass") {
+            fs.copyFileSync(currentPath, baselinePath);
+        }
+        viewportResults.push({
+            viewport: viewport.viewport,
+            hasBaseline: true,
+            diffPercentage: comparison.diffPercentage,
+            verdict,
+            diffPixels: comparison.diffPixels,
+            totalPixels: comparison.totalPixels,
+            baselinePath,
+            currentPath,
+            diffPath,
+        });
+    }
+    const comparableResults = viewportResults.filter((viewport) => viewport.hasBaseline);
+    const summary = viewportResults.map(formatViewportResult).join(", ");
+    const worstVerdict = comparableResults.some((viewport) => viewport.verdict === "rollback")
+        ? "rollback"
+        : comparableResults.some((viewport) => viewport.verdict === "warn")
+            ? "warn"
+            : "pass";
+    const maxDiffPercentage = comparableResults.reduce((max, viewport) => Math.max(max, viewport.diffPercentage), 0);
+    const totalDiffPixels = comparableResults.reduce((sum, viewport) => sum + viewport.diffPixels, 0);
+    const totalPixels = comparableResults.reduce((sum, viewport) => sum + viewport.totalPixels, 0);
+    return {
+        hasBaseline: comparableResults.length === viewportResults.length,
+        diffPercentage: Math.round(maxDiffPercentage * 100) / 100,
+        verdict: worstVerdict,
+        diffPixels: totalDiffPixels,
+        totalPixels,
+        baselinePath: viewportResults[0]?.baselinePath ?? "",
+        currentPath: viewportResults[0]?.currentPath ?? "",
+        diffPath: viewportResults[0]?.diffPath ?? "",
+        viewports: viewportResults,
+        summary,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "laxy-verify",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Frontend verification CLI for build checks, Lighthouse, E2E, and release readiness",
   "license": "MIT",
   "type": "commonjs",