@fohte/storybook-addon 0.1.5 → 0.1.7

package/README.md

@@ -78,6 +78,8 @@ initialize({
 
 Builds a Vitest browser-mode project that runs Storybook stories through [`@storybook/addon-vitest`](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) and captures a screenshot of each with [`@storycap-testrun/browser`](https://github.com/reg-viz/storycap-testrun), patched to shorten storycap's hardcoded 500ms network-idle wait to 100ms and to fix a tiling bug in its fullPage capture (`clip` staying anchored to the top of the viewport instead of following the browser's clamped scroll position, which duplicated content and cut off the bottom of any story taller than the viewport).
 
+`viewport` applies for the whole test, not just the screenshot: mount and `play()` render at it too. `@storybook/addon-vitest` would otherwise silently mount/run every story at its own fixed 1200x900 default instead.
+
 ```ts
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'

package/lib/checks/unhandled-api-request-check.js

@@ -71,18 +71,23 @@ const PENDING_FETCH_TIMEOUT_MS = 2000;
 // every other check.
 export async function waitForPendingApiRequests() {
     const { pendingFetches } = globalState();
-    const deadline = Date.now() + PENDING_FETCH_TIMEOUT_MS;
+    // performance.now(), not Date.now(): a consuming app's test setup may call
+    // vi.setSystemTime() without vi.useFakeTimers() (e.g. to pin screenshots to
+    // a fixed date), which freezes Date.now() while leaving setTimeout on the
+    // real clock — Date.now() < deadline would then stay true forever and this
+    // loop would never exit on its own.
+    const deadline = performance.now() + PENDING_FETCH_TIMEOUT_MS;
     // A tracked fetch's own resolution can synchronously trigger another
     // tracked fetch (e.g. fetch(user).then(() => fetch(user.posts))) — re-check
     // pendingFetches after each round instead of racing a single snapshot of
     // it, so a same-story follow-up fetch is also waited for, within the same
     // overall deadline.
-    while (pendingFetches.size > 0 && Date.now() < deadline) {
+    while (pendingFetches.size > 0 && performance.now() < deadline) {
         // Each iteration re-reads pendingFetches, which the previous iteration's
         // wait may have grown, so this can't be hoisted out of the loop.
         await Promise.race([
             Promise.all(pendingFetches),
-            new Promise((resolve) => setTimeout(resolve, deadline - Date.now())),
+            new Promise((resolve) => setTimeout(resolve, deadline - performance.now())),
         ]);
     }
     if (pendingFetches.size > 0) {

package/lib/vitest-plugin.d.ts

@@ -48,6 +48,12 @@ export declare function createStorybookProject({ name, rootDir, viewport, screen
             }[];
         };
         setupFiles: string[];
+        provide: {
+            fohteStorybookAddonViewport: {
+                width: number;
+                height: number;
+            };
+        };
         maxWorkers?: number;
         sequence?: {
             groupOrder: number;

package/lib/vitest-plugin.js

@@ -1,4 +1,6 @@
+import { existsSync } from 'node:fs';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 import storycap from '@storycap-testrun/browser/vitest-plugin';
 import { playwright } from '@vitest/browser-playwright';
@@ -47,6 +49,17 @@ export function createStorybookProject({ name, rootDir, viewport, screenshotsSub
     const configDir = path.join(rootDir, '.storybook');
     const screenshotsDir = path.join(rootDir, '__screenshots__', screenshotsSubdir);
     const maxWorkers = process.env['CI'] != null ? ciMaxWorkers : undefined;
+    const viewportSetupFile = fileURLToPath(import.meta.resolve('#vitest-viewport-setup.js'));
+    // `import.meta.resolve` maps `#*.js` straight to `./lib/*.js` (this
+    // package's own build output) without checking the file exists — running
+    // against a fresh clone or a stale `lib/` (before `pnpm run build`, or
+    // after editing vitest-viewport-setup.ts without rebuilding) would
+    // otherwise leave Vitest to fail on a missing/stale setupFile with no clue
+    // this is why.
+    if (!existsSync(viewportSetupFile)) {
+        // eslint-disable-next-line no-restricted-syntax -- config-load-time invariant check, mirrors storycapNetworkIdle's fail-fast pattern above
+        throw new Error(`createStorybookProject: ${viewportSetupFile} not found. Run \`pnpm run build\` first.`);
+    }
     const plugins = [
         storycapNetworkIdle,
         storybookTest({
@@ -107,7 +120,17 @@ export function createStorybookProject({ name, rootDir, viewport, screenshotsSub
                 headless: true,
                 instances: [{ browser: 'chromium' }],
             },
-            setupFiles,
+            // @storybook/addon-vitest overrides the story viewport to its own
+            // 1200x900 default right before mount/play() unless
+            // parameters.viewport/globals.viewport are set — vitest-viewport-setup.ts
+            // sets them via setProjectAnnotations() so mount/play() see the same
+            // `viewport` as the Playwright page and the screenshot above. It must
+            // run after the consumer's own setupFiles in case any of them also
+            // call setProjectAnnotations().
+            setupFiles: [...setupFiles, viewportSetupFile],
+            provide: {
+                fohteStorybookAddonViewport: viewport,
+            },
         },
     };
 }

package/lib/vitest-viewport-setup.d.ts

@@ -0,0 +1,10 @@
+declare module 'vitest' {
+    interface ProvidedContext {
+        fohteStorybookAddonViewport: {
+            width: number;
+            height: number;
+        };
+    }
+}
+export {};
+//# sourceMappingURL=vitest-viewport-setup.d.ts.map

package/lib/vitest-viewport-setup.js

@@ -0,0 +1,50 @@
+import { setProjectAnnotations } from 'storybook/preview-api';
+import { getProjectAnnotations } from 'virtual:/@storybook/builder-vite/project-annotations.js';
+import { beforeEach, inject } from 'vitest';
+const VIEWPORT_NAME = '__fohteStorybookAddonViewport';
+const { width, height } = inject('fohteStorybookAddonViewport');
+// setProjectAnnotations() replaces the project annotations wholesale rather
+// than merging into them, so composing in the consumer's own
+// getProjectAnnotations() first is required — passing only the viewport
+// override below would drop the consumer's own preview.ts
+// renderer/decorators/loaders. Both are static per test file (the consumer's
+// preview.ts and this project's `viewport` don't change mid-run), so this is
+// computed once at setup-file top level rather than inside beforeEach below.
+const projectAnnotations = getProjectAnnotations();
+const viewportOverride = {
+    parameters: {
+        viewport: {
+            defaultViewport: VIEWPORT_NAME,
+            viewports: {
+                [VIEWPORT_NAME]: {
+                    name: 'createStorybookProject viewport',
+                    styles: {
+                        width: `${String(width)}px`,
+                        height: `${String(height)}px`,
+                    },
+                },
+            },
+        },
+    },
+    initialGlobals: { viewport: { value: VIEWPORT_NAME } },
+};
+// @storybook/addon-vitest's own testStory() calls setViewport() right before
+// mount/play(), falling back to its built-in 1200x900 default whenever
+// parameters.viewport/globals.viewport aren't set — silently overriding the
+// `viewport` createStorybookProject() was given for the screenshot capture
+// itself. setProjectAnnotations() is the public integration point Storybook
+// added for exactly this in 10.3.
+//
+// The call itself runs in beforeEach, not at setup-file top level:
+// @storybook/addon-vitest always injects its own
+// internal/setup-file-with-project-annotations alongside consumer
+// setupFiles — its "already provisioned" detection only looks inside the
+// consumer's `.storybook` dir, which this file isn't in. That file's
+// top-level setProjectAnnotations(getProjectAnnotations()) call would run
+// after this file's own top level and silently wipe this override.
+// beforeEach always runs after every setupFile finishes loading, so calling
+// setProjectAnnotations() here instead wins regardless of setupFiles order.
+beforeEach(() => {
+    setProjectAnnotations([projectAnnotations, viewportOverride]);
+});
+//# sourceMappingURL=vitest-viewport-setup.js.map

package/package.json

@@ -59,12 +59,12 @@
     "@storybook/addon-vitest": "10.5.8",
     "@storybook/html-vite": "10.5.8",
     "@storycap-testrun/browser": "2.1.1",
-    "@tsconfig/node-lts": "24.0.0",
+    "@tsconfig/node-lts": "24.0.1",
     "@tsconfig/strictest": "2.0.8",
     "@types/jsdom": "30.0.0",
     "@types/node": "24.13.3",
     "@vitest/browser-playwright": "4.1.10",
-    "concurrently": "10.0.4",
+    "concurrently": "10.0.5",
     "eslint": "10.6.0",
     "jsdom": "30.0.1",
     "playwright": "1.62.1",
@@ -74,7 +74,7 @@
     "typescript": "6.0.3",
     "vitest": "4.1.10"
   },
-  "version": "0.1.5",
+  "version": "0.1.7",
   "scripts": {
     "clean": "rimraf lib tsconfig.tsbuildinfo",
     "prebuild": "pnpm run clean",