@histoire/plugin-percy 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,30 @@
+# Histoire Screenshot with Percy for visual regression testing
+
+You need the [Perci CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy.
+
+
+```bash
+pnpm add -D @histoire/plugin-percy
+```
+
+Add the plugin in histoire config:
+
+```js
+import { defineConfig } from 'histoire'
+import { HstPercy } from '@histoire/plugin-percy'
+
+export default defineConfig({
+  plugins: [
+    HstPercy({
+      // Options here
+    }),
+  ],
+})
+```
+
+Then use the Percy CLI
+
+```bash
+# Replace `story:build` with the script to build the stories if you changed it
+percy exec pnpm run story:build
+```

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from 'histoire';
+export interface PercyPluginOptions {
+    /**
+     * Ignored stories.
+     */
+    ignored?: (payload: {
+        file: string;
+        story: {
+            title: string;
+        };
+        variant: {
+            id: string;
+            title: string;
+        };
+    }) => boolean;
+    /**
+     * Percy options.
+     */
+    percyOptions?: any;
+}
+export declare function HstPercy(options?: PercyPluginOptions): Plugin;

package/dist/index.js

@@ -0,0 +1,61 @@
+import { defu } from 'defu';
+import path from 'pathe';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import { isPercyEnabled, fetchPercyDOM, postSnapshot } from '@percy/sdk-utils';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const defaultOptions = {
+    percyOptions: {},
+};
+export function HstPercy(options = {}) {
+    const finalOptions = defu(options, defaultOptions);
+    return {
+        name: '@histoire/plugin-percy',
+        onBuild: async (api) => {
+            if (!await isPercyEnabled()) {
+                return;
+            }
+            const { default: puppeteer } = await import('puppeteer');
+            const browser = await puppeteer.launch();
+            // Collect client and env info
+            const sdkPkg = require(path.join(__dirname, '../package.json'));
+            const puppeteerPkg = require('puppeteer/package.json');
+            const CLIENT_INFO = `${sdkPkg.name}/${sdkPkg.version}`;
+            const ENV_INFO = `${puppeteerPkg.name}/${puppeteerPkg.version}`;
+            api.onPreviewStory(async ({ file, story, variant, url }) => {
+                if (finalOptions.ignored?.({
+                    file,
+                    story: {
+                        title: story.title,
+                    },
+                    variant: {
+                        id: variant.id,
+                        title: variant.title,
+                    },
+                })) {
+                    return;
+                }
+                const page = await browser.newPage();
+                await page.goto(url);
+                const name = `${story.title} > ${variant.title}`;
+                await page.evaluate(await fetchPercyDOM());
+                const domSnapshot = await page.evaluate((opts) => {
+                    // @ts-expect-error window global var
+                    return window.PercyDOM.serialize(opts);
+                }, finalOptions.percyOptions);
+                await postSnapshot({
+                    ...finalOptions.percyOptions,
+                    environmentInfo: ENV_INFO,
+                    clientInfo: CLIENT_INFO,
+                    url: page.url(),
+                    domSnapshot,
+                    name,
+                });
+            });
+            api.onBuildEnd(async () => {
+                await browser.close();
+            });
+        },
+    };
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@histoire/plugin-percy",
+  "version": "0.3.0",
+  "description": "Histoire plugin to take screenshots with Percy for visual regression testing",
+  "license": "MIT",
+  "author": {
+    "name": "Guillaume Chau"
+  },
+  "repository": {
+    "url": "https://github.com/Akryum/histoire.git",
+    "type": "git",
+    "directory": "packages/histoire-plugin-percy"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": "./*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@percy/sdk-utils": "^1.1.0",
+    "defu": "^6.0.0",
+    "fs-extra": "^10.1.0",
+    "pathe": "^0.2.0",
+    "puppeteer": "^13.7.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 with Percy for visual regression testing\n\nYou need the [Perci CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy.\n\n\n```bash\npnpm add -D @histoire/plugin-percy\n```\n\nAdd the plugin in histoire config:\n\n```js\nimport { defineConfig } from 'histoire'\nimport { HstPercy } from '@histoire/plugin-percy'\n\nexport default defineConfig({\n  plugins: [\n    HstPercy({\n      // Options here\n    }),\n  ],\n})\n```\n\nThen use the Percy CLI\n\n```bash\n# Replace `story:build` with the script to build the stories if you changed it\npercy exec pnpm run story:build\n```\n"
+}

package/src/index.ts

@@ -0,0 +1,83 @@
+import type { Plugin } from 'histoire'
+import { defu } from 'defu'
+import path from 'pathe'
+import { fileURLToPath } from 'url'
+import { createRequire } from 'module'
+import { isPercyEnabled, fetchPercyDOM, postSnapshot } from '@percy/sdk-utils'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const require = createRequire(import.meta.url)
+
+export interface PercyPluginOptions {
+  /**
+   * Ignored stories.
+   */
+  ignored?: (payload: { file: string, story: { title: string }, variant: { id: string, title: string } }) => boolean
+  /**
+   * Percy options.
+   */
+  percyOptions?: any
+}
+
+const defaultOptions: PercyPluginOptions = {
+  percyOptions: {},
+}
+
+export function HstPercy (options: PercyPluginOptions = {}): Plugin {
+  const finalOptions: PercyPluginOptions = defu(options, defaultOptions)
+  return {
+    name: '@histoire/plugin-percy',
+
+    onBuild: async api => {
+      if (!await isPercyEnabled()) {
+        return
+      }
+
+      const { default: puppeteer } = await import('puppeteer')
+      const browser = await puppeteer.launch()
+
+      // Collect client and env info
+      const sdkPkg = require(path.join(__dirname, '../package.json'))
+      const puppeteerPkg = require('puppeteer/package.json')
+      const CLIENT_INFO = `${sdkPkg.name}/${sdkPkg.version}`
+      const ENV_INFO = `${puppeteerPkg.name}/${puppeteerPkg.version}`
+
+      api.onPreviewStory(async ({ file, story, variant, url }) => {
+        if (finalOptions.ignored?.({
+          file,
+          story: {
+            title: story.title,
+          },
+          variant: {
+            id: variant.id,
+            title: variant.title,
+          },
+        })) {
+          return
+        }
+
+        const page = await browser.newPage()
+        await page.goto(url)
+
+        const name = `${story.title} > ${variant.title}`
+        await page.evaluate(await fetchPercyDOM())
+        const domSnapshot = await page.evaluate((opts) => {
+          // @ts-expect-error window global var
+          return window.PercyDOM.serialize(opts)
+        }, finalOptions.percyOptions)
+        await postSnapshot({
+          ...finalOptions.percyOptions,
+          environmentInfo: ENV_INFO,
+          clientInfo: CLIENT_INFO,
+          url: page.url(),
+          domSnapshot,
+          name,
+        })
+      })
+
+      api.onBuildEnd(async () => {
+        await browser.close()
+      })
+    },
+  }
+}

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"
+  ]
+}