@onlook/storybook-plugin 0.4.0-beta.4 → 0.4.0-beta.5

package/dist/index.js

@@ -542,6 +542,7 @@ function createAutoStoryPlugin(options) {
   const projectRootDir = (options.projectRoot ?? process.cwd()).replace(/\\/g, "/");
   const batchSize = options.batchSize ?? DEFAULT_BATCH_SIZE;
   const concurrency = options.concurrency ?? DEFAULT_CONCURRENCY;
+  let hasRun = false;
   console.log("[ASG] Plugin created", {
     preset: options.preset,
     imports: options.imports,
@@ -550,47 +551,58 @@ function createAutoStoryPlugin(options) {
     projectRoot: projectRootDir,
     cwd: process.cwd()
   });
+  async function generateAllStories() {
+    if (hasRun) return;
+    hasRun = true;
+    if (!options.isGenerateStoriesFileAtBuild) {
+      console.log("[ASG] Skipping \u2014 isGenerateStoriesFileAtBuild is false");
+      return;
+    }
+    const patterns = options.imports ?? ["src/**/*.tsx"];
+    const ignorePatterns = options.ignores ?? [];
+    console.log(`[ASG] Scanning for components: ${patterns.join(", ")}`);
+    const allFiles = await getAllFilePaths({
+      patterns,
+      ignorePatterns,
+      projectRootDir
+    });
+    const filesToProcess = allFiles.filter((filePath) => {
+      if (filePath.includes(".stories")) return false;
+      if (options.cacheEnabled !== false) {
+        const storyPath = getStoryFilePath(filePath, options.storiesFolder);
+        const storyExists = fs.existsSync(storyPath);
+        if (!hasFileChanged(filePath) && storyExists) return false;
+      }
+      return true;
+    });
+    console.log(
+      `[ASG] Found ${allFiles.length} files, ${filesToProcess.length} need processing`
+    );
+    let totalProcessed = 0;
+    for (let i = 0; i < filesToProcess.length; i += batchSize) {
+      const batch = filesToProcess.slice(i, i + batchSize);
+      const count = await processBatch(batch, options, projectRootDir, concurrency);
+      totalProcessed += count;
+      if (options.onProgress) {
+        options.onProgress(totalProcessed, filesToProcess.length);
+      }
+      if (i + batchSize < filesToProcess.length) {
+        await new Promise((r) => setTimeout(r, 0));
+      }
+    }
+    console.log(`[ASG] Generated stories for ${totalProcessed} components`);
+  }
   return {
     name: PLUGIN_NAME,
+    // configureServer fires for Vite dev server (Storybook's use case)
+    async configureServer() {
+      console.log("[ASG] configureServer hook fired");
+      await generateAllStories();
+    },
+    // buildStart fires for builds (fallback)
     async buildStart() {
       console.log("[ASG] buildStart hook fired");
-      if (!options.isGenerateStoriesFileAtBuild) {
-        console.log("[ASG] Skipping \u2014 isGenerateStoriesFileAtBuild is false");
-        return;
-      }
-      const patterns = options.imports ?? ["src/**/*.tsx"];
-      const ignorePatterns = options.ignores ?? [];
-      console.log(`[ASG] Scanning for components: ${patterns.join(", ")}`);
-      const allFiles = await getAllFilePaths({
-        patterns,
-        ignorePatterns,
-        projectRootDir
-      });
-      const filesToProcess = allFiles.filter((filePath) => {
-        if (filePath.includes(".stories")) return false;
-        if (options.cacheEnabled !== false) {
-          const storyPath = getStoryFilePath(filePath, options.storiesFolder);
-          const storyExists = fs.existsSync(storyPath);
-          if (!hasFileChanged(filePath) && storyExists) return false;
-        }
-        return true;
-      });
-      console.log(
-        `[ASG] Found ${allFiles.length} files, ${filesToProcess.length} need processing`
-      );
-      let totalProcessed = 0;
-      for (let i = 0; i < filesToProcess.length; i += batchSize) {
-        const batch = filesToProcess.slice(i, i + batchSize);
-        const count = await processBatch(batch, options, projectRootDir, concurrency);
-        totalProcessed += count;
-        if (options.onProgress) {
-          options.onProgress(totalProcessed, filesToProcess.length);
-        }
-        if (i + batchSize < filesToProcess.length) {
-          await new Promise((r) => setTimeout(r, 0));
-        }
-      }
-      console.log(`[ASG] Generated stories for ${totalProcessed} components`);
+      await generateAllStories();
     },
     async watchChange(id, change) {
       if (change.event === "delete") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0-beta.5",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"