feat: basic screenshot plugin, related #34

examples/vue3-screenshot/histoire.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'histoire'
+import { HstScreenshot } from '@histoire/plugin-screenshot'
+
+export default defineConfig({
+ plugins: [
+ HstScreenshot({
+ ignored: ({ file }) => file.includes('tailwind-tokens'),
+ }),
+ ],
+})

examples/vue3-screenshot/package.json

@@ -0,0 +1,19 @@
+{
+ "name": "histoire-example-vue3-screenshot",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "story:dev": "histoire dev",
+ "story:build": "histoire build",
+ "story:preview": "histoire preview"
+ },
+ "dependencies": {
+ "vue": "^3.2.31"
+ },
+ "devDependencies": {
+ "@histoire/plugin-screenshot": "workspace:*",
+ "@vitejs/plugin-vue": "^2.3.1",
+ "histoire": "workspace:*",
+ "vite": "^2.9.1"
+ }
+}

examples/vue3-screenshot/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+ plugins: [],
+}

examples/vue3-screenshot/src/components/InjectDemo.story.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import InjectDemo from './InjectDemo.vue'
+</script>
+
+<template>
+ <Story title="Story setup">
+ <Variant>
+ <InjectDemo />
+ </Variant>
+ </Story>
+</template>

examples/vue3-screenshot/src/components/InjectDemo.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+
+console.log('injecting demo')
+const demo = inject('demo')
+</script>
+
+<template>
+ <div class="demo">
+ {{ demo }}
+ </div>
+</template>

examples/vue3-screenshot/src/histoire.css

@@ -0,0 +1,12 @@
+.demo {
+ color: #10B981;
+}
+
+html.htw-dark {
+ background: #27272a ;
+ color: #e9e9ed;
+}
+
+.__histoire-sandbox input {
+ border: solid 1px #ccc;
+}

examples/vue3-screenshot/src/histoire.setup.ts

@@ -0,0 +1,6 @@
+import './histoire.css'
+import { defineSetupVue3 } from 'histoire/client'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+ app.provide('demo', 42)
+})

examples/vue3-screenshot/vite.config.ts

@@ -0,0 +1,22 @@
+/// <reference types="histoire" />
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+// @TODO investigate ESM errors when this is imported in vite.config.ts
+// https:/vitejs/vite/issues/7981
+// import { HstScreenshot } from '@histoire/plugin-screenshot'
+
+export default defineConfig({
+ plugins: [
+ vue(),
+ ],
+
+ histoire: {
+ // plugins: [
+ // HstScreenshot(),
+ // ],
+
+ // Alternative way of specifying histoire config
+ setupFile: '/src/histoire.setup.ts',
+ },
+})

packages/histoire-plugin-screenshot/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
+ }),
+ ],
+})
+```

packages/histoire-plugin-screenshot/package.json

@@ -0,0 +1,42 @@
+{
+ "name": "@histoire/plugin-screenshot",
+ "version": "0.2.5",
+ "description": "Histoire plugin to take screenshots for visual regression testing",
+ "license": "MIT",
+ "author": {
+ "name": "Guillaume Chau"
+ },
+ "repository": {
+ "url": "https:/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",
+ "scripts": {
+ "build": "rimraf dist && tsc -d",
+ "watch": "tsc -d -w --sourceMap"
+ },
+ "dependencies": {
+ "capture-website": "^2.3.0",
+ "defu": "^6.0.0",
+ "fs-extra": "^10.1.0",
+ "pathe": "^0.2.0"
+ },
+ "devDependencies": {
+ "histoire": "workspace:*",
+ "typescript": "^4.6.3"
+ },
+ "peerDependencies": {
+ "histoire": "^0.2.5"
+ }
+}

packages/histoire-plugin-screenshot/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.onRenderStory(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,
+ })
+ }
+ })
+ },
+ }
+}

packages/histoire-plugin-screenshot/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"
+ ]
+}