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

package/dist/cli/index.js

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 import { createRequire } from 'node:module';
 import { command, string, boolean, run } from '@drizzle-team/brocli';
-import { spawn } from 'child_process';
+import { execFile, spawn } from 'child_process';
 import fs, { readFileSync, existsSync } from 'fs';
 import path, { resolve, join, dirname } from 'path';
 import crypto from 'crypto';
+import { createRequire as createRequire$1 } from 'module';
+import { promisify } from 'util';
 import { chromium } from 'playwright';
 
 globalThis.require = createRequire(import.meta.url);
@@ -57,24 +59,84 @@ 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);
+};
+async function installChromium() {
+  if (!installPromise) {
+    installPromise = (async () => {
+      const cliPath = require2.resolve("playwright-core/cli.js");
+      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) {
@@ -86,8 +148,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
   });
@@ -192,6 +254,34 @@ 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`);
@@ -231,6 +321,7 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
   }
   const storyTimeout = timeoutMs * 2 + 1e4;
   let completed = 0;
+  void broadcastScreenshotProgress(0, displayTotal);
   for (const batch of batches) {
     await Promise.all(
       batch.map(async (story) => {
@@ -300,8 +391,10 @@ async function generateAllScreenshots(stories, storybookUrl = "http://localhost:
         }
       })
     );
+    void broadcastScreenshotProgress(offset + completed, displayTotal);
   }
   await closeBrowser();
+  void broadcastScreenshotProgress(displayTotal, displayTotal);
   console.log("Screenshot generation complete!");
 }
 var LOCKFILES = {
@@ -452,8 +545,8 @@ async function startStorybook(command2, args, storybookDir) {
 }
 async function warmupStorybook(url, firstStoryId) {
   console.log("\u{1F525} Warming up Storybook...");
-  const browser2 = await getBrowser();
-  const context = await browser2.newContext();
+  const browser = await getBrowser();
+  const context = await browser.newContext();
   const page = await context.newPage();
   try {
     const warmupUrl = `${url}/iframe.html?id=${firstStoryId}&viewMode=story`;
@@ -559,5 +652,5 @@ var generateScreenshotsCommand = command({
 });
 run([generateScreenshotsCommand], {
   name: "onlook-storybook",
-  description: "Storybook plugin for Onbook - generate screenshots and more"
+  description: "Storybook plugin for Onlook - generate screenshots and more"
 });

package/dist/index.d.ts

@@ -1,18 +1,97 @@
-import { PluginOption } from 'vite';
+export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-CigILdDb.js';
+import { Plugin } from 'vite';
 import { Indexer } from 'storybook/internal/types';
 
-type OnlookPluginOptions = {
-    /** Storybook port (default: 6006) */
-    port?: number;
-    /** Additional allowed origins for CORS (merged with defaults) */
-    allowedOrigins?: string[];
-    hmr?: {
-        protocol?: 'ws' | 'wss';
-        clientPort?: number;
-    };
+/** Advertised + embedded in every event payload. Mirrored CLI-side (U8). */
+declare const ONLOOK_CONTAINMENT_CONTRACT_VERSION = 1;
+/**
+ * Global registry the env-containment stand-ins populate at evaluation time:
+ * `Record<modulePath, ContainedModuleMarker>`.
+ */
+declare const ONLOOK_CONTAINED_MODULES_GLOBAL = "__ONLOOK_CONTAINED_MODULES__";
+/** Property carrying the marker on stand-in exports and thrown errors. */
+declare const ONLOOK_CONTAINED_PROP = "__onlookContained";
+/** Marker attached to every contained export, thrown error, and the global registry. */
+type ContainedModuleMarker = {
+    modulePath: string;
+    reason: 'env-validation';
+    envKeys: string[];
+    schemaKind?: string;
 };
-declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
+/**
+ * Handshake global, set by the preview annotations (in `beforeAll` and again
+ * defensively when the decorator first runs):
+ * `globalThis.__ONLOOK_CONTAINMENT_CONTRACT__ = { version: 1 }`.
+ */
+declare const ONLOOK_CONTAINMENT_CONTRACT_GLOBAL = "__ONLOOK_CONTAINMENT_CONTRACT__";
+type OnlookContainmentContract = {
+    version: number;
+};
+/**
+ * Emitted when the error-boundary decorator catches a render-time throw and
+ * renders the "needs setup" card in place of the story.
+ */
+declare const ONLOOK_CONTAINED_EVENT = "onlook/contained";
+/**
+ * Emitted once per story mount, after the boundary's children committed
+ * without throwing. The verifier must key `rendered` on THIS (plus absence of
+ * Storybook error events) — never on `STORY_RENDERED` alone, which Storybook
+ * fires even after its own boundary catches.
+ */
+declare const ONLOOK_RENDERED_EVENT = "onlook/rendered";
+/**
+ * Tag-for-verifier re-emit of errors the boundary cannot catch (loader /
+ * `beforeEach` / module-load throws surface as Storybook's
+ * `storyThrewException` / `storyErrored` channel events, outside the React
+ * render). These remain overlay-not-card; no DOM repaint is attempted.
+ */
+declare const ONLOOK_UNCONTAINED_ERROR_EVENT = "onlook/uncontained-error";
+type OnlookContainedPayload = {
+    storyId: string;
+    contractVersion: number;
+    /** Trimmed failure summary (error message). */
+    message: string;
+    /** Present when the failure is attributed to a contained module (U4). */
+    module?: ContainedModuleMarker;
+};
+type OnlookRenderedPayload = {
+    storyId: string;
+    contractVersion: number;
+};
+type OnlookUncontainedErrorPayload = {
+    /** Best-effort (read from the preview iframe URL); absent when unknown. */
+    storyId?: string;
+    contractVersion: number;
+    message: string;
+    /** Which Storybook channel event this re-emits. */
+    source: 'storyThrewException' | 'storyErrored';
+};
+/**
+ * Render-state attribute, value `'rendered' | 'contained'`. Set on
+ * `#storybook-root` (falling back to `document.body` when absent) after each
+ * boundary commit, and ALSO carried on the card's own wrapper element when
+ * contained. Cleared on boundary unmount (story switch), so a stale value
+ * never leaks into the next story's mount — verifiers should match it
+ * together with `data-onlook-story-id`.
+ */
+declare const ONLOOK_RENDER_STATE_ATTR = "data-onlook-render-state";
+/** Companion attribute carrying the story id the render state belongs to. */
+declare const ONLOOK_RENDER_STORY_ATTR = "data-onlook-story-id";
+/** Present (empty value) on the "needs setup" card's wrapper element. */
+declare const ONLOOK_CONTAINED_CARD_ATTR = "data-onlook-contained-card";
+type OnlookRenderState = 'rendered' | 'contained';
+
+/** Virtual stories module id as builder-vite declares it (SB_VIRTUAL_FILES). */
+declare const STORYBOOK_VIRTUAL_STORIES_ID = "virtual:/@storybook/builder-vite/storybook-stories.js";
+/** Rollup-resolved form (`getResolvedVirtualModuleId` prepends `\0`). */
+declare const RESOLVED_STORYBOOK_VIRTUAL_STORIES_ID = "\0virtual:/@storybook/builder-vite/storybook-stories.js";
+declare const MODULE_LOAD_CATCH_ALL_PLUGIN_NAME = "onlook-module-load-catch-all";
+/**
+ * The Vite plugin. Registered by `storybookOnlookPlugin()` unless the
+ * `moduleLoadCatchAll` option is `false`.
+ */
+declare function moduleLoadCatchAllPlugin(): Plugin;
 
 declare const tolerantCsfIndexer: Indexer;
 
-export { type OnlookPluginOptions, storybookOnlookPlugin, tolerantCsfIndexer };
+export { type ContainedModuleMarker, MODULE_LOAD_CATCH_ALL_PLUGIN_NAME, ONLOOK_CONTAINED_CARD_ATTR, ONLOOK_CONTAINED_EVENT, ONLOOK_CONTAINED_MODULES_GLOBAL, ONLOOK_CONTAINED_PROP, ONLOOK_CONTAINMENT_CONTRACT_GLOBAL, ONLOOK_CONTAINMENT_CONTRACT_VERSION, ONLOOK_RENDERED_EVENT, ONLOOK_RENDER_STATE_ATTR, ONLOOK_RENDER_STORY_ATTR, ONLOOK_UNCONTAINED_ERROR_EVENT, type OnlookContainedPayload, type OnlookContainmentContract, type OnlookRenderState, type OnlookRenderedPayload, type OnlookUncontainedErrorPayload, RESOLVED_STORYBOOK_VIRTUAL_STORIES_ID, STORYBOOK_VIRTUAL_STORIES_ID, moduleLoadCatchAllPlugin, tolerantCsfIndexer };