@onlook/storybook-plugin 0.3.4 → 0.3.5

package/dist/index.js

@@ -1,5 +1,5 @@
-import fs4, { existsSync } from 'fs';
-import path2, { dirname, join, relative } from 'path';
+import fs5, { existsSync } from 'fs';
+import path5, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -7,6 +7,7 @@ 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
@@ -32,7 +33,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path2.relative(root, filepath);
+      const relativePath = path5.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -69,9 +70,9 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-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 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 VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -79,30 +80,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs4.existsSync(CACHE_DIR)) {
-    fs4.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs5.existsSync(CACHE_DIR)) {
+    fs5.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs4.existsSync(SCREENSHOTS_DIR)) {
-    fs4.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
+    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs4.existsSync(filePath)) {
+  if (!fs5.existsSync(filePath)) {
     return "";
   }
-  const content = fs4.readFileSync(filePath, "utf-8");
+  const content = fs5.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs4.existsSync(MANIFEST_PATH)) {
-    const content = fs4.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs5.existsSync(MANIFEST_PATH)) {
+    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs4.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -128,8 +129,8 @@ async function getBrowser() {
   return browser;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path2.join(SCREENSHOTS_DIR, storyId);
-  return path2.join(storyDir, `${theme}.png`);
+  const storyDir = path5.join(SCREENSHOTS_DIR, storyId);
+  return path5.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();
@@ -216,9 +217,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 = path2.join(SCREENSHOTS_DIR, storyId);
-    if (!fs4.existsSync(storyDir)) {
-      fs4.mkdirSync(storyDir, { recursive: true });
+    const storyDir = path5.join(SCREENSHOTS_DIR, storyId);
+    if (!fs5.existsSync(storyDir)) {
+      fs5.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -229,7 +230,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs4.writeFileSync(screenshotPath, buffer);
+    fs5.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -256,7 +257,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path2.basename(filePath);
+  const fileName = path5.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -321,6 +322,196 @@ 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)) {
@@ -346,7 +537,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 = path2.join(process.cwd(), ".storybook-cache", "manifest.json");
+    const manifestPath = path5.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}`, {
@@ -363,7 +554,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       });
       return response.json();
     }).then((indexData) => {
-      const manifest = fs4.existsSync(manifestPath) ? JSON.parse(fs4.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+      const manifest = fs5.existsSync(manifestPath) ? JSON.parse(fs5.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];
@@ -431,7 +622,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path2.join(
+    const screenshotPath = path5.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -440,11 +631,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs4.existsSync(screenshotPath)) {
+    if (fs5.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs4.createReadStream(screenshotPath).pipe(res);
+      fs5.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -452,16 +643,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path2.join(
+        const storyDir = path5.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs4.existsSync(storyDir)) {
-          fs4.mkdirSync(storyDir, { recursive: true });
+        if (!fs5.existsSync(storyDir)) {
+          fs5.mkdirSync(storyDir, { recursive: true });
         }
-        fs4.writeFileSync(screenshotPath, buffer);
+        fs5.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -537,7 +728,7 @@ function storybookOnlookPlugin(options = {}) {
     },
     handleHotUpdate: handleStoryFileChange
   };
-  return [componentLocPlugin(), mainPlugin];
+  return [lucideBarrelPlugin(), 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.4",
+  "version": "0.3.5",
   "type": "module",
   "bin": {
     "onlook-storybook": "dist/cli/index.js"
@@ -47,6 +47,7 @@
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",
     "bun-types": "^1.3.5",
+    "storybook": "^10.1.11",
     "tsup": "^8.5.1",
     "typescript": "5.8.3",
     "vite": "^6.3.5"