@onlook/storybook-plugin 0.3.2 → 0.3.3

package/README.md

@@ -44,7 +44,7 @@ Configures Vite HMR for E2B sandboxes (WSS protocol, port 443 routing).
 
 ### CORS
 
-Pre-configured for `https://app.onlook.ai`, `localhost:3000`, and `localhost:6006`.
+Pre-configured for `https://app.onlook.com`, `localhost:3000`, and `localhost:6006`.
 
 ## Options
 

package/dist/cli/index.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import { command, string, boolean, run } from '@drizzle-team/brocli';
 import { spawn } from 'child_process';
+import fs, { readFileSync, existsSync } from 'fs';
 import path, { resolve, join, dirname } from 'path';
 import crypto from 'crypto';
-import fs, { existsSync } from 'fs';
 import { chromium } from 'playwright';
 
 var CACHE_DIR = path.join(process.cwd(), ".storybook-cache");
@@ -95,20 +95,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((resolve3) => {
-            img.addEventListener("load", resolve3);
-            img.addEventListener("error", resolve3);
-          });
-        })
-      );
-    });
+    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((resolve3) => {
+              img.addEventListener("load", resolve3);
+              img.addEventListener("error", resolve3);
+              setTimeout(resolve3, 3e3);
+            });
+          })
+        );
+      });
+    } catch {
+    }
     const contentBounds = await page.evaluate(() => {
       const root = document.querySelector("#storybook-root");
       if (!root) return null;
@@ -199,23 +206,48 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
       batch.map(async (story) => {
         if (skipExisting && screenshotExists(story.id, "light") && screenshotExists(story.id, "dark")) {
           completed++;
-          const absoluteIndex2 = offset + completed;
-          console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
+          const absoluteIndex = offset + completed;
+          console.log(`[${absoluteIndex}/${displayTotal}] Skipped (exists) ${story.id}`);
           return;
         }
-        const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
-          generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
-        ]);
-        if (lightResult && darkResult) {
-          const fileHash = computeFileHash(story.importPath);
-          updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+        const storyTimeout = timeoutMs * 2 + 1e4;
+        let timer;
+        try {
+          const result = await Promise.race([
+            Promise.all([
+              generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
+              generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
+            ]),
+            new Promise((_, reject) => {
+              timer = setTimeout(
+                () => reject(
+                  new Error(
+                    `Story ${story.id} timed out after ${storyTimeout / 1e3}s`
+                  )
+                ),
+                storyTimeout
+              );
+            })
+          ]);
+          clearTimeout(timer);
+          const [lightResult, darkResult] = result;
+          if (lightResult && darkResult) {
+            const fileHash = computeFileHash(story.importPath);
+            updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+          }
+          completed++;
+          const absoluteIndex = offset + completed;
+          console.log(
+            `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
+          );
+        } catch (error) {
+          completed++;
+          const absoluteIndex = offset + completed;
+          console.error(
+            `[${absoluteIndex}/${displayTotal}] \u26A0\uFE0F Failed ${story.id}:`,
+            error instanceof Error ? error.message : error
+          );
         }
-        completed++;
-        const absoluteIndex = offset + completed;
-        console.log(
-          `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
-        );
       })
     );
   }
@@ -260,10 +292,27 @@ function getStorybookCommand(storybookDir) {
   console.log(
     `\u{1F4E6} Detected package manager: ${pm}${repoRoot ? ` (from ${repoRoot})` : ""}`
   );
-  const separator = pm === "npm" || pm === "pnpm" ? ["--"] : [];
+  let extraArgs = [];
+  try {
+    const pkgPath = resolve(storybookDir, "package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+    const script = pkg.scripts?.storybook ?? "";
+    const hasPort = script.includes("-p ") || script.includes("--port");
+    const hasNoOpen = script.includes("--no-open");
+    if (!hasPort || !hasNoOpen) {
+      const needsSeparator = pm === "npm" || pm === "pnpm";
+      const flags = [];
+      if (!hasPort) flags.push("-p", "6006");
+      if (!hasNoOpen) flags.push("--no-open");
+      extraArgs = needsSeparator && flags.length > 0 ? ["--", ...flags] : flags;
+    }
+  } catch {
+    const separator = pm === "npm" || pm === "pnpm" ? ["--"] : [];
+    extraArgs = [...separator, "-p", "6006", "--no-open"];
+  }
   return {
     command: pm,
-    args: ["run", "storybook", ...separator, "-p", "6006", "--no-open"]
+    args: ["run", "storybook", ...extraArgs]
   };
 }
 async function isStorybookRunning(url) {
@@ -276,14 +325,38 @@ async function isStorybookRunning(url) {
     return false;
   }
 }
-async function fetchStoryIndex(url) {
+async function waitForStorybookReady(url, timeoutMs = 12e4) {
+  const start = Date.now();
+  const pollInterval = 2e3;
+  while (Date.now() - start < timeoutMs) {
+    if (await isStorybookRunning(url)) return;
+    await new Promise((r) => setTimeout(r, pollInterval));
+  }
+  throw new Error(`Storybook did not become ready within ${timeoutMs / 1e3}s`);
+}
+async function fetchStoryIndex(url, retries = 3) {
   const indexUrl = `${url}/index.json`;
-  const response = await fetch(indexUrl);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch story index: ${response.statusText}`);
+  for (let attempt = 1; attempt <= retries; attempt++) {
+    try {
+      const response = await fetch(indexUrl, {
+        signal: AbortSignal.timeout(1e4)
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch story index: ${response.status} ${response.statusText}`
+        );
+      }
+      const data = await response.json();
+      return Object.values(data.entries);
+    } catch (error) {
+      if (attempt === retries) throw error;
+      console.log(
+        `\u26A0\uFE0F Fetch story index failed (attempt ${attempt}/${retries}), retrying in 3s...`
+      );
+      await new Promise((r) => setTimeout(r, 3e3));
+    }
   }
-  const data = await response.json();
-  return Object.values(data.entries);
+  throw new Error("Unreachable");
 }
 async function startStorybook(command2, args, storybookDir) {
   console.log(
@@ -301,12 +374,12 @@ async function startStorybook(command2, args, storybookDir) {
     const timeout = setTimeout(() => {
       if (!started) {
         storybookProcess.kill();
-        reject(new Error("Storybook failed to start within 60 seconds"));
+        reject(new Error("Storybook failed to start within 180 seconds"));
       }
-    }, 6e4);
+    }, 18e4);
     storybookProcess.stdout?.on("data", (data) => {
       const output = data.toString();
-      if (output.includes("Local:") || output.includes("localhost:")) {
+      if (output.includes("Local:") || output.includes("localhost:") || output.includes("local:")) {
         if (!started) {
           started = true;
           clearTimeout(timeout);
@@ -335,7 +408,7 @@ async function warmupStorybook(url, firstStoryId) {
   try {
     const warmupUrl = `${url}/iframe.html?id=${firstStoryId}&viewMode=story`;
     await page.goto(warmupUrl, { timeout: 15e3 });
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState("domcontentloaded", { timeout: 15e3 });
     console.log("\u2705 Storybook warmed up");
   } catch {
     console.log("\u26A0\uFE0F Warmup had issues, proceeding anyway");
@@ -358,6 +431,8 @@ async function generateScreenshots(options = {}) {
       const { command: command2, args } = getStorybookCommand(storybookDir);
       storybookProcess = await startStorybook(command2, args, storybookDir);
       weStartedStorybook = true;
+      console.log("\u23F3 Waiting for Storybook to finish compiling...");
+      await waitForStorybookReady(url);
     }
     const allStories = await fetchStoryIndex(url);
     const total = allStories.length;

package/dist/index.js

@@ -142,20 +142,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;
@@ -331,7 +338,7 @@ var gitRoot = findGitRoot(storybookDir);
 var storybookLocation = gitRoot ? relative(gitRoot, storybookDir) : "";
 var repoRoot = gitRoot || process.cwd();
 var DEFAULT_ALLOWED_ORIGINS = [
-  "https://app.onlook.ai",
+  "https://app.onlook.com",
   "http://localhost:3000",
   "http://localhost:6006"
 ];
@@ -496,17 +503,16 @@ function storybookOnlookPlugin(options = {}) {
   const mainPlugin = {
     name: "storybook-onlook-plugin",
     config() {
-      const isE2B = !!process.env.E2B_SANDBOX;
       return {
         server: {
-          // Only override HMR for E2B sandboxes (wss + port 443)
-          // Local dev uses Vite's default HMR which works out of the box
-          ...isE2B && {
-            hmr: {
-              protocol: "wss",
-              clientPort: 443,
-              port
-            }
+          // E2B sandbox HMR configuration
+          hmr: {
+            // E2B sandboxes use HTTPS, so we need secure WebSocket
+            protocol: "wss",
+            // E2B routes through standard HTTPS port 443
+            clientPort: 443,
+            // The actual Storybook server port inside the sandbox
+            port
           },
           cors: {
             origin: allowedOrigins
@@ -528,13 +534,7 @@ function storybookOnlookPlugin(options = {}) {
       console.log("[STORYBOOK_PLUGIN] Configuring preview server middleware");
       server.middlewares.use(serveMetadataAndScreenshots);
     },
-    // Only auto-regenerate screenshots in E2B sandboxes where Onbook
-    // consumes them. In local dev this blocks HMR with 36 Playwright
-    // page loads per save. Screenshots are still available on-demand
-    // via /api/capture-screenshot and the CLI.
-    ...process.env.E2B_SANDBOX && {
-      handleHotUpdate: handleStoryFileChange
-    }
+    handleHotUpdate: handleStoryFileChange
   };
   return [componentLocPlugin(), mainPlugin];
 }

package/dist/screenshot-service/index.js

@@ -93,20 +93,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;
@@ -197,23 +204,48 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
       batch.map(async (story) => {
         if (skipExisting && screenshotExists(story.id, "light") && screenshotExists(story.id, "dark")) {
           completed++;
-          const absoluteIndex2 = offset + completed;
-          console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
+          const absoluteIndex = offset + completed;
+          console.log(`[${absoluteIndex}/${displayTotal}] Skipped (exists) ${story.id}`);
           return;
         }
-        const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
-          generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
-        ]);
-        if (lightResult && darkResult) {
-          const fileHash = computeFileHash(story.importPath);
-          updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+        const storyTimeout = timeoutMs * 2 + 1e4;
+        let timer;
+        try {
+          const result = await Promise.race([
+            Promise.all([
+              generateScreenshot(story.id, "light", storybookUrl, timeoutMs),
+              generateScreenshot(story.id, "dark", storybookUrl, timeoutMs)
+            ]),
+            new Promise((_, reject) => {
+              timer = setTimeout(
+                () => reject(
+                  new Error(
+                    `Story ${story.id} timed out after ${storyTimeout / 1e3}s`
+                  )
+                ),
+                storyTimeout
+              );
+            })
+          ]);
+          clearTimeout(timer);
+          const [lightResult, darkResult] = result;
+          if (lightResult && darkResult) {
+            const fileHash = computeFileHash(story.importPath);
+            updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+          }
+          completed++;
+          const absoluteIndex = offset + completed;
+          console.log(
+            `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
+          );
+        } catch (error) {
+          completed++;
+          const absoluteIndex = offset + completed;
+          console.error(
+            `[${absoluteIndex}/${displayTotal}] \u26A0\uFE0F Failed ${story.id}:`,
+            error instanceof Error ? error.message : error
+          );
         }
-        completed++;
-        const absoluteIndex = offset + completed;
-        console.log(
-          `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`
-        );
       })
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"