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

package/dist/cli/index.js

@@ -153,50 +153,6 @@ async function closeBrowser() {
 var ONLOOK_RENDER_STATE_ATTR = "data-onlook-render-state";
 var ONLOOK_CONTAINED_CARD_ATTR = "data-onlook-contained-card";
 
-// 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((resolve3) => {
-      waiters.push(() => {
-        active += 1;
-        resolve3();
-      });
-    });
-  };
-  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";
@@ -272,89 +228,87 @@ function screenshotExists(storyId, theme) {
   return fs.existsSync(screenshotPath);
 }
 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((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;
-        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((resolve3) => {
+              img.addEventListener("load", resolve3);
+              img.addEventListener("error", resolve3);
+              setTimeout(resolve3, 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 {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-BvrvMhRF.js';
+export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-J4qj72mN.js';
 import { Plugin } from 'vite';
 import { Indexer } from 'storybook/internal/types';