vitest-plugin-vis 1.6.5 → 2.0.0

package/esm/client/image_snapshot_matcher.js

@@ -72,6 +72,6 @@ async function writeSnapshot(commands, path, image) {
 async function parseImageSnapshotOptions(commands, taskId, options) {
     const index = await commands.imageSnapshotNextIndex(taskId);
     const { customizeSnapshotId, ...rest } = options;
-    const snapshotFileId = customizeSnapshotId(taskId, index);
+    const snapshotFileId = customizeSnapshotId({ id: taskId, index });
     return { ...rest, snapshotFileId };
 }

package/esm/client/page/has_image_snapshot.js

@@ -17,7 +17,7 @@ export function hasImageSnapshot(options) {
     if (options?.customizeSnapshotId) {
         return commands
             .imageSnapshotNextIndex(taskId)
-            .then((index) => commands.hasImageSnapshot(taskId, options.customizeSnapshotId(taskId, index)));
+            .then((index) => commands.hasImageSnapshot(taskId, options.customizeSnapshotId({ id: taskId, index })));
     }
     return commands.hasImageSnapshot(taskId);
 }

package/esm/client/snapshot_options.d.ts

@@ -2,6 +2,7 @@ import type { AutoSnapshotOptions, ComparisonMethod } from '../shared/types.ts';
 import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapshot.types.ts';
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> & AutoSnapshotOptions & {
     enable?: boolean | undefined;
+    [key: string]: unknown;
 };
 type Suite = {
     meta: Record<string, any>;

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":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,2BAA2B,CAAC,CAAC,CAAC,GACpF,mBAAmB,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC5B,CAAA;AAEF,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"}
+{"version":3,"file":"snapshot_options.d.ts","sourceRoot":"","sources":["../../src/client/snapshot_options.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2CAA2C,CAAA;AAE5F,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,gBAAgB,IAAI,2BAA2B,CAAC,CAAC,CAAC,GACpF,mBAAmB,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACtB,CAAA;AAEF,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<any> | undefined;
+export declare function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | 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,CAAC,GAAG,CAAC,GAAG,SAAS,CAkBpF"}
+{"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,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,CAAC,GAAG,SAAS,CAkBrH"}

package/esm/config/types.d.ts

@@ -11,22 +11,31 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
      * <snapshotRootDir>/<platform>/<snapshotSubpath>/<snapshotId>.png
      *
      * Default: undefined
+     *
+     * @deprecated Use `snapshotRootDir` instead.
      */
     platform?: string | undefined;
     /**
      * The snapshot folder relative to the root of the project.
      *
-     * Default: `__vis__`
+     * Default: `{projectRoot}/__vis__/{platform}`
      */
-    snapshotRootDir?: string | undefined;
+    snapshotRootDir?: string | ((context: {
+        ci: boolean;
+        browserName: string;
+        providerName: string;
+        platform: string;
+        screenshotFailures: boolean | undefined;
+        screenshotDirectory: string | undefined;
+    }) => string) | undefined;
     /**
      * Customize the snapshot subpath.
      *
      * The snapshot subpath is used along with `snapshotRootDir` to determine the folder of the snapshots:
      *
-     * - baseline: `<snapshotRootDir>/<platform>/<snapshotSubpath>/<snapshotId>.png`
-     * - result: `<snapshotRootDir>/__results__/<snapshotSubpath>/<snapshotId>.png`
-     * - diff: `<snapshotRootDir>/__diffs__/<snapshotSubpath>/<snapshotId>.png`
+     * - baseline: `<snapshotRootDir>/baselines/<snapshotSubpath>/<snapshotId>.png`
+     * - result: `<snapshotRootDir>/results/<snapshotSubpath>/<snapshotId>.png`
+     * - diff: `<snapshotRootDir>/diffs/<snapshotSubpath>/<snapshotId>.png`
      *
      * Typically, you place your test files either in a dedicated `tests` folder or in the `src` folder along with your source code.
      * By default, the snapshot subpath is the test file path with that folder removed to reduces nesting of the snapshot folders.

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,EACX,mBAAmB,EACnB,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,oBAAoB,CAAA;AAE3B,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,GACzF,sBAAsB,GACtB,2BAA2B,CAAC,CAAC,CAAC,GAC9B,mBAAmB,GAAG;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CACtD,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,mBAAmB,EACnB,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,2BAA2B,EAC3B,MAAM,oBAAoB,CAAA;AAE3B,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,2BAA2B,GACzF,sBAAsB,GACtB,2BAA2B,CAAC,CAAC,CAAC,GAC9B,mBAAmB,GAAG;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EACb,MAAM,GACN,CAAC,CAAC,OAAO,EAAE;QACX,EAAE,EAAE,OAAO,CAAA;QACX,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,MAAM,CAAA;QAChB,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAA;QACvC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAA;KACtC,KAAK,MAAM,CAAC,GACb,SAAS,CAAA;IACZ;;;;;;;;;;;;;;;;;;;OAmBG;IACH,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CACtD,CAAA"}

package/esm/server/commands/setup_vis_suite.js

@@ -2,5 +2,6 @@ import { visContext } from "../vis_context.js";
 import { assertTestPathDefined } from "./_assertions.js";
 export const setupVisSuite = async (context) => {
     assertTestPathDefined(context, 'setupVisSuite');
+    // using props not currently listed in the types
     return visContext.setupSuite(context);
 };

package/esm/server/snapshot_path.d.ts

@@ -1,4 +1,5 @@
 import type { VisOptions } from '../config/types.ts';
-export declare function resolveSnapshotRootDir(options: Pick<VisOptions, 'snapshotRootDir'> | undefined): string;
+import type { PartialBrowserCommandContext } from './vis_context.types.ts';
+export declare function resolveSnapshotRootDir(suite: PartialBrowserCommandContext, options: VisOptions): 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,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"}
+{"version":3,"file":"snapshot_path.d.ts","sourceRoot":"","sources":["../../src/server/snapshot_path.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAGpD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,wBAAwB,CAAA;AAE1E,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,4BAA4B,EAAE,OAAO,EAAE,UAAU,UAY9F;AAKD,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,0BAA0B,CAAC,UAG1G"}

package/esm/server/snapshot_path.js

@@ -1,7 +1,23 @@
+import ci from 'is-ci';
 import { SNAPSHOT_ROOT_DIR } from "../shared/constants.js";
 import { trimCommonFolder } from "../shared/trim_common_folder.js";
-export function resolveSnapshotRootDir(options) {
-    return options?.snapshotRootDir ?? SNAPSHOT_ROOT_DIR;
+export function resolveSnapshotRootDir(suite, options) {
+    if (!options.snapshotRootDir)
+        return getSnapshotRootDir(SNAPSHOT_ROOT_DIR, options.platform);
+    const snapshotRootDir = options.snapshotRootDir;
+    if (typeof snapshotRootDir === 'string')
+        return getSnapshotRootDir(snapshotRootDir, options.platform);
+    return snapshotRootDir({
+        ci,
+        browserName: suite.provider.browserName,
+        providerName: suite.provider.name,
+        platform: process.platform,
+        screenshotFailures: suite.provider.options.screenshotFailures,
+        screenshotDirectory: suite.provider.options.screenshotDirectory,
+    });
+}
+function getSnapshotRootDir(snapshotRootDir, platform = process.platform) {
+    return `${snapshotRootDir}/${ci ? platform : 'local'}`;
 }
 export function getSnapshotSubpath(suiteName, options) {
     const customizeSnapshotSubpath = options.customizeSnapshotSubpath ?? trimCommonFolder;

package/esm/server/vis_context.d.ts

@@ -3,7 +3,7 @@ export declare const visContext: {
     __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<import("type-plus").Pick._<import("./vis_context.types.ts").VisState, "subjectDataTestId">>;
+    setupSuite(context: import("./vis_context.types.ts").PartialBrowserCommandContext): Promise<import("type-plus").Pick._<import("./vis_context.types.ts").VisState, "subjectDataTestId">>;
     getSnapshotInfo(testPath: string, name: string, options?: {
         snapshotFileId?: string | undefined;
     }): {

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

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

@@ -1,18 +1,5 @@
 import type { VisOptions } from '../config/types.ts';
-import type { VisState } from './vis_context.types.ts';
-export type PartialBrowserCommandContext = {
-    project: {
-        config: {
-            root: string;
-            snapshotOptions: {
-                updateSnapshot: 'all' | 'new' | 'none';
-            };
-            testTimeout: number;
-            hookTimeout: number;
-        };
-    };
-    testPath: string;
-};
+import type { PartialBrowserCommandContext, VisState } from './vis_context.types.ts';
 export declare function createVisContext(): {
     setOptions<M extends "pixel" | "ssim">(options?: VisOptions<M>): void;
     __test__getOptions(): VisOptions<any>;

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":"AAEA,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;8BAa5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;;;;;2BAkB1E,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;AA2BD,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"}
+{"version":3,"file":"vis_context.logic.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.logic.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAKpD,OAAO,KAAK,EAAE,4BAA4B,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEpF,wBAAgB,gBAAgB;eAMnB,CAAC,SAAS,OAAO,GAAG,MAAM,YAAW,UAAU,CAAC,CAAC,CAAC;;;;IAY7D;;;;OAIG;wBACuB,4BAA4B;8BAa5B,MAAM,QAAQ,MAAM,YAAY;QAAE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;;;;;2BAkB1E,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;2BASlF,MAAM,UAAU,MAAM;;;;;;;;;;EAe9C;AAyBD,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/server/vis_context.logic.js

@@ -1,6 +1,6 @@
 import { join, relative } from 'pathe';
 import { pick } from 'type-plus';
-import { DIFF_DIR, RESULT_DIR } from "../shared/constants.js";
+import { BASELINE_DIR, DIFF_DIR, RESULT_DIR } from "../shared/constants.js";
 import { file } from "./file.js";
 import { getSnapshotSubpath, resolveSnapshotRootDir } from "./snapshot_path.js";
 import { ctx } from "./vis_context.ctx.js";
@@ -64,8 +64,11 @@ export function createVisContext() {
         getSnapshotFilename(info, snapshotFileId) {
             if (snapshotFileId)
                 return `${snapshotFileId}.png`;
-            const customizeSnapshotId = visOptions.customizeSnapshotId ?? ((id, index) => `${id}-${index}`);
-            return `${customizeSnapshotId(info.taskId, info.task.count)}.png`;
+            const customizeSnapshotId = visOptions.customizeSnapshotId ?? (({ id, index }) => `${id}-${index}`);
+            return `${customizeSnapshotId({
+                id: info.taskId,
+                index: info.task.count,
+            })}.png`;
         },
         getSuiteInfo(testPath, taskId) {
             const suiteId = getSuiteId(state, testPath, visOptions);
@@ -84,16 +87,14 @@ export function createVisContext() {
     return context;
 }
 async function setupState(suite, visOptions) {
-    const snapshotRootDir = resolveSnapshotRootDir(visOptions);
+    const snapshotRootDir = resolveSnapshotRootDir(suite, visOptions);
     const projectPath = suite.project.config.root;
-    const platform = visOptions.platform ?? ctx.getSnapshotPlatform();
     const state = {
         projectPath,
-        platform,
         testTimeout: suite.project.config.testTimeout,
         hookTimeout: suite.project.config.hookTimeout,
         snapshotRootDir,
-        snapshotBaselineDir: join(snapshotRootDir, platform),
+        snapshotBaselineDir: join(snapshotRootDir, BASELINE_DIR),
         snapshotResultDir: join(snapshotRootDir, RESULT_DIR),
         snapshotDiffDir: join(snapshotRootDir, DIFF_DIR),
         snapshotRootPath: join(projectPath, snapshotRootDir),

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

@@ -1,6 +1,5 @@
 export type VisState = {
     projectPath: string;
-    platform: string;
     testTimeout: number;
     hookTimeout: number;
     snapshotRootDir: string;
@@ -18,4 +17,26 @@ export type VisState = {
         }>;
     }>;
 };
+export type PartialBrowserCommandContext = {
+    project: {
+        config: {
+            root: string;
+            snapshotOptions: {
+                updateSnapshot: 'all' | 'new' | 'none';
+            };
+            testTimeout: number;
+            hookTimeout: number;
+        };
+    };
+    provider: {
+        name: string;
+        browserName: string;
+        options: {
+            headless: boolean | undefined;
+            screenshotFailures: boolean | undefined;
+            screenshotDirectory: string | undefined;
+        };
+    };
+    testPath: string;
+};
 //# sourceMappingURL=vis_context.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"vis_context.types.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,MAAM,EAAE,MAAM,CACb,MAAM,EACN;QACC,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CACZ,MAAM,EACN;YACC,KAAK,EAAE,MAAM,CAAA;SACb,CACD,CAAA;KACD,CACD,CAAA;CACD,CAAA"}
+{"version":3,"file":"vis_context.types.d.ts","sourceRoot":"","sources":["../../src/server/vis_context.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG;IACtB,WAAW,EAAE,MAAM,CAAA;IAEnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,MAAM,EAAE,MAAM,CACb,MAAM,EACN;QACC,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CACZ,MAAM,EACN;YACC,KAAK,EAAE,MAAM,CAAA;SACb,CACD,CAAA;KACD,CACD,CAAA;CACD,CAAA;AACD,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;QACT,IAAI,EAAE,MAAM,CAAA;QACZ,WAAW,EAAE,MAAM,CAAA;QACnB,OAAO,EAAE;YACR,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;YAC7B,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAA;YACvC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAA;SACvC,CAAA;KACD,CAAA;IACD,QAAQ,EAAE,MAAM,CAAA;CAChB,CAAA"}

package/esm/setup/create_vis.d.ts

@@ -1,5 +1,6 @@
+import { type SnapshotMeta } from '../client.ts';
 import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts';
-export declare function createVis(commands: SetupVisSuiteCommand): {
+export declare function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand): {
     presets: {
         /**
          * Enable manual visual testing.
@@ -26,14 +27,14 @@ export declare function createVis(commands: SetupVisSuiteCommand): {
          * })
          * ```
          */
-        theme(themes: Record<string, () => void | Promise<void>>): void;
+        theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): void;
     };
     beforeAll: {
         setup(): Promise<void>;
     };
     afterEach: {
         matchImageSnapshot(): Promise<void>;
-        matchPerTheme(themes: Record<string, () => Promise<void> | void>): () => Promise<void>;
+        matchPerTheme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
     };
 };
 //# sourceMappingURL=create_vis.d.ts.map

package/esm/setup/create_vis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAEjF,wBAAgB,SAAS,CAAC,QAAQ,EAAE,oBAAoB;;QAOrD;;WAEG;;QAIH;;;;WAIG;;QAKH;;;;;;;;;;;;;;WAcG;sBACW,MAAM,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;;;;;;;8BAqBlC,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;;EA0ClE"}
+{"version":3,"file":"create_vis.d.ts","sourceRoot":"","sources":["../../src/setup/create_vis.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAY,MAAM,cAAc,CAAA;AAI1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAA;AAEjF,wBAAgB,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB;;QAOlF;;WAEG;;QAIH;;;;WAIG;;QAKH;;;;;;;;;;;;;;WAcG;sBACW,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;;;;;;;8BAqBzE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;;EA4CzG"}

package/esm/setup/create_vis.js

@@ -72,14 +72,17 @@ export function createVis(commands) {
                     const errors = [];
                     for (const themeId in themes) {
                         try {
-                            await new Promise((a) => setTimeout(() => a(themes[themeId]()), 10));
+                            await new Promise((a) => setTimeout(a, 10));
+                            const r = await themes[themeId](meta);
+                            if (r === false)
+                                continue;
                             await test.context
                                 .expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId))
                                 .toMatchImageSnapshot({
                                 ...meta,
                                 customizeSnapshotId: meta?.customizeSnapshotId
-                                    ? (id, index) => `${meta.customizeSnapshotId(id, index)}-${themeId}`
-                                    : (id) => `${id}-${themeId}`,
+                                    ? ({ id, index }) => `${meta.customizeSnapshotId({ id, index })}-${themeId}`
+                                    : ({ id }) => `${id}-${themeId}`,
                             });
                         }
                         catch (error) {

package/esm/setup/vis.d.ts

@@ -5,14 +5,14 @@ export declare const vis: {
     presets: {
         manual(): void;
         auto(): void;
-        theme(themes: Record<string, () => void | Promise<void>>): void;
+        theme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): void;
     };
     beforeAll: {
         setup(): Promise<void>;
     };
     afterEach: {
         matchImageSnapshot(): Promise<void>;
-        matchPerTheme(themes: Record<string, () => Promise<void> | void>): () => Promise<void>;
+        matchPerTheme(themes: Record<string, (options: import("../client.ts").SnapshotMeta<any>) => Promise<boolean> | Promise<void> | boolean | void>): () => Promise<void>;
     };
 };
 //# sourceMappingURL=vis.d.ts.map

package/esm/shared/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const NAME = "vis";
 export declare const SNAPSHOT_ROOT_DIR = "__vis__";
+export declare const BASELINE_DIR = "__baselines__";
 export declare const RESULT_DIR = "__results__";
 export declare const DIFF_DIR = "__diffs__";
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,QAAQ,CAAA;AACzB,eAAO,MAAM,iBAAiB,YAAY,CAAA;AAC1C,eAAO,MAAM,UAAU,gBAAgB,CAAA;AACvC,eAAO,MAAM,QAAQ,cAAc,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,QAAQ,CAAA;AACzB,eAAO,MAAM,iBAAiB,YAAY,CAAA;AAC1C,eAAO,MAAM,YAAY,kBAAkB,CAAA;AAC3C,eAAO,MAAM,UAAU,gBAAgB,CAAA;AACvC,eAAO,MAAM,QAAQ,cAAc,CAAA"}

package/esm/shared/constants.js

@@ -1,4 +1,5 @@
 export const NAME = 'vis';
 export const SNAPSHOT_ROOT_DIR = '__vis__';
+export const BASELINE_DIR = '__baselines__';
 export const RESULT_DIR = '__results__';
 export const DIFF_DIR = '__diffs__';

package/esm/shared/types.d.ts

@@ -15,7 +15,10 @@ export interface ImageSnapshotIdOptions {
      * @param id The id of the snapshot.
      * @param index The index of the snapshot.
      */
-    customizeSnapshotId?: (id: string, index: number) => string;
+    customizeSnapshotId?: (context: {
+        id: string;
+        index: number;
+    }) => string;
 }
 export type ComparisonMethod = 'pixel' | 'ssim';
 export type FailureThresholdOptions = {

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;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,uBAAuB,GAAG;IACrC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,MAAM,IAAI;IAC/C,gBAAgB,EAAE,CAAC,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;CAC9C,CAAA;AACD,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,IAAI;IACjD,gBAAgB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,MAAM,GAC9F,qBAAqB,CAAC,CAAC,CAAC,GACxB,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAC5B,uBAAuB,CAAA;AAExB,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACtC,CAAA"}
+{"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,OAAO,EAAE;QAC/B,EAAE,EAAE,MAAM,CAAA;QAGV,KAAK,EAAE,MAAM,CAAA;KACb,KAAK,MAAM,CAAA;CACZ;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAA;AAE/C,MAAM,MAAM,uBAAuB,GAAG;IACrC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;IACtD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,MAAM,IAAI;IAC/C,gBAAgB,EAAE,CAAC,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,SAAS,CAAA;CAC9C,CAAA;AACD,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,IAAI;IACjD,gBAAgB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAA;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,gBAAgB,GAAG,OAAO,IAAI,CAAC,CAAC,SAAS,MAAM,GAC9F,qBAAqB,CAAC,CAAC,CAAC,GACxB,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAC5B,uBAAuB,CAAA;AAExB,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACtC,CAAA"}

package/esm/testing/stubBrowserCommandContext.d.ts

@@ -1,3 +1,8 @@
 import type { BrowserCommandContext } from 'vitest/node';
+import type { PartialBrowserCommandContext } from '../server/vis_context.types.ts';
 export declare const stubBrowserCommandContext: (stub?: import("type-plus").RecursivePartial<BrowserCommandContext> | undefined) => BrowserCommandContext;
+export declare function createStubPartialBrowserCommandContext({ root, testPath }: {
+    root: string;
+    testPath: string;
+}): (stub?: import("type-plus").RecursivePartial<PartialBrowserCommandContext> | undefined) => PartialBrowserCommandContext;
 //# sourceMappingURL=stubBrowserCommandContext.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"stubBrowserCommandContext.d.ts","sourceRoot":"","sources":["../../src/testing/stubBrowserCommandContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAElF,eAAO,MAAM,yBAAyB,2GAAwC,CAAA;AAE9E,wBAAgB,sCAAsC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,2HAY5G"}

package/esm/testing/stubBrowserCommandContext.js

@@ -1,2 +1,15 @@
 import { stub } from 'type-plus';
 export const stubBrowserCommandContext = stub.build({});
+export function createStubPartialBrowserCommandContext({ root, testPath }) {
+    return stub.build({
+        project: {
+            config: {
+                root,
+            },
+        },
+        provider: {
+            options: {},
+        },
+        testPath,
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitest-plugin-vis",
-  "version": "1.6.5",
+  "version": "2.0.0",
   "description": "Vitest visual testing plugin",
   "keywords": [
     "image-snapshot",
@@ -77,21 +77,21 @@
     "@types/is-ci": "^3.0.4",
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.0.2",
-    "@vitest/browser": "^3.0.0",
-    "@vitest/coverage-istanbul": "^3.0.0",
-    "@vitest/coverage-v8": "^3.0.0",
-    "@vitest/expect": "^3.0.0",
+    "@vitest/browser": "^3.0.5",
+    "@vitest/coverage-istanbul": "^3.0.5",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/expect": "^3.0.5",
     "cross-env": "^7.0.3",
     "never-fail": "^1.1.4",
     "npm-run-all2": "^7.0.2",
-    "playwright": "^1.49.0",
+    "playwright": "latest",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.0.9",
-    "vitest": "^3.0.0",
+    "vitest": "^3.0.5",
     "vitest-browser-react": "^0.0.4",
-    "webdriverio": "^9.5.7"
+    "webdriverio": "latest"
   },
   "peerDependencies": {
     "@vitest/browser": "^2 || ^3",

package/readme.md

@@ -29,11 +29,19 @@ import { vis } from 'vitest-plugin-vis/config'
 export default defineConfig({
 	plugins: [vis()],
 	test: {
+		// vitest v2
 		browser: {
-			// typical browser config
 			enabled: true,
 			provider: 'playwright',
-			name: 'chromium'
+			name: 'chromium',
+		},
+		// vitest v3
+		browser: {
+			enabled: true,
+			provider: 'playwright',
+			instances: [
+				{ browser: 'chromium' }
+			]
 		}
 	}
 })
@@ -47,8 +55,9 @@ This default configuration will:
 - Timeout for image comparison is set to `30000 ms`.
 - Local (non-CI) image snapshots are saved in the `<root>/__vis__/local` directory.
 - CI image snapshots are saved in the `<root>/__vis__/<process.platform>` directory.
-- Image snapshots of the current test run are saved in the `<root>/__vis__/__results__` directory.
-- Diff images are saved in the `<root>/__vis__/__diffs__` directory.
+- Image snapshots of the current test run are saved in the `<root>/__vis__/*/__results__` directory.
+- Diff images are saved in the `<root>/__vis__/*/__diffs__` directory.
+- Baseline images are saved in the `<root>/__vis__/*/__baselines__` directory.
 
 You can customize the configuration:
 
@@ -61,8 +70,15 @@ export default defineConfig({
 	plugins: [
 		vis({
 			preset: 'auto',
-			snapshotRootDir: '__vis__',
-			platform: '...', // {process.platform} or `local`
+			snapshotRootDir: ({
+				ci, // true if running on CI
+				platform, // process.platform
+				providerName, // 'playwright' or 'webdriverio'
+				browserName,
+				screenshotFailures, // from `browser` config
+				screenshotDirectory, // from `browser` config
+			}) => `__vis__/${ci ? platform : 'local'}`,
+			platform: '...', // {process.platform} or `local` (deprecated use `snapshotRootDir` instead)
 			customizeSnapshotSubpath: (subpath) => trimCommonFolder(subpath),
 			customizeSnapshotId: (id, index) => `${id}-${index}`,
 			// set a default subject (e.g. 'subject') to capture image snapshot
@@ -92,8 +108,7 @@ import { vis } from 'vitest-plugin-vis/config'
 
 export default defineConfig({
 	plugins: [
-		// preset is disabled by default when you provide a custom config
-		vis({}) // or vis({ preset: 'none' })
+		vis({ preset: 'none' })
 	],
 	test:{
 		browser:{/* ... */},
@@ -113,8 +128,8 @@ vis.presets.manual()
 // 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') },
-	dark() { document.body.classList.add('dark') },
+	async light() { document.body.classList.remove('dark') },
+	async dark() { document.body.classList.add('dark') },
 })
 ```
 
@@ -123,7 +138,7 @@ vis.presets.theme({
 The main usage of this addon is to use the `toMatchImageSnapshot` matcher.
 
 Since it is exposed under the `expect` object of `vitest`,
-you typically do not need to import `storybook-addon-vis` directly.
+you typically do not need to import `vitest-plugin-vis` directly.
 
 Because of this, TypeScript may not recognize the matcher.
 To address this, you can add the following to your `tsconfig.json`:
@@ -198,6 +213,22 @@ setAutoSnapshotOptions({
 })
 ```
 
+You can also provide additional options, which you can use during theme to enable/disable snapshot for each theme:
+
+```ts
+setAutoSnapshotOptions({
+	skipDark: true
+})
+
+// in vitest.setup.ts
+vis.presets.theme({
+	async dark(options) {
+		if (options.skipDark) return false
+		document.body.classList.add('dark')
+	},
+})
+```
+
 ### Manual Snapshot
 
 You can also set the preset to `manual` and compare snapshots manually:
@@ -218,9 +249,9 @@ export default defineConfig({
 // some.test.ts
 import 'vitest-browser-react' // do this in your setup file to get `page.render`
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('manual snapshot', async () => {
+it('manual snapshot', async ({ expect }) => {
 	page.render(<div data-testid="subject">hello world</div>)
 	await expect(document.body).toMatchImageSnapshot(/* options */)
 	// or
@@ -235,9 +266,9 @@ You can customize the snapshot comparison options per assertion:
 // some.test.ts
 import 'vitest-browser-react' // do this in your setup file to get `page.render`
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('manual snapshot with options', async () => {
+it('manual snapshot with options', async ({ expect }) => {
 	page.render(<div data-testid="subject">hello world</div>)
 	const subject = page.getByTestId('subject')
 	await expect(subject).toMatchImageSnapshot({
@@ -258,9 +289,9 @@ While less common, you can also check if a snapshot exists:
 
 ```ts
 import { page } from '@vitest/browser/context'
-import { expect, it } from 'vitest'
+import { it } from 'vitest'
 
-it('Has Snapshot', async () => {
+it('Has Snapshot', async ({ expect }) => {
 	const hasSnapshot = await page.hasImageSnapshot(/* options */)
 	if (!hasSnapshot) {
 		// do something
@@ -279,8 +310,8 @@ The local snapshots, current run results, and diffs should be ignored by git.
 Add the following lines to your `.gitignore` file:
 
 ```sh
-**/__vis__/__diffs__
-**/__vis__/__results__
+**/__vis__/**/__diffs__
+**/__vis__/**/__results__
 **/__vis__/local
 ```
 

package/src/client/image_snapshot_matcher.ts

@@ -107,6 +107,6 @@ async function parseImageSnapshotOptions(
 ) {
 	const index = await commands.imageSnapshotNextIndex(taskId)
 	const { customizeSnapshotId, ...rest } = options
-	const snapshotFileId = customizeSnapshotId!(taskId, index)
+	const snapshotFileId = customizeSnapshotId!({ id: taskId, index })
 	return { ...rest, snapshotFileId }
 }

package/src/client/page/has_image_snapshot.ts

@@ -26,7 +26,7 @@ export function hasImageSnapshot(this: BrowserPage, options?: ImageSnapshotIdOpt
 	if (options?.customizeSnapshotId) {
 		return commands
 			.imageSnapshotNextIndex(taskId)
-			.then((index) => commands.hasImageSnapshot(taskId, options.customizeSnapshotId!(taskId, index)))
+			.then((index) => commands.hasImageSnapshot(taskId, options.customizeSnapshotId!({ id: taskId, index })))
 	}
 
 	return commands.hasImageSnapshot(taskId)

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<any> | undefined {
+export function getAutoSnapshotOptions<M extends SnapshotMeta<any> = SnapshotMeta<any>>(task: MetaTask): M | undefined {
 	if (!task) return
 
 	const list: any[] = []

package/src/client/snapshot_options.ts

@@ -6,6 +6,7 @@ import type { ToMatchImageSnapshotOptions } from './expect/to_match_image_snapsh
 export type SnapshotMeta<M extends ComparisonMethod> = ToMatchImageSnapshotOptions<M> &
 	AutoSnapshotOptions & {
 		enable?: boolean | undefined
+		[key: string]: unknown
 	}
 
 type Suite = { meta: Record<string, any>; suite?: Suite | undefined }

package/src/config/types.ts

@@ -22,22 +22,34 @@ export type VisOptions<M extends ComparisonMethod = 'pixel'> = ImageSnapshotTime
 		 * <snapshotRootDir>/<platform>/<snapshotSubpath>/<snapshotId>.png
 		 *
 		 * Default: undefined
+		 *
+		 * @deprecated Use `snapshotRootDir` instead.
 		 */
 		platform?: string | undefined
 		/**
 		 * The snapshot folder relative to the root of the project.
 		 *
-		 * Default: `__vis__`
+		 * Default: `{projectRoot}/__vis__/{platform}`
 		 */
-		snapshotRootDir?: string | undefined
+		snapshotRootDir?:
+			| string
+			| ((context: {
+					ci: boolean
+					browserName: string
+					providerName: string
+					platform: string
+					screenshotFailures: boolean | undefined
+					screenshotDirectory: string | undefined
+			  }) => string)
+			| undefined
 		/**
 		 * Customize the snapshot subpath.
 		 *
 		 * The snapshot subpath is used along with `snapshotRootDir` to determine the folder of the snapshots:
 		 *
-		 * - baseline: `<snapshotRootDir>/<platform>/<snapshotSubpath>/<snapshotId>.png`
-		 * - result: `<snapshotRootDir>/__results__/<snapshotSubpath>/<snapshotId>.png`
-		 * - diff: `<snapshotRootDir>/__diffs__/<snapshotSubpath>/<snapshotId>.png`
+		 * - baseline: `<snapshotRootDir>/baselines/<snapshotSubpath>/<snapshotId>.png`
+		 * - result: `<snapshotRootDir>/results/<snapshotSubpath>/<snapshotId>.png`
+		 * - diff: `<snapshotRootDir>/diffs/<snapshotSubpath>/<snapshotId>.png`
 		 *
 		 * Typically, you place your test files either in a dedicated `tests` folder or in the `src` folder along with your source code.
 		 * By default, the snapshot subpath is the test file path with that folder removed to reduces nesting of the snapshot folders.

package/src/server/commands/setup_vis_suite.ts

@@ -17,6 +17,6 @@ export const setupVisSuite: BrowserCommand<[]> = async (
 	context,
 ): Promise<{ subjectDataTestId: string | undefined }> => {
 	assertTestPathDefined(context, 'setupVisSuite')
-
-	return visContext.setupSuite(context)
+	// using props not currently listed in the types
+	return visContext.setupSuite(context as any)
 }

package/src/server/snapshot_path.ts

@@ -1,11 +1,26 @@
+import ci from 'is-ci'
 import type { VisOptions } from '../config/types.ts'
 import { SNAPSHOT_ROOT_DIR } from '../shared/constants.ts'
 import { trimCommonFolder } from '../shared/trim_common_folder.ts'
+import type { PartialBrowserCommandContext } from './vis_context.types.ts'
 
-export function resolveSnapshotRootDir(options: Pick<VisOptions, 'snapshotRootDir'> | undefined) {
-	return options?.snapshotRootDir ?? SNAPSHOT_ROOT_DIR
+export function resolveSnapshotRootDir(suite: PartialBrowserCommandContext, options: VisOptions) {
+	if (!options.snapshotRootDir) return getSnapshotRootDir(SNAPSHOT_ROOT_DIR, options.platform)
+	const snapshotRootDir = options.snapshotRootDir
+	if (typeof snapshotRootDir === 'string') return getSnapshotRootDir(snapshotRootDir, options.platform!)
+	return snapshotRootDir({
+		ci,
+		browserName: suite.provider.browserName,
+		providerName: suite.provider.name,
+		platform: process.platform,
+		screenshotFailures: suite.provider.options.screenshotFailures,
+		screenshotDirectory: suite.provider.options.screenshotDirectory,
+	})
 }
 
+function getSnapshotRootDir(snapshotRootDir: string, platform: string | undefined = process.platform) {
+	return `${snapshotRootDir}/${ci ? platform : 'local'}`
+}
 export function getSnapshotSubpath(suiteName: string, options: Pick<VisOptions, 'customizeSnapshotSubpath'>) {
 	const customizeSnapshotSubpath = options.customizeSnapshotSubpath ?? trimCommonFolder
 	return customizeSnapshotSubpath(suiteName)

package/src/server/vis_context.logic.ts

@@ -1,25 +1,11 @@
 import { join, relative } from 'pathe'
 import { pick } from 'type-plus'
 import type { VisOptions } from '../config/types.ts'
-import { DIFF_DIR, RESULT_DIR } from '../shared/constants.ts'
+import { BASELINE_DIR, DIFF_DIR, RESULT_DIR } from '../shared/constants.ts'
 import { file } from './file.ts'
 import { getSnapshotSubpath, resolveSnapshotRootDir } from './snapshot_path.ts'
 import { ctx } from './vis_context.ctx.ts'
-import type { VisState } from './vis_context.types.ts'
-
-export type PartialBrowserCommandContext = {
-	project: {
-		config: {
-			root: string
-			snapshotOptions: {
-				updateSnapshot: 'all' | 'new' | 'none'
-			}
-			testTimeout: number
-			hookTimeout: number
-		}
-	}
-	testPath: string
-}
+import type { PartialBrowserCommandContext, VisState } from './vis_context.types.ts'
 
 export function createVisContext() {
 	let visOptions: VisOptions<any> = {}
@@ -85,8 +71,11 @@ export function createVisContext() {
 		getSnapshotFilename(info: { taskId: string; task: { count: number } }, snapshotFileId: string | undefined) {
 			if (snapshotFileId) return `${snapshotFileId}.png`
 
-			const customizeSnapshotId = visOptions.customizeSnapshotId ?? ((id, index) => `${id}-${index}`)
-			return `${customizeSnapshotId(info.taskId, info.task.count)}.png`
+			const customizeSnapshotId = visOptions.customizeSnapshotId ?? (({ id, index }) => `${id}-${index}`)
+			return `${customizeSnapshotId({
+				id: info.taskId,
+				index: info.task.count,
+			})}.png`
 		},
 		getSuiteInfo(testPath: string, taskId: string) {
 			const suiteId = getSuiteId(state, testPath, visOptions)
@@ -109,17 +98,15 @@ async function setupState(
 	suite: PartialBrowserCommandContext,
 	visOptions: Pick<VisOptions, 'snapshotRootDir' | 'platform' | 'subjectDataTestId'>,
 ) {
-	const snapshotRootDir = resolveSnapshotRootDir(visOptions)
+	const snapshotRootDir = resolveSnapshotRootDir(suite, visOptions)
 	const projectPath = suite.project.config.root
-	const platform = visOptions.platform ?? ctx.getSnapshotPlatform()
 
 	const state = {
 		projectPath,
-		platform,
 		testTimeout: suite.project.config.testTimeout,
 		hookTimeout: suite.project.config.hookTimeout,
 		snapshotRootDir,
-		snapshotBaselineDir: join(snapshotRootDir, platform),
+		snapshotBaselineDir: join(snapshotRootDir, BASELINE_DIR),
 		snapshotResultDir: join(snapshotRootDir, RESULT_DIR),
 		snapshotDiffDir: join(snapshotRootDir, DIFF_DIR),
 		snapshotRootPath: join(projectPath, snapshotRootDir),

package/src/server/vis_context.types.ts

@@ -1,6 +1,6 @@
 export type VisState = {
 	projectPath: string
-	platform: string
+	// platform: string
 	testTimeout: number
 	hookTimeout: number
 	snapshotRootDir: string
@@ -24,3 +24,25 @@ export type VisState = {
 		}
 	>
 }
+export type PartialBrowserCommandContext = {
+	project: {
+		config: {
+			root: string
+			snapshotOptions: {
+				updateSnapshot: 'all' | 'new' | 'none'
+			}
+			testTimeout: number
+			hookTimeout: number
+		}
+	}
+	provider: {
+		name: string
+		browserName: string
+		options: {
+			headless: boolean | undefined
+			screenshotFailures: boolean | undefined
+			screenshotDirectory: string | undefined
+		}
+	}
+	testPath: string
+}

package/src/setup/create_vis.ts

@@ -1,12 +1,12 @@
 import dedent from 'dedent'
 import { afterEach, beforeAll } from 'vitest'
-import { toTaskId } from '../client.ts'
+import { type SnapshotMeta, toTaskId } from '../client.ts'
 import { ctx } from '../client/ctx.ts'
 import { shouldTakeSnapshot } from '../client/should_take_snapshot.ts'
 import { getAutoSnapshotOptions } from '../client/snapshot_options.internal.js'
 import type { SetupVisSuiteCommand } from '../server/commands/setup_vis_suite.ts'
 
-export function createVis(commands: SetupVisSuiteCommand) {
+export function createVis<M extends SnapshotMeta<any>>(commands: SetupVisSuiteCommand) {
 	let subjectDataTestId: string | undefined
 	/**
 	 * Visual test configuration on the client side.
@@ -43,7 +43,7 @@ export function createVis(commands: SetupVisSuiteCommand) {
 			 * })
 			 * ```
 			 */
-			theme(themes: Record<string, () => void | Promise<void>>) {
+			theme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>) {
 				beforeAll(vis.beforeAll.setup)
 				afterEach(vis.afterEach.matchPerTheme(themes))
 			},
@@ -64,24 +64,26 @@ export function createVis(commands: SetupVisSuiteCommand) {
 
 				await test!.context.expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId)).toMatchImageSnapshot(meta)
 			},
-			matchPerTheme(themes: Record<string, () => Promise<void> | void>) {
+			matchPerTheme(themes: Record<string, (options: M) => Promise<boolean> | Promise<void> | boolean | void>) {
 				return async function matchImageSnapshot() {
 					const test = ctx.getCurrentTest()
 					if ((test?.result?.errors?.length ?? 0) > 0) return
 
-					const meta = getAutoSnapshotOptions(test)
+					const meta = getAutoSnapshotOptions<M>(test)
 					if (!shouldTakeSnapshot(meta)) return
 					const errors: any[] = []
 					for (const themeId in themes) {
 						try {
-							await new Promise((a) => setTimeout(() => a(themes[themeId]!()), 10))
+							await new Promise((a) => setTimeout(a, 10))
+							const r = await themes[themeId]!(meta!)
+							if (r === false) continue
 							await test!.context
 								.expect(getSubject(meta?.subjectDataTestId ?? subjectDataTestId))
 								.toMatchImageSnapshot({
 									...meta,
 									customizeSnapshotId: meta?.customizeSnapshotId
-										? (id, index) => `${meta.customizeSnapshotId!(id, index)}-${themeId}`
-										: (id) => `${id}-${themeId}`,
+										? ({ id, index }) => `${meta.customizeSnapshotId!({ id, index })}-${themeId}`
+										: ({ id }) => `${id}-${themeId}`,
 								})
 						} catch (error) {
 							errors.push([themeId, error])

package/src/shared/constants.ts

@@ -1,4 +1,5 @@
 export const NAME = 'vis'
 export const SNAPSHOT_ROOT_DIR = '__vis__'
+export const BASELINE_DIR = '__baselines__'
 export const RESULT_DIR = '__results__'
 export const DIFF_DIR = '__diffs__'

package/src/shared/types.ts

@@ -17,7 +17,12 @@ export interface ImageSnapshotIdOptions {
 	 * @param id The id of the snapshot.
 	 * @param index The index of the snapshot.
 	 */
-	customizeSnapshotId?: (id: string, index: number) => string
+	customizeSnapshotId?: (context: {
+		id: string
+		// width: number
+		// height: number
+		index: number
+	}) => string
 }
 
 export type ComparisonMethod = 'pixel' | 'ssim'

package/src/testing/stubBrowserCommandContext.ts

@@ -1,4 +1,19 @@
 import { stub } from 'type-plus'
 import type { BrowserCommandContext } from 'vitest/node'
+import type { PartialBrowserCommandContext } from '../server/vis_context.types.ts'
 
 export const stubBrowserCommandContext = stub.build<BrowserCommandContext>({})
+
+export function createStubPartialBrowserCommandContext({ root, testPath }: { root: string; testPath: string }) {
+	return stub.build<PartialBrowserCommandContext>({
+		project: {
+			config: {
+				root,
+			},
+		},
+		provider: {
+			options: {},
+		},
+		testPath,
+	})
+}