comparadise-utils 1.43.2 → 1.43.3

package/dist/create-base-image.d.mts

@@ -0,0 +1,20 @@
+import { t as MatchScreenshotArgs } from "./match-screenshot-Crt-i9Rf.mjs";
+
+//#region create-base-image.d.ts
+declare function createBaseImage(subject: Cypress.JQueryWithSelector | Window | Document | void, args?: MatchScreenshotArgs): void;
+interface ExtendedCurrentRunnable extends Mocha.Runnable {
+  currentRunnable?: {
+    order?: unknown;
+  };
+}
+declare global {
+  namespace Cypress {
+    interface Cypress {
+      mocha: {
+        getRunner: () => ExtendedCurrentRunnable;
+      };
+    }
+  }
+}
+//#endregion
+export { createBaseImage };

package/dist/create-base-image.mjs

@@ -0,0 +1,18 @@
+import { forceFont, getTestFolderPathFromScripts, verifyImages } from "./match-screenshot.mjs";
+//#region create-base-image.ts
+function createBaseImage(subject, args) {
+	const { rawName, options } = args || {};
+	forceFont();
+	verifyImages();
+	const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
+	(subject ? cy.wrap(subject) : cy).screenshot(`___${screenshotsFolder}/base`, options);
+	cy.task("log", `✅ A new base image was created for ${name}.`);
+}
+Cypress.Commands.add("createBaseImage", { prevSubject: [
+	"optional",
+	"element",
+	"window",
+	"document"
+] }, createBaseImage);
+//#endregion
+export { createBaseImage };

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import { t as MatchScreenshotArgs } from "./match-screenshot-Crt-i9Rf.mjs";
+
+//#region index.d.ts
+declare function setupVisualTests(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions): Cypress.PluginConfigOptions;
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      matchScreenshot(args?: MatchScreenshotArgs): Chainable;
+      createBaseImage(args?: MatchScreenshotArgs): Chainable;
+    }
+  }
+}
+//#endregion
+export { setupVisualTests };

package/dist/index.mjs

@@ -0,0 +1,171 @@
+import * as fs from "fs";
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+//#region images.ts
+const PIXELMATCH_OPTIONS = {
+	alpha: .3,
+	threshold: .5,
+	includeAA: false
+};
+/**
+* Helper function to create reusable image resizer
+*/
+const createImageResizer = (width, height) => (source) => {
+	const resized = new PNG({
+		width,
+		height,
+		fill: true
+	});
+	PNG.bitblt(source, resized, 0, 0, source.width, source.height, 0, 0);
+	return resized;
+};
+/**
+* Fills new area added after resize with transparent black color.
+* I like idea of checker board pattern, but it seems to be too complicated
+* to implement considering how low-level pngjs API is.
+*/
+const fillSizeDifference = (width, height) => (image) => {
+	const inArea = (x, y) => y > height || x > width;
+	for (let y = 0; y < image.height; y++) for (let x = 0; x < image.width; x++) if (inArea(x, y)) {
+		const idx = image.width * y + x << 2;
+		image.data[idx] = 0;
+		image.data[idx + 1] = 0;
+		image.data[idx + 2] = 0;
+		image.data[idx + 3] = 64;
+	}
+	return image;
+};
+/**
+* Aligns images sizes to biggest common value
+* and fills new pixels with transparent pixels
+*/
+function alignImagesToSameSize(firstImage, secondImage) {
+	const firstImageWidth = firstImage.width;
+	const firstImageHeight = firstImage.height;
+	const secondImageWidth = secondImage.width;
+	const secondImageHeight = secondImage.height;
+	const resizeToSameSize = createImageResizer(Math.max(firstImageWidth, secondImageWidth), Math.max(firstImageHeight, secondImageHeight));
+	const resizedFirst = resizeToSameSize(firstImage);
+	const resizedSecond = resizeToSameSize(secondImage);
+	return [fillSizeDifference(firstImageWidth, firstImageHeight)(resizedFirst), fillSizeDifference(secondImageWidth, secondImageHeight)(resizedSecond)];
+}
+/**
+* Compares a base and new image and returns the pixel difference
+* and diff PNG for writing the diff image to.
+* @param {string} basePath - Full file path to base image
+* @param {string} actualPath - Full file path to new image
+* @param pixelMatchOptions - (Optional) options to calculate pixel differences between two images
+*/
+function getDiffPixels(basePath, actualPath, pixelMatchOptions = PIXELMATCH_OPTIONS) {
+	const rawBase = PNG.sync.read(fs.readFileSync(basePath));
+	const rawActual = PNG.sync.read(fs.readFileSync(actualPath));
+	const [base, actual] = rawBase.height !== rawActual.height || rawBase.width !== rawActual.width ? alignImagesToSameSize(rawBase, rawActual) : [rawBase, rawActual];
+	if (!base || !actual) throw new Error();
+	const diff = new PNG({
+		width: base.width,
+		height: base.height
+	});
+	return {
+		diffPixels: pixelmatch(actual.data, base.data, diff.data, diff.width, diff.height, pixelMatchOptions),
+		diff
+	};
+}
+//#endregion
+//#region files.ts
+/**
+* Creates a file path that is relative to the root
+* @param {string} type - Value to append to fileName
+* @param {string} path - (optional) FileName which corresponds to a module Id
+* returns a string of just the prefix or the fileName prepended by the prefix
+*/
+function createImageFileName(path, type) {
+	let newPath = path;
+	if (path.startsWith("/")) newPath = `.${path}`;
+	return `${newPath}/${type}.png`;
+}
+//#endregion
+//#region screenshots.ts
+/**
+* Checks if a base image exists
+* @param path - Folder path where you can find the base.png image
+* @returns true if path/base.png exists, false if not.
+*/
+function baseExists(path) {
+	const fileName = createImageFileName(path, "base");
+	console.log("Checking if base image exists at:", fileName);
+	const exists = fs.existsSync(fileName);
+	if (!exists) console.log("Base image does not exist. This means a new one will be created. If your base should exist, something went wrong.");
+	return exists;
+}
+/**
+* Runs a visual regression test.
+* @param args -
+* Contains Full screenshots folder where the base/new/diff images will be compared and written to
+* Optionally contains specified Pixelmatch config settings.
+*/
+function compareScreenshots(args) {
+	const { screenshotsFolder, pixelMatchOptions } = args;
+	const basePath = createImageFileName(screenshotsFolder, "base");
+	const actualPath = createImageFileName(screenshotsFolder, "new");
+	const { diffPixels, diff } = getDiffPixels(basePath, actualPath, pixelMatchOptions);
+	if (diffPixels) fs.writeFile(createImageFileName(screenshotsFolder, "diff"), new Uint8Array(PNG.sync.write(diff)), (err) => {
+		if (err) console.error("❌ Diff exists but unable to create diff.png", err);
+	});
+	else fs.unlink(actualPath, (err) => {
+		if (err) console.error("❌ No diff but unable to delete actualPath}", err);
+	});
+	return diffPixels;
+}
+const trimPostfix = (path) => {
+	const imgExt = ".png";
+	const attemptPostfixRegex = new RegExp(`\\s\\(attempt \\d+\\)${imgExt}$`);
+	if (attemptPostfixRegex.test(path)) return path.replace(attemptPostfixRegex, imgExt);
+	return path;
+};
+const getNewPath = (path) => {
+	let newPath;
+	if (path.includes("___")) {
+		newPath = path.slice(path.lastIndexOf("___") + 3);
+		if (newPath.startsWith("/")) newPath = `.${newPath}`;
+		console.log(newPath);
+	} else newPath = path;
+	return trimPostfix(newPath);
+};
+/**
+* Renames all root cypress screenshots to where the test was actually run.
+* Should NOT be used standalone. Works with the matchScreenshot task.
+* @param {Cypress.ScreenshotDetails} details
+*/
+function onAfterScreenshot(details) {
+	console.log("🧸 Screenshot was saved to:", details.path);
+	if (!details.path.match("cypress")) return Promise.resolve({});
+	const newPath = getNewPath(details.path);
+	const newPathDir = newPath.substring(0, newPath.lastIndexOf("/"));
+	try {
+		fs.mkdirSync(newPathDir, { recursive: true });
+	} catch (err) {
+		console.error("❌ Error creating new screenshot folder:", newPathDir, err);
+	}
+	return new Promise((resolve, reject) => {
+		fs.rename(details.path, newPath, (err) => {
+			if (err) reject(err);
+			resolve({ path: newPath });
+		});
+	});
+}
+//#endregion
+//#region index.ts
+function setupVisualTests(on, config) {
+	on("after:screenshot", onAfterScreenshot);
+	on("task", {
+		baseExists,
+		compareScreenshots,
+		log: (message) => {
+			console.log(message);
+			return null;
+		}
+	});
+	return config;
+}
+//#endregion
+export { setupVisualTests };

package/dist/match-screenshot-Crt-i9Rf.d.mts

@@ -0,0 +1,37 @@
+import { PNG } from "pngjs";
+import pixelmatch from "pixelmatch";
+
+//#region images.d.ts
+type PixelMatchOptions = Parameters<typeof pixelmatch>[5];
+//#endregion
+//#region match-screenshot.d.ts
+declare const PREFIX_DIFFERENTIATOR = "___";
+declare function forceFont(): false | HTMLStyleElement;
+declare function getTestFolderPathFromScripts(rawName?: string): {
+  name: string;
+  screenshotsFolder: string;
+};
+declare function verifyImages(): void;
+type MatchScreenshotArgs = {
+  rawName?: string;
+  options?: Partial<Cypress.ScreenshotOptions> & {
+    pixelMatchOptions?: PixelMatchOptions;
+  };
+};
+declare function matchScreenshot(subject: Cypress.JQueryWithSelector | Window | Document | void, args?: MatchScreenshotArgs): void;
+interface ExtendedCurrentRunnable extends Mocha.Runnable {
+  currentRunnable?: {
+    order?: unknown;
+  };
+}
+declare global {
+  namespace Cypress {
+    interface Cypress {
+      mocha: {
+        getRunner: () => ExtendedCurrentRunnable;
+      };
+    }
+  }
+}
+//#endregion
+export { matchScreenshot as a, getTestFolderPathFromScripts as i, PREFIX_DIFFERENTIATOR as n, verifyImages as o, forceFont as r, MatchScreenshotArgs as t };

package/dist/match-screenshot.d.mts

@@ -0,0 +1,2 @@
+import { a as matchScreenshot, i as getTestFolderPathFromScripts, n as PREFIX_DIFFERENTIATOR, o as verifyImages, r as forceFont, t as MatchScreenshotArgs } from "./match-screenshot-Crt-i9Rf.mjs";
+export { MatchScreenshotArgs, PREFIX_DIFFERENTIATOR, forceFont, getTestFolderPathFromScripts, matchScreenshot, verifyImages };

package/dist/match-screenshot.mjs

@@ -0,0 +1,66 @@
+//#region match-screenshot.ts
+const PREFIX_DIFFERENTIATOR = "___";
+const SUFFIX_TEST_IDENTIFIER = ".spec.ts";
+const SCREENSHOTS_FOLDER_NAME = "screenshots";
+function forceFont() {
+	const iframe = window.parent.document.querySelector("iframe");
+	const contentDocument = iframe && iframe.contentDocument;
+	if (contentDocument) {
+		const style = contentDocument.createElement("style");
+		style.type = "text/css";
+		style.appendChild(contentDocument.createTextNode("* { font-family: Arial !important; }"));
+		contentDocument.head.appendChild(style);
+		return style;
+	}
+	return false;
+}
+function getTestFolderPathFromScripts(rawName) {
+	const relativeTestPath = Cypress.spec.relative;
+	if (!relativeTestPath) throw new Error("❌ Could not find matching script in the Cypress DOM to infer the test folder path");
+	const currentTestNumber = Cypress.mocha.getRunner().currentRunnable?.order;
+	if (!rawName && typeof currentTestNumber === "number" && currentTestNumber > 1) throw new Error("❌ The rawName argument was not provided to matchScreenshot and is required for test files containing multiple tests!");
+	const testName = relativeTestPath.substring(relativeTestPath.lastIndexOf("/") + 1, relativeTestPath.lastIndexOf(SUFFIX_TEST_IDENTIFIER));
+	const name = rawName || testName;
+	return {
+		name,
+		screenshotsFolder: `${SCREENSHOTS_FOLDER_NAME}/${relativeTestPath.substring(0, relativeTestPath.lastIndexOf(testName))}${name}`
+	};
+}
+function verifyImages() {
+	if (Cypress.$("img:visible").length > 0) cy.document().its("body").find("img").filter(":visible").then((images) => {
+		if (images) cy.wrap(images).each(($img) => {
+			cy.wrap($img).should("exist").and("have.prop", "naturalWidth");
+		});
+	});
+}
+function matchScreenshot(subject, args) {
+	const { rawName, options } = args || {};
+	forceFont();
+	verifyImages();
+	const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
+	cy.task("baseExists", screenshotsFolder).then((hasBase) => {
+		(subject ? cy.wrap(subject) : cy).screenshot(`___${screenshotsFolder}/new`, options);
+		if (!hasBase) {
+			cy.task("log", `✅ A new base image was created for ${name}. Create this as a new base image via Comparadise!`);
+			return null;
+		}
+		const compareScreenshotsArg = {
+			screenshotsFolder,
+			pixelMatchOptions: options?.pixelMatchOptions
+		};
+		cy.task("compareScreenshots", compareScreenshotsArg).then((diffPixels) => {
+			if (diffPixels === 0) cy.log(`✅ Actual image of ${name} was the same as base`);
+			else throw new Error(`❌ Actual image of ${name} differed by ${diffPixels} pixels.`);
+			return null;
+		});
+		return null;
+	});
+}
+Cypress.Commands.add("matchScreenshot", { prevSubject: [
+	"optional",
+	"element",
+	"window",
+	"document"
+] }, matchScreenshot);
+//#endregion
+export { PREFIX_DIFFERENTIATOR, forceFont, getTestFolderPathFromScripts, matchScreenshot, verifyImages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "comparadise-utils",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "license": "Apache-2.0",
   "files": [
     "dist",
@@ -21,15 +21,14 @@
   },
   "devDependencies": {
     "@types/pngjs": "6.0.5",
-    "cypress": "15.12.0",
-    "tsup": "8.5.1"
+    "tsdown": "0.21.10"
   },
   "peerDependencies": {
     "cypress": ">=12"
   },
-  "version": "1.43.2",
+  "version": "1.43.3",
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown index.ts match-screenshot.ts create-base-image.ts --deps.neverBundle shared",
     "postbuild": "echo \"require('./dist/match-screenshot');\nrequire('./dist/create-base-image');\" > commands.js",
     "test": "bun test"
   }

package/dist/create-base-image.d.ts

@@ -1,20 +0,0 @@
-import { MatchScreenshotArgs } from './match-screenshot.js';
-import 'pixelmatch';
-
-declare function createBaseImage(subject: Cypress.JQueryWithSelector | Window | Document | void, args?: MatchScreenshotArgs): void;
-interface ExtendedCurrentRunnable extends Mocha.Runnable {
-    currentRunnable?: {
-        order?: unknown;
-    };
-}
-declare global {
-    namespace Cypress {
-        interface Cypress {
-            mocha: {
-                getRunner: () => ExtendedCurrentRunnable;
-            };
-        }
-    }
-}
-
-export { createBaseImage };

package/dist/create-base-image.js

@@ -1,146 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// create-base-image.ts
-var create_base_image_exports = {};
-__export(create_base_image_exports, {
-  createBaseImage: () => createBaseImage
-});
-module.exports = __toCommonJS(create_base_image_exports);
-
-// match-screenshot.ts
-var PREFIX_DIFFERENTIATOR = "___";
-var SUFFIX_TEST_IDENTIFIER = ".spec.ts";
-var SCREENSHOTS_FOLDER_NAME = "screenshots";
-function forceFont() {
-  const iframe = window.parent.document.querySelector("iframe");
-  const contentDocument = iframe && iframe.contentDocument;
-  if (contentDocument) {
-    const style = contentDocument.createElement("style");
-    style.type = "text/css";
-    style.appendChild(
-      contentDocument.createTextNode("* { font-family: Arial !important; }")
-    );
-    contentDocument.head.appendChild(style);
-    return style;
-  }
-  return false;
-}
-function getTestFolderPathFromScripts(rawName) {
-  const relativeTestPath = Cypress.spec.relative;
-  if (!relativeTestPath) {
-    throw new Error(
-      "\u274C Could not find matching script in the Cypress DOM to infer the test folder path"
-    );
-  }
-  const currentTestNumber = Cypress.mocha.getRunner().currentRunnable?.order;
-  if (!rawName && typeof currentTestNumber === "number" && currentTestNumber > 1) {
-    throw new Error(
-      "\u274C The rawName argument was not provided to matchScreenshot and is required for test files containing multiple tests!"
-    );
-  }
-  const testName = relativeTestPath.substring(
-    relativeTestPath.lastIndexOf("/") + 1,
-    relativeTestPath.lastIndexOf(SUFFIX_TEST_IDENTIFIER)
-  );
-  const name = rawName || testName;
-  const screenshotsFolder = `${SCREENSHOTS_FOLDER_NAME}/${relativeTestPath.substring(
-    0,
-    relativeTestPath.lastIndexOf(testName)
-  )}${name}`;
-  return {
-    name,
-    screenshotsFolder
-  };
-}
-function verifyImages() {
-  if (Cypress.$("img:visible").length > 0) {
-    cy.document().its("body").find("img").filter(":visible").then((images) => {
-      if (images) {
-        cy.wrap(images).each(($img) => {
-          cy.wrap($img).should("exist").and("have.prop", "naturalWidth");
-        });
-      }
-    });
-  }
-}
-function matchScreenshot(subject, args) {
-  const { rawName, options } = args || {};
-  forceFont();
-  verifyImages();
-  const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
-  cy.task("baseExists", screenshotsFolder).then((hasBase) => {
-    const target = subject ? cy.wrap(subject) : cy;
-    target.screenshot(
-      `${PREFIX_DIFFERENTIATOR}${screenshotsFolder}/new`,
-      options
-    );
-    if (!hasBase) {
-      cy.task(
-        "log",
-        `\u2705 A new base image was created for ${name}. Create this as a new base image via Comparadise!`
-      );
-      return null;
-    }
-    const pixelMatchOptions = options?.pixelMatchOptions;
-    const compareScreenshotsArg = {
-      screenshotsFolder,
-      pixelMatchOptions
-    };
-    cy.task("compareScreenshots", compareScreenshotsArg).then((diffPixels) => {
-      if (diffPixels === 0) {
-        cy.log(`\u2705 Actual image of ${name} was the same as base`);
-      } else {
-        throw new Error(
-          `\u274C Actual image of ${name} differed by ${diffPixels} pixels.`
-        );
-      }
-      return null;
-    });
-    return null;
-  });
-}
-Cypress.Commands.add(
-  "matchScreenshot",
-  { prevSubject: ["optional", "element", "window", "document"] },
-  matchScreenshot
-);
-
-// create-base-image.ts
-function createBaseImage(subject, args) {
-  const { rawName, options } = args || {};
-  forceFont();
-  verifyImages();
-  const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
-  const target = subject ? cy.wrap(subject) : cy;
-  target.screenshot(
-    `${PREFIX_DIFFERENTIATOR}${screenshotsFolder}/base`,
-    options
-  );
-  cy.task("log", `\u2705 A new base image was created for ${name}.`);
-}
-Cypress.Commands.add(
-  "createBaseImage",
-  { prevSubject: ["optional", "element", "window", "document"] },
-  createBaseImage
-);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createBaseImage
-});

package/dist/index.d.ts

@@ -1,14 +0,0 @@
-import { MatchScreenshotArgs } from './match-screenshot.js';
-import 'pixelmatch';
-
-declare function setupVisualTests(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions): Cypress.PluginConfigOptions;
-declare global {
-    namespace Cypress {
-        interface Chainable {
-            matchScreenshot(args?: MatchScreenshotArgs): Chainable;
-            createBaseImage(args?: MatchScreenshotArgs): Chainable;
-        }
-    }
-}
-
-export { setupVisualTests };

package/dist/index.js

@@ -1,217 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// index.ts
-var index_exports = {};
-__export(index_exports, {
-  setupVisualTests: () => setupVisualTests
-});
-module.exports = __toCommonJS(index_exports);
-
-// screenshots.ts
-var fs2 = __toESM(require("fs"));
-var import_pngjs2 = require("pngjs");
-
-// images.ts
-var fs = __toESM(require("fs"));
-var import_pngjs = require("pngjs");
-var import_pixelmatch = __toESM(require("pixelmatch"));
-var PIXELMATCH_OPTIONS = {
-  alpha: 0.3,
-  // defaults to 0.1
-  threshold: 0.5,
-  // defaults to 0.1
-  includeAA: false
-  // defaults to true
-};
-var createImageResizer = (width, height) => (source) => {
-  const resized = new import_pngjs.PNG({ width, height, fill: true });
-  import_pngjs.PNG.bitblt(source, resized, 0, 0, source.width, source.height, 0, 0);
-  return resized;
-};
-var fillSizeDifference = (width, height) => (image) => {
-  const inArea = (x, y) => y > height || x > width;
-  for (let y = 0; y < image.height; y++) {
-    for (let x = 0; x < image.width; x++) {
-      if (inArea(x, y)) {
-        const idx = image.width * y + x << 2;
-        image.data[idx] = 0;
-        image.data[idx + 1] = 0;
-        image.data[idx + 2] = 0;
-        image.data[idx + 3] = 64;
-      }
-    }
-  }
-  return image;
-};
-function alignImagesToSameSize(firstImage, secondImage) {
-  const firstImageWidth = firstImage.width;
-  const firstImageHeight = firstImage.height;
-  const secondImageWidth = secondImage.width;
-  const secondImageHeight = secondImage.height;
-  const resizeToSameSize = createImageResizer(
-    Math.max(firstImageWidth, secondImageWidth),
-    Math.max(firstImageHeight, secondImageHeight)
-  );
-  const resizedFirst = resizeToSameSize(firstImage);
-  const resizedSecond = resizeToSameSize(secondImage);
-  return [
-    fillSizeDifference(firstImageWidth, firstImageHeight)(resizedFirst),
-    fillSizeDifference(secondImageWidth, secondImageHeight)(resizedSecond)
-  ];
-}
-function getDiffPixels(basePath, actualPath, pixelMatchOptions = PIXELMATCH_OPTIONS) {
-  const rawBase = import_pngjs.PNG.sync.read(fs.readFileSync(basePath));
-  const rawActual = import_pngjs.PNG.sync.read(fs.readFileSync(actualPath));
-  const hasSizeMismatch = rawBase.height !== rawActual.height || rawBase.width !== rawActual.width;
-  const [base, actual] = hasSizeMismatch ? alignImagesToSameSize(rawBase, rawActual) : [rawBase, rawActual];
-  if (!base || !actual) {
-    throw new Error();
-  }
-  const diff = new import_pngjs.PNG({ width: base.width, height: base.height });
-  const diffPixels = (0, import_pixelmatch.default)(
-    actual.data,
-    base.data,
-    diff.data,
-    diff.width,
-    diff.height,
-    pixelMatchOptions
-  );
-  return { diffPixels, diff };
-}
-
-// files.ts
-function createImageFileName(path, type) {
-  let newPath = path;
-  if (path.startsWith("/")) {
-    newPath = `.${path}`;
-  }
-  return `${newPath}/${type}.png`;
-}
-
-// screenshots.ts
-function baseExists(path) {
-  const fileName = createImageFileName(path, "base");
-  console.log("Checking if base image exists at:", fileName);
-  const exists = fs2.existsSync(fileName);
-  if (!exists) {
-    console.log(
-      "Base image does not exist. This means a new one will be created. If your base should exist, something went wrong."
-    );
-  }
-  return exists;
-}
-function compareScreenshots(args) {
-  const { screenshotsFolder, pixelMatchOptions } = args;
-  const basePath = createImageFileName(screenshotsFolder, "base");
-  const actualPath = createImageFileName(screenshotsFolder, "new");
-  const { diffPixels, diff } = getDiffPixels(
-    basePath,
-    actualPath,
-    pixelMatchOptions
-  );
-  if (diffPixels) {
-    fs2.writeFile(
-      createImageFileName(screenshotsFolder, "diff"),
-      new Uint8Array(import_pngjs2.PNG.sync.write(diff)),
-      (err) => {
-        if (err) {
-          console.error("\u274C Diff exists but unable to create diff.png", err);
-        }
-      }
-    );
-  } else {
-    fs2.unlink(actualPath, (err) => {
-      if (err) {
-        console.error("\u274C No diff but unable to delete actualPath}", err);
-      }
-    });
-  }
-  return diffPixels;
-}
-var trimPostfix = (path) => {
-  const imgExt = ".png";
-  const attemptPostfixRegex = new RegExp(`\\s\\(attempt \\d+\\)${imgExt}$`);
-  if (attemptPostfixRegex.test(path)) {
-    return path.replace(attemptPostfixRegex, imgExt);
-  }
-  return path;
-};
-var getNewPath = (path) => {
-  let newPath;
-  if (path.includes("___")) {
-    newPath = path.slice(path.lastIndexOf("___") + 3);
-    if (newPath.startsWith("/")) {
-      newPath = `.${newPath}`;
-    }
-    console.log(newPath);
-  } else {
-    newPath = path;
-  }
-  return trimPostfix(newPath);
-};
-function onAfterScreenshot(details) {
-  console.log("\u{1F9F8} Screenshot was saved to:", details.path);
-  if (!details.path.match("cypress")) {
-    return Promise.resolve({});
-  }
-  const newPath = getNewPath(details.path);
-  const newPathDir = newPath.substring(0, newPath.lastIndexOf("/"));
-  try {
-    fs2.mkdirSync(newPathDir, { recursive: true });
-  } catch (err) {
-    console.error("\u274C Error creating new screenshot folder:", newPathDir, err);
-  }
-  return new Promise((resolve, reject) => {
-    fs2.rename(details.path, newPath, (err) => {
-      if (err) {
-        reject(err);
-      }
-      resolve({ path: newPath });
-    });
-  });
-}
-
-// index.ts
-function setupVisualTests(on, config) {
-  on("after:screenshot", onAfterScreenshot);
-  on("task", {
-    baseExists,
-    compareScreenshots,
-    log: (message) => {
-      console.log(message);
-      return null;
-    }
-  });
-  return config;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  setupVisualTests
-});

package/dist/match-screenshot.d.ts

@@ -1,34 +0,0 @@
-import pixelmatch from 'pixelmatch';
-
-type PixelMatchOptions = Parameters<typeof pixelmatch>[5];
-
-declare const PREFIX_DIFFERENTIATOR = "___";
-declare function forceFont(): false | HTMLStyleElement;
-declare function getTestFolderPathFromScripts(rawName?: string): {
-    name: string;
-    screenshotsFolder: string;
-};
-declare function verifyImages(): void;
-type MatchScreenshotArgs = {
-    rawName?: string;
-    options?: Partial<Cypress.ScreenshotOptions> & {
-        pixelMatchOptions?: PixelMatchOptions;
-    };
-};
-declare function matchScreenshot(subject: Cypress.JQueryWithSelector | Window | Document | void, args?: MatchScreenshotArgs): void;
-interface ExtendedCurrentRunnable extends Mocha.Runnable {
-    currentRunnable?: {
-        order?: unknown;
-    };
-}
-declare global {
-    namespace Cypress {
-        interface Cypress {
-            mocha: {
-                getRunner: () => ExtendedCurrentRunnable;
-            };
-        }
-    }
-}
-
-export { type MatchScreenshotArgs, PREFIX_DIFFERENTIATOR, forceFont, getTestFolderPathFromScripts, matchScreenshot, verifyImages };

package/dist/match-screenshot.js

@@ -1,133 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// match-screenshot.ts
-var match_screenshot_exports = {};
-__export(match_screenshot_exports, {
-  PREFIX_DIFFERENTIATOR: () => PREFIX_DIFFERENTIATOR,
-  forceFont: () => forceFont,
-  getTestFolderPathFromScripts: () => getTestFolderPathFromScripts,
-  matchScreenshot: () => matchScreenshot,
-  verifyImages: () => verifyImages
-});
-module.exports = __toCommonJS(match_screenshot_exports);
-var PREFIX_DIFFERENTIATOR = "___";
-var SUFFIX_TEST_IDENTIFIER = ".spec.ts";
-var SCREENSHOTS_FOLDER_NAME = "screenshots";
-function forceFont() {
-  const iframe = window.parent.document.querySelector("iframe");
-  const contentDocument = iframe && iframe.contentDocument;
-  if (contentDocument) {
-    const style = contentDocument.createElement("style");
-    style.type = "text/css";
-    style.appendChild(
-      contentDocument.createTextNode("* { font-family: Arial !important; }")
-    );
-    contentDocument.head.appendChild(style);
-    return style;
-  }
-  return false;
-}
-function getTestFolderPathFromScripts(rawName) {
-  const relativeTestPath = Cypress.spec.relative;
-  if (!relativeTestPath) {
-    throw new Error(
-      "\u274C Could not find matching script in the Cypress DOM to infer the test folder path"
-    );
-  }
-  const currentTestNumber = Cypress.mocha.getRunner().currentRunnable?.order;
-  if (!rawName && typeof currentTestNumber === "number" && currentTestNumber > 1) {
-    throw new Error(
-      "\u274C The rawName argument was not provided to matchScreenshot and is required for test files containing multiple tests!"
-    );
-  }
-  const testName = relativeTestPath.substring(
-    relativeTestPath.lastIndexOf("/") + 1,
-    relativeTestPath.lastIndexOf(SUFFIX_TEST_IDENTIFIER)
-  );
-  const name = rawName || testName;
-  const screenshotsFolder = `${SCREENSHOTS_FOLDER_NAME}/${relativeTestPath.substring(
-    0,
-    relativeTestPath.lastIndexOf(testName)
-  )}${name}`;
-  return {
-    name,
-    screenshotsFolder
-  };
-}
-function verifyImages() {
-  if (Cypress.$("img:visible").length > 0) {
-    cy.document().its("body").find("img").filter(":visible").then((images) => {
-      if (images) {
-        cy.wrap(images).each(($img) => {
-          cy.wrap($img).should("exist").and("have.prop", "naturalWidth");
-        });
-      }
-    });
-  }
-}
-function matchScreenshot(subject, args) {
-  const { rawName, options } = args || {};
-  forceFont();
-  verifyImages();
-  const { name, screenshotsFolder } = getTestFolderPathFromScripts(rawName);
-  cy.task("baseExists", screenshotsFolder).then((hasBase) => {
-    const target = subject ? cy.wrap(subject) : cy;
-    target.screenshot(
-      `${PREFIX_DIFFERENTIATOR}${screenshotsFolder}/new`,
-      options
-    );
-    if (!hasBase) {
-      cy.task(
-        "log",
-        `\u2705 A new base image was created for ${name}. Create this as a new base image via Comparadise!`
-      );
-      return null;
-    }
-    const pixelMatchOptions = options?.pixelMatchOptions;
-    const compareScreenshotsArg = {
-      screenshotsFolder,
-      pixelMatchOptions
-    };
-    cy.task("compareScreenshots", compareScreenshotsArg).then((diffPixels) => {
-      if (diffPixels === 0) {
-        cy.log(`\u2705 Actual image of ${name} was the same as base`);
-      } else {
-        throw new Error(
-          `\u274C Actual image of ${name} differed by ${diffPixels} pixels.`
-        );
-      }
-      return null;
-    });
-    return null;
-  });
-}
-Cypress.Commands.add(
-  "matchScreenshot",
-  { prevSubject: ["optional", "element", "window", "document"] },
-  matchScreenshot
-);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PREFIX_DIFFERENTIATOR,
-  forceFont,
-  getTestFolderPathFromScripts,
-  matchScreenshot,
-  verifyImages
-});