storybook-addon-vis 1.0.2 → 1.1.0

package/dist/chunk-4NIDZI2O.js

@@ -0,0 +1,55 @@
+import { matchPageImageSnapshotAction, toTaskId, success, matchImageSnapshotAction } from 'vitest-plugin-vis/client-api';
+import { expect } from '@storybook/test';
+
+// src/client/page/to_match_image_snapshot.ts
+function toMatchImageSnapshot(options) {
+  const test = getCurrentTest();
+  if (!test) return Promise.resolve();
+  return matchPageImageSnapshotAction(commands, toTaskId(test), options);
+}
+
+// src/client/vitest_proxy.ts
+var browserContext;
+var vitestSuite;
+if (globalThis.__vitest_browser__) {
+  import('@vitest/browser/context').then((m) => {
+    m.page.extend({ toMatchImageSnapshot });
+    browserContext = m;
+  });
+  import('vitest/suite').then((m) => {
+    vitestSuite = m;
+  });
+}
+var page = new Proxy({}, {
+  get(_target, prop) {
+    const r = browserContext?.page?.[prop];
+    if (prop === "toMatchImageSnapshot" && r === void 0) {
+      return () => {
+      };
+    }
+    return r;
+  }
+});
+var commands = new Proxy({}, {
+  get(_target, prop) {
+    return browserContext?.commands?.[prop];
+  }
+});
+var getCurrentTest = () => vitestSuite?.getCurrentTest();
+function toMatchImageSnapshot2(subject, options) {
+  const test = getCurrentTest();
+  if (!test) return Promise.resolve(success);
+  return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success);
+}
+
+// src/client/storybook/expect_extend.ts
+expect.extend({ toMatchImageSnapshot: toMatchImageSnapshot2 });
+
+// src/client/storybook/tags.ts
+function isSnapshotEnabled(tags) {
+  return tags.lastIndexOf("!snapshot") < tags.lastIndexOf("snapshot");
+}
+
+export { commands, getCurrentTest, isSnapshotEnabled, page };
+//# sourceMappingURL=chunk-4NIDZI2O.js.map
+//# sourceMappingURL=chunk-4NIDZI2O.js.map

package/dist/chunk-4NIDZI2O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client/page/to_match_image_snapshot.ts","../src/client/vitest_proxy.ts","../src/client/expect/to_match_image_snapshot.ts","../src/client/storybook/expect_extend.ts","../src/client/storybook/tags.ts"],"names":["toMatchImageSnapshot","toTaskId"],"mappings":";;;;AAQO,SAAS,qBACf,OACC,EAAA;AACD,EAAA,MAAM,OAAO,cAAe,EAAA;AAG5B,EAAA,IAAI,CAAC,IAAA,EAAa,OAAA,OAAA,CAAQ,OAAQ,EAAA;AAGlC,EAAA,OAAO,4BAA6B,CAAA,QAAA,EAAU,QAAS,CAAA,IAAI,GAAG,OAAO,CAAA;AACtE;;;ACdA,IAAI,cAAA;AACJ,IAAI,WAAA;AAEJ,IAAK,WAAmB,kBAAoB,EAAA;AAC3C,EAAA,OAAO,yBAAyB,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAC7C,IAAA,CAAA,CAAE,IAAK,CAAA,MAAA,CAAO,EAAE,oBAAA,EAAsB,CAAA;AACtC,IAAiB,cAAA,GAAA,CAAA;AAAA,GACjB,CAAA;AACD,EAAA,OAAO,cAAc,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAClC,IAAc,WAAA,GAAA,CAAA;AAAA,GACd,CAAA;AACF;AAEO,IAAM,IAAO,GAAA,IAAI,KAAmB,CAAA,EAAW,EAAA;AAAA,EACrD,GAAA,CAAI,SAAS,IAAM,EAAA;AAClB,IAAM,MAAA,CAAA,GAAK,cAAgB,EAAA,IAAA,GAAe,IAAI,CAAA;AAC9C,IAAI,IAAA,IAAA,KAAS,sBAA0B,IAAA,CAAA,KAAM,MAAW,EAAA;AACvD,MAAA,OAAO,MAAM;AAAA,OAAC;AAAA;AAEf,IAAO,OAAA,CAAA;AAAA;AAET,CAAC;AAEM,IAAM,QAAW,GAAA,IAAI,KAAuB,CAAA,EAAW,EAAA;AAAA,EAC7D,GAAA,CAAI,SAAS,IAAM,EAAA;AAClB,IAAQ,OAAA,cAAA,EAAgB,WAAmB,IAAI,CAAA;AAAA;AAEjD,CAAC;AAEY,IAAA,cAAA,GAAiB,MAC7B,WAAA,EAAa,cAAe;ACxBtB,SAASA,qBAAAA,CAKf,SACA,OACyB,EAAA;AACzB,EAAA,MAAM,OAAO,cAAe,EAAA;AAG5B,EAAA,IAAI,CAAC,IAAA,EAAa,OAAA,OAAA,CAAQ,QAAQ,OAAO,CAAA;AAGzC,EAAO,OAAA,wBAAA,CAAyB,QAAUC,EAAAA,QAAAA,CAAS,IAAI,CAAA,EAAG,SAAS,OAAO,CAAA,CAAE,IAAK,CAAA,MAAM,OAAO,CAAA;AAC/F;;;ACtBA,MAAA,CAAO,MAAO,CAAA,EAAE,oBAAAD,EAAAA,qBAAAA,EAAsB,CAAA;;;ACH/B,SAAS,kBAAkB,IAAgB,EAAA;AACjD,EAAA,OAAO,KAAK,WAAY,CAAA,WAAW,CAAI,GAAA,IAAA,CAAK,YAAY,UAAU,CAAA;AACnE","file":"chunk-4NIDZI2O.js","sourcesContent":["import {\n\ttype ComparisonMethod,\n\ttype ToMatchPageImageSnapshotOptions,\n\tmatchPageImageSnapshotAction,\n\ttoTaskId,\n} from 'vitest-plugin-vis/client-api'\nimport { commands, getCurrentTest } from '../vitest_proxy.ts'\n\nexport function toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(\n\toptions?: ToMatchPageImageSnapshotOptions<M> | undefined,\n) {\n\tconst test = getCurrentTest()\n\n\t/* v8 ignore start: stub as success when not in a test (e.g. in a story) */\n\tif (!test) return Promise.resolve()\n\t/* v8 ignore end */\n\n\treturn matchPageImageSnapshotAction(commands, toTaskId(test), options)\n}\n","import type { BrowserCommands, BrowserPage } from '@vitest/browser/context'\nimport type { SnapshotTestMeta } from 'vitest-plugin-vis/client-api'\nimport { toMatchImageSnapshot } from './page/to_match_image_snapshot.ts'\n\nlet browserContext: Awaited<typeof import('@vitest/browser/context')>\nlet vitestSuite: Awaited<typeof import('vitest/suite')>\n\nif ((globalThis as any).__vitest_browser__) {\n\timport('@vitest/browser/context').then((m) => {\n\t\tm.page.extend({ toMatchImageSnapshot })\n\t\tbrowserContext = m\n\t})\n\timport('vitest/suite').then((m) => {\n\t\tvitestSuite = m\n\t})\n}\n\nexport const page = new Proxy<BrowserPage>({} as any, {\n\tget(_target, prop) {\n\t\tconst r = (browserContext?.page as any)?.[prop]\n\t\tif (prop === 'toMatchImageSnapshot' && r === undefined) {\n\t\t\treturn () => {}\n\t\t}\n\t\treturn r\n\t},\n})\n\nexport const commands = new Proxy<BrowserCommands>({} as any, {\n\tget(_target, prop) {\n\t\treturn (browserContext?.commands as any)?.[prop]\n\t},\n})\n\nexport const getCurrentTest = () =>\n\tvitestSuite?.getCurrentTest() as (ReturnType<typeof vitestSuite.getCurrentTest> & SnapshotTestMeta) | undefined\n","import type { AsyncExpectationResult } from '@vitest/expect'\nimport {\n\ttype ComparisonMethod,\n\ttype ToMatchImageSnapshotOptions,\n\tmatchImageSnapshotAction,\n\tsuccess,\n\ttoTaskId,\n} from 'vitest-plugin-vis/client-api'\nimport { commands, getCurrentTest } from '../vitest_proxy.ts'\n\nexport function toMatchImageSnapshot<M extends ComparisonMethod>(\n\t/**\n\t * The element or locator to take the snapshot of,\n\t * or the base64 value of the image to compare against.\n\t */\n\tsubject: any,\n\toptions?: ToMatchImageSnapshotOptions<M> | undefined,\n): AsyncExpectationResult {\n\tconst test = getCurrentTest()\n\n\t/* v8 ignore start: stub as success when not in a test (e.g. in a story) */\n\tif (!test) return Promise.resolve(success)\n\t/* v8 ignore end */\n\n\treturn matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)\n}\n","import { expect } from '@storybook/test'\nimport { toMatchImageSnapshot } from '../expect/to_match_image_snapshot.ts'\n\nexpect.extend({ toMatchImageSnapshot })\n","export function isSnapshotEnabled(tags: string[]) {\n\treturn tags.lastIndexOf('!snapshot') < tags.lastIndexOf('snapshot')\n}\n"]}

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import './matcher.js';
+import { BrowserPage } from '@vitest/browser/context';
 export * from 'vitest-plugin-vis';
 import { ImageSnapshotKeyOptions, ComparisonMethod, ToMatchImageSnapshotOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, SsimComparisonOptions, PixelComparisonOptions, FailureThresholdOptions } from 'vitest-plugin-vis/client-api';
 export { ComparisonMethod, FailureThresholdOptions, ImageSnapshotCompareOptions, ImageSnapshotKeyOptions, ImageSnapshotSubjectOptions, ImageSnapshotTimeoutOptions, PixelComparisonOptions, SsimComparisonOptions, ToMatchImageSnapshotOptions } from 'vitest-plugin-vis/client-api';
 
+declare const page: BrowserPage;
+
 /**
  * Check if the snapshot image exists.
  */
@@ -42,4 +45,4 @@ type StorybookVisOptions = {
  */
 declare function defineStorybookVisOptions(options: StorybookVisOptions): StorybookVisOptions;
 
-export { type StorybookVisOptions, defineAutoSnapshotParam, defineStorybookVisOptions, hasImageSnapshot, isSnapshotEnabled };
+export { type StorybookVisOptions, defineAutoSnapshotParam, defineStorybookVisOptions, hasImageSnapshot, isSnapshotEnabled, page };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { getCurrentTest, commands } from './chunk-O5DYZDLL.js';
-export { isSnapshotEnabled } from './chunk-O5DYZDLL.js';
+import { getCurrentTest, commands } from './chunk-4NIDZI2O.js';
+export { isSnapshotEnabled, page } from './chunk-4NIDZI2O.js';
 export * from 'vitest-plugin-vis';
 import { hasImageSnapshotAction, toTaskId } from 'vitest-plugin-vis/client-api';
 

package/dist/vitest-setup.js

@@ -1,4 +1,4 @@
-import { commands, getCurrentTest, isSnapshotEnabled } from './chunk-O5DYZDLL.js';
+import { commands, getCurrentTest, isSnapshotEnabled } from './chunk-4NIDZI2O.js';
 import { createVis } from 'vitest-plugin-vis/setup';
 import { setAutoSnapshotOptions } from 'vitest-plugin-vis';
 export { setAutoSnapshotOptions } from 'vitest-plugin-vis';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-vis",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Storybook Vitest visual testing addon",
   "keywords": [
     "image-snapshot",
@@ -67,7 +67,7 @@
     "memoize": "^10.1.0",
     "pathe": "^2.0.3",
     "type-plus": "8.0.0-beta.7",
-    "vitest-plugin-vis": "^3.0.1"
+    "vitest-plugin-vis": "^3.1.0"
   },
   "devDependencies": {
     "@repobuddy/storybook": "^0.13.0",
@@ -103,7 +103,7 @@
     "typescript": "^5.7.2",
     "vite": "^6.2.3",
     "vitest": "^3.0.9",
-    "vitest-browser-react": "^0.1.1",
+    "vitest-browser-react": "^0.2.0",
     "webdriverio": "latest",
     "zx": "^8.0.0"
   },

package/src/client/page/to_match_image_snapshot.ts

@@ -0,0 +1,19 @@
+import {
+	type ComparisonMethod,
+	type ToMatchPageImageSnapshotOptions,
+	matchPageImageSnapshotAction,
+	toTaskId,
+} from 'vitest-plugin-vis/client-api'
+import { commands, getCurrentTest } from '../vitest_proxy.ts'
+
+export function toMatchImageSnapshot<M extends ComparisonMethod = 'pixel'>(
+	options?: ToMatchPageImageSnapshotOptions<M> | undefined,
+) {
+	const test = getCurrentTest()
+
+	/* v8 ignore start: stub as success when not in a test (e.g. in a story) */
+	if (!test) return Promise.resolve()
+	/* v8 ignore end */
+
+	return matchPageImageSnapshotAction(commands, toTaskId(test), options)
+}

package/src/client/vitest_proxy.ts

@@ -1,11 +1,13 @@
-import type { BrowserCommands } from '@vitest/browser/context'
+import type { BrowserCommands, BrowserPage } from '@vitest/browser/context'
 import type { SnapshotTestMeta } from 'vitest-plugin-vis/client-api'
+import { toMatchImageSnapshot } from './page/to_match_image_snapshot.ts'
 
 let browserContext: Awaited<typeof import('@vitest/browser/context')>
 let vitestSuite: Awaited<typeof import('vitest/suite')>
 
 if ((globalThis as any).__vitest_browser__) {
 	import('@vitest/browser/context').then((m) => {
+		m.page.extend({ toMatchImageSnapshot })
 		browserContext = m
 	})
 	import('vitest/suite').then((m) => {
@@ -13,6 +15,16 @@ if ((globalThis as any).__vitest_browser__) {
 	})
 }
 
+export const page = new Proxy<BrowserPage>({} as any, {
+	get(_target, prop) {
+		const r = (browserContext?.page as any)?.[prop]
+		if (prop === 'toMatchImageSnapshot' && r === undefined) {
+			return () => {}
+		}
+		return r
+	},
+})
+
 export const commands = new Proxy<BrowserCommands>({} as any, {
 	get(_target, prop) {
 		return (browserContext?.commands as any)?.[prop]

package/src/index.ts

@@ -2,8 +2,12 @@
 import './client/storybook/expect_extend.ts'
 import './shared/global_matcher_augment.ts'
 
+import { page } from './client/vitest_proxy.ts'
+
 export * from 'vitest-plugin-vis'
 export * from './client/has_image_snapshot.ts'
 export * from './client/storybook/param.ts'
 export * from './client/storybook/tags.ts'
 export * from './server/vis_options.ts'
+
+export { page }

package/dist/chunk-O5DYZDLL.js

@@ -1,37 +0,0 @@
-import { expect } from '@storybook/test';
-import { success, matchImageSnapshotAction, toTaskId } from 'vitest-plugin-vis/client-api';
-
-// src/client/vitest_proxy.ts
-var browserContext;
-var vitestSuite;
-if (globalThis.__vitest_browser__) {
-  import('@vitest/browser/context').then((m) => {
-    browserContext = m;
-  });
-  import('vitest/suite').then((m) => {
-    vitestSuite = m;
-  });
-}
-var commands = new Proxy({}, {
-  get(_target, prop) {
-    return browserContext?.commands?.[prop];
-  }
-});
-var getCurrentTest = () => vitestSuite?.getCurrentTest();
-function toMatchImageSnapshot(subject, options) {
-  const test = getCurrentTest();
-  if (!test) return Promise.resolve(success);
-  return matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success);
-}
-
-// src/client/storybook/expect_extend.ts
-expect.extend({ toMatchImageSnapshot });
-
-// src/client/storybook/tags.ts
-function isSnapshotEnabled(tags) {
-  return tags.lastIndexOf("!snapshot") < tags.lastIndexOf("snapshot");
-}
-
-export { commands, getCurrentTest, isSnapshotEnabled };
-//# sourceMappingURL=chunk-O5DYZDLL.js.map
-//# sourceMappingURL=chunk-O5DYZDLL.js.map

package/dist/chunk-O5DYZDLL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/client/vitest_proxy.ts","../src/client/expect/to_match_image_snapshot.ts","../src/client/storybook/expect_extend.ts","../src/client/storybook/tags.ts"],"names":[],"mappings":";;;;AAGA,IAAI,cAAA;AACJ,IAAI,WAAA;AAEJ,IAAK,WAAmB,kBAAoB,EAAA;AAC3C,EAAA,OAAO,yBAAyB,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAC7C,IAAiB,cAAA,GAAA,CAAA;AAAA,GACjB,CAAA;AACD,EAAA,OAAO,cAAc,CAAA,CAAE,IAAK,CAAA,CAAC,CAAM,KAAA;AAClC,IAAc,WAAA,GAAA,CAAA;AAAA,GACd,CAAA;AACF;AAEO,IAAM,QAAW,GAAA,IAAI,KAAuB,CAAA,EAAW,EAAA;AAAA,EAC7D,GAAA,CAAI,SAAS,IAAM,EAAA;AAClB,IAAQ,OAAA,cAAA,EAAgB,WAAmB,IAAI,CAAA;AAAA;AAEjD,CAAC;AAEY,IAAA,cAAA,GAAiB,MAC7B,WAAA,EAAa,cAAe;ACZtB,SAAS,oBAAA,CAKf,SACA,OACyB,EAAA;AACzB,EAAA,MAAM,OAAO,cAAe,EAAA;AAG5B,EAAA,IAAI,CAAC,IAAA,EAAa,OAAA,OAAA,CAAQ,QAAQ,OAAO,CAAA;AAGzC,EAAO,OAAA,wBAAA,CAAyB,QAAU,EAAA,QAAA,CAAS,IAAI,CAAA,EAAG,SAAS,OAAO,CAAA,CAAE,IAAK,CAAA,MAAM,OAAO,CAAA;AAC/F;;;ACtBA,MAAO,CAAA,MAAA,CAAO,EAAE,oBAAA,EAAsB,CAAA;;;ACH/B,SAAS,kBAAkB,IAAgB,EAAA;AACjD,EAAA,OAAO,KAAK,WAAY,CAAA,WAAW,CAAI,GAAA,IAAA,CAAK,YAAY,UAAU,CAAA;AACnE","file":"chunk-O5DYZDLL.js","sourcesContent":["import type { BrowserCommands } from '@vitest/browser/context'\nimport type { SnapshotTestMeta } from 'vitest-plugin-vis/client-api'\n\nlet browserContext: Awaited<typeof import('@vitest/browser/context')>\nlet vitestSuite: Awaited<typeof import('vitest/suite')>\n\nif ((globalThis as any).__vitest_browser__) {\n\timport('@vitest/browser/context').then((m) => {\n\t\tbrowserContext = m\n\t})\n\timport('vitest/suite').then((m) => {\n\t\tvitestSuite = m\n\t})\n}\n\nexport const commands = new Proxy<BrowserCommands>({} as any, {\n\tget(_target, prop) {\n\t\treturn (browserContext?.commands as any)?.[prop]\n\t},\n})\n\nexport const getCurrentTest = () =>\n\tvitestSuite?.getCurrentTest() as (ReturnType<typeof vitestSuite.getCurrentTest> & SnapshotTestMeta) | undefined\n","import type { AsyncExpectationResult } from '@vitest/expect'\nimport {\n\ttype ComparisonMethod,\n\ttype ToMatchImageSnapshotOptions,\n\tmatchImageSnapshotAction,\n\tsuccess,\n\ttoTaskId,\n} from 'vitest-plugin-vis/client-api'\nimport { commands, getCurrentTest } from '../vitest_proxy.ts'\n\nexport function toMatchImageSnapshot<M extends ComparisonMethod>(\n\t/**\n\t * The element or locator to take the snapshot of,\n\t * or the base64 value of the image to compare against.\n\t */\n\tsubject: any,\n\toptions?: ToMatchImageSnapshotOptions<M> | undefined,\n): AsyncExpectationResult {\n\tconst test = getCurrentTest()\n\n\t/* v8 ignore start: stub as success when not in a test (e.g. in a story) */\n\tif (!test) return Promise.resolve(success)\n\t/* v8 ignore end */\n\n\treturn matchImageSnapshotAction(commands, toTaskId(test), subject, options).then(() => success)\n}\n","import { expect } from '@storybook/test'\nimport { toMatchImageSnapshot } from '../expect/to_match_image_snapshot.ts'\n\nexpect.extend({ toMatchImageSnapshot })\n","export function isSnapshotEnabled(tags: string[]) {\n\treturn tags.lastIndexOf('!snapshot') < tags.lastIndexOf('snapshot')\n}\n"]}