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

package/dist/screenshot-service/index.js

@@ -151,6 +151,50 @@ 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((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";
@@ -226,87 +270,89 @@ 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) {
-  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 {
-      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
-      };
+  return captureSemaphore.run(async () => {
+    const browser = await getBrowser();
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: 2
     });
-    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
-        }
+    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 {
+        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
+        };
       });
-    } else {
-      screenshotBuffer = await page.screenshot({ type: "png" });
+      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();
     }
-    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox, renderState };
-  } finally {
-    await context.close();
-  }
+  });
 }
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {

package/dist/{storybook-onlook-plugin-B9Eo_OIq.d.ts → storybook-onlook-plugin-BvrvMhRF.d.ts}

@@ -42,6 +42,28 @@ type EnvContainmentOptions = {
  */
 declare function envContainmentPlugin(options: EnvContainmentOptions | undefined): Plugin | null;
 
+/** One package to replace with a functional zero-backend mock. */
+interface PackageMockEntry {
+    /** Bare npm specifier to intercept, e.g. `@clerk/nextjs`. */
+    package: string;
+    /**
+     * Named exports the customer actually imports from the package (the union
+     * across story-reachable component sources). The generated mock provides a
+     * stand-in for each so no `import { X } from '@clerk/nextjs'` produces a Vite
+     * "no matching export" build error.
+     */
+    usedExports: string[];
+}
+/**
+ * The `packageMock` plugin-options surface. Written by the preflight engine into
+ * `.storybook/main.*` (`storybookOnlookPlugin({ packageMock })`). Mirrored
+ * structurally as `PackageMockValue` in
+ * `packages/preflight/src/checks/storybook/patch.ts` — keep the shapes in sync.
+ */
+interface PackageMockOptions {
+    packages?: PackageMockEntry[];
+}
+
 type OnlookPluginOptions = {
     /** Storybook port (default: 6006) */
     port?: number;
@@ -54,6 +76,7 @@ type OnlookPluginOptions = {
     storyGlobs?: string[];
     tailwindEntryCss?: string | false;
     envContainment?: EnvContainmentOptions;
+    packageMock?: PackageMockOptions;
     moduleLoadCatchAll?: boolean;
     resolveAliases?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.16",
+  "version": "0.4.0-beta.17",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -35,6 +35,7 @@
   "scripts": {
     "build": "rm -rf dist && tsup",
     "clean": "git clean -xdf .cache .turbo dist node_modules",
+    "test": "bun test",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build && bun scripts/prepublish.ts",
     "postpublish": "bun scripts/postpublish.ts",
@@ -52,7 +53,7 @@
     "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",