storybook-onbook-plugin 0.2.1 → 0.2.3

package/dist/screenshot-service/index.js

@@ -1,5 +1,213 @@
-// Main API
-export { generateAllScreenshots } from './screenshot-service.js';
-// Re-export screenshot utilities
-export { closeBrowser } from './utils/browser/index.js';
-export { generateScreenshot, getScreenshotPath, screenshotExists, } from './utils/screenshot/index.js';
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { chromium } from 'playwright';
+
+// src/utils/fileSystem/fileSystem.ts
+var CACHE_DIR = path.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path.join(CACHE_DIR, "manifest.json");
+var VIEWPORT_WIDTH = 1920;
+var VIEWPORT_HEIGHT = 1080;
+var MIN_COMPONENT_WIDTH = 420;
+var MIN_COMPONENT_HEIGHT = 280;
+
+// src/utils/fileSystem/fileSystem.ts
+function ensureCacheDirectories() {
+  if (!fs.existsSync(CACHE_DIR)) {
+    fs.mkdirSync(CACHE_DIR, { recursive: true });
+  }
+  if (!fs.existsSync(SCREENSHOTS_DIR)) {
+    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  }
+}
+function computeFileHash(filePath) {
+  if (!fs.existsSync(filePath)) {
+    return "";
+  }
+  const content = fs.readFileSync(filePath, "utf-8");
+  return crypto.createHash("sha256").update(content).digest("hex");
+}
+function loadManifest() {
+  if (fs.existsSync(MANIFEST_PATH)) {
+    const content = fs.readFileSync(MANIFEST_PATH, "utf-8");
+    return JSON.parse(content);
+  }
+  return { stories: {} };
+}
+function saveManifest(manifest) {
+  ensureCacheDirectories();
+  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+}
+function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
+  const manifest = loadManifest();
+  manifest.stories[storyId] = {
+    fileHash,
+    lastGenerated: (/* @__PURE__ */ new Date()).toISOString(),
+    sourcePath,
+    screenshots: {
+      light: `screenshots/${storyId}/light.png`,
+      dark: `screenshots/${storyId}/dark.png`
+    },
+    boundingBox: boundingBox ?? void 0
+  };
+  saveManifest(manifest);
+}
+var browser = null;
+async function getBrowser() {
+  if (!browser) {
+    browser = await chromium.launch({
+      headless: true
+    });
+  }
+  return browser;
+}
+async function closeBrowser() {
+  if (browser) {
+    try {
+      await browser.close();
+    } catch (error) {
+      console.error("Error closing browser:", error);
+    } finally {
+      browser = null;
+    }
+  }
+}
+function getScreenshotPath(storyId, theme) {
+  const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+  return path.join(storyDir, `${theme}.png`);
+}
+function screenshotExists(storyId, theme) {
+  const screenshotPath = getScreenshotPath(storyId, theme);
+  return fs.existsSync(screenshotPath);
+}
+async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006") {
+  const browser2 = await getBrowser();
+  const context = await browser2.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  try {
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+    await page.goto(url, { timeout: 15e3 });
+    await page.waitForLoadState("domcontentloaded");
+    await page.waitForLoadState("load");
+    await page.waitForLoadState("networkidle");
+    await page.evaluate(() => document.fonts.ready);
+    await page.evaluate(async () => {
+      const images = document.querySelectorAll("img");
+      await Promise.all(
+        Array.from(images).map((img) => {
+          if (img.complete) return Promise.resolve();
+          return new Promise((resolve) => {
+            img.addEventListener("load", resolve);
+            img.addEventListener("error", resolve);
+          });
+        })
+      );
+    });
+    const contentBounds = await page.evaluate(() => {
+      const root = document.querySelector("#storybook-root");
+      if (!root) return null;
+      const children = root.querySelectorAll("*");
+      if (children.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      children.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        minX = Math.min(minX, rect.left);
+        minY = Math.min(minY, rect.top);
+        maxX = Math.max(maxX, rect.right);
+        maxY = Math.max(maxY, rect.bottom);
+      });
+      if (minX === Infinity) return null;
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    let screenshotBuffer;
+    let resultBoundingBox = null;
+    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
+      const PADDING = 20;
+      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+      resultBoundingBox = {
+        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
+        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
+      };
+      screenshotBuffer = await page.screenshot({
+        type: "png",
+        clip: {
+          x: Math.max(0, contentBounds.x - 10),
+          y: Math.max(0, contentBounds.y - 10),
+          width: clippedWidth,
+          height: clippedHeight
+        }
+      });
+    } else {
+      screenshotBuffer = await page.screenshot({ type: "png" });
+    }
+    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox };
+  } finally {
+    await context.close();
+  }
+}
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006") {
+  try {
+    ensureCacheDirectories();
+    const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+    if (!fs.existsSync(storyDir)) {
+      fs.mkdirSync(storyDir, { recursive: true });
+    }
+    const screenshotPath = getScreenshotPath(storyId, theme);
+    const { buffer, boundingBox } = await captureScreenshotBuffer(
+      storyId,
+      theme,
+      VIEWPORT_WIDTH,
+      VIEWPORT_HEIGHT,
+      storybookUrl
+    );
+    fs.writeFileSync(screenshotPath, buffer);
+    return { path: screenshotPath, boundingBox };
+  } catch (error) {
+    console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
+    return null;
+  }
+}
+
+// src/screenshot-service/screenshot-service.ts
+async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006") {
+  console.log(`Generating screenshots for ${stories.length} stories...`);
+  const BATCH_SIZE = 10;
+  const batches = [];
+  for (let i = 0; i < stories.length; i += BATCH_SIZE) {
+    batches.push(stories.slice(i, i + BATCH_SIZE));
+  }
+  let completed = 0;
+  for (const batch of batches) {
+    await Promise.all(
+      batch.map(async (story) => {
+        const [lightResult, darkResult] = await Promise.all([
+          generateScreenshot(story.id, "light", storybookUrl),
+          generateScreenshot(story.id, "dark", storybookUrl)
+        ]);
+        if (lightResult && darkResult) {
+          const fileHash = computeFileHash(story.importPath);
+          updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+        }
+        completed++;
+        console.log(
+          `[${completed}/${stories.length}] Generated screenshots for ${story.id}`
+        );
+      })
+    );
+  }
+  await closeBrowser();
+  console.log("Screenshot generation complete!");
+}
+
+export { closeBrowser, generateAllScreenshots, generateScreenshot, getScreenshotPath, screenshotExists };

package/dist/screenshot-service/utils/browser/index.d.ts

@@ -1,2 +1,12 @@
-export { closeBrowser, getBrowser } from './browser.js';
-//# sourceMappingURL=index.d.ts.map
+import { Browser } from 'playwright';
+
+/**
+ * Initialize browser instance
+ */
+declare function getBrowser(): Promise<Browser>;
+/**
+ * Close browser instance
+ */
+declare function closeBrowser(): Promise<void>;
+
+export { closeBrowser, getBrowser };

package/dist/screenshot-service/utils/browser/index.js

@@ -1 +1,25 @@
-export { closeBrowser, getBrowser } from './browser.js';
+import { chromium } from 'playwright';
+
+// src/screenshot-service/utils/browser/browser.ts
+var browser = null;
+async function getBrowser() {
+  if (!browser) {
+    browser = await chromium.launch({
+      headless: true
+    });
+  }
+  return browser;
+}
+async function closeBrowser() {
+  if (browser) {
+    try {
+      await browser.close();
+    } catch (error) {
+      console.error("Error closing browser:", error);
+    } finally {
+      browser = null;
+    }
+  }
+}
+
+export { closeBrowser, getBrowser };

package/package.json

@@ -1,22 +1,38 @@
 {
   "name": "storybook-onbook-plugin",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "bin": {
-    "generate-screenshots": "./dist/cli/generate-screenshots.js"
+    "storybook-onbook-plugin": "./dist/cli/index.js"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
     },
     "./screenshot-service": {
-      "types": "./dist/screenshot-service/index.d.ts",
-      "import": "./dist/screenshot-service/index.js"
+      "types": "./src/screenshot-service/index.ts",
+      "default": "./src/screenshot-service/index.ts"
     },
     "./screenshot-service/browser": {
-      "types": "./dist/screenshot-service/utils/browser/index.d.ts",
-      "import": "./dist/screenshot-service/utils/browser/index.js"
+      "types": "./src/screenshot-service/utils/browser/index.ts",
+      "default": "./src/screenshot-service/utils/browser/index.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./screenshot-service": {
+        "types": "./dist/screenshot-service/index.d.ts",
+        "import": "./dist/screenshot-service/index.js"
+      },
+      "./screenshot-service/browser": {
+        "types": "./dist/screenshot-service/utils/browser/index.d.ts",
+        "import": "./dist/screenshot-service/utils/browser/index.js"
+      }
     }
   },
   "files": [
@@ -24,7 +40,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsup",
     "clean": "git clean -xdf .cache .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build",
@@ -35,6 +51,7 @@
     "@babel/parser": "^7.26.9",
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.26.9",
+    "@drizzle-team/brocli": "^0.11.0",
     "playwright": "^1.52.0"
   },
   "devDependencies": {
@@ -42,6 +59,8 @@
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",
+    "bun-types": "^1.3.5",
+    "tsup": "^8.5.1",
     "typescript": "5.8.3",
     "vite": "^6.3.5"
   },

package/dist/cli/generate-screenshots.d.ts

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-export {};
-//# sourceMappingURL=generate-screenshots.d.ts.map

package/dist/cli/generate-screenshots.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-screenshots.d.ts","sourceRoot":"","sources":["../../src/cli/generate-screenshots.ts"],"names":[],"mappings":""}

package/dist/cli/generate-screenshots.js

@@ -1,169 +0,0 @@
-#!/usr/bin/env node
-import { spawn } from 'node:child_process';
-import { generateAllScreenshots } from '../screenshot-service/index.js';
-import { getBrowser } from '../screenshot-service/utils/browser/index.js';
-function parseArgs() {
-    const args = process.argv.slice(2);
-    const options = {
-        url: 'http://localhost:6006',
-        startStorybook: false,
-        storybookCmd: 'npm run storybook',
-    };
-    for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-        const nextArg = args[i + 1];
-        if (arg === '--url' && nextArg) {
-            options.url = nextArg;
-            i++;
-        }
-        else if (arg === '--start') {
-            options.startStorybook = true;
-        }
-        else if (arg === '--cmd' && nextArg) {
-            options.storybookCmd = nextArg;
-            i++;
-        }
-        else if (arg === '--help' || arg === '-h') {
-            console.log(`
-Usage: generate-screenshots [options]
-
-Options:
-  --url <url>     Storybook URL (default: http://localhost:6006)
-  --start         Start Storybook before generating screenshots
-  --cmd <command> Command to start Storybook (default: npm run storybook)
-  --help, -h      Show this help message
-
-Examples:
-  # With Storybook already running
-  generate-screenshots
-
-  # Start Storybook automatically
-  generate-screenshots --start
-
-  # Custom URL
-  generate-screenshots --url http://localhost:9009
-
-  # Custom start command
-  generate-screenshots --start --cmd "bun run storybook"
-`);
-            process.exit(0);
-        }
-    }
-    return options;
-}
-async function fetchStoryIndex(url) {
-    const indexUrl = `${url}/index.json`;
-    try {
-        const response = await fetch(indexUrl);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch story index: ${response.statusText}`);
-        }
-        const data = (await response.json());
-        return Object.values(data.entries);
-    }
-    catch (error) {
-        console.error('Error fetching story index:', error);
-        console.error(`Make sure Storybook is running at ${url}`);
-        process.exit(1);
-    }
-}
-async function startStorybook(cmd) {
-    console.log(`🚀 Starting Storybook with: ${cmd}`);
-    const [command, ...args] = cmd.split(' ');
-    if (!command) {
-        throw new Error('Invalid storybook command');
-    }
-    const storybookProcess = spawn(command, [...args, '--', '--no-open'], {
-        cwd: process.cwd(),
-        stdio: 'pipe',
-        shell: true,
-    });
-    return new Promise((resolve, reject) => {
-        let started = false;
-        const timeout = setTimeout(() => {
-            if (!started) {
-                storybookProcess.kill();
-                reject(new Error('Storybook failed to start within 60 seconds'));
-            }
-        }, 60000);
-        storybookProcess.stdout?.on('data', (data) => {
-            const output = data.toString();
-            console.log(output);
-            if (output.includes('Local:') || output.includes('localhost:')) {
-                if (!started) {
-                    started = true;
-                    clearTimeout(timeout);
-                    console.log('✅ Storybook is ready!');
-                    resolve(storybookProcess);
-                }
-            }
-        });
-        storybookProcess.stderr?.on('data', (data) => {
-            console.error(data.toString());
-        });
-        storybookProcess.on('error', (error) => {
-            clearTimeout(timeout);
-            reject(error);
-        });
-    });
-}
-async function warmupStorybook(url, firstStoryId) {
-    console.log('🔥 Warming up Storybook...');
-    const browser = await getBrowser();
-    const context = await browser.newContext();
-    const page = await context.newPage();
-    try {
-        const warmupUrl = `${url}/iframe.html?id=${firstStoryId}&viewMode=story`;
-        await page.goto(warmupUrl, { timeout: 15000 });
-        await page.waitForLoadState('networkidle');
-        console.log('✅ Storybook warmed up');
-    }
-    catch (error) {
-        console.log('⚠️ Warmup had issues, proceeding anyway:', error);
-    }
-    finally {
-        await context.close();
-    }
-}
-async function main() {
-    const options = parseArgs();
-    console.log('📸 Generating Storybook screenshots...');
-    let storybookProcess = null;
-    try {
-        if (options.startStorybook) {
-            storybookProcess = await startStorybook(options.storybookCmd);
-        }
-        console.log(`Using Storybook URL: ${options.url}`);
-        // Fetch all stories
-        const stories = await fetchStoryIndex(options.url);
-        console.log(`Found ${stories.length} stories`);
-        const firstStory = stories[0];
-        if (!firstStory) {
-            throw new Error('No stories found');
-        }
-        // Warm up Storybook
-        await warmupStorybook(options.url, firstStory.id);
-        // Generate screenshots
-        await generateAllScreenshots(stories.map((story) => ({
-            id: story.id,
-            importPath: story.importPath,
-        })), options.url);
-        console.log('✅ Screenshot generation complete!');
-    }
-    catch (error) {
-        console.error('❌ Error during screenshot generation:', error);
-        throw error;
-    }
-    finally {
-        if (storybookProcess) {
-            console.log('🛑 Stopping Storybook...');
-            storybookProcess.kill();
-        }
-    }
-}
-main()
-    .then(() => process.exit(0))
-    .catch((error) => {
-    console.error('Fatal error:', error);
-    process.exit(1);
-});

package/dist/component-loc/component-loc.d.ts

@@ -1,7 +0,0 @@
-import type { Plugin } from 'vite';
-type ComponentLocPluginOptions = {
-    include?: RegExp;
-};
-export declare function componentLocPlugin(options?: ComponentLocPluginOptions): Plugin;
-export default componentLocPlugin;
-//# sourceMappingURL=component-loc.d.ts.map

package/dist/component-loc/component-loc.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-loc.d.ts","sourceRoot":"","sources":["../../src/component-loc/component-loc.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,KAAK,yBAAyB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,yBAA8B,GAAG,MAAM,CAgFlF;AAED,eAAe,kBAAkB,CAAC"}

package/dist/component-loc/component-loc.js

@@ -1,58 +0,0 @@
-import path from 'node:path';
-import generateModule from '@babel/generator';
-import { parse } from '@babel/parser';
-import traverseModule from '@babel/traverse';
-import * as t from '@babel/types';
-export function componentLocPlugin(options = {}) {
-    const include = options.include ?? /\.(jsx|tsx)$/;
-    // @babel/traverse and @babel/generator are CommonJS modules with default exports.
-    // When imported in an ESM context, the default export may be on `.default` or directly on the module.
-    // This workaround handles both cases to ensure compatibility across different bundler configurations.
-    const traverse = traverseModule.default ??
-        traverseModule;
-    const generate = generateModule.default ??
-        generateModule;
-    let root;
-    return {
-        name: 'onbook-component-loc',
-        enforce: 'pre',
-        apply: 'serve',
-        configResolved(config) {
-            root = config.root;
-        },
-        transform(code, id) {
-            const filepath = id.split('?', 1)[0];
-            if (!filepath || filepath.includes('node_modules'))
-                return null;
-            if (!include.test(filepath))
-                return null;
-            const ast = parse(code, {
-                sourceType: 'module',
-                plugins: ['jsx', 'typescript'],
-                sourceFilename: filepath,
-            });
-            let mutated = false;
-            // Get relative path from project root
-            const relativePath = path.relative(root, filepath);
-            traverse(ast, {
-                JSXElement(nodePath) {
-                    const opening = nodePath.node.openingElement;
-                    const element = nodePath.node;
-                    if (!opening.loc || !element.loc)
-                        return;
-                    const alreadyTagged = opening.attributes.some((attribute) => t.isJSXAttribute(attribute) &&
-                        attribute.name.name === 'data-component-file');
-                    if (alreadyTagged)
-                        return;
-                    opening.attributes.push(t.jsxAttribute(t.jsxIdentifier('data-component-file'), t.stringLiteral(relativePath)), t.jsxAttribute(t.jsxIdentifier('data-component-start'), t.stringLiteral(`${element.loc.start.line}:${element.loc.start.column}`)), t.jsxAttribute(t.jsxIdentifier('data-component-end'), t.stringLiteral(`${element.loc.end.line}:${element.loc.end.column}`)));
-                    mutated = true;
-                },
-            });
-            if (!mutated)
-                return null;
-            const output = generate(ast, { retainLines: true, sourceMaps: true, sourceFileName: id }, code);
-            return { code: output.code, map: output.map };
-        },
-    };
-}
-export default componentLocPlugin;

package/dist/component-loc/index.d.ts

@@ -1,2 +0,0 @@
-export { componentLocPlugin } from './component-loc.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/component-loc/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/component-loc/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/component-loc/index.js

@@ -1 +0,0 @@
-export { componentLocPlugin } from './component-loc.js';

package/dist/handlers/handleStoryFileChange/handleStoryFileChange.d.ts

@@ -1,3 +0,0 @@
-import type { HmrContext } from 'vite';
-export declare function handleStoryFileChange({ file, modules }: HmrContext): import("vite").ModuleNode[] | undefined;
-//# sourceMappingURL=handleStoryFileChange.d.ts.map

package/dist/handlers/handleStoryFileChange/handleStoryFileChange.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handleStoryFileChange.d.ts","sourceRoot":"","sources":["../../../src/handlers/handleStoryFileChange/handleStoryFileChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA4FvC,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,UAAU,2CAiClE"}