@coder/pixel-storybook 0.1.0

package/dist/compare/pixelmatch.js

@@ -0,0 +1,46 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import pixelmatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+import { resizeImage } from './utils.js';
+export const checkThreshold = (threshold, pixelsTotal, pixelDifference) => {
+    // Treat theshold as percentage
+    if (threshold < 1) {
+        return pixelDifference <= pixelsTotal * threshold;
+    }
+    // Treat threshold as absolute value
+    return pixelDifference <= threshold;
+};
+export const runPixelmatchComparison = (threshold, baselineShotPath, currentShotPath, differenceShotPath) => {
+    const baselineImageBuffer = readFileSync(baselineShotPath);
+    const currentImageBuffer = readFileSync(currentShotPath);
+    if (baselineImageBuffer.equals(currentImageBuffer)) {
+        return { pixelDifference: 0, pixelDifferencePercentage: 0, isWithinThreshold: true };
+    }
+    let baselineImage = PNG.sync.read(baselineImageBuffer);
+    let currentImage = PNG.sync.read(currentImageBuffer);
+    const maxWidth = Math.max(baselineImage.width || 100, currentImage.width || 100);
+    const maxHeight = Math.max(baselineImage.height || 100, currentImage.height || 100);
+    if (baselineImage.width !== currentImage.width || baselineImage.height !== currentImage.height) {
+        baselineImage = resizeImage(baselineImage, maxWidth, maxHeight);
+        currentImage = resizeImage(currentImage, maxWidth, maxHeight);
+    }
+    const differenceImage = new PNG({ width: maxWidth, height: maxHeight });
+    const pixelDifference = pixelmatch(baselineImage.data, currentImage.data, differenceImage.data, maxWidth, maxHeight, { threshold: 0 });
+    const pixelsTotal = baselineImage.width * baselineImage.height;
+    if (pixelDifference > 0 && differenceShotPath) {
+        const isWithinThreshold = checkThreshold(threshold, pixelsTotal, pixelDifference);
+        if (!isWithinThreshold) {
+            writeFileSync(differenceShotPath, PNG.sync.write(differenceImage));
+        }
+        return {
+            pixelDifference,
+            pixelDifferencePercentage: pixelDifference / pixelsTotal,
+            isWithinThreshold,
+        };
+    }
+    return {
+        pixelDifference,
+        pixelDifferencePercentage: pixelDifference / pixelsTotal,
+        isWithinThreshold: true,
+    };
+};

package/dist/compare/utils.d.ts

@@ -0,0 +1,2 @@
+import { PNG } from 'pngjs';
+export declare const resizeImage: (originalImage: PNG, width: number, height: number) => PNG;

package/dist/compare/utils.js

@@ -0,0 +1,18 @@
+import { PNG } from 'pngjs';
+export const resizeImage = (originalImage, width, height) => {
+    const newImage = new PNG({
+        width,
+        height,
+        fill: true,
+        inputHasAlpha: true,
+    });
+    for (let x = 0; x < width; x++) {
+        for (let y = 0; y < height; y++) {
+            // eslint-disable-next-line no-bitwise
+            const index = ((width * y + x) << 2) + 3;
+            newImage.data[index] = 64;
+        }
+    }
+    PNG.bitblt(originalImage, newImage, 0, 0, originalImage.width, originalImage.height, 0, 0);
+    return newImage;
+};

package/dist/compare/worker.d.ts

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

package/dist/compare/worker.js

@@ -0,0 +1,6 @@
+// This file runs inside a worker_threads Worker.
+// It performs the CPU-bound pixelmatch comparison off the main thread.
+import { parentPort, workerData } from 'node:worker_threads';
+import { runPixelmatchComparison } from './pixelmatch.js';
+const result = runPixelmatchComparison(workerData.threshold, workerData.baselineShotPath, workerData.currentShotPath, workerData.differenceShotPath);
+parentPort?.postMessage(result);

package/dist/concurrency.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Default number of concurrent shots to take, derived from the number of
+ * CPUs the process is allowed to use (respects cgroup CPU quotas).
+ */
+export declare const defaultShotConcurrency: () => number;
+/**
+ * Run an array of async tasks with a concurrency limit.
+ * Drop-in replacement for `async.mapLimit`.
+ */
+export declare const mapLimit: <T, R>(items: Iterable<T>, limit: number, fn: (item: T) => Promise<R>) => Promise<R[]>;
+/**
+ * Retry an async function with exponential backoff.
+ * Drop-in replacement for `async.retry`.
+ */
+export declare const retry: <T>(options: {
+    times: number;
+    interval: (retryCount: number) => number;
+    errorFilter: (error: Error) => boolean;
+}, fn: () => Promise<T>) => Promise<T>;

package/dist/concurrency.js

@@ -0,0 +1,61 @@
+import { availableParallelism } from 'node:os';
+/**
+ * Floor on the auto default. Matches the prior static default so we never
+ * regress on small CI runners.
+ */
+const SHOT_CONCURRENCY_AUTO_MIN = 10;
+/**
+ * Ceiling on the auto default. Each Playwright BrowserContext costs ~100-
+ * 200MB of RSS during a shot. We cap to avoid OOMing on machines with very
+ * high CPU counts but proportionally less RAM.
+ */
+const SHOT_CONCURRENCY_AUTO_MAX = 32;
+/**
+ * Default number of concurrent shots to take, derived from the number of
+ * CPUs the process is allowed to use (respects cgroup CPU quotas).
+ */
+export const defaultShotConcurrency = () => {
+    const cpus = availableParallelism();
+    return Math.max(SHOT_CONCURRENCY_AUTO_MIN, Math.min(cpus, SHOT_CONCURRENCY_AUTO_MAX));
+};
+/**
+ * Run an array of async tasks with a concurrency limit.
+ * Drop-in replacement for `async.mapLimit`.
+ */
+export const mapLimit = async (items, limit, fn) => {
+    const results = [];
+    const entries = [...items];
+    let index = 0;
+    const worker = async () => {
+        while (index < entries.length) {
+            const i = index++;
+            results[i] = await fn(entries[i]);
+        }
+    };
+    const workers = Array.from({ length: Math.min(limit, entries.length) }, () => worker());
+    await Promise.all(workers);
+    return results;
+};
+/**
+ * Retry an async function with exponential backoff.
+ * Drop-in replacement for `async.retry`.
+ */
+export const retry = async (options, fn) => {
+    let lastError;
+    for (let attempt = 0; attempt < options.times; attempt++) {
+        try {
+            return await fn();
+        }
+        catch (error) {
+            lastError = error;
+            if (!options.errorFilter(lastError)) {
+                throw lastError;
+            }
+            if (attempt < options.times - 1) {
+                const delay = options.interval(attempt + 1);
+                await new Promise((resolve) => setTimeout(resolve, delay));
+            }
+        }
+    }
+    throw lastError;
+};