@histoire/plugin-screenshot 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Guillaume Chau
+
+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,20 @@
+# Histoire Screenshot visual regression testing
+
+```
+pnpm add -D @histoire/plugin-screenshot
+```
+
+Add the plugin in histoire config:
+
+```js
+import { defineConfig } from 'histoire'
+import { HstScreenshot } from '@histoire/plugin-screenshot'
+
+export default defineConfig({
+  plugins: [
+    HstScreenshot({
+      // Options here
+    }),
+  ],
+})
+```

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import type { Plugin } from 'histoire';
+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[];
+}
+export declare function HstScreenshot(options?: ScreenshotPluginOptions): Plugin;
+export {};

package/dist/index.js

@@ -0,0 +1,46 @@
+import path from 'pathe';
+import fs from 'fs-extra';
+import { defu } from 'defu';
+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: '@histoire/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) {
+                    await captureWebsite.file(url, path.join(finalOptions.saveFolder, `${story.id}-${variant.id}.png`), {
+                        overwrite: true,
+                        width: preset.width,
+                        height: preset.height,
+                        fullPage: true,
+                    });
+                }
+            });
+        },
+    };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@histoire/plugin-screenshot",
+  "version": "0.3.0",
+  "description": "Histoire plugin to take screenshots for visual regression testing",
+  "license": "MIT",
+  "author": {
+    "name": "Guillaume Chau"
+  },
+  "repository": {
+    "url": "https://github.com/Akryum/histoire.git",
+    "type": "git",
+    "directory": "packages/histoire-plugin-screenshot"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "capture-website": "^2.3.0",
+    "defu": "^6.0.0",
+    "fs-extra": "^10.1.0",
+    "pathe": "^0.2.0"
+  },
+  "devDependencies": {
+    "histoire": "0.3.0",
+    "typescript": "^4.6.3"
+  },
+  "peerDependencies": {
+    "histoire": "^0.3.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -d",
+    "watch": "tsc -d -w --sourceMap"
+  },
+  "readme": "# Histoire Screenshot visual regression testing\n\n```\npnpm add -D @histoire/plugin-screenshot\n```\n\nAdd the plugin in histoire config:\n\n```js\nimport { defineConfig } from 'histoire'\nimport { HstScreenshot } from '@histoire/plugin-screenshot'\n\nexport default defineConfig({\n  plugins: [\n    HstScreenshot({\n      // Options here\n    }),\n  ],\n})\n```\n"
+}

package/src/index.ts

@@ -0,0 +1,77 @@
+import path from 'pathe'
+import fs from 'fs-extra'
+import type { Plugin } from 'histoire'
+import { defu } from 'defu'
+
+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[]
+}
+
+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: '@histoire/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) {
+          await captureWebsite.file(url, path.join(finalOptions.saveFolder, `${story.id}-${variant.id}.png`), {
+            overwrite: true,
+            width: preset.width,
+            height: preset.height,
+            fullPage: true,
+          })
+        }
+      })
+    },
+  }
+}

package/tsconfig.json

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