@poveste/plugin-screenshot 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 Guillaume Chau (original "histoire" project)
+Copyright (c) 2026 Sorin Gitlan (poveste fork)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# Poveste Screenshot visual regression testing
+
+```
+pnpm add -D @poveste/plugin-screenshot
+```
+
+Add the plugin in histoire config:
+
+```js
+import { HstScreenshot } from '@poveste/plugin-screenshot'
+import { defineConfig } from 'poveste'
+
+export default defineConfig({
+  plugins: [
+    HstScreenshot({
+      // Options here
+    }),
+  ],
+})
+```
+
+## Setting Up Chrome Linux Sandbox
+
+If you get an error like No usable sandbox! or Running as root without --no-sandbox is not supported, you need to properly set up sandboxing on your Linux instance.
+Alternatively, if you completely trust the content, you can disable sandboxing (strongly discouraged):
+
+ref. https://github.com/sindresorhus/capture-website#faq
+
+```
+import { defineConfig } from 'poveste'
+import { HstScreenshot } from '@poveste/plugin-screenshot'
+
+export default defineConfig({
+  plugins: [
+    HstScreenshot({
+      launchOptionsArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
+    }),
+  ],
+})
+```

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import type { Plugin } from 'poveste';
+interface ScreenshotPresets {
+    /**
+     * Screenshot width.
+     */
+    width?: number;
+    /**
+     * Screenshot height.
+     */
+    height?: number;
+}
+export interface ScreenshotPluginOptions {
+    /**
+     * Folder were screenshots will be saved.
+     */
+    saveFolder?: string;
+    /**
+     * Ignored stories.
+     */
+    ignored?: (payload: {
+        file: string;
+        story: {
+            title: string;
+        };
+        variant: {
+            id: string;
+            title: string;
+        };
+    }) => boolean;
+    /**
+     * Presets for each screenshot.
+     */
+    presets?: ScreenshotPresets[];
+    /**
+     * Args for puppeteer
+     */
+    launchOptionsArgs?: string[];
+}
+export declare function HstScreenshot(options?: ScreenshotPluginOptions): Plugin;
+export {};

package/dist/index.js

@@ -0,0 +1,53 @@
+import { defu } from 'defu';
+import fs from 'fs-extra';
+import path from 'pathe';
+const defaultOptions = {
+    saveFolder: '.histoire/screenshots',
+    presets: [],
+};
+export function HstScreenshot(options = {}) {
+    const finalOptions = defu(options, defaultOptions);
+    if (!finalOptions.presets.length) {
+        finalOptions.presets.push({
+            width: 1280,
+            height: 800,
+        });
+    }
+    return {
+        name: '@poveste/plugin-screenshot',
+        onBuild: async (api) => {
+            const { default: captureWebsite } = await import('capture-website');
+            await fs.ensureDir(finalOptions.saveFolder);
+            api.onPreviewStory(async ({ file, story, variant, url }) => {
+                if (finalOptions.ignored?.({
+                    file,
+                    story: {
+                        title: story.title,
+                    },
+                    variant: {
+                        id: variant.id,
+                        title: variant.title,
+                    },
+                })) {
+                    return;
+                }
+                console.log('Rendering screenshot for', file, 'title:', story.title, 'variant:', variant.id, 'title:', variant.title);
+                for (const preset of finalOptions.presets) {
+                    const launchOptions = finalOptions.launchOptionsArgs
+                        ? {
+                            args: finalOptions.launchOptionsArgs,
+                        }
+                        : {};
+                    const captureWebsiteFileOptions = {
+                        overwrite: true,
+                        width: preset.width,
+                        height: preset.height,
+                        fullPage: true,
+                        launchOptions,
+                    };
+                    await captureWebsite.file(url, path.join(finalOptions.saveFolder, `${story.id}-${variant.id}-${preset.width}x${preset.height}.png`), captureWebsiteFileOptions);
+                }
+            });
+        },
+    };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@poveste/plugin-screenshot",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Poveste plugin to take screenshots for visual regression testing",
+  "author": {
+    "name": "Sorin Gitlan"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/poveste-dev/poveste.git",
+    "type": "git",
+    "directory": "packages/poveste-plugin-screenshot"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "poveste": "^0.1.0"
+  },
+  "dependencies": {
+    "capture-website": "^4.2.0",
+    "defu": "^6.1.4",
+    "fs-extra": "^11.2.0",
+    "pathe": "^1.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "typescript": "5.6.3",
+    "poveste": "0.1.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -d",
+    "watch": "tsc -d -w --sourceMap"
+  }
+}

package/src/index.ts

@@ -0,0 +1,89 @@
+import type { FileOptions } from 'capture-website'
+import type { Plugin } from 'poveste'
+import { defu } from 'defu'
+import fs from 'fs-extra'
+import path from 'pathe'
+
+interface ScreenshotPresets {
+  /**
+   * Screenshot width.
+   */
+  width?: number
+  /**
+   * Screenshot height.
+   */
+  height?: number
+}
+
+export interface ScreenshotPluginOptions {
+  /**
+   * Folder were screenshots will be saved.
+   */
+  saveFolder?: string
+  /**
+   * Ignored stories.
+   */
+  ignored?: (payload: { file: string, story: { title: string }, variant: { id: string, title: string } }) => boolean
+  /**
+   * Presets for each screenshot.
+   */
+  presets?: ScreenshotPresets[]
+  /**
+   * Args for puppeteer
+   */
+  launchOptionsArgs?: string[]
+}
+
+const defaultOptions: ScreenshotPluginOptions = {
+  saveFolder: '.histoire/screenshots',
+  presets: [],
+}
+
+export function HstScreenshot(options: ScreenshotPluginOptions = {}): Plugin {
+  const finalOptions: ScreenshotPluginOptions = defu(options, defaultOptions)
+  if (!finalOptions.presets.length) {
+    finalOptions.presets.push({
+      width: 1280,
+      height: 800,
+    })
+  }
+  return {
+    name: '@poveste/plugin-screenshot',
+
+    onBuild: async (api) => {
+      const { default: captureWebsite } = await import('capture-website')
+      await fs.ensureDir(finalOptions.saveFolder)
+
+      api.onPreviewStory(async ({ file, story, variant, url }) => {
+        if (finalOptions.ignored?.({
+          file,
+          story: {
+            title: story.title,
+          },
+          variant: {
+            id: variant.id,
+            title: variant.title,
+          },
+        })) {
+          return
+        }
+        console.log('Rendering screenshot for', file, 'title:', story.title, 'variant:', variant.id, 'title:', variant.title)
+        for (const preset of finalOptions.presets) {
+          const launchOptions = finalOptions.launchOptionsArgs
+            ? {
+                args: finalOptions.launchOptionsArgs,
+              }
+            : {}
+          const captureWebsiteFileOptions: FileOptions = {
+            overwrite: true,
+            width: preset.width,
+            height: preset.height,
+            fullPage: true,
+            launchOptions,
+          }
+          await captureWebsite.file(url, path.join(finalOptions.saveFolder, `${story.id}-${variant.id}-${preset.width}x${preset.height}.png`), captureWebsiteFileOptions)
+        }
+      })
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}