@onlook/storybook-plugin 0.4.0-beta.17 → 0.4.0-beta.18

package/dist/index.js

@@ -514,52 +514,6 @@ async function getBrowser() {
   }
   return browserPromise;
 }
-
-// src/screenshot-service/utils/capture-semaphore/capture-semaphore.ts
-function createSemaphore(limit) {
-  const max = Number.isFinite(limit) ? Math.max(1, Math.floor(limit)) : 1;
-  let active = 0;
-  const waiters = [];
-  const acquire = () => {
-    if (active < max) {
-      active += 1;
-      return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-      waiters.push(() => {
-        active += 1;
-        resolve();
-      });
-    });
-  };
-  const release = () => {
-    active -= 1;
-    const next = waiters.shift();
-    if (next) next();
-  };
-  return {
-    async run(fn) {
-      await acquire();
-      try {
-        return await fn();
-      } finally {
-        release();
-      }
-    }
-  };
-}
-var DEFAULT_CAPTURE_CONCURRENCY = 3;
-function resolveConcurrency(raw) {
-  if (!raw) return DEFAULT_CAPTURE_CONCURRENCY;
-  const parsed = Number.parseInt(raw, 10);
-  if (!Number.isInteger(parsed) || parsed < 1) return DEFAULT_CAPTURE_CONCURRENCY;
-  return parsed;
-}
-var captureSemaphore = createSemaphore(
-  resolveConcurrency(process.env.ONLOOK_CAPTURE_CONCURRENCY)
-);
-
-// src/screenshot-service/utils/screenshot/screenshot.ts
 function classifyPreviewSnapshot(s) {
   if (s.text.includes("Sorry, something went wrong")) return "errored";
   if (s.text.includes("Couldn't find story")) return "errored";
@@ -630,89 +584,87 @@ function getScreenshotPath(storyId, theme) {
   return path8.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", loadTimeoutMs = 9e4, renderTimeoutMs = 2e4) {
-  return captureSemaphore.run(async () => {
-    const browser = await getBrowser();
-    const context = await browser.newContext({
-      viewport: { width, height },
-      deviceScaleFactor: 2
-    });
-    const page = await context.newPage();
+  const browser = await getBrowser();
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  try {
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+    await page.goto(url, { timeout: loadTimeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: loadTimeoutMs });
+    await page.waitForLoadState("load", { timeout: loadTimeoutMs });
     try {
-      const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-      await page.goto(url, { timeout: loadTimeoutMs });
-      await page.waitForLoadState("domcontentloaded", { timeout: loadTimeoutMs });
-      await page.waitForLoadState("load", { timeout: loadTimeoutMs });
-      try {
-        await page.waitForLoadState("networkidle", { timeout: 5e3 });
-      } catch {
-      }
-      const renderState = await detectRenderState(page, { hardCapMs: renderTimeoutMs });
-      await page.evaluate(() => document.fonts.ready);
-      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;
-        const children = root.querySelectorAll("*");
-        if (children.length === 0) return null;
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        children.forEach((child) => {
-          const rect = child.getBoundingClientRect();
-          if (rect.width === 0 || rect.height === 0) return;
-          minX = Math.min(minX, rect.left);
-          minY = Math.min(minY, rect.top);
-          maxX = Math.max(maxX, rect.right);
-          maxY = Math.max(maxY, rect.bottom);
-        });
-        if (minX === Infinity) return null;
-        return {
-          x: minX,
-          y: minY,
-          width: maxX - minX,
-          height: maxY - minY
-        };
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
+    }
+    const renderState = await detectRenderState(page, { hardCapMs: renderTimeoutMs });
+    await page.evaluate(() => document.fonts.ready);
+    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);
+            });
+          })
+        );
       });
-      let screenshotBuffer;
-      let resultBoundingBox = null;
-      if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
-        const PADDING = 20;
-        const clippedWidth = Math.min(width, contentBounds.width + PADDING);
-        const clippedHeight = Math.min(height, contentBounds.height + PADDING);
-        resultBoundingBox = {
-          width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
-          height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
-        };
-        screenshotBuffer = await page.screenshot({
-          type: "png",
-          clip: {
-            x: Math.max(0, contentBounds.x - 10),
-            y: Math.max(0, contentBounds.y - 10),
-            width: clippedWidth,
-            height: clippedHeight
-          }
-        });
-      } else {
-        screenshotBuffer = await page.screenshot({ type: "png" });
-      }
-      return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
-    } finally {
-      await context.close();
+    } catch {
     }
-  });
+    const contentBounds = await page.evaluate(() => {
+      const root = document.querySelector("#storybook-root");
+      if (!root) return null;
+      const children = root.querySelectorAll("*");
+      if (children.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      children.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        minX = Math.min(minX, rect.left);
+        minY = Math.min(minY, rect.top);
+        maxX = Math.max(maxX, rect.right);
+        maxY = Math.max(maxY, rect.bottom);
+      });
+      if (minX === Infinity) return null;
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    let screenshotBuffer;
+    let resultBoundingBox = null;
+    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
+      const PADDING = 20;
+      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+      resultBoundingBox = {
+        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
+        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
+      };
+      screenshotBuffer = await page.screenshot({
+        type: "png",
+        clip: {
+          x: Math.max(0, contentBounds.x - 10),
+          y: Math.max(0, contentBounds.y - 10),
+          width: clippedWidth,
+          height: clippedHeight
+        }
+      });
+    } else {
+      screenshotBuffer = await page.screenshot({ type: "png" });
+    }
+    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
+  } finally {
+    await context.close();
+  }
 }
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
@@ -819,39 +771,7 @@ async function waitForIndexAndBroadcast(port = 6006) {
   });
 }
 
-// src/handlers/handleStoryFileChange/captureCoalescer/captureCoalescer.ts
-function createCaptureCoalescer(runCapture) {
-  const inFlight2 = /* @__PURE__ */ new Map();
-  const trailing = /* @__PURE__ */ new Set();
-  const start = (storyId) => {
-    const done = (async () => {
-      try {
-        await runCapture(storyId);
-      } finally {
-        inFlight2.delete(storyId);
-        if (trailing.has(storyId)) {
-          trailing.delete(storyId);
-          await start(storyId);
-        }
-      }
-    })();
-    inFlight2.set(storyId, done);
-    return done;
-  };
-  return {
-    capture(storyId) {
-      const existing = inFlight2.get(storyId);
-      if (existing) {
-        trailing.add(storyId);
-        return existing;
-      }
-      return start(storyId);
-    }
-  };
-}
-
 // src/handlers/handleStoryFileChange/handleStoryFileChange.ts
-var STORYBOOK_URL = "http://localhost:6006";
 var cachedIndex = null;
 var indexFetchPromise = null;
 var pendingFiles = /* @__PURE__ */ new Set();
@@ -873,43 +793,44 @@ function getStoriesForFile(filePath) {
   const fileName = path8.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
-var latestStoryFiles = /* @__PURE__ */ new Map();
-async function captureStoryAndUpdateManifest(storyId) {
-  const [lightResult] = await Promise.all([
-    generateScreenshot(storyId, "light", STORYBOOK_URL),
-    generateScreenshot(storyId, "dark", STORYBOOK_URL)
-  ]);
-  const boundingBox = lightResult?.boundingBox ?? void 0;
-  for (const file of latestStoryFiles.get(storyId) ?? []) {
-    const fileHash = computeFileHash(file);
-    updateManifest(storyId, file, fileHash, boundingBox);
-  }
-}
-var captureCoalescer = createCaptureCoalescer(captureStoryAndUpdateManifest);
 async function regenerateScreenshotsForFiles(files) {
   await fetchStorybookIndex();
-  const storyToFiles = /* @__PURE__ */ new Map();
+  const allStoryIds = /* @__PURE__ */ new Set();
+  const fileToStories = /* @__PURE__ */ new Map();
   for (const file of files) {
-    for (const storyId of getStoriesForFile(file)) {
-      const arr = storyToFiles.get(storyId) ?? [];
-      arr.push(file);
-      storyToFiles.set(storyId, arr);
+    const storyIds = getStoriesForFile(file);
+    fileToStories.set(file, storyIds);
+    for (const id of storyIds) {
+      allStoryIds.add(id);
     }
   }
-  if (storyToFiles.size === 0) {
+  if (allStoryIds.size === 0) {
     console.log("[Screenshots] No stories found for changed files");
     return;
   }
   console.log(
-    `[Screenshots] Regenerating ${storyToFiles.size} stories from ${files.length} files`
+    `[Screenshots] Regenerating ${allStoryIds.size} stories from ${files.length} files`
   );
-  for (const [storyId, storyFiles] of storyToFiles) {
-    latestStoryFiles.set(storyId, storyFiles);
-  }
+  const storybookUrl = "http://localhost:6006";
+  const storyBoundingBoxes = /* @__PURE__ */ new Map();
   await Promise.all(
-    Array.from(storyToFiles.keys()).map((storyId) => captureCoalescer.capture(storyId))
+    Array.from(allStoryIds).map(async (storyId) => {
+      const [lightResult, _darkResult] = await Promise.all([
+        generateScreenshot(storyId, "light", storybookUrl),
+        generateScreenshot(storyId, "dark", storybookUrl)
+      ]);
+      if (lightResult) {
+        storyBoundingBoxes.set(storyId, lightResult.boundingBox);
+      }
+    })
   );
-  console.log(`[Screenshots] \u2713 Regenerated ${storyToFiles.size} stories`);
+  for (const [file, storyIds] of fileToStories) {
+    const fileHash = computeFileHash(file);
+    storyIds.forEach((storyId) => {
+      updateManifest(storyId, file, fileHash, storyBoundingBoxes.get(storyId));
+    });
+  }
+  console.log(`[Screenshots] \u2713 Regenerated ${allStoryIds.size} stories`);
 }
 function handleStoryFileChange({ file, modules }) {
   if (file.endsWith(".stories.tsx") || file.endsWith(".stories.ts")) {
@@ -1131,63 +1052,61 @@ function packageMockPlugin(options) {
 
 // src/screenshot-service/utils/console-logs/console-logs.ts
 async function captureConsoleLogs(storyId, theme = "light", storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
-  return captureSemaphore.run(async () => {
-    const browser = await getBrowser();
-    const context = await browser.newContext({
-      viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
-    });
-    const page = await context.newPage();
-    const logs = [];
-    const pageErrors = [];
-    const failedRequests = [];
-    page.on("console", (msg) => {
-      const level = msg.type();
-      logs.push({
-        level: level === "warning" ? "warn" : level,
-        text: msg.text(),
-        timestamp: Date.now()
-      });
-    });
-    page.on("pageerror", (err) => {
-      pageErrors.push(err.message);
-    });
-    page.on("response", (res) => {
-      const status = res.status();
-      if (status >= 400) {
-        const req = res.request();
-        failedRequests.push({
-          url: res.url(),
-          status,
-          method: req.method(),
-          resourceType: req.resourceType(),
-          failure: null
-        });
-      }
+  const browser = await getBrowser();
+  const context = await browser.newContext({
+    viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
+  });
+  const page = await context.newPage();
+  const logs = [];
+  const pageErrors = [];
+  const failedRequests = [];
+  page.on("console", (msg) => {
+    const level = msg.type();
+    logs.push({
+      level: level === "warning" ? "warn" : level,
+      text: msg.text(),
+      timestamp: Date.now()
     });
-    page.on("requestfailed", (req) => {
+  });
+  page.on("pageerror", (err) => {
+    pageErrors.push(err.message);
+  });
+  page.on("response", (res) => {
+    const status = res.status();
+    if (status >= 400) {
+      const req = res.request();
       failedRequests.push({
-        url: req.url(),
-        status: null,
+        url: res.url(),
+        status,
         method: req.method(),
         resourceType: req.resourceType(),
-        failure: req.failure()?.errorText ?? "request failed"
+        failure: null
       });
+    }
+  });
+  page.on("requestfailed", (req) => {
+    failedRequests.push({
+      url: req.url(),
+      status: null,
+      method: req.method(),
+      resourceType: req.resourceType(),
+      failure: req.failure()?.errorText ?? "request failed"
     });
-    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+  });
+  const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+  try {
+    await page.goto(url, { timeout: timeoutMs });
+    await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
+    await page.waitForLoadState("load", { timeout: timeoutMs });
     try {
-      await page.goto(url, { timeout: timeoutMs });
-      await page.waitForLoadState("domcontentloaded", { timeout: timeoutMs });
-      await page.waitForLoadState("load", { timeout: timeoutMs });
-      try {
-        await page.waitForLoadState("networkidle", { timeout: 5e3 });
-      } catch {
-      }
-      await new Promise((r) => setTimeout(r, 1e3));
-      return { logs, pageErrors, failedRequests, url };
-    } finally {
-      await context.close();
+      await page.waitForLoadState("networkidle", { timeout: 5e3 });
+    } catch {
     }
-  });
+    await new Promise((r) => setTimeout(r, 1e3));
+    return { logs, pageErrors, failedRequests, url };
+  } finally {
+    await context.close();
+  }
 }
 
 // src/soft-story-rerender/soft-story-rerender.ts
@@ -1378,17 +1297,6 @@ function findGitRoot(startPath) {
   }
   return null;
 }
-function ifNoneMatchHits(header, etag) {
-  if (!header) return false;
-  return header.split(",").some((raw) => {
-    const token = raw.trim();
-    return token === etag || token === `W/${etag}`;
-  });
-}
-function decideIndexResponse(body, ifNoneMatch) {
-  const etag = `"${createHash("sha1").update(body).digest("hex")}"`;
-  return { etag, notModified: ifNoneMatchHits(ifNoneMatch, etag) };
-}
 var STORY_FILE_PATTERN = /\.stories\.(js|jsx|mjs|ts|tsx|mdx)$/;
 function isStoryFile(file) {
   return STORY_FILE_PATTERN.test(file);
@@ -1421,7 +1329,8 @@ function portFromArgv(argv) {
 }
 async function defaultFetchIndex(port) {
   try {
-    const res = await fetch(`http://localhost:${port}/index.json`, {
+    const res = await fetch(`http://localhost:${port}/index.json?_t=${Date.now()}`, {
+      cache: "no-store",
       signal: AbortSignal.timeout(2e3)
     });
     if (!res.ok) return null;
@@ -1581,8 +1490,15 @@ function detectTailwindEntryCss(cwd) {
 var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
+    const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
-    fetch("http://localhost:6006/index.json").then((response) => {
+    fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
+      cache: "no-store",
+      headers: {
+        "Cache-Control": "no-cache",
+        Pragma: "no-cache"
+      }
+    }).then((response) => {
       console.log("[STORYBOOK_PLUGIN] Storybook index fetch response", {
         status: response.status,
         ok: response.ok,
@@ -1601,21 +1517,12 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         entryCount: Object.keys(indexData.entries || {}).length,
         hasMetadata: !!indexData.meta
       });
-      const body = JSON.stringify(indexData);
-      const { etag, notModified } = decideIndexResponse(
-        body,
-        req.headers["if-none-match"]
-      );
-      res.setHeader("Access-Control-Allow-Origin", "*");
-      res.setHeader("ETag", etag);
-      res.setHeader("Cache-Control", "no-cache");
-      if (notModified) {
-        res.statusCode = 304;
-        res.end();
-        return;
-      }
       res.setHeader("Content-Type", "application/json");
-      res.end(body);
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
+      res.setHeader("Pragma", "no-cache");
+      res.setHeader("Expires", "0");
+      res.end(JSON.stringify(indexData));
     }).catch((error) => {
       console.error("[STORYBOOK_PLUGIN] Failed to fetch/extend index.json", {
         error: error instanceof Error ? error.message : String(error),

package/dist/preset/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-BvrvMhRF.js';
+import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-J4qj72mN.js';
 import 'vite';
 
 declare function pluginOptionsFromPresetOptions(options: Record<string, unknown> | undefined): OnlookPluginOptions;