storybook-addon-vis 3.0.0 → 3.0.1

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import "./global_matcher_augment-CYxLwns2.js";
 import { ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotKeyOptions, ImageSnapshotKeyOptions as ImageSnapshotKeyOptions$1, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, PixelComparisonOptions, SsimComparisonOptions, ToMatchImageSnapshotOptions } from "vitest-plugin-vis/client-api";
-import { SetupVisOptions } from "vitest-plugin-vis/setup";
 import { BrowserPage } from "vitest/browser";
 import "vitest/suite";
 import * as storybook_internal_csf0 from "storybook/internal/csf";
@@ -29,7 +28,9 @@ declare function defineAutoSnapshotParam<M extends ComparisonMethod>(snapshot: T
 declare function isSnapshotEnabled(tags: string[]): boolean;
 //#endregion
 //#region src/index.d.ts
-declare const _default: (options?: SetupVisOptions) => {
+declare const _default: (options?: {
+  auto: boolean;
+}) => {
   beforeEach(ctx: storybook_internal_csf0.StoryContext<any, storybook_internal_csf0.Args>): void;
   tags: string[];
 };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/client/vitest_proxy.ts","../src/client/has_image_snapshot.ts","../src/client/storybook/param.ts","../src/client/storybook/tags.ts","../src/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;;cAiBa,MAAI;;;;;;iBCVD,gBAAA,WAA2B,gDAAmC;;;;;;iBCqB9D,kCAAkC,4BACvC,4BAA4B,KAAK;;;;;;;iBC7B5B,iBAAA;;;cCaD,qBAEU;EJEZ,UAQX,CAAA,GAAA,sCAAA,CAAA,GAAA,EIV2C,uBAAA,CAAA,IAAA,CJU3C,CAAA,EAAA,IAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/client/vitest_proxy.ts","../src/client/has_image_snapshot.ts","../src/client/storybook/param.ts","../src/client/storybook/tags.ts","../src/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;cAiBa,MAAI;;;;;;iBCVD,gBAAA,WAA2B,gDAAmC;;;;;;iBCqB9D,kCAAkC,4BACvC,4BAA4B,KAAK;;;;AFZ5C,CAAA;;;iBGjBgB,iBAAA;;;cCYD;EJKF,IAAA,EAAA,OAQX;;kBIba,uBAAA,CAAA,kBAAA,uBAAA,CAAA,IAAA;;AHLf,CAAA"}

package/dist/index.js

@@ -1,6 +1,5 @@
 import { a as page, i as getCurrentTest, n as isSnapshotEnabled, r as commands, t as visAnnotations } from "./vis_annotation-Dpsgn_4P.js";
 import { hasImageSnapshotAction, toTaskId } from "vitest-plugin-vis/client-api";
-import { vis } from "vitest-plugin-vis/setup";
 
 export * from "vitest-plugin-vis"
 
@@ -34,8 +33,7 @@ function defineAutoSnapshotParam(snapshot) {
 
 //#endregion
 //#region src/index.ts
-var src_default = (options = {}) => {
-	vis.setup(options);
+var src_default = (options = { auto: false }) => {
 	return {
 		tags: options.auto ? ["snapshot"] : [],
 		...visAnnotations

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/client/ctx.ts","../src/client/has_image_snapshot.ts","../src/client/storybook/param.ts","../src/index.ts"],"sourcesContent":["import { getCurrentTest } from './vitest_proxy.ts'\n\nexport const ctx = {\n\tgetCurrentTest,\n\t__test__reset() {\n\t\tctx.getCurrentTest = getCurrentTest\n\t},\n}\n","import { hasImageSnapshotAction, toTaskId, type ImageSnapshotKeyOptions } from 'vitest-plugin-vis/client-api'\nimport { ctx } from './ctx.ts'\nimport { commands } from './vitest_proxy.ts'\n\n/**\n * Check if the snapshot image exists.\n */\nexport function hasImageSnapshot(options?: ImageSnapshotKeyOptions | undefined) {\n\tconst test = ctx.getCurrentTest()\n\tif (!test) return false\n\n\treturn hasImageSnapshotAction(commands, toTaskId(test), options)\n}\n","import type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n} from 'vitest-plugin-vis/client-api'\n\n// This fix the inferred type cannot be named error\nexport type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n}\n\n/**\n * Define snapshot parameter for auto snapshot.\n */\nexport function defineAutoSnapshotParam<M extends ComparisonMethod>(\n\tsnapshot: ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions,\n) {\n\treturn { snapshot }\n}\n","// `storybook-addon-vis` provides code that can be used in test files.\nimport './client/storybook/expect_extend.ts'\nimport './shared/global_matcher_augment.ts'\n\nimport { vis, type SetupVisOptions } from 'vitest-plugin-vis/setup'\nimport { page } from './client/vitest_proxy.ts'\nimport { visAnnotations } from './preview/vis_annotation.ts'\n\nexport * from 'vitest-plugin-vis'\nexport * from './client/has_image_snapshot.ts'\nexport * from './client/storybook/param.ts'\nexport * from './client/storybook/tags.ts'\n\nexport { page }\n\nexport default (options: SetupVisOptions = {}) => {\n\tvis.setup(options)\n\treturn {\n\t\ttags: options.auto ? ['snapshot'] : [],\n\t\t...visAnnotations,\n\t}\n}\n"],"mappings":";;;;;;;AAEA,MAAa,MAAM;CAClB;CACA,gBAAgB;AACf,MAAI,iBAAiB;;CAEtB;;;;;;;ACAD,SAAgB,iBAAiB,SAA+C;CAC/E,MAAM,OAAO,IAAI,gBAAgB;AACjC,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO,uBAAuB,UAAU,SAAS,KAAK,EAAE,QAAQ;;;;;;;;ACiBjE,SAAgB,wBACf,UACC;AACD,QAAO,EAAE,UAAU;;;;;AChBpB,mBAAgB,UAA2B,EAAE,KAAK;AACjD,KAAI,MAAM,QAAQ;AAClB,QAAO;EACN,MAAM,QAAQ,OAAO,CAAC,WAAW,GAAG,EAAE;EACtC,GAAG;EACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/client/ctx.ts","../src/client/has_image_snapshot.ts","../src/client/storybook/param.ts","../src/index.ts"],"sourcesContent":["import { getCurrentTest } from './vitest_proxy.ts'\n\nexport const ctx = {\n\tgetCurrentTest,\n\t__test__reset() {\n\t\tctx.getCurrentTest = getCurrentTest\n\t},\n}\n","import { hasImageSnapshotAction, toTaskId, type ImageSnapshotKeyOptions } from 'vitest-plugin-vis/client-api'\nimport { ctx } from './ctx.ts'\nimport { commands } from './vitest_proxy.ts'\n\n/**\n * Check if the snapshot image exists.\n */\nexport function hasImageSnapshot(options?: ImageSnapshotKeyOptions | undefined) {\n\tconst test = ctx.getCurrentTest()\n\tif (!test) return false\n\n\treturn hasImageSnapshotAction(commands, toTaskId(test), options)\n}\n","import type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n} from 'vitest-plugin-vis/client-api'\n\n// This fix the inferred type cannot be named error\nexport type {\n\tComparisonMethod,\n\tFailureThresholdOptions,\n\tImageSnapshotCompareOptions,\n\tImageSnapshotKeyOptions,\n\tImageSnapshotSubjectOptions,\n\tImageSnapshotTimeoutOptions,\n\tPixelComparisonOptions,\n\tSsimComparisonOptions,\n\tToMatchImageSnapshotOptions,\n}\n\n/**\n * Define snapshot parameter for auto snapshot.\n */\nexport function defineAutoSnapshotParam<M extends ComparisonMethod>(\n\tsnapshot: ToMatchImageSnapshotOptions<M> & ImageSnapshotSubjectOptions,\n) {\n\treturn { snapshot }\n}\n","// `storybook-addon-vis` provides code that can be used in test files.\nimport './client/storybook/expect_extend.ts'\nimport './shared/global_matcher_augment.ts'\n\nimport { page } from './client/vitest_proxy.ts'\nimport { visAnnotations } from './preview/vis_annotation.ts'\n\nexport * from 'vitest-plugin-vis'\nexport * from './client/has_image_snapshot.ts'\nexport * from './client/storybook/param.ts'\nexport * from './client/storybook/tags.ts'\n\nexport { page }\n\nexport default (options: { auto: boolean } = { auto: false }) => {\n\treturn {\n\t\ttags: options.auto ? ['snapshot'] : [],\n\t\t...visAnnotations,\n\t}\n}\n"],"mappings":";;;;;;AAEA,MAAa,MAAM;CAClB;CACA,gBAAgB;AACf,MAAI,iBAAiB;;CAEtB;;;;;;;ACAD,SAAgB,iBAAiB,SAA+C;CAC/E,MAAM,OAAO,IAAI,gBAAgB;AACjC,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO,uBAAuB,UAAU,SAAS,KAAK,EAAE,QAAQ;;;;;;;;ACiBjE,SAAgB,wBACf,UACC;AACD,QAAO,EAAE,UAAU;;;;;ACjBpB,mBAAgB,UAA6B,EAAE,MAAM,OAAO,KAAK;AAChE,QAAO;EACN,MAAM,QAAQ,OAAO,CAAC,WAAW,GAAG,EAAE;EACtC,GAAG;EACH"}

package/dist/vitest-setup.d.ts

@@ -1,6 +1,6 @@
 import "./global_matcher_augment-CYxLwns2.js";
-import * as vitest_plugin_vis_setup0 from "vitest-plugin-vis/setup";
 import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import * as vitest_plugin_vis_setup0 from "vitest-plugin-vis/setup";
 import * as storybook_internal_csf1 from "storybook/internal/csf";
 
 //#region src/preview/vis_annotation.d.ts

package/dist/vitest-setup.js

@@ -1,6 +1,6 @@
 import { r as commands, t as visAnnotations } from "./vis_annotation-Dpsgn_4P.js";
-import { createVis } from "vitest-plugin-vis/setup";
 import { setAutoSnapshotOptions } from "vitest-plugin-vis";
+import { createVis } from "vitest-plugin-vis/setup";
 
 //#region src/vitest-setup.ts
 const vis = createVis(commands);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-vis",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Storybook Vitest visual testing addon",
   "keywords": [
     "image-snapshot",

package/src/index.ts

@@ -2,7 +2,6 @@
 import './client/storybook/expect_extend.ts'
 import './shared/global_matcher_augment.ts'
 
-import { vis, type SetupVisOptions } from 'vitest-plugin-vis/setup'
 import { page } from './client/vitest_proxy.ts'
 import { visAnnotations } from './preview/vis_annotation.ts'
 
@@ -13,8 +12,7 @@ export * from './client/storybook/tags.ts'
 
 export { page }
 
-export default (options: SetupVisOptions = {}) => {
-	vis.setup(options)
+export default (options: { auto: boolean } = { auto: false }) => {
 	return {
 		tags: options.auto ? ['snapshot'] : [],
 		...visAnnotations,

package/src/overview.mdx

@@ -36,7 +36,7 @@ Please refer to its documentation for installation and setup instructions.
 To setup [storybook-addon-vis][storybook-addon-vis], you need to do the following:
 
 - Add the `storybookVis` plugin in [Vitest] along with the `storybookTest` plugin.
-- Configure visual testing in `.storybook/preview.ts` or `vitest.setup.ts`, depending on whether you are writing your stories in CSF 3 or CSF Next.
+- Configure visual testing in `vitest.setup.ts` (and `.storybook/preview.ts` if you are writing your stories in CSF Next).
 - Add [storybook-addon-vis][storybook-addon-vis] addon to your [Storybook] configuration in `.storybook/main.ts`.
 - Ignore snapshot folders in your `.gitignore` file.
 
@@ -219,28 +219,9 @@ causes inconsistency and confuses both the editor and you.
 ### Basic Setup for CSF Next
 
 If you are writing your stories in CSF Next,
-you don't need to setup the `vitest.setup.ts` file.
-Instead, you need to setup the visual testing in `.storybook/preview.ts`.
+You need to setup the visual testing also in `.storybook/preview.ts`.
 
 
-```ts
-// vitest.config.ts
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
-import { storybookVis } from 'storybook-addon-vis/vitest-plugin'
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-	plugins: [
-		storybookTest(),
-		storybookVis() // ADD THIS
-	],
-	test: {
-		browser: { ... }, // your Vitest Browser Mode configuration
-		// setupFiles: ['./vitest.setup.ts'], // Do not need to setup this file anymore
-	}
-})
-```
-
 ```ts
 // .storybook/preview.ts
 import addonVis from 'storybook-addon-vis'
@@ -248,7 +229,8 @@ import { definePreview } from '@storybook/your-framework/node'
 
 export default definePreview({
 	addons: [
-		addonVis({ auto: true }) // ADD THIS
+		// Enable automatic snapshot taking at the end of each test
+		addonVis({ auto: true })
 	]
 })
 ```
@@ -295,48 +277,32 @@ The options are the same as the options in [`vitest-plugin-vis`][vitest-plugin-v
 
 For more details, please refer to the [vitest-plugin-vis documentation](https://github.com/repobuddy/visual-testing/tree/main/packages/vitest-plugin-vis).
 
-In `.storybook/preview.ts` or `vitest.setup.ts`, you can customize how the automatic snapshots are taken.
-
-The `addonVis()` used in `.storybook/preview.ts` and `vis.setup()` used in `vitest.setup.ts` have the same options.
-Here, we will use the `addonVis()` options as an example.
+In `vitest.setup.ts`, you can customize how the automatic snapshots are taken.
 
 ```ts
-// .storybook/preview.ts
-import addonVis from 'storybook-addon-vis'
-import { definePreview } from '@storybook/your-framework/node'
+// vitest.setup.ts
+import { vis } from 'storybook-addon-vis/setup'
 
-export default definePreview({
-	addons: [
-		// Enable visual testing without automatic snapshot taking
-		// You can use this if you want to only take manual snapshots.
-		addonVis(),
-		// or
-		addonVis({ auto: false }),
-
-		// With automatic snapshot taking at the end of each test
-		addonVis({ auto: true }),
-
-		// Control when automatic snapshot taking occurs
-		addonVis({ auto: async ({ tags }) => tags.includes('presentation') }),
-
-
-		// Capture image snapshot at the end of each test for multiple themes (light and dark in this example).
-		//
-		// Note that this changes the theme in the `afterEach` hook.
-		// If you want to capture manual snapshots in different themes,
-		// configure Vitest to run the tests in different themes.
-		addonVis({
-			auto: {
-				async dark() { document.body.classList.add('dark') },
-				async light() { document.body.classList.remove('dark') },
-			}
-		})
-	]
+vis.setup({
+	// With automatic snapshot taking at the end of each test
+	auto: true,
+
+	// Control when automatic snapshot taking occurs
+	auto: async ({ tags }) => tags.includes('presentation'),
+
+
+	// Capture image snapshot at the end of each test for multiple themes (light and dark in this example).
+	//
+	// Note that this changes the theme in the `afterEach` hook.
+	// If you want to capture manual snapshots in different themes,
+	// configure Vitest to run the tests in different themes.
+	auto: {
+		async dark() { document.body.classList.add('dark') },
+		async light() { document.body.classList.remove('dark') },
+	}
 })
 ```
 
-All setup above will enable snapshot testing in storybook when the story has the `snapshot` tag.
-
 #### Multiple vitest projects or custom snapshot paths
 
 If your setup uses multiple vitest projects or custom paths,