@onlook/storybook-plugin 0.3.1 → 0.3.2-beta.1

package/dist/screenshot-service/index.js

@@ -1,9 +1,10 @@
+import { createRequire } from 'node:module';
 import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
 import { chromium } from 'playwright';
 
-// src/utils/fileSystem/fileSystem.ts
+globalThis.require = createRequire(import.meta.url);
 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");
@@ -93,20 +94,27 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
     await page.goto(url, { timeout: timeoutMs });
     await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
     await page.waitForLoadState("load", { timeout: timeoutMs });
-    await page.waitForLoadState("networkidle", { timeout: timeoutMs });
+    try {
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
+    }
     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);
-          });
-        })
-      );
-    });
+    try {
+      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);
+              setTimeout(resolve, 3e3);
+            });
+          })
+        );
+      });
+    } catch {
+    }
     const contentBounds = await page.evaluate(() => {
       const root = document.querySelector("#storybook-root");
       if (!root) return null;
@@ -181,6 +189,33 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
 }
 
 // src/screenshot-service/screenshot-service.ts
+var StoryTimeoutError = class extends Error {
+  constructor(storyId, timeoutMs) {
+    super(`Story ${storyId} timed out after ${timeoutMs / 1e3}s`);
+    this.storyId = storyId;
+    this.timeoutMs = timeoutMs;
+    this.name = "StoryTimeoutError";
+  }
+};
+async function captureBothThemes(storyId, storybookUrl, timeoutMs, storyTimeoutMs) {
+  let timer;
+  try {
+    return await Promise.race([
+      Promise.all([
+        generateScreenshot(storyId, "light", storybookUrl, timeoutMs),
+        generateScreenshot(storyId, "dark", storybookUrl, timeoutMs)
+      ]),
+      new Promise((_, reject) => {
+        timer = setTimeout(
+          () => reject(new StoryTimeoutError(storyId, storyTimeoutMs)),
+          storyTimeoutMs
+        );
+      })
+    ]);
+  } finally {
+    if (timer) clearTimeout(timer);
+  }
+}
 async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006", concurrency = 10, offset = 0, total, skipExisting = false, timeoutMs = 3e4) {
   const displayTotal = total ?? offset + stories.length;
   console.log(
@@ -191,6 +226,7 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
   for (let i = 0; i < stories.length; i += BATCH_SIZE) {
     batches.push(stories.slice(i, i + BATCH_SIZE));
   }
+  const storyTimeout = timeoutMs * 2 + 1e4;
   let completed = 0;
   for (const batch of batches) {
     await Promise.all(
@@ -201,19 +237,64 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
           console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
           return;
         }
-        const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
-          generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
-        ]);
+        let lightResult = null;
+        let darkResult = null;
+        let lastError;
+        const startedAt = Date.now();
+        let attempts = 0;
+        const maxAttempts = 2;
+        while (attempts < maxAttempts) {
+          attempts++;
+          try {
+            [lightResult, darkResult] = await captureBothThemes(
+              story.id,
+              storybookUrl,
+              timeoutMs,
+              storyTimeout
+            );
+            lastError = void 0;
+            break;
+          } catch (error) {
+            lastError = error;
+            if (!(error instanceof StoryTimeoutError) || attempts >= maxAttempts) {
+              break;
+            }
+            console.warn(
+              `[screenshot] Retrying ${story.id} after timeout (attempt ${attempts + 1}/${maxAttempts})`
+            );
+          }
+        }
+        completed++;
+        const absoluteIndex = offset + completed;
+        const durationMs = Date.now() - startedAt;
         if (lightResult && darkResult) {
           const fileHash = computeFileHash(story.importPath);
           updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+          console.log(
+            `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`,
+            { storyId: story.id, attempts, durationMs, outcome: "ok" }
+          );
+        } else if (lastError) {
+          console.error(
+            `[${absoluteIndex}/${displayTotal}] \u26A0\uFE0F Failed ${story.id}:`,
+            lastError instanceof Error ? lastError.message : lastError,
+            {
+              storyId: story.id,
+              attempts,
+              durationMs,
+              outcome: lastError instanceof StoryTimeoutError ? "timeout" : "error"
+            }
+          );
+        } else {
+          console.warn(`[${absoluteIndex}/${displayTotal}] Partial result ${story.id}`, {
+            storyId: story.id,
+            attempts,
+            durationMs,
+            outcome: "partial",
+            hasLight: !!lightResult,
+            hasDark: !!darkResult
+          });
         }
-        completed++;
-        const absoluteIndex = offset + completed;
-        console.log(
-          `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
-        );
       })
     );
   }

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

@@ -1,6 +1,7 @@
+import { createRequire } from 'node:module';
 import { chromium } from 'playwright';
 
-// src/screenshot-service/utils/browser/browser.ts
+globalThis.require = createRequire(import.meta.url);
 var browser = null;
 async function getBrowser() {
   if (!browser) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.3.1",
+  "version": "0.3.2-beta.1",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -29,7 +29,8 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build && bun scripts/prepublish.ts",
     "postpublish": "bun scripts/postpublish.ts",
-    "publish-pkg": "npm publish"
+    "publish-pkg": "bun publish",
+    "publish-beta": "bun publish --tag beta"
   },
   "dependencies": {
     "@babel/generator": "^7.26.9",
@@ -40,7 +41,7 @@
     "playwright": "^1.52.0"
   },
   "devDependencies": {
-    "@onbook/tsconfig": "workspace:*",
+    "@onbook/tsconfig": "0.1.0",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",