vitest-plugin-vis 4.0.0 → 4.1.0

package/dist/{types-DFb23VE1.d.mts → types-CEmjj-A9.d.mts}

@@ -1,7 +1,7 @@
 import pixelMatch from "pixelmatch";
 import { Options as SsimDiffOptions } from "ssim.js";
 
-//#region src/client/snapshot_meta.d.ts
+//#region src/client/task/snapshot_meta.d.ts
 type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions & {
   /**
    * Whether to enable the snapshot.
@@ -105,6 +105,40 @@ type SnapshotTestMeta = {
     [NAME]?: SnapshotMeta<ComparisonMethod>;
   };
 };
+type ImageSnapshotComparisonInfo = {
+  /**
+   * Path to the project root.
+   */
+  projectRoot: string;
+  /**
+   * Path to the baseline image relative to the project root.
+   */
+  baselinePath: string;
+  /**
+   * Path to the result image relative to the project root.
+   */
+  resultPath: string;
+  /**
+   * Path to the diff image relative to the project root.
+   */
+  diffPath: string;
+  /**
+   * Base64 encoded baseline image.
+   */
+  baseline: string;
+  /**
+   * Base64 encoded result image.
+   */
+  result: string;
+  /**
+   * Base64 encoded diff image.
+   */
+  diff?: string | undefined;
+} & ImageSnapshotTimeoutOptions & FailureThresholdOptions & (SsimComparisonOptions | PixelComparisonOptions);
+type MatchImageSnapshotOptions = ImageSnapshotTimeoutOptions & ImageSnapshotCompareOptions<any> & ImageSnapshotKeyOptions;
+type SetupVisOptions<GM extends Record<string, any> | unknown = unknown> = {
+  auto?: boolean | (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void) | Record<string, boolean | (<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)>;
+};
 //#endregion
-export { DIFF_DIR as _, ImageSnapshotKeyOptions as a, SNAPSHOT_ROOT_DIR as b, PageImageSnapshotOptions as c, SnapshotTestMeta as d, SsimComparisonOptions as f, BASELINE_DIR as g, ToMatchPageImageSnapshotOptions as h, ImageSnapshotCompareOptions as i, PixelComparisonOptions as l, ToMatchImageSnapshotOptions as m, ComparisonMethod as n, ImageSnapshotSubjectOptions as o, SsimDiffOptions as p, FailureThresholdOptions as r, ImageSnapshotTimeoutOptions as s, Awaitable as t, PixelDiffOptions as u, NAME as v, SnapshotMeta as x, RESULT_DIR as y };
-//# sourceMappingURL=types-DFb23VE1.d.mts.map
+export { SNAPSHOT_ROOT_DIR as C, RESULT_DIR as S, ToMatchImageSnapshotOptions as _, ImageSnapshotComparisonInfo as a, DIFF_DIR as b, ImageSnapshotTimeoutOptions as c, PixelComparisonOptions as d, PixelDiffOptions as f, SsimDiffOptions as g, SsimComparisonOptions as h, ImageSnapshotCompareOptions as i, MatchImageSnapshotOptions as l, SnapshotTestMeta as m, ComparisonMethod as n, ImageSnapshotKeyOptions as o, SetupVisOptions as p, FailureThresholdOptions as r, ImageSnapshotSubjectOptions as s, Awaitable as t, PageImageSnapshotOptions as u, ToMatchPageImageSnapshotOptions as v, SnapshotMeta as w, NAME as x, BASELINE_DIR as y };
+//# sourceMappingURL=types-CEmjj-A9.d.mts.map

package/dist/types-CEmjj-A9.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-CEmjj-A9.d.mts","names":[],"sources":["../src/client/task/snapshot_meta.ts","../src/shared/constants.ts","../src/shared/types.ts"],"sourcesContent":[],"mappings":";;;;KAEY,uBAAuB,oBAAoB,4BAA4B,KAClF;;;AADD;;;EAAuD,MAAA,CAAA,EAAA,OAAA,GAAA,SAAA;EACtD,CAAA,GAAA,EAAA,MAAA,CAAA,EAAA,OAAA;CAA2B;;;cCHf,IAAA;cACA,iBAAA;cACA,YAAA;cACA,UAAA;ADDD,cCEC,QAAA,GDFW,WAAA;;;AAAZ,KEGA,SFHY,CAAA,CAAA,CAAA,GEGG,CFHH,GEGO,WFHP,CEGmB,CFHnB,CAAA;AAAW,UEKlB,2BAAA,CFLkB;EAAgD;;;;;;;ACFtE,UCgBI,uBAAA,CDhBA;EACJ;AACb;AACA;EACa,WAAQ,CAAA,EAAA,MAAA,GAAA,SAAA;;KCmBT,gBAAA;KAEA,uBAAA;EApBA;;;;;EAEK,oBAAA,CAAA,EAAA,OAA2B,GAAA,SAAA,GAAA,SAAA;EAS3B;AAOjB;AAEA;AA6BA;;;;;AAUA;AAQA;AAEA;;;;;;;;;EAKY,gBAAA,CAAA,EAAA,MAAA,GAAA,SAA2B;AASvC,CAAA;AAAkD,KAlCtC,qBAkCsC,CAAA,IAAA,MAAA,CAAA,GAAA;EAA8B,gBAAA,EAjC7D,CAiC6D;EAC/E;;;EAC2B,WAAA,CAAA,EA/Bb,OA+Ba,CA/BL,eA+BK,CAAA,GAAA,SAAA;AAQ5B,CAAA;AAIsD,KAtC1C,sBAsC0C,CAAA,IAAA,OAAA,CAAA,GAAA;EAA0D,gBAAA,CAAA,EArC5F,CAqC4F,GAAA,SAAA;EAA5B;;;EAGxE,WAAA,CAAA,EApCG,gBAoCa,GAAA,SAAA;CAEJ;AAAb,KAnCC,gBAAA,GAAmB,UAmCpB,CAAA,OAnCsC,UAmCtC,CAAA,CAAA,CAAA,CAAA;AAAR,KAjCS,2BAiCT,CAAA,UAjC+C,gBAiC/C,GAAA,OAAA,CAAA,GAAA,CAjC8E,CAiC9E,SAAA,MAAA,GAhCA,qBAgCA,CAhCsB,CAgCtB,CAAA,GA/BA,sBA+BA,CA/BuB,CA+BvB,CAAA,CAAA,GA9BF,uBA8BE;AAAI,KA5BK,2BAAA,GA4BL;EAIK;;;;;;EAiCA,OAAA,CAAA,EAAA,MAAA,GAAA,SAAyB;CAAG;AACvC,KAzDW,2BAyDX,CAAA,UAzDiD,gBAyDjD,GAAA,OAAA,CAAA,GAzD+E,2BAyD/E,GAxDA,uBAwDA,GAvDA,2BAuDA,CAvD4B,CAuD5B,CAAA,GAAA;EACA;;AAED;;EAGgB,YAAA,CAAA,EAAA,OAAA,GAAA,SAAA;CAA4B;AAClB,UAtDT,wBAAA,CAsDS;EAAb,QAAA,CAAA,EAAA,OAAA,GAAA,SAAA;;AAAsB,KAlDvB,+BAkDuB,CAAA,UAlDmB,gBAkDnB,GAAA,OAAA,CAAA,GAlDiD,2BAkDjD,CAlD6E,CAkD7E,CAAA,GAjDlC,wBAiDkC;AAC1B,KAhDG,gBAAA,GAgDH;EAAmB,IAAA,EAAA;IAIV,CAlDf,IAAA,EAkDe,EAlDP,YAkDO,CAlDM,gBAkDN,CAAA;EAA4B,CAAA;CAClB;AAAb,KA/CH,2BAAA,GA+CG;EAAkB;;;EACH,WAAA,EAAA,MAAA;EAL1B;;;;;;;;;;;;;;;;;;;;;;;;IAdA,8BACH,2BACC,wBAAwB;KAEd,yBAAA,GAA4B,8BACvC,mCACA;KAEW,2BAA2B;+BAGvB,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB,kCACxB,qCAGc,4BAA4B,kDAC/B,aAAa,KAAK,IAAI,OAC1B,mBAAmB"}

package/dist/{types-Do1N7g4c.d.mts → types-DJYCbyT8.d.mts}

@@ -1,4 +1,4 @@
-import { a as ImageSnapshotKeyOptions, n as ComparisonMethod, o as ImageSnapshotSubjectOptions, p as SsimDiffOptions, r as FailureThresholdOptions, s as ImageSnapshotTimeoutOptions, u as PixelDiffOptions } from "./types-DFb23VE1.mjs";
+import { c as ImageSnapshotTimeoutOptions, f as PixelDiffOptions, g as SsimDiffOptions, n as ComparisonMethod, o as ImageSnapshotKeyOptions, r as FailureThresholdOptions, s as ImageSnapshotSubjectOptions } from "./types-CEmjj-A9.mjs";
 
 //#region src/config/types.d.ts
 type VisOptions<M extends ComparisonMethod = 'pixel'> = (M extends 'ssim' ? {
@@ -60,4 +60,4 @@ type VisOptions<M extends ComparisonMethod = 'pixel'> = (M extends 'ssim' ? {
 };
 //#endregion
 export { VisOptions as t };
-//# sourceMappingURL=types-Do1N7g4c.d.mts.map
+//# sourceMappingURL=types-DJYCbyT8.d.mts.map

package/dist/{types-Do1N7g4c.d.mts.map → types-DJYCbyT8.d.mts.map}

@@ -1 +1 @@
-{"version":3,"file":"types-Do1N7g4c.d.mts","names":[],"sources":["../src/config/types.ts"],"sourcesContent":[],"mappings":";;;KAcY,qBAAqB,+BAA+B;EAApD,gBAAU,EAED,CAFC;EAAW;;;EAMR,WAAA,CAAA,EAAR,OAAQ,CAAA,eAAA,CAAA,GAAA,SAAA;CAAR,GAAA;EAGK,gBAAA,CAAA,EAAA,CAAA,GAAA,SAAA;EAIL;;;EAIhB,WAAA,CAAA,EAJgB,gBAIhB,GAAA,SAAA;CACA,CAAA,GAHA,uBAGA,GAFA,2BAEA,GADA,uBACA,GAAA,2BAAA,GAAA;EAA2B"}
+{"version":3,"file":"types-DJYCbyT8.d.mts","names":[],"sources":["../src/config/types.ts"],"sourcesContent":[],"mappings":";;;KAcY,qBAAqB,+BAA+B;EAApD,gBAAU,EAED,CAFC;EAAW;;;EAMR,WAAA,CAAA,EAAR,OAAQ,CAAA,eAAA,CAAA,GAAA,SAAA;CAAR,GAAA;EAGK,gBAAA,CAAA,EAAA,CAAA,GAAA,SAAA;EAIL;;;EAIhB,WAAA,CAAA,EAJgB,gBAIhB,GAAA,SAAA;CACA,CAAA,GAHA,uBAGA,GAFA,2BAEA,GADA,uBACA,GAAA,2BAAA,GAAA;EAA2B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -84,9 +84,9 @@
     "@repobuddy/storybook": "^2.1.2",
     "@repobuddy/typescript": "^2.1.0",
     "@storybook-community/storybook-dark-mode": "^7.0.3",
-    "@storybook/addon-docs": "^10.1.2",
-    "@storybook/addon-vitest": "^10.1.2",
-    "@storybook/react-vite": "^10.1.2",
+    "@storybook/addon-docs": "^10.2.0-alpha.1",
+    "@storybook/addon-vitest": "^10.2.0-alpha.1",
+    "@storybook/react-vite": "^10.2.0-alpha.1",
     "@tailwindcss/vite": "^4.1.14",
     "@types/is-ci": "^3.0.4",
     "@types/pngjs": "^6.0.5",
@@ -103,7 +103,7 @@
     "npm-run-all2": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "storybook": "^10.1.2",
+    "storybook": "^10.2.0-alpha.1",
     "storybook-addon-tag-badges": "^3.0.2",
     "tailwindcss": "^4.1.14",
     "tsdown": "^0.16.6",

package/src/client/actions/has_image_snapshot_action.ts

@@ -1,4 +1,4 @@
-import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../commands.ts'
+import type { HasImageSnapshotCommand, ImageSnapshotNextIndexCommand } from '../../shared/commands.types.ts'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 
 export function hasImageSnapshotAction(

package/src/client/actions/load_image_snapshot_results_action.ts

@@ -1,4 +1,4 @@
-import type { LoadImageSnapshotResultsCommand } from '../../server/commands/load_image_snapshot_results.ts'
+import type { LoadImageSnapshotResultsCommand } from '../../shared/commands.types.ts'
 
 export function loadImageSnapshotResultsAction(commands: LoadImageSnapshotResultsCommand, taskId: string) {
 	return commands.loadImageSnapshotResults(taskId)

package/src/client/actions/match_image_snapshot_action.ts

@@ -1,11 +1,13 @@
 import type { BrowserCommands } from 'vitest/browser'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
 import { isBase64String } from '../../shared/base64.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
-import { convertElementToCssSelector } from '../selector.ts'
+import { convertElementToCssSelector } from '../external/browser/selector.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/actions/match_page_image_snapshot_action.ts

@@ -1,9 +1,11 @@
 import type { BrowserCommands } from 'vitest/browser'
-import type { ImageSnapshotNextIndexCommand } from '../../commands.ts'
-import type { PrepareImageSnapshotComparisonCommand } from '../../server/commands/prepare_image_snapshot_comparison.ts'
 import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
+import type {
+	ImageSnapshotNextIndexCommand,
+	PrepareImageSnapshotComparisonCommand,
+} from '../../shared/commands.types.ts'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
-import { compareImageSnapshot } from '../compare_image_snapshot.ts'
+import { compareImageSnapshot } from '../snapshot/compare_image_snapshot.ts'
 
 export async function matchPageImageSnapshotAction(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/expect/_ctx.ts

@@ -0,0 +1,10 @@
+import { commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/expect/to_match_image_snapshot.ts

@@ -1,9 +1,8 @@
-import { commands } from 'vitest/browser'
 import type { AsyncExpectationResult } from '@vitest/expect'
 import type { ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 import { matchImageSnapshotAction } from '../actions/match_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 import { success } from './expectation_result.ts'
 
 export function toMatchImageSnapshot(
@@ -26,5 +25,5 @@ export function toMatchImageSnapshot(
 		)
 	}
 
-	return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)
+	return matchImageSnapshotAction(ctx.commands, toTaskId(test), subject, options).then(() => success)
 }

package/src/client/external/browser/has_render_content.ts

@@ -0,0 +1,3 @@
+export function hasRenderContent() {
+	return document.body.childElementCount > 0
+}

package/src/client/{image_resizer.ts → external/browser/image_resizer.ts}

@@ -1,4 +1,4 @@
-import { isSameSize } from '../shared/is_same_size.ts'
+import { isSameSize } from '../../../shared/is_same_size.ts'
 
 export const createImageResizer =
 	({ width, height }: { width: number; height: number }) =>

package/src/client/{vitest_suite_proxy.ts → external/vitest/vitest_suite_proxy.ts}

@@ -1,4 +1,4 @@
-import type { SnapshotTestMeta } from '../shared/types.ts'
+import type { SnapshotTestMeta } from '../../../shared/types.ts'
 
 let vitestSuite: Awaited<typeof import('vitest/suite')>
 

package/src/client/{align_images.ts → image/align_images.ts}

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

package/src/client/page/_ctx.ts

@@ -0,0 +1,12 @@
+import { type BrowserPage, commands } from 'vitest/browser'
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export type { BrowserPage }
+
+export const ctx = {
+	commands,
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/page/has_image_snapshot.ts

@@ -1,8 +1,8 @@
-import { type BrowserPage, commands } from 'vitest/browser'
 import type { ImageSnapshotKeyOptions } from '../../shared/types.ts'
 import { hasImageSnapshotAction } from '../actions/has_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import type { BrowserPage } from './_ctx.ts'
+import { ctx } from './_ctx.ts'
 
 export interface HasImageSnapshotAction {
 	/**
@@ -23,5 +23,5 @@ export function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotKeyOp
 				"concurrent tests run at the same time in the same iframe and affect each other's environment. ",
 		)
 	}
-	return hasImageSnapshotAction(commands, toTaskId(test), options)
+	return hasImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/page/to_match_image_snapshot.ts

@@ -1,8 +1,7 @@
-import { commands } from 'vitest/browser'
 import type { ComparisonMethod, ToMatchPageImageSnapshotOptions } from '../../shared/types.ts'
 import { matchPageImageSnapshotAction } from '../actions/match_page_image_snapshot_action.ts'
-import { ctx } from '../ctx.ts'
-import { toTaskId } from '../task_id.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
 
 export interface ToMatchImageSnapshotAction {
 	toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
@@ -25,5 +24,5 @@ export function toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
 		)
 	}
 
-	return matchPageImageSnapshotAction(commands, toTaskId(test), options)
+	return matchPageImageSnapshotAction(ctx.commands, toTaskId(test), options)
 }

package/src/client/{compare_image_snapshot.logic.ts → snapshot/compare_image_snapshot.logic.ts}

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

package/src/client/{compare_image_snapshot.ts → snapshot/compare_image_snapshot.ts}

@@ -1,17 +1,16 @@
-import type { BrowserCommands } from 'vitest/browser'
 import dedent from 'dedent'
 import { resolve } from 'pathe'
-import type { ImageSnapshotNextIndexCommand } from '../commands.ts'
+import type { BrowserCommands } from 'vitest/browser'
 import type {
-	ImageSnapshotComparisonInfo,
+	ImageSnapshotNextIndexCommand,
 	PrepareImageSnapshotComparisonCommand,
-} from '../server/commands/prepare_image_snapshot_comparison.ts'
-import { compareImage } from '../shared/compare_image.ts'
-import type { ToMatchImageSnapshotOptions } from '../shared/types.ts'
-import { alignImagesToSameSize } from './align_images.ts'
+} from '../../shared/commands.types.ts'
+import { compareImage } from '../../shared/compare_image.ts'
+import type { ImageSnapshotComparisonInfo, ToMatchImageSnapshotOptions } from '../../shared/types.ts'
+import { toDataURL, toImageData } from '../external/browser/image_data.ts'
+import { server } from '../external/vitest/vitest_browser_context_proxy.ts'
+import { alignImagesToSameSize } from '../image/align_images.ts'
 import { prettifyOptions } from './compare_image_snapshot.logic.ts'
-import { toDataURL, toImageData } from './image_data.ts'
-import { server } from './vitest_browser_context_proxy.ts'
 
 export async function compareImageSnapshot(
 	commands: BrowserCommands & PrepareImageSnapshotComparisonCommand & ImageSnapshotNextIndexCommand,

package/src/client/snapshot/should_take_snapshot.ts

@@ -0,0 +1,6 @@
+import { hasRenderContent } from '../external/browser/has_render_content.ts'
+import type { SnapshotMeta } from '../task/snapshot_meta.ts'
+
+export function shouldTakeSnapshot(meta: SnapshotMeta<any> | undefined) {
+	return hasRenderContent() && meta?.enable
+}

package/src/client/suite/_ctx.ts

@@ -0,0 +1,8 @@
+import { getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
+
+export const ctx = {
+	getCurrentTest,
+	__test__reset() {
+		ctx.getCurrentTest = getCurrentTest
+	},
+}

package/src/client/suite/auto_snapshot_matcher.ts

@@ -0,0 +1,68 @@
+import dedent from 'dedent'
+import type { SetupVisSuiteCommand } from '../../shared/commands.types.ts'
+import type { ComparisonMethod } from '../../shared/types.ts'
+import { shouldTakeSnapshot } from '../snapshot/should_take_snapshot.ts'
+import { extractAutoSnapshotOptions } from '../task/auto_snapshot_options.ts'
+import type { SnapshotMeta } from '../task/snapshot_meta.ts'
+import { toTaskId } from '../task/task_id.ts'
+import { ctx } from './_ctx.ts'
+
+export function autoSnapshotMatcher<GM extends Record<string, any> | unknown = unknown>(
+	commands: SetupVisSuiteCommand,
+	expect: any,
+) {
+	let subject: string | undefined
+
+	return {
+		async setup() {
+			subject = (await commands.setupVisSuite()).subject
+		},
+		createMatcher<C extends ComparisonMethod, M extends Record<string, any> | unknown = unknown>(
+			themes: Record<
+				string,
+				boolean | ((options: SnapshotMeta<C> & M & GM) => Promise<boolean> | Promise<void> | boolean | void)
+			>,
+		) {
+			return async function matchImageSnapshot() {
+				const test = ctx.getCurrentTest()
+				if ((test?.result?.errors?.length ?? 0) > 0) return
+
+				const meta = extractAutoSnapshotOptions(test)
+				if (!shouldTakeSnapshot(meta)) return
+				const errors: Array<[string, Error]> = []
+				for (const themeId in themes) {
+					try {
+						await new Promise((a) => setTimeout(a, 10))
+						const theme = themes[themeId]
+						const r = typeof theme === 'function' ? await theme(meta! as any) : theme
+						if (r === false) continue
+						await expect(getSubject(meta?.subject ?? subject)).toMatchImageSnapshot({
+							...meta,
+							snapshotKey: meta?.snapshotKey ?? themeId,
+						})
+					} catch (error) {
+						errors.push([themeId, error as Error])
+					}
+				}
+				if (errors.length > 0) {
+					if (errors.length === 1) throw errors[0]![1]
+					const taskId = toTaskId(test!)
+					throw new AggregateError(
+						errors,
+						dedent`Snapshot \`${taskId}\` mismatched
+
+					${errors
+						.map(([themeId, error]) => {
+							return `Theme \`${themeId}\` failed: ${error.message}`
+						})
+						.join('\n\n')}`,
+					)
+				}
+			}
+		},
+	}
+}
+
+function getSubject(selectors: string | undefined) {
+	return selectors ? (document.querySelector(selectors) ?? document.body) : document.body
+}

package/src/client/{ctx.ts → task/_ctx.ts}

@@ -1,12 +1,10 @@
-import { getCurrentSuite, getCurrentTest } from './vitest_suite_proxy.ts'
+import { getCurrentSuite, getCurrentTest } from '../external/vitest/vitest_suite_proxy.ts'
 
 export const ctx = {
-	autoEnabled: undefined as boolean | undefined,
 	getCurrentTest,
 	getCurrentSuite,
 	__test__reset() {
 		ctx.getCurrentTest = getCurrentTest
 		ctx.getCurrentSuite = getCurrentSuite
-		ctx.autoEnabled = undefined
 	},
 }

package/src/client/{auto_snapshot_options.ts → task/auto_snapshot_options.ts}

@@ -1,7 +1,7 @@
-import { assertSnapshotKeyWithoutDash } from '../shared/asserts.ts'
-import { NAME } from '../shared/constants.ts'
-import type { ComparisonMethod } from '../shared/types.ts'
-import { ctx } from './ctx.ts'
+import { assertSnapshotKeyWithoutDash } from '../../shared/asserts.ts'
+import { NAME } from '../../shared/constants.ts'
+import type { ComparisonMethod } from '../../shared/types.ts'
+import { ctx } from './_ctx.ts'
 import type { SnapshotMeta } from './snapshot_meta.ts'
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }

package/src/client/{snapshot_meta.ts → task/snapshot_meta.ts}

@@ -1,4 +1,4 @@
-import type { ComparisonMethod, ImageSnapshotSubjectOptions, ToMatchImageSnapshotOptions } from '../shared/types.ts'
+import type { ComparisonMethod, ImageSnapshotSubjectOptions, ToMatchImageSnapshotOptions } from '../../shared/types.ts'
 
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> &
 	ImageSnapshotSubjectOptions & {

package/src/client-api.ts

@@ -4,9 +4,10 @@ export * from './client/actions/has_image_snapshot_action.ts'
 export * from './client/actions/load_image_snapshot_results_action.ts'
 export * from './client/actions/match_image_snapshot_action.ts'
 export * from './client/actions/match_page_image_snapshot_action.ts'
-export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
 export * from './client/expect/expectation_result.ts'
 export type * from './client/expect/to_match_image_snapshot.types.ts'
-export * from './client/task_id.ts'
+export * from './client/suite/auto_snapshot_matcher.ts'
+export { setAutoSnapshotOptions, type MetaTask } from './client/task/auto_snapshot_options.ts'
+export * from './client/task/task_id.ts'
 export * from './shared/constants.ts'
 export type * from './shared/types.ts'

package/src/index.ts

@@ -2,5 +2,5 @@
 import './client/expect/augment.ts'
 import './client/page/augment.ts'
 
-export { setAutoSnapshotOptions, type MetaTask } from './client/auto_snapshot_options.ts'
+export { setAutoSnapshotOptions, type MetaTask } from './client/task/auto_snapshot_options.ts'
 export type * from './shared/types.ts'

package/src/server/commands/augment.ts

@@ -1,9 +1,11 @@
-import type { HasImageSnapshotCommand } from './has_image_snapshot.ts'
-import type { ImageSnapshotNextIndexCommand } from './image_snapshot_next_index.ts'
-import type { LoadImageSnapshotResultsCommand } from './load_image_snapshot_results.ts'
-import type { PrepareImageSnapshotComparisonCommand } from './prepare_image_snapshot_comparison.ts'
-import type { PreparePageImageSnapshotComparisonCommand } from './prepare_page_image_snapshot_comparison.ts'
-import type { SetupVisSuiteCommand } from './setup_vis_suite.ts'
+import type {
+	HasImageSnapshotCommand,
+	ImageSnapshotNextIndexCommand,
+	LoadImageSnapshotResultsCommand,
+	PrepareImageSnapshotComparisonCommand,
+	PreparePageImageSnapshotComparisonCommand,
+	SetupVisSuiteCommand,
+} from '../../shared/commands.types.ts'
 
 declare module 'vitest/browser' {
 	interface BrowserCommands

package/src/server/commands/has_image_snapshot.ts

@@ -1,11 +1,8 @@
+import type { HasImageSnapshotCommand } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
 import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface HasImageSnapshotCommand {
-	hasImageSnapshot(taskId: string, snapshotKey: string | undefined): Promise<boolean>
-}
-
 export const hasImageSnapshot: ExtendedBrowserCommand<Parameters<HasImageSnapshotCommand['hasImageSnapshot']>> = async (
 	context,
 	taskId,

package/src/server/commands/image_snapshot_next_index.ts

@@ -1,14 +1,8 @@
+import type { ImageSnapshotNextIndexCommand } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
 import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface ImageSnapshotNextIndexCommand {
-	/**
-	 * Get the index of the snapshot image to be created.
-	 */
-	imageSnapshotNextIndex(taskId: string): Promise<number>
-}
-
 export const imageSnapshotNextIndex: ExtendedBrowserCommand<
 	Parameters<ImageSnapshotNextIndexCommand['imageSnapshotNextIndex']>
 > = async (context, taskId) => {

package/src/server/commands/load_image_snapshot_results.ts

@@ -1,27 +1,8 @@
+import type { ImageSnapshotResult } from '../../shared/commands.types.ts'
 import { visServerContext } from '../vis_server_context.ts'
 import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
 
-export interface ImageSnapshotResult {
-	filename: string
-	/**
-	 * The base64 encoded image of the baseline snapshot.
-	 */
-	baseline?: string | undefined
-	/**
-	 * The base64 encoded image of the result snapshot.
-	 */
-	result?: string | undefined
-	/**
-	 * The base64 encoded image of the diff snapshot.
-	 */
-	diff?: string | undefined
-}
-
-export interface LoadImageSnapshotResultsCommand {
-	loadImageSnapshotResults(taskId: string): Promise<ImageSnapshotResult[]>
-}
-
 export const loadImageSnapshotResults: ExtendedBrowserCommand<[taskId: string]> = async (
 	context,
 	taskId,

package/src/server/commands/prepare_image_snapshot_comparison.ts

@@ -1,11 +1,7 @@
 import { resolve } from 'pathe'
 import { isBase64String } from '../../shared/base64.ts'
-import type {
-	FailureThresholdOptions,
-	ImageSnapshotTimeoutOptions,
-	PixelComparisonOptions,
-	SsimComparisonOptions,
-} from '../../shared/types.ts'
+import type { PrepareImageSnapshotComparisonCommand } from '../../shared/commands.types.ts'
+import type { ImageSnapshotComparisonInfo } from '../../shared/types.ts'
 import { file } from '../externals/file.ts'
 import { getProjectRoot } from '../project.ts'
 import { takeSnapshot, takeSnapshotByBrowser } from '../snapshot.ts'
@@ -13,48 +9,6 @@ import { snapshotWriter } from '../snapshot_writer.ts'
 import { visServerContext } from '../vis_server_context.ts'
 import type { ExtendedBrowserCommand } from '../vis_server_context.types.ts'
 import { assertTestPathDefined } from './_assertions.ts'
-import type { MatchImageSnapshotOptions } from './types.ts'
-
-export type ImageSnapshotComparisonInfo = {
-	/**
-	 * Path to the project root.
-	 */
-	projectRoot: string
-	/**
-	 * Path to the baseline image relative to the project root.
-	 */
-	baselinePath: string
-	/**
-	 * Path to the result image relative to the project root.
-	 */
-	resultPath: string
-	/**
-	 * Path to the diff image relative to the project root.
-	 */
-	diffPath: string
-	/**
-	 * Base64 encoded baseline image.
-	 */
-	baseline: string
-	/**
-	 * Base64 encoded result image.
-	 */
-	result: string
-	/**
-	 * Base64 encoded diff image.
-	 */
-	diff?: string | undefined
-} & ImageSnapshotTimeoutOptions &
-	FailureThresholdOptions &
-	(SsimComparisonOptions | PixelComparisonOptions)
-
-export interface PrepareImageSnapshotComparisonCommand {
-	prepareImageSnapshotComparison: (
-		taskId: string,
-		subject: string,
-		options?: MatchImageSnapshotOptions | undefined,
-	) => Promise<ImageSnapshotComparisonInfo | undefined>
-}
 
 export const prepareImageSnapshotComparison: ExtendedBrowserCommand<
 	Parameters<PrepareImageSnapshotComparisonCommand['prepareImageSnapshotComparison']>