@onlook/storybook-plugin 0.3.3 → 0.3.5

package/README.md

@@ -76,6 +76,27 @@ Screenshots are saved to `.storybook-cache/screenshots/`.
 
 The plugin auto-disables when `CHROMATIC` or `CI` environment variables are set.
 
+## Publishing
+
+Three release paths:
+
+```bash
+# 1. Ship the current version to npm as `latest` (default dist-tag).
+bun run publish-pkg
+
+# 2. Ship under the `next` dist-tag — for testing against preview deploys
+#    without affecting consumers pinned to ^x.y.z ranges. Consumers opt in
+#    via `@onlook/storybook-plugin@next`.
+bun run publish-pkg:next
+
+# 3. Promote a previously-published version to `latest`. Reads the version
+#    from package.json, so bump first if you want to promote something else.
+bun run promote-latest
+```
+
+The typical flow for risky changes: `publish-pkg:next` → test against a
+Vercel preview deploy → `promote-latest` once confident.
+
 ## License
 
 MIT

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { PluginOption } from 'vite';
+import { Indexer } from 'storybook/internal/types';
 
 type OnlookPluginOptions = {
     /** Storybook port (default: 6006) */
@@ -8,4 +9,6 @@ type OnlookPluginOptions = {
 };
 declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
 
-export { type OnlookPluginOptions, storybookOnlookPlugin };
+declare const tolerantCsfIndexer: Indexer;
+
+export { type OnlookPluginOptions, storybookOnlookPlugin, tolerantCsfIndexer };

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,8 @@ 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
 function componentLocPlugin(options = {}) {
@@ -31,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;
@@ -68,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;
@@ -78,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();
@@ -127,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();
@@ -215,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(
@@ -228,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);
@@ -255,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) {
@@ -320,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)) {
@@ -345,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}`, {
@@ -362,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];
@@ -430,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/")
@@ -439,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")) {
@@ -451,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");
@@ -536,7 +728,19 @@ function storybookOnlookPlugin(options = {}) {
     },
     handleHotUpdate: handleStoryFileChange
   };
-  return [componentLocPlugin(), mainPlugin];
+  return [lucideBarrelPlugin(), componentLocPlugin(), mainPlugin];
 }
+var tolerantCsfIndexer = {
+  test: /(stories|story)\.(m?js|ts)x?$/,
+  createIndex: async (fileName, options) => {
+    try {
+      return (await readCsf(fileName, options)).parse().indexInputs;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.warn("[onbook] Skipping broken story file:", fileName, msg);
+      return [];
+    }
+  }
+};
 
-export { storybookOnlookPlugin };
+export { storybookOnlookPlugin, tolerantCsfIndexer };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "bin": {
-    "onlook-storybook": "./dist/cli/index.js"
+    "onlook-storybook": "dist/cli/index.js"
   },
   "exports": {
     ".": {
@@ -29,7 +29,9 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "bun run build && bun scripts/prepublish.ts",
     "postpublish": "bun scripts/postpublish.ts",
-    "publish-pkg": "npm publish"
+    "publish-pkg": "npm publish",
+    "publish-pkg:next": "npm publish --tag next",
+    "promote-latest": "npm dist-tag add @onlook/storybook-plugin@$(node -p \"require('./package.json').version\") latest"
   },
   "dependencies": {
     "@babel/generator": "^7.26.9",
@@ -45,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"
@@ -53,6 +56,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "storybook": "^10.0.0",
     "vite": "^5.0.0 || ^6.0.0"
   }
 }