vitest-plugin-vis 1.0.5 → 1.2.0

package/esm/server/commands/prepare_image_snapshot_comparison.d.ts

@@ -0,0 +1,20 @@
+import type { BrowserCommand } from 'vitest/node';
+import type { MatchImageSnapshotOptions } from './match_image_snapshot.ts';
+type ImageSnapshotComparisonInfo = {
+    projectRoot: string;
+    baselinePath: string;
+    resultPath: string;
+    diffPath: string;
+    baseline: string;
+    result: string;
+};
+export interface PrepareImageSnapshotComparisonCommand {
+    prepareImageSnapshotComparison: (taskId: string | undefined, subject: string, options?: MatchImageSnapshotOptions | undefined) => Promise<ImageSnapshotComparisonInfo | undefined>;
+}
+export declare const prepareImageSnapshotComparison: BrowserCommand<[
+    taskId: string,
+    snapshotId: string,
+    options?: MatchImageSnapshotOptions | undefined
+]>;
+export {};
+//# sourceMappingURL=prepare_image_snapshot_comparison.d.ts.map

package/esm/server/commands/prepare_image_snapshot_comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepare_image_snapshot_comparison.d.ts","sourceRoot":"","sources":["../../../src/server/commands/prepare_image_snapshot_comparison.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAMjD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAE1E,KAAK,2BAA2B,GAAG;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,qCAAqC;IACrD,8BAA8B,EAAE,CAC/B,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,2BAA2B,GAAG,SAAS,CAAC,CAAA;CACrD;AAED,eAAO,MAAM,8BAA8B,EAAE,cAAc,CAC1D;IAAC,MAAM,EAAE,MAAM;IAAE,UAAU,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CA0BrF,CAAA"}

package/esm/server/commands/prepare_image_snapshot_comparison.js

@@ -0,0 +1,31 @@
+import ci from 'is-ci';
+import { isBase64String } from "../../shared/base64.js";
+import { file } from "../file.js";
+import { takeSnapshot, takeSnapshotByBrowser, writeSnapshot } from "../snapshot.js";
+import { visContext } from "../vis_context.js";
+import { assertTestPathDefined } from "./_assertions.js";
+export const prepareImageSnapshotComparison = async (context, taskId, subject, options) => {
+    assertTestPathDefined(context, 'prepareImageSnapshotComparison');
+    // vitest:browser passes in `null` when not defined
+    if (!options)
+        options = {};
+    options.timeout = options.timeout ?? (ci ? 30000 : 5000);
+    const info = visContext.getSnapshotInfo(context.testPath, taskId, options);
+    const baselineBuffer = await file.tryReadFile(info.baselinePath);
+    if (!baselineBuffer) {
+        if (isBase64String(subject)) {
+            await writeSnapshot(info.baselinePath, subject);
+        }
+        else {
+            await takeSnapshotByBrowser(context, info.baselinePath, subject, options);
+        }
+        return;
+    }
+    const resultBuffer = await takeSnapshot(context, info.resultPath, subject, options);
+    return {
+        ...info,
+        projectRoot: context.project.runner.root,
+        baseline: baselineBuffer.toString('base64'),
+        result: resultBuffer.toString('base64'),
+    };
+};

package/esm/server/commands/setup_vis_suite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup_vis_suite.d.ts","sourceRoot":"","sources":["../../../src/server/commands/setup_vis_suite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAGjD,MAAM,WAAW,oBAAoB;IACpC;;;;;;OAMG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAClC;AAED,eAAO,MAAM,aAAa,EAAE,cAAc,CAAC,EAAE,CAE5C,CAAA"}
+{"version":3,"file":"setup_vis_suite.d.ts","sourceRoot":"","sources":["../../../src/server/commands/setup_vis_suite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIjD,MAAM,WAAW,oBAAoB;IACpC;;;;;;OAMG;IACH,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAClC;AAED,eAAO,MAAM,aAAa,EAAE,cAAc,CAAC,EAAE,CAI5C,CAAA"}

package/esm/server/commands/setup_vis_suite.js

@@ -1,4 +1,6 @@
 import { visContext } from "../vis_context.js";
+import { assertTestPathDefined } from "./_assertions.js";
 export const setupVisSuite = async (context) => {
+    assertTestPathDefined(context, 'setupVisSuite');
     await visContext.setupSuite(context);
 };

package/esm/server/commands/write_image_snapshot.d.ts

@@ -0,0 +1,12 @@
+import type { BrowserCommand } from 'vitest/node';
+export interface WriteImageSnapshotCommand {
+    /**
+     * Writes the image snapshot to the file system.
+     * @param relativeFilePath The file path to write the image snapshot to.
+     * It is relative to the project root.
+     * @param imageBase64 The base64 encoded image.
+     */
+    writeImageSnapshot(relativeFilePath: string, imageBase64: string): Promise<void>;
+}
+export declare const writeImageSnapshot: BrowserCommand<[relativeFilePath: string, imageBase64: string]>;
+//# sourceMappingURL=write_image_snapshot.d.ts.map

package/esm/server/commands/write_image_snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"write_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/write_image_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAIjD,MAAM,WAAW,yBAAyB;IACzC;;;;;OAKG;IACH,kBAAkB,CAAC,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAChF;AAED,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,CAAC,gBAAgB,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,CAS9F,CAAA"}

package/esm/server/commands/write_image_snapshot.js

@@ -0,0 +1,9 @@
+import { mkdirp } from 'mkdirp';
+import { dirname, isAbsolute } from 'pathe';
+import { file } from "../file.js";
+import { assertIsRelativePath } from "./_assertions.js";
+export const writeImageSnapshot = async (_, relativeFilePath, imageBase64) => {
+    assertIsRelativePath(relativeFilePath, 'relativeFilePath');
+    await mkdirp(dirname(relativeFilePath));
+    await file.writeFile(relativeFilePath, imageBase64, { encoding: 'base64' });
+};

package/esm/server/snapshot.d.ts

@@ -0,0 +1,7 @@
+import type { BrowserCommandContext } from 'vitest/node';
+import type { ImageSnapshotTimeoutOptions } from '../client.ts';
+export declare function takeSnapshot(context: BrowserCommandContext, filePath: string, subject: string, options: ImageSnapshotTimeoutOptions | undefined): Promise<Buffer<ArrayBufferLike>>;
+export declare function takeSnapshotByBrowser(context: BrowserCommandContext, filePath: string, subject: string, options: ImageSnapshotTimeoutOptions | undefined): Promise<Buffer<ArrayBufferLike>>;
+export declare function writeSnapshot(filePath: string, subject: string): Promise<void>;
+export declare function writeSnapshotBuffer(filePath: string, subject: Buffer): Promise<void>;
+//# sourceMappingURL=snapshot.d.ts.map

package/esm/server/snapshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot.d.ts","sourceRoot":"","sources":["../../src/server/snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAA;AAK/D,wBAAsB,YAAY,CACjC,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,2BAA2B,GAAG,SAAS,oCAOhD;AAED,wBAAsB,qBAAqB,CAC1C,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,2BAA2B,GAAG,SAAS,oCAOhD;AAED,wBAAsB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAGpE;AACD,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAG1E"}

package/esm/server/snapshot.js

@@ -0,0 +1,27 @@
+import { mkdirp } from 'mkdirp';
+import { dirname } from 'pathe';
+import { isBase64String } from "../shared/base64.js";
+import { browserApi } from "./browser_provider/browser_api.js";
+import { file } from './file.js';
+export async function takeSnapshot(context, filePath, subject, options) {
+    if (isBase64String(subject)) {
+        await writeSnapshot(filePath, subject);
+        return Buffer.from(subject, 'base64');
+    }
+    return takeSnapshotByBrowser(context, filePath, subject, options);
+}
+export async function takeSnapshotByBrowser(context, filePath, subject, options) {
+    await mkdirp(dirname(filePath));
+    const browser = browserApi(context);
+    return browser.takeScreenshot(filePath, subject ?? 'body', {
+        timeout: options?.timeout,
+    });
+}
+export async function writeSnapshot(filePath, subject) {
+    await mkdirp(dirname(filePath));
+    await file.writeFile(filePath, subject, { encoding: 'base64' });
+}
+export async function writeSnapshotBuffer(filePath, subject) {
+    await mkdirp(dirname(filePath));
+    await file.writeFile(filePath, subject);
+}

package/esm/server/vis_context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vis_context.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;sBAC4iD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CADxhD,CAAA"}
+{"version":3,"file":"vis_context.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;sBAC+hD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAD3gD,CAAA"}

package/esm/server/vis_context.logic.d.ts

@@ -11,7 +11,7 @@ export type PartialBrowserCommandContext = {
             hookTimeout: number;
         };
     };
-    testPath: string | undefined;
+    testPath: string;
 };
 export declare function createVisContext(): {
     setOptions(options?: VisOptions): void;

package/esm/server/vis_context.logic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vis_context.logic.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.logic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAKpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE;QACR,MAAM,EAAE;YACP,IAAI,EAAE,MAAM,CAAA;YACZ,eAAe,EAAE;gBAChB,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;aACtC,CAAA;YACD,WAAW,EAAE,MAAM,CAAA;YACnB,WAAW,EAAE,MAAM,CAAA;SACnB,CAAA;KACD,CAAA;IACD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAED,wBAAgB,gBAAgB;yBAMV,UAAU;;;;IAY9B;;;;OAIG;wBACuB,4BAA4B;8BAY5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;2BAiB1E,MAAM,UAAU,MAAM;+BAGlB,MAAM,UAAU,MAAM,kBAAkB,MAAM,GAAG,SAAS;8BAI3D;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,kBAAkB,MAAM,GAAG,SAAS;2BAMlF,MAAM,UAAU,MAAM;;;;;;;;;;EAe9C;AAuBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAEhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;;;;;;;;EAWjF"}
+{"version":3,"file":"vis_context.logic.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.logic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAKpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,MAAM,4BAA4B,GAAG;IAC1C,OAAO,EAAE;QACR,MAAM,EAAE;YACP,IAAI,EAAE,MAAM,CAAA;YACZ,eAAe,EAAE;gBAChB,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;aACtC,CAAA;YACD,WAAW,EAAE,MAAM,CAAA;YACnB,WAAW,EAAE,MAAM,CAAA;SACnB,CAAA;KACD,CAAA;IACD,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,gBAAgB;yBAMV,UAAU;;;;IAY9B;;;;OAIG;wBACuB,4BAA4B;8BAY5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;2BAiB1E,MAAM,UAAU,MAAM;+BAGlB,MAAM,UAAU,MAAM,kBAAkB,MAAM,GAAG,SAAS;8BAI3D;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,kBAAkB,MAAM,GAAG,SAAS;2BAMlF,MAAM,UAAU,MAAM;;;;;;;;;;EAe9C;AAuBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAEhF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;;;;;;;;EAWjF"}

package/esm/shared/compare_image.d.ts

@@ -0,0 +1,6 @@
+import type { ImageSnapshotCompareOptions } from './types.ts';
+export declare function compareImage(img1: Uint8ClampedArray | Buffer, img2: Uint8ClampedArray | Buffer, output: Uint8ClampedArray | Buffer, width: number, height: number, { failureThreshold, failureThresholdType, diffOptions }?: ImageSnapshotCompareOptions): {
+    pass: boolean;
+    diffAmount: number;
+};
+//# sourceMappingURL=compare_image.d.ts.map

package/esm/shared/compare_image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare_image.d.ts","sourceRoot":"","sources":["../../src/shared/compare_image.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAA;AAE7D,wBAAgB,YAAY,CAC3B,IAAI,EAAE,iBAAiB,GAAG,MAAM,EAChC,IAAI,EAAE,iBAAiB,GAAG,MAAM,EAChC,MAAM,EAAE,iBAAiB,GAAG,MAAM,EAClC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,EAAE,gBAAoB,EAAE,oBAA8B,EAAE,WAAW,EAAE,GAAE,2BAAgC;;;EASvG"}

package/esm/shared/compare_image.js

@@ -0,0 +1,10 @@
+import pixelmatch from 'pixelmatch';
+import { convertThresholdUnit } from "./convert_threshold_unit.js";
+export function compareImage(img1, img2, output, width, height, { failureThreshold = 0, failureThresholdType = 'pixel', diffOptions } = {}) {
+    const pixelDiff = pixelmatch(img1, img2, output, width, height, diffOptions);
+    const diffAmount = convertThresholdUnit({ failureThresholdType, width, height }, pixelDiff);
+    return {
+        pass: diffAmount <= failureThreshold,
+        diffAmount,
+    };
+}

package/esm/shared/convert_threshold_unit.js

@@ -5,6 +5,6 @@ export function convertThresholdUnit({ failureThresholdType, width, height }, pi
         case 'percent':
             return (pixelDiff / (width * height)) * 100;
         default:
-            throw new Error(`Invalid failureThresholdType: ${failureThresholdType}`);
+            throw new Error(`Unsupported failureThresholdType: ${failureThresholdType}`);
     }
 }

package/esm/testing/stubBrowserCommandContext.d.ts

@@ -0,0 +1,3 @@
+import type { BrowserCommandContext } from 'vitest/node';
+export declare const stubBrowserCommandContext: (stub?: import("type-plus").RecursivePartial<BrowserCommandContext> | undefined) => BrowserCommandContext;
+//# sourceMappingURL=stubBrowserCommandContext.d.ts.map

package/esm/testing/stubBrowserCommandContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stubBrowserCommandContext.d.ts","sourceRoot":"","sources":["../../src/testing/stubBrowserCommandContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAExD,eAAO,MAAM,yBAAyB,2GAAwC,CAAA"}

package/esm/testing/stubBrowserCommandContext.js

@@ -0,0 +1,2 @@
+import { stub } from 'type-plus';
+export const stubBrowserCommandContext = stub.build({});

package/esm/testing.d.ts

@@ -1,2 +1,3 @@
 export * from './testing/constants.ts';
+export * from './testing/stubBrowserCommandContext.ts';
 //# sourceMappingURL=testing.d.ts.map

package/esm/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../src/testing.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,wCAAwC,CAAA"}

package/esm/testing.js

@@ -1 +1,2 @@
 export * from "./testing/constants.js";
+export * from "./testing/stubBrowserCommandContext.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -64,7 +64,7 @@
     "dedent": "^1.5.1",
     "is-ci": "^4.0.0",
     "mkdirp": "^3.0.1",
-    "pathe": "^1.1.2",
+    "pathe": "^2.0.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "rimraf": "^6.0.1",
@@ -80,6 +80,7 @@
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/expect": "^2.1.8",
     "cross-env": "^7.0.3",
+    "never-fail": "^1.1.4",
     "npm-run-all2": "^7.0.2",
     "playwright": "^1.49.0",
     "react": "^19.0.0",

package/readme.md

@@ -53,14 +53,14 @@ You can customize the configuration:
 ```ts
 // vitest.config.ts
 import { defineConfig } from 'vitest/config'
-import { vis } from 'vitest-plugin-vis/config'
+import { vis, trimCommonFolder } from 'vitest-plugin-vis/config'
 
 export default defineConfig({
 	plugins: [
 		vis({
 			preset: 'auto',
 			snapshotRootDir: '__vis__',
-			customizeSnapshotSubpath: (subpath) => subpath,
+			customizeSnapshotSubpath: (subpath) => trimCommonFolder(subpath),
 			customizeSnapshotId: (id, index) => `${id}-${index}`,
 			diffOptions: undefined, // pixelmatch options
 			failureThresholdType: 'pixel',
@@ -103,7 +103,7 @@ vis.presets.auto()
 vis.presets.manual()
 
 
-// or capture image snapshot for all stories with `snapshot` tag,
+// or capture image snapshot for all rendering tests
 // for multiple themes (light and dark in this example)
 vis.presets.theme({
 	light() { document.body.classList.remove('dark') },
@@ -115,7 +115,8 @@ vis.presets.theme({
 
 ### Auto Snapshot
 
-By default, the plugin will use the `auto` preset, which will take a snapshot at the end of each test.
+By default, the plugin will use the `auto` preset,
+which will take a snapshot at the end of each test.
 
 You can control how the auto snapshot is taken using the `setAutoSnapshotOptions` function:
 
@@ -153,6 +154,23 @@ describe('nested scope', () => {
 })
 ```
 
+The options are similar to `expect(...).toMatchImageSnapshot(options)`:
+
+```ts
+// enable/disable auto snapshot
+setAutoSnapshotOptions(true /* or false */)
+
+// detailed options
+setAutoSnapshotOptions({
+	enable: true,
+	customizeSnapshotId: (id, index) => `${id}-custom-${index}`,
+	diffOptions: { threshold: 0.01 } // pixelmatch options,
+	failureThreshold: 0.01,
+	failureThresholdType: 'percent',
+	timeout: 15000
+})
+```
+
 ### Manual Snapshot
 
 You can also set the preset to `manual` and compare snapshots manually:

package/src/client/align_images.ts

@@ -0,0 +1,11 @@
+import { getMaxSize } from '../shared/get_max_size.ts'
+import { isSameSize } from '../shared/is_same_size.ts'
+import { createImageResizer } from './image_resizer.ts'
+
+export function alignImagesToSameSize(image1: ImageData, image2: ImageData): [image1: ImageData, image2: ImageData] {
+	if (isSameSize(image1, image2)) return [image1, image2] as const
+
+	const size = getMaxSize(image1, image2)
+	const resize = createImageResizer(size)
+	return [resize(image1), resize(image2)] as const
+}

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,9 +1,7 @@
-import { commands } from '@vitest/browser/context'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { matchImageSnapshot } from '../match_image_snapshot.ts'
 import { success } from './expectation_result.ts'
-import { parseImageSnapshotSubject } from './to_match_image_snapshot.logic.ts'
 import type { ToMatchImageSnapshotOptions } from './to_match_image_snapshot.types.ts'
 
 export function toMatchImageSnapshot(
@@ -26,18 +24,5 @@ export function toMatchImageSnapshot(
 		)
 	}
 
-	const s = parseImageSnapshotSubject(subject)
-	const taskId = toTaskId(test)
-	return toMatchImageSnapshotAsync(taskId, s, options).then(() => success)
-}
-
-async function toMatchImageSnapshotAsync(taskId: string, subject: string, options?: ToMatchImageSnapshotOptions) {
-	if (options?.customizeSnapshotId) {
-		const index = await commands.imageSnapshotNextIndex(taskId)
-		const { customizeSnapshotId, ...rest } = options
-		const snapshotFileId = customizeSnapshotId(taskId, index)
-		return commands.matchImageSnapshot(taskId, subject, { ...rest, snapshotFileId })
-	}
-
-	return commands.matchImageSnapshot(taskId, subject, options)
+	return matchImageSnapshot(test, subject, options).then(() => success)
 }

package/src/client/image_data.ts

@@ -0,0 +1,36 @@
+export function toImageData(base64: string) {
+	return new Promise<ImageData>((resolve, reject) => {
+		const img = new Image()
+		img.src = `data:image/png;base64,${base64}`
+
+		img.onload = () => {
+			const canvas = document.createElement('canvas')
+			canvas.width = img.width
+			canvas.height = img.height
+			const ctx = canvas.getContext('2d')!
+			ctx.drawImage(img, 0, 0)
+			resolve(ctx.getImageData(0, 0, canvas.width, canvas.height))
+		}
+
+		img.onerror = () => {
+			reject(new Error('Failed to load image'))
+		}
+	})
+}
+
+export async function toDataURL(imageData: ImageData) {
+	const canvas = document.createElement('canvas')
+	canvas.width = imageData.width
+	canvas.height = imageData.height
+	const ctx = canvas.getContext('2d')!
+	ctx.putImageData(imageData, 0, 0)
+	return new Promise<string>((resolve) => {
+		canvas.toBlob((blob) => {
+			const reader = new FileReader()
+			reader.onload = () => {
+				resolve(reader.result as string)
+			}
+			reader.readAsDataURL(blob!)
+		})
+	})
+}

package/src/client/image_resizer.ts

@@ -0,0 +1,59 @@
+import { isSameSize } from '../shared/is_same_size.ts'
+
+export const createImageResizer =
+	({ width, height }: { width: number; height: number }) =>
+	(image: ImageData) => {
+		if (isSameSize(image, { width, height })) return image
+
+		const inArea = (x: number, y: number) => y <= image.height && x <= image.width
+
+		const data = new Uint8ClampedArray(width * height * 4)
+		const result = new ImageData(data, width, height, { colorSpace: image.colorSpace })
+
+		for (let y = 0; y < height; y++) {
+			for (let x = 0; x < width; x++) {
+				const idx = (width * y + x) << 2
+				if (inArea(x, y)) {
+					const old = (image.width * y + x) << 2
+					result.data[idx] = image.data[old]!
+					result.data[idx + 1] = image.data[old + 1]!
+					result.data[idx + 2] = image.data[old + 2]!
+					result.data[idx + 3] = image.data[old + 3]!
+				} else {
+					result.data[idx] = 0
+					result.data[idx + 1] = 0
+					result.data[idx + 2] = 0
+					result.data[idx + 3] = 64
+				}
+			}
+		}
+
+		return result
+	}
+
+// slower
+export const createImageResizer2 =
+	({ width, height }: { width: number; height: number }) =>
+	(image: ImageData) => {
+		if (isSameSize(image, { width, height })) return image
+
+		const inArea = (x: number, y: number) => y <= image.height && x <= image.width
+
+		const data = new Uint8ClampedArray(width * height * 4)
+		const result = new ImageData(data, width, height, { colorSpace: image.colorSpace })
+
+		const copyBytes = image.width * 4
+		for (let y = 0; y < height; y++) {
+			result.data.set(image.data.slice(y * image.width, copyBytes), y * width * 4)
+			for (let x = image.width; x < width; x++) {
+				const idx = (width * y + x) << 2
+				if (!inArea(x, y)) {
+					result.data[idx] = 0
+					result.data[idx + 1] = 0
+					result.data[idx + 2] = 0
+					result.data[idx + 3] = 64
+				}
+			}
+		}
+		return result
+	}

package/src/client/match_image_snapshot.logic.ts

@@ -0,0 +1,13 @@
+import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts'
+
+export function prettifyOptions(options: ToMatchImageSnapshotOptions | undefined) {
+	if (!options) return 'none'
+
+	return [
+		`failureThreshold: ${options.failureThreshold ?? 0} ${options.failureThresholdType ?? 'pixel'}`,
+		options.diffOptions ? `diffOptions: ${JSON.stringify(options.diffOptions)}` : '',
+		options.timeout ? `timeout: ${options.timeout} ms` : '',
+	]
+		.filter(Boolean)
+		.join(', ')
+}

package/src/client/match_image_snapshot.ts

@@ -0,0 +1,87 @@
+import { commands } from '@vitest/browser/context'
+import dedent from 'dedent'
+import { resolve } from 'pathe'
+import type { Task } from 'vitest'
+import { isBase64String } from '../shared/base64.ts'
+import { compareImage } from '../shared/compare_image.ts'
+import { alignImagesToSameSize } from './align_images.ts'
+import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts'
+import { toDataURL, toImageData } from './image_data.ts'
+import { prettifyOptions } from './match_image_snapshot.logic.ts'
+import { convertElementToCssSelector } from './selector.ts'
+import { toTaskId } from './task_id.ts'
+import { server } from './vitest_browser_context_proxy.ts'
+
+export async function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions) {
+	const taskId = toTaskId(test)
+	const info = await commands.prepareImageSnapshotComparison(
+		taskId,
+		parseImageSnapshotSubject(subject),
+		options?.customizeSnapshotId ? await parseImageSnapshotOptions(taskId, options) : options,
+	)
+
+	if (!info) return
+
+	const baselineImage = await toImageData(info.baseline)
+	const resultImage = await toImageData(info.result)
+	const [baselineAlignedImage, resultAlignedImage] = alignImagesToSameSize(baselineImage, resultImage)
+	const { width, height } = baselineAlignedImage
+	const diffImage = new ImageData(width, height)
+	const { pass, diffAmount } = compareImage(
+		baselineAlignedImage.data,
+		resultAlignedImage.data,
+		diffImage.data,
+		width,
+		height,
+		options,
+	)
+	if (pass) return
+	if (server.config.snapshotOptions.updateSnapshot === 'all') {
+		await writeSnapshot(info.baselinePath, resultImage)
+		return
+	}
+
+	await writeSnapshot(info.diffPath, diffImage)
+
+	throw new Error(
+		dedent`Snapshot \`${taskId}\` mismatched
+
+			${
+				options?.failureThreshold
+					? options?.failureThresholdType === 'percent'
+						? `Expected image to match within ${options.failureThreshold}% but was differ by ${diffAmount}%.`
+						: `Expected image to match within ${options.failureThreshold} pixels but was differ by ${diffAmount} pixels.`
+					: `Expected image to match but was differ by ${options?.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}.`
+			}
+
+			Options:    ${prettifyOptions(options)}
+
+			Expected:   ${resolve(info.projectRoot, info.baselinePath)}
+			Actual:     ${resolve(info.projectRoot, info.resultPath)}
+			Difference: ${resolve(info.projectRoot, info.diffPath)}`,
+	)
+}
+
+/**
+ * @deprecated internalized. Use `matchImageSnapshot` directly instead.
+ */
+export function parseImageSnapshotSubject(subject: any) {
+	if (subject instanceof Element) return convertElementToCssSelector(subject)
+	if (subject?.['selector']) return subject['selector']
+	if (isBase64String(subject)) return subject
+	throw new Error(
+		`'toMatchImageSnapshot()' expects the subject to be an element, locator, or image encoded in base64 string, but got: ${subject}`,
+	)
+}
+
+async function writeSnapshot(path: string, image: ImageData) {
+	const content = (await toDataURL(image)).split(',')[1]!
+	return commands.writeImageSnapshot(path, content)
+}
+
+async function parseImageSnapshotOptions(taskId: string, options: ToMatchImageSnapshotOptions) {
+	const index = await commands.imageSnapshotNextIndex(taskId)
+	const { customizeSnapshotId, ...rest } = options
+	const snapshotFileId = customizeSnapshotId!(taskId, index)
+	return { ...rest, snapshotFileId }
+}

package/src/client/task_id.ts

@@ -3,6 +3,9 @@ type Task = {
 	suite?: Task | undefined
 }
 
+/**
+ * @deprecated not needed anymore. Use `matchImageSnapshot` directly instead.
+ */
 export function toTaskId(task: Task) {
 	const l: any[] = []
 	let t = task

package/src/client/vitest_browser_context_proxy.ts

@@ -0,0 +1,44 @@
+import type { BrowserCommands, Platform } from '@vitest/browser/context'
+import type { SerializedConfig } from 'vitest'
+
+let ctx: Awaited<typeof import('@vitest/browser/context')>
+
+if ((globalThis as any).__vitest_browser__) {
+	import('@vitest/browser/context').then((m) => {
+		ctx = m
+	})
+}
+
+export const server = new Proxy<{
+	/**
+	 * Platform the Vitest server is running on.
+	 * The same as calling `process.platform` on the server.
+	 */
+	platform: Platform
+	/**
+	 * Runtime version of the Vitest server.
+	 * The same as calling `process.version` on the server.
+	 */
+	version: string
+	/**
+	 * Name of the browser provider.
+	 */
+	provider: string
+	/**
+	 * Name of the current browser.
+	 */
+	browser: string
+	/**
+	 * Available commands for the browser.
+	 * @see {@link https://vitest.dev/guide/browser/commands}
+	 */
+	commands: BrowserCommands
+	/**
+	 * Serialized test config.
+	 */
+	config: SerializedConfig
+}>({} as any, {
+	get(target, prop) {
+		return (target as any)[prop] ?? (ctx?.server as any)[prop]
+	},
+})

package/src/client.ts

@@ -1,6 +1,6 @@
 export * from './client/expect/expectation_result.ts'
-export * from './client/expect/to_match_image_snapshot.logic.ts'
 export type * from './client/expect/to_match_image_snapshot.types.ts'
+export * from './client/match_image_snapshot.ts'
 export * from './client/should_take_snapshot.ts'
 export * from './client/snapshot_options.ts'
 export * from './client/task_id.ts'

package/src/presets/auto.ts

@@ -1,4 +1,3 @@
-import 'vitest-browser-react'
 import { vis } from '../setup/vis.ts'
 
 vis.presets.auto()

package/src/presets/manual.ts

@@ -1,4 +1,3 @@
-import 'vitest-browser-react'
 import { vis } from '../setup/vis.ts'
 
 vis.presets.manual()

package/src/server/browser_provider/playwright.ts

@@ -5,7 +5,7 @@ export function playwright(context: BrowserCommandContext): BrowserApi {
 	return {
 		async takeScreenshot(filePath, selector, options) {
 			// The `Locator` type from `vitest` has less props than the `Locator` in `playwright`
-			const subject = context.iframe.locator(selector ?? 'body')
+			const subject = context.iframe.locator(selector)
 			return subject.screenshot({
 				timeout: options?.timeout,
 				path: filePath,