feat: use blazediff to speed up visual diffs (#2023)

* feat: use blazediff to speed up visual diffs

* feat: update to latest stable version

Author: teimurjan

__tests__/integration/utils/toMatchCanvasSnapshot.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import pixelmatch from 'pixelmatch';
+import blazediff from '@blazediff/core';
 import { PNG } from 'pngjs';
 
 export type ToMatchCanvasSnapshotOptions = {
@@ -33,8 +33,8 @@ function diff(
     output = diffPNG.data;
   }
 
-  // @see https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options
-  const mismatch = pixelmatch(img1.data, img2.data, output, width, height, {
+  // @see https://github.com/teimurjan/blazediff?tab=readme-ov-file#configuration-options
+  const mismatch = blazediff(img1.data, img2.data, output, width, height, {
     threshold: 0.1,
   });
 

package.json

@@ -59,6 +59,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@blazediff/core": "^1.0.0",
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^8.3.6",
     "@commitlint/config-angular": "^9.1.2",
@@ -72,7 +73,6 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.10",
     "@types/node": "^16.18.64",
-    "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
@@ -104,7 +104,6 @@
     "lint-staged": "^10.5.4",
     "markdownlint-cli": "^0.45.0",
     "npm-run-all": "^4.1.5",
-    "pixelmatch": "^5.3.0",
     "playwright": "latest",
     "pngjs": "^6.0.0",
     "portfinder": "^1.0.32",