@onlook/storybook-plugin 0.4.0-beta.1 → 0.4.0-beta.10

package/dist/screenshot-service/index.js

@@ -1,9 +1,13 @@
+import { createRequire } from 'node:module';
 import crypto from 'crypto';
 import fs from 'fs';
-import path from 'path';
+import path, { join, dirname } from 'path';
+import { execFile } from 'child_process';
+import { createRequire as createRequire$1 } from 'module';
+import { promisify } from 'util';
 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");
@@ -53,24 +57,88 @@ function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   };
   saveManifest(manifest);
 }
-var browser = null;
+var execFileAsync = promisify(execFile);
+var require2 = createRequire$1(import.meta.url);
+var browserPromise = null;
+var installPromise = null;
+var isMissingExecutableError = (err) => {
+  const msg = err instanceof Error ? err.message : String(err);
+  return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
+  /chromium-\d+\/chrome-linux\/chrome/i.test(msg);
+};
+function resolvePlaywrightCli() {
+  const pkgJson = require2.resolve("playwright-core/package.json");
+  return join(dirname(pkgJson), "cli.js");
+}
+async function installChromium() {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const cliPath = resolvePlaywrightCli();
+      console.log(
+        `[STORYBOOK_PLUGIN] chromium binary missing \u2014 installing via ${cliPath}`
+      );
+      try {
+        const { stdout, stderr } = await execFileAsync(
+          process.execPath,
+          [cliPath, "install", "--force", "chromium"],
+          { timeout: 5 * 60 * 1e3, maxBuffer: 32 * 1024 * 1024 }
+        );
+        if (stdout)
+          console.log(`[STORYBOOK_PLUGIN] playwright install: ${stdout.slice(-1e3)}`);
+        if (stderr)
+          console.log(
+            `[STORYBOOK_PLUGIN] playwright install stderr: ${stderr.slice(-1e3)}`
+          );
+        console.log("[STORYBOOK_PLUGIN] chromium installed");
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : String(err);
+        console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
+        throw new Error(`Playwright chromium install failed: ${detail}`);
+      } finally {
+        installPromise = null;
+      }
+    })();
+  }
+  return installPromise;
+}
+async function launchWithSelfHeal() {
+  try {
+    return await chromium.launch({ headless: true });
+  } catch (err) {
+    if (!isMissingExecutableError(err)) throw err;
+    console.log("[STORYBOOK_PLUGIN] launch failed, attempting self-heal install");
+    await installChromium();
+    try {
+      return await chromium.launch({ headless: true });
+    } catch (postInstallErr) {
+      const detail = postInstallErr instanceof Error ? postInstallErr.message : String(postInstallErr);
+      console.error(
+        `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
+      );
+      throw new Error(
+        `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
+      );
+    }
+  }
+}
 async function getBrowser() {
-  if (!browser) {
-    browser = await chromium.launch({
-      headless: true
+  if (!browserPromise) {
+    browserPromise = launchWithSelfHeal().catch((err) => {
+      browserPromise = null;
+      throw err;
     });
   }
-  return browser;
+  return browserPromise;
 }
 async function closeBrowser() {
-  if (browser) {
-    try {
-      await browser.close();
-    } catch (error) {
-      console.error("Error closing browser:", error);
-    } finally {
-      browser = null;
-    }
+  const pending = browserPromise;
+  if (!pending) return;
+  browserPromise = null;
+  try {
+    const b = await pending;
+    await b.close();
+  } catch (error) {
+    console.error("Error closing browser:", error);
   }
 }
 function getScreenshotPath(storyId, theme) {
@@ -82,8 +150,8 @@ function screenshotExists(storyId, theme) {
   return fs.existsSync(screenshotPath);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
-  const browser2 = await getBrowser();
-  const context = await browser2.newContext({
+  const browser = await getBrowser();
+  const context = await browser.newContext({
     viewport: { width, height },
     deviceScaleFactor: 2
   });
@@ -188,6 +256,61 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
 }
 
 // src/screenshot-service/screenshot-service.ts
+var ONBOOK_PROXY_TOKEN = process.env.ONBOOK_PROXY_TOKEN ?? null;
+var ONBOOK_BROADCAST_URL = process.env.ONBOOK_BROADCAST_URL ?? null;
+var PROGRESS_TIMEOUT_MS = 3e3;
+async function broadcastScreenshotProgress(completed, total) {
+  if (!ONBOOK_PROXY_TOKEN || !ONBOOK_BROADCAST_URL) return;
+  const percent = total > 0 ? Math.min(100, Math.floor(completed / total * 100)) : null;
+  try {
+    await fetch(ONBOOK_BROADCAST_URL, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${ONBOOK_PROXY_TOKEN}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        event: {
+          type: "SANDBOX_PHASE_PROGRESS",
+          phase: "generating_screenshots",
+          completed,
+          total,
+          percent,
+          label: "Capturing stories"
+        }
+      }),
+      signal: AbortSignal.timeout(PROGRESS_TIMEOUT_MS)
+    });
+  } catch {
+  }
+}
+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(
@@ -198,58 +321,82 @@ 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;
+  void broadcastScreenshotProgress(0, displayTotal);
   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
+          });
         }
       })
     );
+    void broadcastScreenshotProgress(offset + completed, displayTotal);
   }
   await closeBrowser();
+  void broadcastScreenshotProgress(displayTotal, displayTotal);
   console.log("Screenshot generation complete!");
 }
 

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

@@ -1,12 +1,6 @@
 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,24 +1,93 @@
+import { createRequire } from 'node:module';
+import { execFile } from 'child_process';
+import { createRequire as createRequire$1 } from 'module';
+import { join, dirname } from 'path';
+import { promisify } from 'util';
 import { chromium } from 'playwright';
 
-// src/screenshot-service/utils/browser/browser.ts
-var browser = null;
+globalThis.require = createRequire(import.meta.url);
+var execFileAsync = promisify(execFile);
+var require2 = createRequire$1(import.meta.url);
+var browserPromise = null;
+var installPromise = null;
+var isMissingExecutableError = (err) => {
+  const msg = err instanceof Error ? err.message : String(err);
+  return msg.includes("Executable doesn't exist") || msg.includes("Please run the following command to download new browsers") || // Older playwright revisions phrase the version-mismatch case differently.
+  /chromium-\d+\/chrome-linux\/chrome/i.test(msg);
+};
+function resolvePlaywrightCli() {
+  const pkgJson = require2.resolve("playwright-core/package.json");
+  return join(dirname(pkgJson), "cli.js");
+}
+async function installChromium() {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const cliPath = resolvePlaywrightCli();
+      console.log(
+        `[STORYBOOK_PLUGIN] chromium binary missing \u2014 installing via ${cliPath}`
+      );
+      try {
+        const { stdout, stderr } = await execFileAsync(
+          process.execPath,
+          [cliPath, "install", "--force", "chromium"],
+          { timeout: 5 * 60 * 1e3, maxBuffer: 32 * 1024 * 1024 }
+        );
+        if (stdout)
+          console.log(`[STORYBOOK_PLUGIN] playwright install: ${stdout.slice(-1e3)}`);
+        if (stderr)
+          console.log(
+            `[STORYBOOK_PLUGIN] playwright install stderr: ${stderr.slice(-1e3)}`
+          );
+        console.log("[STORYBOOK_PLUGIN] chromium installed");
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : String(err);
+        console.error(`[STORYBOOK_PLUGIN] chromium install FAILED: ${detail}`);
+        throw new Error(`Playwright chromium install failed: ${detail}`);
+      } finally {
+        installPromise = null;
+      }
+    })();
+  }
+  return installPromise;
+}
+async function launchWithSelfHeal() {
+  try {
+    return await chromium.launch({ headless: true });
+  } catch (err) {
+    if (!isMissingExecutableError(err)) throw err;
+    console.log("[STORYBOOK_PLUGIN] launch failed, attempting self-heal install");
+    await installChromium();
+    try {
+      return await chromium.launch({ headless: true });
+    } catch (postInstallErr) {
+      const detail = postInstallErr instanceof Error ? postInstallErr.message : String(postInstallErr);
+      console.error(
+        `[STORYBOOK_PLUGIN] launch still failing after install \u2014 likely path or libs issue: ${detail}`
+      );
+      throw new Error(
+        `Playwright chromium is unavailable in this sandbox (install ran but launch still failed): ${detail}`
+      );
+    }
+  }
+}
 async function getBrowser() {
-  if (!browser) {
-    browser = await chromium.launch({
-      headless: true
+  if (!browserPromise) {
+    browserPromise = launchWithSelfHeal().catch((err) => {
+      browserPromise = null;
+      throw err;
     });
   }
-  return browser;
+  return browserPromise;
 }
 async function closeBrowser() {
-  if (browser) {
-    try {
-      await browser.close();
-    } catch (error) {
-      console.error("Error closing browser:", error);
-    } finally {
-      browser = null;
-    }
+  const pending = browserPromise;
+  if (!pending) return;
+  browserPromise = null;
+  try {
+    const b = await pending;
+    await b.close();
+  } catch (error) {
+    console.error("Error closing browser:", error);
   }
 }
 

package/dist/storybook-onlook-plugin-CigILdDb.d.ts

@@ -0,0 +1,61 @@
+import { Plugin, PluginOption } from 'vite';
+
+/** One module the engine asked us to substitute with a deferred-throw stand-in. */
+type EnvContainmentSubstitution = {
+    /**
+     * Path of the throwing module relative to the project root (the directory
+     * `storybook dev` runs from), posix separators, extension included —
+     * e.g. `src/env.ts`. Alias (`@/env`), relative (`../env`), and absolute
+     * imports that resolve to this file are all intercepted.
+     */
+    module: string;
+    /**
+     * Best-effort named exports of the real module. The stand-in re-exports
+     * each (plus a default export, always) so static ESM bindings keep
+     * resolving. Names that aren't valid identifiers are skipped.
+     */
+    exports?: string[];
+    /** Env keys the module validates — carried into the containment marker. */
+    envKeys?: string[];
+    /** Recognized schema library (`t3` | `zod` | `valibot`) — diagnostics only. */
+    schemaKind?: string;
+};
+/**
+ * The `envContainment` plugin-options surface. Written by the preflight
+ * engine into `.storybook/main.*` (`storybookOnlookPlugin({ envContainment })`).
+ * Mirrored structurally as `EnvContainmentValue` in
+ * `packages/preflight/src/checks/storybook/patch.ts` — keep the shapes in sync.
+ */
+type EnvContainmentOptions = {
+    /** Modules to replace with deferred-throw stand-ins. */
+    substitute?: EnvContainmentSubstitution[];
+    /**
+     * Env key → placeholder value. Each key is injected via Vite `define` as
+     * both `process.env.<KEY>` and `import.meta.env.<KEY>`.
+     */
+    define?: Record<string, string>;
+};
+/**
+ * Build the env-containment Vite plugin. Returns `null` when the options
+ * carry no work — callers spread it conditionally so a config without
+ * `envContainment` behaves exactly as before this plugin existed.
+ */
+declare function envContainmentPlugin(options: EnvContainmentOptions | undefined): Plugin | null;
+
+type OnlookPluginOptions = {
+    /** Storybook port (default: 6006) */
+    port?: number;
+    /** Additional allowed origins for CORS (merged with defaults) */
+    allowedOrigins?: string[];
+    hmr?: {
+        protocol?: 'ws' | 'wss';
+        clientPort?: number;
+    };
+    storyGlobs?: string[];
+    tailwindEntryCss?: string | false;
+    envContainment?: EnvContainmentOptions;
+    moduleLoadCatchAll?: boolean;
+};
+declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
+
+export { type EnvContainmentOptions as E, type OnlookPluginOptions as O, type EnvContainmentSubstitution as a, envContainmentPlugin as e, storybookOnlookPlugin as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.10",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -10,6 +10,14 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./preset": {
+      "types": "./dist/preset/index.d.ts",
+      "default": "./dist/preset/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview/index.d.ts",
+      "default": "./dist/preview/index.js"
+    },
     "./screenshot-service": {
       "types": "./dist/screenshot-service/index.d.ts",
       "default": "./dist/screenshot-service/index.js"
@@ -24,25 +32,26 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "rm -rf dist && tsup",
     "clean": "git clean -xdf .cache .turbo dist node_modules",
     "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",
-    "@babel/parser": "^7.26.9",
+    "@babel/parser": "^7.29.3",
     "@babel/traverse": "^7.26.9",
-    "@babel/types": "^7.26.9",
+    "@babel/types": "^7.29.0",
     "@drizzle-team/brocli": "^0.11.0",
-    "@takuma-ru/auto-story-generator": "^0.4.0",
     "playwright": "^1.52.0",
-    "react-docgen-typescript": "^2.4.0"
+    "playwright-core": "^1.52.0",
+    "storybook": "^10.1.11"
   },
   "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",
@@ -55,6 +64,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "vite": "^5.0.0 || ^6.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "vite": ">=5.0.0"
   }
 }