@poveste/plugin-screenshot 0.6.1 → 0.8.0

package/README.md

@@ -1,10 +1,10 @@
 # Poveste Screenshot visual regression testing
 
-```
+```bash
 pnpm add -D @poveste/plugin-screenshot
 ```
 
-Add the plugin in histoire config:
+Add the plugin in your Poveste config:
 
 ```js
 import { HstScreenshot } from '@poveste/plugin-screenshot'
@@ -21,14 +21,13 @@ export default defineConfig({
 
 ## 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
+If you get `No usable sandbox!` or `Running as root without --no-sandbox is not
+supported`, set up sandboxing properly on your Linux instance. Alternatively, if you
+completely trust the content being captured, you can disable it (strongly discouraged):
 
-```
-import { defineConfig } from 'poveste'
+```js
 import { HstScreenshot } from '@poveste/plugin-screenshot'
+import { defineConfig } from 'poveste'
 
 export default defineConfig({
   plugins: [
@@ -38,3 +37,5 @@ export default defineConfig({
   ],
 })
 ```
+
+[Documentation](https://poveste.dev)

package/package.json

@@ -1,17 +1,34 @@
 {
   "name": "@poveste/plugin-screenshot",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Poveste plugin to take screenshots for visual regression testing",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-plugin-screenshot"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "histoire",
+    "storybook",
+    "component-playground",
+    "component-explorer",
+    "stories",
+    "styleguide",
+    "design-system",
+    "vite",
+    "screenshot",
+    "visual-regression",
+    "testing",
+    "plugin"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -22,8 +39,14 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "peerDependencies": {
-    "poveste": "^0.6.1"
+    "poveste": "^0.8.0"
   },
   "dependencies": {
     "capture-website": "^4.2.0",
@@ -34,7 +57,7 @@
   "devDependencies": {
     "@types/node": "^22.10.1",
     "typescript": "5.6.3",
-    "poveste": "0.6.1"
+    "poveste": "0.8.0"
   },
   "scripts": {
     "build": "rimraf dist && tsc -d",

package/src/index.ts

@@ -1,89 +0,0 @@
-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: '.poveste/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

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    // Volar
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "rootDir": "src",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "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"
-  ]
-}