perf: replace pixelmatch with @blazediff/core

apps/codebattle/assets/js/__tests__/RootContainer.test.tsx

@@ -16,7 +16,7 @@ import task from '../widgets/machines/task';
 import RootContainer from '../widgets/pages/RoomWidget';
 import reducers from '../widgets/slices';
 
-vi.mock('pixelmatch', () => ({ default: () => {} }));
+vi.mock('@blazediff/core', () => ({ default: () => {} }));
 
 vi.mock('monaco-editor', () => ({
   editor: {

apps/codebattle/assets/js/widgets/lib/cssbattle.ts

@@ -1,4 +1,4 @@
-import pixelmatch from 'pixelmatch';
+import blazediff from '@blazediff/core';
 
 const diffThreshold = 0.1;
 
@@ -74,15 +74,15 @@ export const matchBattlePictures = (
   const firstDiff = firstDiffContext.createImageData(width, height);
   const secondDiff = secondDiffContext.createImageData(width, height);
 
-  const firstStats = pixelmatch(
+  const firstStats = blazediff(
     firstDataImg.data,
     targetDataImg.data,
     firstDiff.data,
     width,
     height,
     { threshold: diffThreshold },
   );
-  const secondStats = pixelmatch(
+  const secondStats = blazediff(
     secondDataImg.data,
     targetDataImg.data,
     secondDiff.data,

apps/codebattle/package.json

@@ -31,6 +31,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@blazediff/core": "1.9.3",
     "@dnd-kit/core": "^6.3.1",
     "@ebay/nice-modal-react": "^1.2.13",
     "@emoji-mart/data": "^1.2.1",
@@ -73,7 +74,6 @@
     "phoenix": "^1.8.7",
     "phoenix_html": "^4.3.0",
     "phoenix_live_view": "^1.1.31",
-    "pixelmatch": "^7.2.0",
     "popper.js": "^1.16.1",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",

apps/runner/images/css/checker.js

@@ -1,5 +1,5 @@
 import { readFileSync, writeFileSync } from 'fs';
-import pixelmatch from 'pixelmatch';
+import blazediff from '@blazediff/core';
 import LZString from 'lz-string';
 import nodeHtmlToImage from 'node-html-to-image';
 import { PNG } from 'pngjs';
@@ -61,7 +61,7 @@ const run = function run(args = []) {
     const targetImgDataUri = `data:${mime};${encoding},${targetImageBuffer.toString(encoding)}`;
 
     try {
-      const stats = pixelmatch(solutionImg.data, targetImg.data, diff.data, width, height, { threshold: 0.1 });
+      const stats = blazediff(solutionImg.data, targetImg.data, diff.data, width, height, { threshold: 0.1 });
       const match = getMatchPoints(stats, width, height);
       const matchPercentage = getMatchPercentageText(match);
       const diffBuffer = PNG.sync.write(diff);

apps/runner/images/css/package.json

@@ -9,10 +9,10 @@
     "js-yaml": "^4.1.1"
   },
   "dependencies": {
+    "@blazediff/core": "1.9.3",
     "@types/node": "^20.11.25",
     "lz-string": "^1.5.0",
     "node-html-to-image": "^5.0.0",
-    "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0"
   }
 }