@onlook/storybook-plugin 0.3.5 → 0.3.6

package/dist/index.js

@@ -1,5 +1,5 @@
-import fs5, { existsSync } from 'fs';
-import path5, { dirname, join, relative } from 'path';
+import fs4, { existsSync } from 'fs';
+import path2, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -7,7 +7,6 @@ import traverseModule from '@babel/traverse';
 import * as t from '@babel/types';
 import crypto from 'crypto';
 import { chromium } from 'playwright';
-import { createRequire } from 'module';
 import { readCsf } from 'storybook/internal/csf-tools';
 
 // src/storybook-onlook-plugin.ts
@@ -33,7 +32,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path5.relative(root, filepath);
+      const relativePath = path2.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -70,9 +69,9 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-var CACHE_DIR = path5.join(process.cwd(), ".storybook-cache");
-var SCREENSHOTS_DIR = path5.join(CACHE_DIR, "screenshots");
-var MANIFEST_PATH = path5.join(CACHE_DIR, "manifest.json");
+var CACHE_DIR = path2.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path2.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path2.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -80,30 +79,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs5.existsSync(CACHE_DIR)) {
-    fs5.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs4.existsSync(CACHE_DIR)) {
+    fs4.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
-    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
+    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs5.existsSync(filePath)) {
+  if (!fs4.existsSync(filePath)) {
     return "";
   }
-  const content = fs5.readFileSync(filePath, "utf-8");
+  const content = fs4.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs5.existsSync(MANIFEST_PATH)) {
-    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs4.existsSync(MANIFEST_PATH)) {
+    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -129,8 +128,8 @@ async function getBrowser() {
   return browser;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path5.join(SCREENSHOTS_DIR, storyId);
-  return path5.join(storyDir, `${theme}.png`);
+  const storyDir = path2.join(SCREENSHOTS_DIR, storyId);
+  return path2.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
@@ -217,9 +216,9 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path5.join(SCREENSHOTS_DIR, storyId);
-    if (!fs5.existsSync(storyDir)) {
-      fs5.mkdirSync(storyDir, { recursive: true });
+    const storyDir = path2.join(SCREENSHOTS_DIR, storyId);
+    if (!fs4.existsSync(storyDir)) {
+      fs4.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -230,7 +229,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs5.writeFileSync(screenshotPath, buffer);
+    fs4.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -257,7 +256,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path5.basename(filePath);
+  const fileName = path2.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -322,196 +321,6 @@ function handleStoryFileChange({ file, modules }) {
     return modules;
   }
 }
-function buildLucideExportMap(barrelSource, barrelRelativeDir) {
-  const ast = parse(barrelSource, { sourceType: "module" });
-  const map = /* @__PURE__ */ new Map();
-  for (const node of ast.program.body) {
-    if (node.type !== "ExportNamedDeclaration") continue;
-    if (!node.source) continue;
-    const rawSource = node.source.value;
-    const subpath = path5.posix.join(barrelRelativeDir, rawSource.replace(/^\.\//, ""));
-    for (const spec of node.specifiers) {
-      if (spec.type !== "ExportSpecifier") continue;
-      const exportedName = spec.exported.type === "Identifier" ? spec.exported.name : null;
-      if (!exportedName) continue;
-      const localName = spec.local.name;
-      if (localName === "default") {
-        map.set(exportedName, { kind: "default", subpath });
-      } else {
-        map.set(exportedName, { kind: "named", subpath, name: localName });
-      }
-    }
-  }
-  return map;
-}
-function transformLucideImports(code, filepath, exportMap) {
-  if (!code.includes("lucide-react")) return null;
-  if (!/\bimport\b[^;]*['"]lucide-react['"]/.test(code)) return null;
-  const traverse = traverseModule.default ?? traverseModule;
-  const generate = generateModule.default ?? generateModule;
-  const ast = parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"],
-    sourceFilename: filepath
-  });
-  let mutated = false;
-  traverse(ast, {
-    ImportDeclaration(nodePath) {
-      const node = nodePath.node;
-      if (node.source.value !== "lucide-react") return;
-      if (node.importKind === "type") return;
-      const rewritten = [];
-      const preserved = [];
-      for (const spec of node.specifiers) {
-        if (spec.type !== "ImportSpecifier") {
-          preserved.push(spec);
-          continue;
-        }
-        if (spec.importKind === "type") {
-          preserved.push(spec);
-          continue;
-        }
-        const importedName = spec.imported.type === "Identifier" ? spec.imported.name : null;
-        if (!importedName) {
-          preserved.push(spec);
-          continue;
-        }
-        const resolution = exportMap.get(importedName);
-        if (!resolution) {
-          preserved.push(spec);
-          continue;
-        }
-        const subpathSource = t.stringLiteral(`lucide-react/${resolution.subpath}`);
-        if (resolution.kind === "default") {
-          rewritten.push(
-            t.importDeclaration(
-              [t.importDefaultSpecifier(t.identifier(spec.local.name))],
-              subpathSource
-            )
-          );
-        } else {
-          rewritten.push(
-            t.importDeclaration(
-              [
-                t.importSpecifier(
-                  t.identifier(spec.local.name),
-                  t.identifier(resolution.name)
-                )
-              ],
-              subpathSource
-            )
-          );
-        }
-      }
-      if (rewritten.length === 0) return;
-      mutated = true;
-      if (preserved.length > 0) {
-        const residual = t.importDeclaration(preserved, t.stringLiteral("lucide-react"));
-        nodePath.replaceWithMultiple([...rewritten, residual]);
-      } else {
-        nodePath.replaceWithMultiple(rewritten);
-      }
-    }
-  });
-  if (!mutated) return null;
-  const output = generate(
-    ast,
-    { retainLines: true, sourceMaps: true, sourceFileName: filepath },
-    code
-  );
-  return { code: output.code, map: output.map };
-}
-async function resolveLucideBarrel(config) {
-  try {
-    const resolver = config.createResolver({ asSrc: false });
-    const resolved = await resolver("lucide-react", path5.join(config.root, "index.js"));
-    if (resolved && fs5.existsSync(resolved)) return resolved;
-  } catch {
-  }
-  try {
-    const req = createRequire(path5.join(config.root, "package.json"));
-    return req.resolve("lucide-react");
-  } catch {
-    return null;
-  }
-}
-function computeBarrelRelativeDir(barrelPath) {
-  let dir = path5.dirname(barrelPath);
-  while (dir !== path5.dirname(dir)) {
-    const pj = path5.join(dir, "package.json");
-    if (fs5.existsSync(pj)) {
-      try {
-        const pkg = JSON.parse(fs5.readFileSync(pj, "utf-8"));
-        if (pkg.name === "lucide-react") {
-          const rel = path5.relative(dir, barrelPath).split(path5.sep).join("/");
-          return `${path5.posix.dirname(rel)}/`;
-        }
-      } catch {
-      }
-    }
-    dir = path5.dirname(dir);
-  }
-  return null;
-}
-var PLUGIN_NAME = "onbook-lucide-barrel";
-function lucideBarrelPlugin() {
-  let exportMap = /* @__PURE__ */ new Map();
-  let enabled = false;
-  let warnedTransformOnce = false;
-  return {
-    name: PLUGIN_NAME,
-    enforce: "pre",
-    apply: "serve",
-    config() {
-      return {
-        optimizeDeps: {
-          exclude: ["lucide-react"]
-        }
-      };
-    },
-    async configResolved(config) {
-      const barrelPath = await resolveLucideBarrel(config);
-      if (!barrelPath) {
-        return;
-      }
-      const relativeDir = computeBarrelRelativeDir(barrelPath);
-      if (!relativeDir) {
-        config.logger.warn(
-          `[${PLUGIN_NAME}] Could not locate lucide-react package root from ${barrelPath}; plugin is a no-op.`
-        );
-        return;
-      }
-      try {
-        const source = fs5.readFileSync(barrelPath, "utf-8");
-        exportMap = buildLucideExportMap(source, relativeDir);
-        enabled = true;
-      } catch (e) {
-        config.logger.warn(
-          `[${PLUGIN_NAME}] Failed to parse lucide-react barrel at ${barrelPath}: ${e instanceof Error ? e.message : String(e)}`
-        );
-      }
-    },
-    transform(code, id) {
-      if (!enabled) return null;
-      const filepath = id.split("?", 1)[0];
-      if (!filepath || filepath.includes("node_modules")) return null;
-      if (!/\.(tsx?|jsx?)$/.test(filepath)) return null;
-      try {
-        const result = transformLucideImports(code, filepath, exportMap);
-        if (!result) return null;
-        return { code: result.code, map: result.map };
-      } catch (e) {
-        if (!warnedTransformOnce) {
-          warnedTransformOnce = true;
-          console.warn(
-            `[${PLUGIN_NAME}] Transform error for ${id}: ${e instanceof Error ? e.message : String(e)} (further errors suppressed)`
-          );
-        }
-        return null;
-      }
-    }
-  };
-}
 function findGitRoot(startPath) {
   let currentPath = startPath;
   while (currentPath !== dirname(currentPath)) {
@@ -537,7 +346,7 @@ var DEFAULT_ALLOWED_ORIGINS = [
 var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
-    const manifestPath = path5.join(process.cwd(), ".storybook-cache", "manifest.json");
+    const manifestPath = path2.join(process.cwd(), ".storybook-cache", "manifest.json");
     const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
     fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
@@ -554,7 +363,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       });
       return response.json();
     }).then((indexData) => {
-      const manifest = fs5.existsSync(manifestPath) ? JSON.parse(fs5.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+      const manifest = fs4.existsSync(manifestPath) ? JSON.parse(fs4.readFileSync(manifestPath, "utf-8")) : { stories: {} };
       const defaultBoundingBox = { width: 1920, height: 1080 };
       for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
         const manifestEntry = manifest.stories?.[storyId];
@@ -622,7 +431,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path5.join(
+    const screenshotPath = path2.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -631,11 +440,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs5.existsSync(screenshotPath)) {
+    if (fs4.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs5.createReadStream(screenshotPath).pipe(res);
+      fs4.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -643,16 +452,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path5.join(
+        const storyDir = path2.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs5.existsSync(storyDir)) {
-          fs5.mkdirSync(storyDir, { recursive: true });
+        if (!fs4.existsSync(storyDir)) {
+          fs4.mkdirSync(storyDir, { recursive: true });
         }
-        fs5.writeFileSync(screenshotPath, buffer);
+        fs4.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -709,6 +518,23 @@ function storybookOnlookPlugin(options = {}) {
           cors: {
             origin: allowedOrigins
           }
+        },
+        optimizeDeps: {
+          // Collapse lucide-react's icon graph into a single prebundled chunk.
+          // Without these two directives, repos that import both `lucide-react`
+          // AND `lucide-react/dynamic` become two co-equal esbuild scan entries
+          // sharing ~5,800 icon modules — esbuild's code-splitting then shatters
+          // the shared graph per-icon, producing ~1,770 HTTP requests per iframe
+          // and tripping Chrome's URLLoader scheduler on canvases with multiple
+          // frames (net::ERR_INSUFFICIENT_RESOURCES / "Failed to fetch
+          // dynamically imported module"). Parent: ONL-832. Fix: ONL-875.
+          //
+          // `include: ['lucide-react']` pins it as a single scan entry that
+          // esbuild bundles into one chunk. `exclude: ['lucide-react/dynamic']`
+          // keeps the DynamicIcon pathway out of prebundling so it can't become
+          // a second shared-graph entry.
+          include: ["lucide-react"],
+          exclude: ["lucide-react/dynamic"]
         }
       };
     },
@@ -728,7 +554,7 @@ function storybookOnlookPlugin(options = {}) {
     },
     handleHotUpdate: handleStoryFileChange
   };
-  return [lucideBarrelPlugin(), componentLocPlugin(), mainPlugin];
+  return [componentLocPlugin(), mainPlugin];
 }
 var tolerantCsfIndexer = {
   test: /(stories|story)\.(m?js|ts)x?$/,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "type": "module",
   "bin": {
     "onlook-storybook": "dist/cli/index.js"