vitest-plugin-vis 1.3.1 → 1.4.0

package/esm/client/expect/to_match_image_snapshot.js

@@ -1,6 +1,6 @@
 import { commands } from '@vitest/browser/context';
 import { ctx } from "../ctx.js";
-import { imageSnapshotMatcher } from "../match_image_snapshot.js";
+import { imageSnapshotMatcher } from "../image_snapshot_matcher.js";
 import { success } from "./expectation_result.js";
 export function toMatchImageSnapshot(
 /**

package/esm/client/expect/to_match_image_snapshot.types.d.ts

@@ -1,12 +1,12 @@
-import type { ImageSnapshotCompareOptions, ImageSnapshotIdOptions, ImageSnapshotTimeoutOptions } from '../../shared/types.ts';
+import type { ComparisonMethod, ImageSnapshotCompareOptions, ImageSnapshotIdOptions, ImageSnapshotTimeoutOptions } from '../../shared/types.ts';
 export interface ImageSnapshotMatcher {
-    toMatchImageSnapshot(options?: ToMatchImageSnapshotOptions | undefined): Promise<void>;
+    toMatchImageSnapshot<M extends ComparisonMethod>(options?: ToMatchImageSnapshotOptions<M> | undefined): Promise<void>;
 }
-export interface ToMatchImageSnapshotOptions extends ImageSnapshotTimeoutOptions, ImageSnapshotIdOptions, ImageSnapshotCompareOptions {
+export type ToMatchImageSnapshotOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTimeoutOptions & ImageSnapshotIdOptions & ImageSnapshotCompareOptions<M> & {
     /**
      * Expect the matcher to fail.
      * If it passes, it will throw an error with details.
      */
     expectToFail?: boolean | undefined;
-}
+};
 //# sourceMappingURL=to_match_image_snapshot.types.d.ts.map

package/esm/client/expect/to_match_image_snapshot.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"to_match_image_snapshot.types.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,oBAAoB;IACpC,oBAAoB,CAAC,OAAO,CAAC,EAAE,2BAA2B,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACtF;AAED,MAAM,WAAW,2BAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAClC"}
+{"version":3,"file":"to_match_image_snapshot.types.d.ts","sourceRoot":"","sources":["../../../src/client/expect/to_match_image_snapshot.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,oBAAoB;IACpC,oBAAoB,CAAC,CAAC,SAAS,gBAAgB,EAAE,OAAO,CAAC,EAAE,2BAA2B,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACrH;AAED,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,GAC1G,sBAAsB,GACtB,2BAA2B,CAAC,CAAC,CAAC,GAAG;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAClC,CAAA"}

package/esm/client/{match_image_snapshot.d.ts → image_snapshot_matcher.d.ts}

@@ -3,9 +3,9 @@ import type { ImageSnapshotNextIndexCommand } from '../commands.ts';
 import type { PrepareImageSnapshotComparisonCommand } from '../server/commands/prepare_image_snapshot_comparison.ts';
 import type { WriteImageSnapshotCommand } from '../server/commands/write_image_snapshot.ts';
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
-export declare function imageSnapshotMatcher(commands: PrepareImageSnapshotComparisonCommand & WriteImageSnapshotCommand & ImageSnapshotNextIndexCommand): (test: Task, subject: any, options?: ToMatchImageSnapshotOptions) => Promise<void>;
+export declare function imageSnapshotMatcher(commands: PrepareImageSnapshotComparisonCommand & WriteImageSnapshotCommand & ImageSnapshotNextIndexCommand): (test: Task, subject: any, options?: ToMatchImageSnapshotOptions<any>) => Promise<void>;
 /**
  * @deprecated internalized. Use `matchImageSnapshot` directly instead.
  */
 export declare function parseImageSnapshotSubject(subject: any): any;
-//# sourceMappingURL=match_image_snapshot.d.ts.map
+//# sourceMappingURL=image_snapshot_matcher.d.ts.map

package/esm/client/image_snapshot_matcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_snapshot_matcher.d.ts","sourceRoot":"","sources":["../../src/client/image_snapshot_matcher.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,yDAAyD,CAAA;AACpH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAI3F,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAO5F,wBAAgB,oBAAoB,CACnC,QAAQ,EAAE,qCAAqC,GAAG,yBAAyB,GAAG,6BAA6B,UAE5D,IAAI,WAAW,GAAG,YAAY,2BAA2B,CAAC,GAAG,CAAC,mBA8D7G;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,GAAG,OAOrD"}

package/esm/client/{match_image_snapshot.js → image_snapshot_matcher.js}

@@ -4,7 +4,7 @@ import { isBase64String } from "../shared/base64.js";
 import { compareImage } from "../shared/compare_image.js";
 import { alignImagesToSameSize } from "./align_images.js";
 import { toDataURL, toImageData } from "./image_data.js";
-import { prettifyOptions } from "./match_image_snapshot.logic.js";
+import { prettifyOptions } from "./image_snapshot_matcher.logic.js";
 import { convertElementToCssSelector } from "./selector.js";
 import { toTaskId } from "./task_id.js";
 import { server } from "./vitest_browser_context_proxy.js";
@@ -25,7 +25,7 @@ export function imageSnapshotMatcher(commands) {
                 throw new Error(dedent `Snapshot \`${taskId}\` matched but expected to fail.
 
 							Options:    ${prettifyOptions(options)}
-							DiffAmount: ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
+							Diff:       ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
 
 							Expected:   ${resolve(info.projectRoot, info.baselinePath)}
 							Actual:     ${resolve(info.projectRoot, info.resultPath)}`);

package/esm/client/{match_image_snapshot.logic.d.ts → image_snapshot_matcher.logic.d.ts}

@@ -1,3 +1,3 @@
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
-export declare function prettifyOptions(options: ToMatchImageSnapshotOptions | undefined): string;
-//# sourceMappingURL=match_image_snapshot.logic.d.ts.map
+export declare function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | undefined): string;
+//# sourceMappingURL=image_snapshot_matcher.logic.d.ts.map

package/esm/client/image_snapshot_matcher.logic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_snapshot_matcher.logic.d.ts","sourceRoot":"","sources":["../../src/client/image_snapshot_matcher.logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,wBAAgB,eAAe,CAAC,OAAO,EAAE,2BAA2B,CAAC,GAAG,CAAC,GAAG,SAAS,UAUpF"}

package/esm/client/should_take_snapshot.d.ts

@@ -6,5 +6,5 @@ import type { SnapshotMeta } from './snapshot_options.ts';
  * no `snapshot` tag: false
  * disabled by `!snapshot` tag: false
  */
-export declare function shouldTakeSnapshot(meta?: SnapshotMeta | undefined): boolean;
+export declare function shouldTakeSnapshot(meta?: SnapshotMeta<any> | undefined): boolean;
 //# sourceMappingURL=should_take_snapshot.d.ts.map

package/esm/client/should_take_snapshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"should_take_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/should_take_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,WAGjE"}
+{"version":3,"file":"should_take_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/should_take_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,GAAG,SAAS,WAGtE"}

package/esm/client/snapshot_options.d.ts

@@ -1,5 +1,6 @@
+import type { ComparisonMethod } from '../shared/types.ts';
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
-export type SnapshotMeta = ToMatchImageSnapshotOptions & {
+export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & {
     enable?: boolean | undefined;
 };
 type Suite = {
@@ -28,7 +29,7 @@ export type MetaTask = {
  * @param task Optional. Suite or task to set the options.
  * If not provided, it will set the options for the current test.
  */
-export declare function setAutoSnapshotOptions(task: MetaTask, meta: SnapshotMeta | boolean): void;
-export declare function setAutoSnapshotOptions(meta: SnapshotMeta | boolean): void;
+export declare function setAutoSnapshotOptions<M extends ComparisonMethod>(task: MetaTask, meta: SnapshotMeta<M> | boolean): void;
+export declare function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void;
 export {};
 //# sourceMappingURL=snapshot_options.d.ts.map

package/esm/client/snapshot_options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,GAAG,2BAA2B,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAA;AAEzF,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,CAAA;AAErE,MAAM,MAAM,QAAQ,GACjB;IACA,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,GAAG,SAAS,CAAA;IAChD,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACxB,GACD,SAAS,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,IAAI,CAAA;AAC1F,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,GAAG,IAAI,CAAA"}
+{"version":3,"file":"snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,2BAA2B,CAAC,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAAE,CAAA;AAExH,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,CAAA;AAErE,MAAM,MAAM,QAAQ,GACjB;IACA,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAAE,GAAG,SAAS,CAAA;IAChD,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACxB,GACD,SAAS,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAChE,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAC7B,IAAI,CAAA;AACP,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,IAAI,CAAA"}

package/esm/client/snapshot_options.internal.d.ts

@@ -1,3 +1,3 @@
 import type { MetaTask, SnapshotMeta } from './snapshot_options.ts';
-export declare function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta | undefined;
+export declare function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta<any> | undefined;
 //# sourceMappingURL=snapshot_options.internal.d.ts.map

package/esm/client/snapshot_options.internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snapshot_options.internal.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.internal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEnE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,QAAQ,GAAG,YAAY,GAAG,SAAS,CAkB/E"}
+{"version":3,"file":"snapshot_options.internal.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.internal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEnE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,SAAS,CAkBpF"}

package/esm/client.d.ts

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

package/esm/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAA;AACrD,mBAAmB,kDAAkD,CAAA;AACrE,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,qBAAqB,CAAA;AACnC,mBAAmB,mBAAmB,CAAA"}

package/esm/client.js

@@ -1,5 +1,5 @@
 export * from "./client/expect/expectation_result.js";
-export * from "./client/match_image_snapshot.js";
+export * from "./client/image_snapshot_matcher.js";
 export * from "./client/should_take_snapshot.js";
 export * from "./client/snapshot_options.js";
 export * from "./client/task_id.js";

package/esm/config/types.d.ts

@@ -1,5 +1,7 @@
 import type { ToMatchImageSnapshotOptions } from '../client/expect/to_match_image_snapshot.types.ts';
-export interface VisOptions extends ToMatchImageSnapshotOptions {
+import type { ComparisonMethod } from '../shared/types.ts';
+export type { ComparisonMethod };
+export type VisOptions<M extends ComparisonMethod = 'pixel'> = ToMatchImageSnapshotOptions<M> & {
     /**
      * Loads the `test.setupFiles` of the specified preset.
      */
@@ -31,5 +33,5 @@ export interface VisOptions extends ToMatchImageSnapshotOptions {
      * If you want to keep the full path, you can simply return it.
      */
     customizeSnapshotSubpath?: (subPath: string) => string;
-}
+};
 //# sourceMappingURL=types.d.ts.map

package/esm/config/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAA;AAEpG,MAAM,WAAW,UAAW,SAAQ,2BAA2B;IAC9D;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CACtD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,mDAAmD,CAAA;AACpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,CAAC,CAAC,CAAC,GAAG;IAC/F;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CACtD,CAAA"}

package/esm/config/vis.d.ts

@@ -1,3 +1,4 @@
+import type { ComparisonMethod } from '../shared/types.ts';
 import type { VisOptions } from './types.ts';
 /**
  * Create a Vite plugin for visual testing.
@@ -5,7 +6,7 @@ import type { VisOptions } from './types.ts';
  * If options are not provided, the plugin will use the default options,
  * which enables the `auto` preset.
  */
-export declare function vis(options?: VisOptions): {
+export declare function vis<M extends ComparisonMethod = 'pixel'>(options?: VisOptions<M>): {
     name: string;
     config(this: void): {
         test: {

package/esm/config/vis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/config/vis.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,OAAO,GAAE,UAA+B;;;;;sBASxB,MAAM;;;;;;;;;;;;;EAQzC"}
+{"version":3,"file":"vis.d.ts","sourceRoot":"","sources":["../../src/config/vis.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,EAAE,OAAO,GAAE,UAAU,CAAC,CAAC,CAA6B;;;;;sBASxE,MAAM;;;;;;;;;;;;;EAQzC"}

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

@@ -3,12 +3,12 @@ import type { ImageSnapshotCompareOptions, ImageSnapshotIdOptions, ImageSnapshot
 export interface MatchImageSnapshotCommand {
     matchImageSnapshot: (taskId: string | undefined, subject: string, options?: MatchImageSnapshotOptions | undefined) => Promise<void>;
 }
-export interface MatchImageSnapshotOptions extends ImageSnapshotTimeoutOptions, ImageSnapshotIdOptions, ImageSnapshotCompareOptions {
+export type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions & ImageSnapshotIdOptions & ImageSnapshotCompareOptions<any> & {
     /**
      * The snapshot file id calculated on the client side.
      */
     snapshotFileId?: string | undefined;
-}
+};
 export declare const matchImageSnapshot: BrowserCommand<[
     taskId: string,
     subject: string,

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

@@ -1 +1 @@
-{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/match_image_snapshot.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAKjD,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAM9B,MAAM,WAAW,yBAAyB;IACzC,kBAAkB,EAAE,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,IAAI,CAAC,CAAA;CAClB;AAED,MAAM,WAAW,yBAChB,SAAQ,2BAA2B,EAClC,sBAAsB,EACtB,2BAA2B;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAC9C;IAAC,MAAM,EAAE,MAAM;IAAE,OAAO,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CAuElF,CAAA"}
+{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../../src/server/commands/match_image_snapshot.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAKjD,OAAO,KAAK,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,uBAAuB,CAAA;AAM9B,MAAM,WAAW,yBAAyB;IACzC,kBAAkB,EAAE,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,OAAO,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS,KAC3C,OAAO,CAAC,IAAI,CAAC,CAAA;CAClB;AAED,MAAM,MAAM,yBAAyB,GAAG,2BAA2B,GAClE,sBAAsB,GACtB,2BAA2B,CAAC,GAAG,CAAC,GAAG;IAClC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAA;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAC9C;IAAC,MAAM,EAAE,MAAM;IAAE,OAAO,EAAE,MAAM;IAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,SAAS;CAAC,CAuElF,CAAA"}

package/esm/server/snapshot_path.d.ts

@@ -1,4 +1,4 @@
 import type { VisOptions } from '../config/types.ts';
-export declare function resolveSnapshotRootDir(options: VisOptions | undefined): string;
-export declare function getSnapshotSubpath(suiteName: string, options: VisOptions): string;
+export declare function resolveSnapshotRootDir(options: Pick<VisOptions, 'snapshotRootDir'> | undefined): string;
+export declare function getSnapshotSubpath(suiteName: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>): string;
 //# sourceMappingURL=snapshot_path.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"snapshot_path.d.ts","sourceRoot":"","sources":["../../src/server/snapshot_path.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAIpD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,UAAU,GAAG,SAAS,UAErE;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAGxE"}
+{"version":3,"file":"snapshot_path.d.ts","sourceRoot":"","sources":["../../src/server/snapshot_path.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAIpD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,iBAAiB,CAAC,GAAG,SAAS,UAE9F;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,0BAA0B,CAAC,UAG1G"}

package/esm/server/vis_context.d.ts

@@ -1,6 +1,6 @@
 export declare const visContext: {
-    setOptions(options?: import("../config.ts").VisOptions): void;
-    __test__getOptions(): import("../config.ts").VisOptions;
+    setOptions<M extends "pixel" | "ssim">(options?: import("../config.ts").VisOptions<M>): void;
+    __test__getOptions(): import("../config.ts").VisOptions<any>;
     __test__reset(): void;
     __test__getState(): import("./vis_context.types.ts").VisState;
     setupSuite(context: import("./vis_context.logic.ts").PartialBrowserCommandContext): Promise<void>;

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;;;;;;;sBAC+hD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAD3gD,CAAA"}
+{"version":3,"file":"vis_context.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;sBAC0kD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CADtjD,CAAA"}

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

@@ -14,8 +14,8 @@ export type PartialBrowserCommandContext = {
     testPath: string;
 };
 export declare function createVisContext(): {
-    setOptions(options?: VisOptions): void;
-    __test__getOptions(): VisOptions;
+    setOptions<M extends "pixel" | "ssim">(options?: VisOptions<M>): void;
+    __test__getOptions(): VisOptions<any>;
     __test__reset(): void;
     __test__getState(): VisState;
     /**
@@ -50,7 +50,7 @@ export declare function createVisContext(): {
         };
     };
 };
-export declare function createSuite(state: VisState, testPath: string, options: VisOptions): {
+export declare function createSuite(state: VisState, testPath: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>): {
     suiteId: string;
     suite: {
         baselineDir: string;
@@ -59,5 +59,5 @@ export declare function createSuite(state: VisState, testPath: string, options:
         tasks: {};
     };
 };
-export declare function getSuiteId(state: VisState, testPath: string, options: VisOptions): string;
+export declare function getSuiteId(state: VisState, testPath: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>): string;
 //# sourceMappingURL=vis_context.logic.d.ts.map

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,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,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;;;;;;;;EAWjF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,UAEhF"}
+{"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;eAMnB,CAAC,SAAS,OAAO,GAAG,MAAM,YAAW,UAAU,CAAC,CAAC,CAAC;;;;IAY7D;;;;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,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,0BAA0B,CAAC;;;;;;;;EAWnH;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,0BAA0B,CAAC,UAElH"}

package/esm/shared/compare_image.d.ts

@@ -1,5 +1,5 @@
-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): {
+import type { ComparisonMethod, ImageSnapshotCompareOptions } from './types.ts';
+export declare function compareImage<M extends ComparisonMethod>(img1: Uint8ClampedArray | Buffer, img2: Uint8ClampedArray | Buffer, output: Uint8ClampedArray | Buffer, width: number, height: number, options?: ImageSnapshotCompareOptions<M>): {
     pass: boolean;
     diffAmount: number;
 };

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

@@ -1 +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"}
+{"version":3,"file":"compare_image.d.ts","sourceRoot":"","sources":["../../src/shared/compare_image.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,MAAM,YAAY,CAAA;AAE/E,wBAAgB,YAAY,CAAC,CAAC,SAAS,gBAAgB,EACtD,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,OAAO,GAAE,2BAA2B,CAAC,CAAC,CAAa;;;EAenD"}

package/esm/shared/compare_image.js

@@ -1,10 +1,42 @@
 import pixelmatch from 'pixelmatch';
+import { ssim } from 'ssim.js';
 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);
+export function compareImage(img1, img2, output, width, height, options = {}) {
+    const pixelDiff = options.comparisonMethod === 'ssim'
+        ? compareWithSsim(img1, img2, output, width, height, options.diffOptions)
+        : pixelmatch(img1, img2, output, width, height, options.diffOptions);
+    const diffAmount = convertThresholdUnit({ failureThresholdType: options.failureThresholdType ?? 'pixel', width, height }, pixelDiff);
     return {
-        pass: diffAmount <= failureThreshold,
+        pass: diffAmount <= (options.failureThreshold ?? 0),
         diffAmount,
     };
 }
+/**
+ * @author This code is based on `jest-image-snapshot` implementation.
+ */
+function compareWithSsim(img1, img2, output, width, height, diffOptions) {
+    const newImage = { data: img1, width: width, height: height };
+    const baselineImage = { data: img2, width: width, height: height };
+    const { ssim_map, mssim } = ssim(newImage, baselineImage, {
+        ssim: 'bezkrovny',
+        ...diffOptions,
+    });
+    // Converts the SSIM value to different pixels based on image width and height
+    // conforms to how pixelmatch works.
+    const diffPixels = Math.round((1 - mssim) * width * height);
+    const diffRgbaPixels = new DataView(output.buffer, output.byteOffset);
+    for (let ln = 0; ln !== height; ++ln) {
+        for (let pos = 0; pos !== width; ++pos) {
+            const rPos = ln * width + pos;
+            // initial value is transparent.  We'll add in the SSIM offset.
+            // red (ff) green (00) blue (00) alpha (00)
+            const diffValue = 0xff000000 +
+                Math.floor(0xff *
+                    (1 -
+                        ssim_map.data[ssim_map.width * Math.round((ssim_map.height * ln) / height) +
+                            Math.round((ssim_map.width * pos) / width)]));
+            diffRgbaPixels.setUint32(rPos * 4, diffValue);
+        }
+    }
+    return diffPixels;
+}

package/esm/shared/types.d.ts

@@ -1,4 +1,5 @@
 import type { PixelmatchOptions } from 'pixelmatch';
+import type { Options as SsimOptions } from 'ssim.js';
 export interface ImageSnapshotTimeoutOptions {
     /**
      * Timeout for taking the snapshot.
@@ -16,7 +17,27 @@ export interface ImageSnapshotIdOptions {
      */
     customizeSnapshotId?: (id: string, index: number) => string;
 }
-export interface ImageSnapshotCompareOptions {
+export type ComparisonMethod = 'pixel' | 'ssim';
+export type ImageSnapshotCompareOptions<M extends ComparisonMethod = 'pixel'> = M extends 'ssim' ? {
+    comparisonMethod: M;
+    /**
+     * Custom options passed to 'ssim'
+     */
+    diffOptions?: Partial<SsimOptions> | undefined;
+    /**
+     * Failure threshold should measure in `pixel` or `percent`.
+     *
+     * Default is `pixel`.
+     */
+    failureThresholdType?: 'pixel' | 'percent' | undefined;
+    /**
+     * Failure tolerance threshold.
+     *
+     * Default is `0`.
+     */
+    failureThreshold?: number | undefined;
+} : {
+    comparisonMethod?: M | undefined;
     /**
      * Custom options passed to 'pixelmatch'
      */
@@ -33,5 +54,5 @@ export interface ImageSnapshotCompareOptions {
      * Default is `0`.
      */
     failureThreshold?: number | undefined;
-}
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAEnD,MAAM,WAAW,2BAA2B;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACtC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3D;AAED,MAAM,WAAW,2BAA2B;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAC3C;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAErD,MAAM,WAAW,2BAA2B;IAC3C;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B;AAED,MAAM,WAAW,sBAAsB;IACtC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3D;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,CAAC,SAAS,MAAM,GAC7F;IACA,gBAAgB,EAAE,CAAC,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;IAC9C;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACrC,GACA;IACA,gBAAgB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;IAC3C;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACrC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -68,6 +68,7 @@
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "rimraf": "^6.0.1",
+    "ssim.js": "^3.5.0",
     "type-plus": "^8.0.0-beta.6"
   },
   "devDependencies": {

package/readme.md

@@ -41,6 +41,7 @@ export default defineConfig({
 
 This default configuration will:
 
+- Use `pixelmatch` as the image comparison method.
 - Use the `auto` preset, taking image snapshot at the end on each rendering test.
 - Set config to compare image snapshot with a failure threshold of `0 pixels`.
 - Local (non-CI) image snapshots are saved in the `<root>/__vis__/local` directory.
@@ -59,6 +60,7 @@ export default defineConfig({
 	plugins: [
 		vis({
 			preset: 'auto',
+			comparisonMethod: 'pixel',
 			snapshotRootDir: '__vis__',
 			customizeSnapshotSubpath: (subpath) => trimCommonFolder(subpath),
 			customizeSnapshotId: (id, index) => `${id}-${index}`,
@@ -181,8 +183,10 @@ setAutoSnapshotOptions(true /* or false */)
 // detailed options
 setAutoSnapshotOptions({
 	enable: true,
+	comparisonMethod: 'pixel',
 	customizeSnapshotId: (id, index) => `${id}-custom-${index}`,
-	diffOptions: { threshold: 0.01 } // pixelmatch options,
+	// pixelmatch or ssim.js options, depending on `comparisonMethod`.
+	diffOptions: { threshold: 0.01 },
 	failureThreshold: 0.01,
 	failureThresholdType: 'percent',
 	timeout: 15000
@@ -296,8 +300,6 @@ It is recommended to run your tests serially to avoid flakiness.
 
 Some features in [`jest-image-snapshot`][jest-image-snapshot] are not implemented in [`vitest-plugin-vis`][vitest-plugin-vis] yet.
 This is because through our own usage, we do not found a good use case for them.
-For example, the `ssim` comparison method is not implemented in [`vitest-plugin-vis`][vitest-plugin-vis],
-because we found that figuring out what is the delta using `ssim` is quite difficult.
 
 If you have a good use case for these features, please open an issue or PR.
 

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,7 +1,7 @@
 import { commands } from '@vitest/browser/context'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import { ctx } from '../ctx.ts'
-import { imageSnapshotMatcher } from '../match_image_snapshot.ts'
+import { imageSnapshotMatcher } from '../image_snapshot_matcher.ts'
 import { success } from './expectation_result.ts'
 import type { ToMatchImageSnapshotOptions } from './to_match_image_snapshot.types.ts'
 

package/src/client/expect/to_match_image_snapshot.types.ts

@@ -1,20 +1,20 @@
 import type {
+	ComparisonMethod,
 	ImageSnapshotCompareOptions,
 	ImageSnapshotIdOptions,
 	ImageSnapshotTimeoutOptions,
 } from '../../shared/types.ts'
 
 export interface ImageSnapshotMatcher {
-	toMatchImageSnapshot(options?: ToMatchImageSnapshotOptions | undefined): Promise<void>
+	toMatchImageSnapshot<M extends ComparisonMethod>(options?: ToMatchImageSnapshotOptions<M> | undefined): Promise<void>
 }
 
-export interface ToMatchImageSnapshotOptions
-	extends ImageSnapshotTimeoutOptions,
-		ImageSnapshotIdOptions,
-		ImageSnapshotCompareOptions {
-	/**
-	 * Expect the matcher to fail.
-	 * If it passes, it will throw an error with details.
-	 */
-	expectToFail?: boolean | undefined
-}
+export type ToMatchImageSnapshotOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTimeoutOptions &
+	ImageSnapshotIdOptions &
+	ImageSnapshotCompareOptions<M> & {
+		/**
+		 * Expect the matcher to fail.
+		 * If it passes, it will throw an error with details.
+		 */
+		expectToFail?: boolean | undefined
+	}

package/src/client/{match_image_snapshot.logic.ts → image_snapshot_matcher.logic.ts}

@@ -1,6 +1,6 @@
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts'
 
-export function prettifyOptions(options: ToMatchImageSnapshotOptions | undefined) {
+export function prettifyOptions(options: ToMatchImageSnapshotOptions<any> | undefined) {
 	if (!options) return 'none'
 
 	return [

package/src/client/{match_image_snapshot.ts → image_snapshot_matcher.ts}

@@ -9,7 +9,7 @@ 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 { prettifyOptions } from './image_snapshot_matcher.logic.ts'
 import { convertElementToCssSelector } from './selector.ts'
 import { toTaskId } from './task_id.ts'
 import { server } from './vitest_browser_context_proxy.ts'
@@ -17,7 +17,7 @@ import { server } from './vitest_browser_context_proxy.ts'
 export function imageSnapshotMatcher(
 	commands: PrepareImageSnapshotComparisonCommand & WriteImageSnapshotCommand & ImageSnapshotNextIndexCommand,
 ) {
-	return async function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions) {
+	return async function matchImageSnapshot(test: Task, subject: any, options?: ToMatchImageSnapshotOptions<any>) {
 		const taskId = toTaskId(test)
 		const info = await commands.prepareImageSnapshotComparison(
 			taskId,
@@ -46,7 +46,7 @@ export function imageSnapshotMatcher(
 					dedent`Snapshot \`${taskId}\` matched but expected to fail.
 
 							Options:    ${prettifyOptions(options)}
-							DiffAmount: ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
+							Diff:       ${options.failureThresholdType === 'percent' ? `${diffAmount}%` : `${diffAmount} pixels`}
 
 							Expected:   ${resolve(info.projectRoot, info.baselinePath)}
 							Actual:     ${resolve(info.projectRoot, info.resultPath)}`,
@@ -101,7 +101,7 @@ async function writeSnapshot(commands: WriteImageSnapshotCommand, path: string,
 async function parseImageSnapshotOptions(
 	commands: ImageSnapshotNextIndexCommand,
 	taskId: string,
-	options: ToMatchImageSnapshotOptions,
+	options: ToMatchImageSnapshotOptions<any>,
 ) {
 	const index = await commands.imageSnapshotNextIndex(taskId)
 	const { customizeSnapshotId, ...rest } = options

package/src/client/should_take_snapshot.ts

@@ -9,7 +9,7 @@ import type { SnapshotMeta } from './snapshot_options.ts'
  * no `snapshot` tag: false
  * disabled by `!snapshot` tag: false
  */
-export function shouldTakeSnapshot(meta?: SnapshotMeta | undefined) {
+export function shouldTakeSnapshot(meta?: SnapshotMeta<any> | undefined) {
 	const m = meta ?? getAutoSnapshotOptions(ctx.getCurrentTest())
 	return document.body.childElementCount > 0 && m?.enable !== false
 }

package/src/client/snapshot_options.internal.ts

@@ -1,7 +1,7 @@
 import { NAME } from '../shared/constants.ts'
 import type { MetaTask, SnapshotMeta } from './snapshot_options.ts'
 
-export function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta | undefined {
+export function getAutoSnapshotOptions(task: MetaTask): SnapshotMeta<any> | undefined {
 	if (!task) return
 
 	const list: any[] = []

package/src/client/snapshot_options.ts

@@ -1,8 +1,9 @@
 import { NAME } from '../shared/constants.ts'
+import type { ComparisonMethod } from '../shared/types.ts'
 import { ctx } from './ctx.ts'
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts'
 
-export type SnapshotMeta = ToMatchImageSnapshotOptions & { enable?: boolean | undefined }
+export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & { enable?: boolean | undefined }
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }
 
@@ -29,10 +30,13 @@ export type MetaTask =
  * @param task Optional. Suite or task to set the options.
  * If not provided, it will set the options for the current test.
  */
-export function setAutoSnapshotOptions(task: MetaTask, meta: SnapshotMeta | boolean): void
-export function setAutoSnapshotOptions(meta: SnapshotMeta | boolean): void
-export function setAutoSnapshotOptions(
-	...args: [task: MetaTask, meta: SnapshotMeta | boolean] | [meta: SnapshotMeta | boolean]
+export function setAutoSnapshotOptions<M extends ComparisonMethod>(
+	task: MetaTask,
+	meta: SnapshotMeta<M> | boolean,
+): void
+export function setAutoSnapshotOptions<M extends ComparisonMethod>(meta: SnapshotMeta<M> | boolean): void
+export function setAutoSnapshotOptions<M extends ComparisonMethod>(
+	...args: [task: MetaTask, meta: SnapshotMeta<M> | boolean] | [meta: SnapshotMeta<M> | boolean]
 ): void {
 	const [task, meta] = parseArgs(args)
 	if (task)
@@ -42,12 +46,12 @@ export function setAutoSnapshotOptions(
 		}
 }
 
-function parseArgs(
-	args: [task: MetaTask, meta: SnapshotMeta | boolean] | [meta: boolean | SnapshotMeta],
-): [MetaTask | undefined, SnapshotMeta] {
+function parseArgs<M extends ComparisonMethod>(
+	args: [task: MetaTask, meta: SnapshotMeta<M> | boolean] | [meta: boolean | SnapshotMeta<M>],
+): [MetaTask | undefined, SnapshotMeta<M>] {
 	return args.length === 1 ? [ctx.getCurrentTest(), parseMeta(args[0])] : [args[0], parseMeta(args[1])]
 }
 
-function parseMeta(meta: boolean | SnapshotMeta): SnapshotMeta {
-	return typeof meta === 'boolean' ? { enable: meta } : { enable: true, ...meta }
+function parseMeta<M extends ComparisonMethod>(meta: boolean | SnapshotMeta<M>): SnapshotMeta<M> {
+	return typeof meta === 'boolean' ? ({ enable: meta } as any) : { enable: true, ...meta }
 }

package/src/client.ts

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

package/src/config/types.ts

@@ -1,6 +1,9 @@
 import type { ToMatchImageSnapshotOptions } from '../client/expect/to_match_image_snapshot.types.ts'
+import type { ComparisonMethod } from '../shared/types.ts'
 
-export interface VisOptions extends ToMatchImageSnapshotOptions {
+export type { ComparisonMethod }
+
+export type VisOptions<M extends ComparisonMethod = 'pixel'> = ToMatchImageSnapshotOptions<M> & {
 	/**
 	 * Loads the `test.setupFiles` of the specified preset.
 	 */

package/src/config/vis.ts

@@ -2,6 +2,7 @@ import type { Plugin } from 'vite'
 import { commands } from '../server/commands/extend.ts'
 import { visContext } from '../server/vis_context.ts'
 import { NAME } from '../shared/constants.ts'
+import type { ComparisonMethod } from '../shared/types.ts'
 import type { VisOptions } from './types.ts'
 
 /**
@@ -10,7 +11,7 @@ import type { VisOptions } from './types.ts'
  * If options are not provided, the plugin will use the default options,
  * which enables the `auto` preset.
  */
-export function vis(options: VisOptions = { preset: 'auto' }) {
+export function vis<M extends ComparisonMethod = 'pixel'>(options: VisOptions<M> = { preset: 'auto' } as any) {
 	visContext.setOptions(options)
 	const preset = options?.preset
 	return {

package/src/server/commands/match_image_snapshot.ts

@@ -25,15 +25,14 @@ export interface MatchImageSnapshotCommand {
 	) => Promise<void>
 }
 
-export interface MatchImageSnapshotOptions
-	extends ImageSnapshotTimeoutOptions,
-		ImageSnapshotIdOptions,
-		ImageSnapshotCompareOptions {
-	/**
-	 * The snapshot file id calculated on the client side.
-	 */
-	snapshotFileId?: string | undefined
-}
+export type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions &
+	ImageSnapshotIdOptions &
+	ImageSnapshotCompareOptions<any> & {
+		/**
+		 * The snapshot file id calculated on the client side.
+		 */
+		snapshotFileId?: string | undefined
+	}
 
 export const matchImageSnapshot: BrowserCommand<
 	[taskId: string, subject: string, options?: MatchImageSnapshotOptions | undefined]

package/src/server/snapshot_path.ts

@@ -2,11 +2,11 @@ import type { VisOptions } from '../config/types.ts'
 import { SNAPSHOT_ROOT_DIR } from '../shared/constants.ts'
 import { trimCommonFolder } from '../shared/trim_common_folder.ts'
 
-export function resolveSnapshotRootDir(options: VisOptions | undefined) {
+export function resolveSnapshotRootDir(options: Pick<VisOptions, 'snapshotRootDir'> | undefined) {
 	return options?.snapshotRootDir ?? SNAPSHOT_ROOT_DIR
 }
 
-export function getSnapshotSubpath(suiteName: string, options: VisOptions) {
+export function getSnapshotSubpath(suiteName: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>) {
 	const customizeSnapshotSubpath = options.customizeSnapshotSubpath ?? trimCommonFolder
 	return customizeSnapshotSubpath(suiteName)
 }

package/src/server/vis_context.logic.ts

@@ -21,12 +21,12 @@ export type PartialBrowserCommandContext = {
 }
 
 export function createVisContext() {
-	let visOptions: VisOptions = {}
+	let visOptions: VisOptions<any> = {}
 	let state: VisState
 	let globalStateReady: Promise<VisState>
 
 	const context = {
-		setOptions(options: VisOptions = {}) {
+		setOptions<M extends 'pixel' | 'ssim'>(options: VisOptions<M> = {} as any) {
 			visOptions = options
 		},
 		__test__getOptions() {
@@ -102,7 +102,7 @@ export function createVisContext() {
 	return context
 }
 
-async function setupState(suite: PartialBrowserCommandContext, visOptions: VisOptions) {
+async function setupState(suite: PartialBrowserCommandContext, visOptions: Pick<VisOptions, 'snapshotRootDir'>) {
 	const snapshotRootDir = resolveSnapshotRootDir(visOptions)
 	const projectPath = suite.project.config.root
 	const platform = ctx.getSnapshotPlatform()
@@ -123,7 +123,7 @@ async function setupState(suite: PartialBrowserCommandContext, visOptions: VisOp
 	return state
 }
 
-export function createSuite(state: VisState, testPath: string, options: VisOptions) {
+export function createSuite(state: VisState, testPath: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>) {
 	const suiteId = getSuiteId(state, testPath, options)
 	return {
 		suiteId,
@@ -136,6 +136,6 @@ export function createSuite(state: VisState, testPath: string, options: VisOptio
 	}
 }
 
-export function getSuiteId(state: VisState, testPath: string, options: VisOptions) {
+export function getSuiteId(state: VisState, testPath: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>) {
 	return getSnapshotSubpath(relative(state.projectPath, testPath), options)
 }

package/src/shared/compare_image.ts

@@ -1,20 +1,69 @@
 import pixelmatch from 'pixelmatch'
+import { type Options, ssim } from 'ssim.js'
 import { convertThresholdUnit } from './convert_threshold_unit.ts'
-import type { ImageSnapshotCompareOptions } from './types.ts'
+import type { ComparisonMethod, ImageSnapshotCompareOptions } from './types.ts'
 
-export function compareImage(
+export function compareImage<M extends ComparisonMethod>(
 	img1: Uint8ClampedArray | Buffer,
 	img2: Uint8ClampedArray | Buffer,
 	output: Uint8ClampedArray | Buffer,
 	width: number,
 	height: number,
-	{ failureThreshold = 0, failureThresholdType = 'pixel', diffOptions }: ImageSnapshotCompareOptions = {},
+	options: ImageSnapshotCompareOptions<M> = {} as any,
 ) {
-	const pixelDiff = pixelmatch(img1, img2, output, width, height, diffOptions)
-	const diffAmount = convertThresholdUnit({ failureThresholdType, width, height }, pixelDiff)
+	const pixelDiff =
+		options.comparisonMethod === 'ssim'
+			? compareWithSsim(img1, img2, output, width, height, options.diffOptions)
+			: pixelmatch(img1, img2, output, width, height, options.diffOptions)
+	const diffAmount = convertThresholdUnit(
+		{ failureThresholdType: options.failureThresholdType ?? 'pixel', width, height },
+		pixelDiff,
+	)
 
 	return {
-		pass: diffAmount <= failureThreshold,
+		pass: diffAmount <= (options.failureThreshold ?? 0),
 		diffAmount,
 	}
 }
+
+/**
+ * @author This code is based on `jest-image-snapshot` implementation.
+ */
+function compareWithSsim(
+	img1: Uint8ClampedArray | Buffer,
+	img2: Uint8ClampedArray | Buffer,
+	output: Uint8ClampedArray | Buffer,
+	width: number,
+	height: number,
+	diffOptions?: Partial<Options>,
+) {
+	const newImage = { data: img1, width: width, height: height }
+	const baselineImage = { data: img2, width: width, height: height }
+	const { ssim_map, mssim } = ssim(newImage as any, baselineImage as any, {
+		ssim: 'bezkrovny',
+		...diffOptions,
+	})
+	// Converts the SSIM value to different pixels based on image width and height
+	// conforms to how pixelmatch works.
+	const diffPixels = Math.round((1 - mssim) * width * height)
+	const diffRgbaPixels = new DataView(output.buffer, output.byteOffset)
+	for (let ln = 0; ln !== height; ++ln) {
+		for (let pos = 0; pos !== width; ++pos) {
+			const rPos = ln * width + pos
+			// initial value is transparent.  We'll add in the SSIM offset.
+			// red (ff) green (00) blue (00) alpha (00)
+			const diffValue =
+				0xff000000 +
+				Math.floor(
+					0xff *
+						(1 -
+							ssim_map.data[
+								ssim_map.width * Math.round((ssim_map.height * ln) / height) +
+									Math.round((ssim_map.width * pos) / width)
+							]!),
+				)
+			diffRgbaPixels.setUint32(rPos * 4, diffValue)
+		}
+	}
+	return diffPixels
+}

package/src/shared/types.ts

@@ -1,4 +1,5 @@
 import type { PixelmatchOptions } from 'pixelmatch'
+import type { Options as SsimOptions } from 'ssim.js'
 
 export interface ImageSnapshotTimeoutOptions {
 	/**
@@ -19,21 +20,44 @@ export interface ImageSnapshotIdOptions {
 	customizeSnapshotId?: (id: string, index: number) => string
 }
 
-export interface ImageSnapshotCompareOptions {
-	/**
-	 * Custom options passed to 'pixelmatch'
-	 */
-	diffOptions?: PixelmatchOptions | undefined
-	/**
-	 * Failure threshold should measure in `pixel` or `percent`.
-	 *
-	 * Default is `pixel`.
-	 */
-	failureThresholdType?: 'pixel' | 'percent' | undefined
-	/**
-	 * Failure tolerance threshold.
-	 *
-	 * Default is `0`.
-	 */
-	failureThreshold?: number | undefined
-}
+export type ComparisonMethod = 'pixel' | 'ssim'
+
+export type ImageSnapshotCompareOptions<M extends ComparisonMethod = 'pixel'> = M extends 'ssim'
+	? {
+			comparisonMethod: M
+			/**
+			 * Custom options passed to 'ssim'
+			 */
+			diffOptions?: Partial<SsimOptions> | undefined
+			/**
+			 * Failure threshold should measure in `pixel` or `percent`.
+			 *
+			 * Default is `pixel`.
+			 */
+			failureThresholdType?: 'pixel' | 'percent' | undefined
+			/**
+			 * Failure tolerance threshold.
+			 *
+			 * Default is `0`.
+			 */
+			failureThreshold?: number | undefined
+		}
+	: {
+			comparisonMethod?: M | undefined
+			/**
+			 * Custom options passed to 'pixelmatch'
+			 */
+			diffOptions?: PixelmatchOptions | undefined
+			/**
+			 * Failure threshold should measure in `pixel` or `percent`.
+			 *
+			 * Default is `pixel`.
+			 */
+			failureThresholdType?: 'pixel' | 'percent' | undefined
+			/**
+			 * Failure tolerance threshold.
+			 *
+			 * Default is `0`.
+			 */
+			failureThreshold?: number | undefined
+		}

package/esm/client/match_image_snapshot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"match_image_snapshot.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,KAAK,EAAE,qCAAqC,EAAE,MAAM,yDAAyD,CAAA;AACpH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAA;AAI3F,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAO5F,wBAAgB,oBAAoB,CACnC,QAAQ,EAAE,qCAAqC,GAAG,yBAAyB,GAAG,6BAA6B,UAE5D,IAAI,WAAW,GAAG,YAAY,2BAA2B,mBA8DxG;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,GAAG,OAOrD"}

package/esm/client/match_image_snapshot.logic.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"match_image_snapshot.logic.d.ts","sourceRoot":"","sources":["../../src/client/match_image_snapshot.logic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,wBAAgB,eAAe,CAAC,OAAO,EAAE,2BAA2B,GAAG,SAAS,UAU/E"}