@onlook/storybook-plugin 0.4.0-beta.5 → 0.4.0-beta.7

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,4 +1,5 @@
 #!/usr/bin/env node
+import { createRequire } from 'node:module';
 import { command, string, boolean, run } from '@drizzle-team/brocli';
 import { spawn } from 'child_process';
 import fs, { readFileSync, existsSync } from 'fs';
@@ -6,6 +7,7 @@ import path, { resolve, join, dirname } from 'path';
 import crypto from 'crypto';
 import { chromium } from 'playwright';
 
+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");
@@ -190,6 +192,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(
@@ -200,53 +229,74 @@ 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(
       batch.map(async (story) => {
         if (skipExisting && screenshotExists(story.id, "light") && screenshotExists(story.id, "dark")) {
           completed++;
-          const absoluteIndex = offset + completed;
-          console.log(`[${absoluteIndex}/${displayTotal}] Skipped (exists) ${story.id}`);
+          const absoluteIndex2 = offset + completed;
+          console.log(`[${absoluteIndex2}/${displayTotal}] Skipped (exists) ${story.id}`);
           return;
         }
-        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);
+        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;
+        }
+        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}`
+            `[${absoluteIndex}/${displayTotal}] Generated screenshots for ${story.id}`,
+            { storyId: story.id, attempts, durationMs, outcome: "ok" }
           );
-        } catch (error) {
-          completed++;
-          const absoluteIndex = offset + completed;
+        } else if (lastError) {
           console.error(
             `[${absoluteIndex}/${displayTotal}] \u26A0\uFE0F Failed ${story.id}:`,
-            error instanceof Error ? error.message : error
+            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
+          });
         }
       })
     );

package/dist/index.d.ts

@@ -1,24 +1,18 @@
 import { PluginOption } from 'vite';
+import { Indexer } from 'storybook/internal/types';
 
-/** Folder name for auto-generated stories (created next to each component) */
-declare const AUTO_STORIES_FOLDER = ".onlook-stories";
 type OnlookPluginOptions = {
     /** Storybook port (default: 6006) */
     port?: number;
     /** Additional allowed origins for CORS (merged with defaults) */
     allowedOrigins?: string[];
-    /**
-     * Auto-generate stories for all components.
-     * Glob patterns for component file discovery.
-     * Set to false to disable. (default: ['src\/\*\*\/*.tsx'])
-     */
-    autoStories?: string[] | false;
-    /**
-     * Glob patterns to exclude from auto-story generation.
-     * (default: stories, tests, and node_modules)
-     */
-    autoStoriesIgnore?: string[];
+    hmr?: {
+        protocol?: 'ws' | 'wss';
+        clientPort?: number;
+    };
 };
 declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
 
-export { AUTO_STORIES_FOLDER, type OnlookPluginOptions, storybookOnlookPlugin };
+declare const tolerantCsfIndexer: Indexer;
+
+export { type OnlookPluginOptions, storybookOnlookPlugin, tolerantCsfIndexer };