@histoire/plugin-screenshot 0.15.7 → 0.15.9

package/README.md

@@ -18,3 +18,25 @@ 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
+
+```
+import { defineConfig } from 'histoire'
+import { HstScreenshot } from '@histoire/plugin-screenshot'
+
+export default defineConfig({
+  plugins: [
+    HstScreenshot({
+      launchOptionsArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
+    }),
+  ],
+})
+```
+

package/dist/index.d.ts

@@ -31,6 +31,10 @@ export interface ScreenshotPluginOptions {
      * Presets for each screenshot.
      */
     presets?: ScreenshotPresets[];
+    /**
+     * Args for puppeteer
+     */
+    launchOptionsArgs?: string[];
 }
 export declare function HstScreenshot(options?: ScreenshotPluginOptions): Plugin;
 export {};

package/dist/index.js

@@ -33,12 +33,19 @@ export function HstScreenshot(options = {}) {
                 }
                 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}-${preset.width}x${preset.height}.png`), {
+                    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

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/plugin-screenshot",
-  "version": "0.15.7",
+  "version": "0.15.9",
   "description": "Histoire plugin to take screenshots for visual regression testing",
   "license": "MIT",
   "author": {
@@ -31,10 +31,10 @@
   "devDependencies": {
     "@types/node": "^17.0.32",
     "typescript": "^4.9.5",
-    "histoire": "0.15.7"
+    "histoire": "0.15.9"
   },
   "peerDependencies": {
-    "histoire": "^0.15.7"
+    "histoire": "^0.15.8"
   },
   "scripts": {
     "build": "rimraf dist && tsc -d",

package/src/index.ts

@@ -2,6 +2,7 @@ import path from 'pathe'
 import fs from 'fs-extra'
 import type { Plugin } from 'histoire'
 import { defu } from 'defu'
+import type { FileOptions } from 'capture-website'
 
 interface ScreenshotPresets {
   /**
@@ -27,6 +28,10 @@ export interface ScreenshotPluginOptions {
    * Presets for each screenshot.
    */
   presets?: ScreenshotPresets[]
+  /**
+   * Args for puppeteer
+   */
+  launchOptionsArgs?: string[]
 }
 
 const defaultOptions: ScreenshotPluginOptions = {
@@ -64,12 +69,19 @@ export function HstScreenshot (options: ScreenshotPluginOptions = {}): Plugin {
         }
         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}-${preset.width}x${preset.height}.png`), {
+          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)
         }
       })
     },