@miyucy/storybook-mcp 1.0.2 → 1.0.3

package/dist/index.js

@@ -5,12 +5,14 @@ import { McpError, ErrorCode } from "@modelcontextprotocol/sdk/types.js";
 import path from "node:path";
 import fs from "node:fs/promises";
 import process from "node:process";
-import { exec } from "node:child_process";
+import os from "node:os";
 import { z } from "zod";
+import glob from "fast-glob";
+import { Worker } from "node:worker_threads";
 const escapeRegExp = (str) => str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
 class Storybook {
     constructor(storybookRoot) {
-        this.CHUNK_SIZE = 6;
+        this.AVAILABLE_PARALLELISM = os.availableParallelism();
         this.server = new McpServer({
             name: "storybook",
             description: "",
@@ -26,7 +28,7 @@ class Storybook {
     }
     registerStorybook() {
         this.server.resource("Storybookの情報を返します", "storybook://stories", async (uri) => {
-            const inf = this.componentInformation;
+            const inf = [...this.componentInformation];
             if (inf.length === 0) {
                 return { contents: [{ uri: uri.href, text: "No stories found." }] };
             }
@@ -35,7 +37,7 @@ class Storybook {
             };
         });
         this.server.tool("get_storybooks", "Storybookの情報を返します", {}, async () => {
-            const inf = this.componentInformation;
+            const inf = [...this.componentInformation];
             if (inf.length === 0) {
                 return {
                     content: [{ type: "text", text: "No stories found." }],
@@ -49,7 +51,7 @@ class Storybook {
             };
         });
         this.server.resource("Storybookのタイトルや説明をクエリーします\nクエリーは大文字・小文字を区別しません", new ResourceTemplate("storybook://stories?{query}", { list: undefined }), async (uri, { query }) => {
-            const inf = this.componentInformation;
+            const inf = [...this.componentInformation];
             if (inf.length === 0) {
                 return { contents: [{ uri: uri.href, text: "No stories found." }] };
             }
@@ -65,7 +67,7 @@ class Storybook {
             };
         });
         this.server.tool("query_storybooks", "Storybookのタイトルや説明をクエリーします\nクエリーは大文字・小文字を区別しません", { query: z.string() }, async ({ query }) => {
-            const inf = this.componentInformation;
+            const inf = [...this.componentInformation];
             if (inf.length === 0) {
                 return {
                     content: [{ type: "text", text: "No stories found." }],
@@ -143,100 +145,75 @@ class Storybook {
             entries.push(entry);
         }
         console.debug(`Found ${entries.length} entries.`);
-        {
-            const chunks = Array.from(new Set(entries.map((entry) => entry.componentPath))).reduce((r, e) => {
-                const last = r[r.length - 1];
-                if (last.length < this.CHUNK_SIZE) {
-                    last.push(e);
-                }
-                else {
-                    r.push([e]);
-                }
-                return r;
-            }, [[]]);
-            for await (const chunk of chunks) {
-                const docgenInfos = {};
-                // docgenInfoを取得する
-                const results = await Promise.allSettled(chunk.map((componentPath) => this.getComponentInfo(componentPath)));
-                for (let i = 0; i < results.length; i++) {
-                    const result = results[i];
-                    if (result.status === "fulfilled") {
-                        docgenInfos[chunk[i]] = result.value;
-                    }
-                    else {
-                        console.error(`Failed to get component info for ${chunk[i]}:`, result.reason);
-                    }
-                }
-                // componentInformationを作成する(随時更新)
-                for (const entry of entries) {
-                    for (const componentPath of chunk) {
-                        if (entry.componentPath === componentPath) {
-                            this.componentInformation.push({
-                                title: entry.title,
-                                id: entry.id,
-                                name: entry.name,
-                                importPath: entry.importPath,
-                                componentPath: entry.componentPath,
-                                docgenInfo: docgenInfos[entry.componentPath] || [],
-                            });
-                        }
-                    }
-                }
-            }
-        }
-        // for await (const entry of entries) {
-        //   if (docgenInfos[entry.componentPath]) {
-        //     // すでに取得済みの場合はスキップ
-        //     continue;
-        //   }
-        //   try {
-        //     console.debug(`Getting component info for ${entry.componentPath}...`);
-        //     const infos = await this.getComponentInfo(entry.componentPath);
-        //     if (infos.length > 0) {
-        //       console.debug(`Got ${infos.length} component info for ${entry.componentPath}.`);
-        //       docgenInfos[entry.componentPath] = infos;
-        //     }
-        //   } catch (error) {
-        //     console.error(`Failed to get component info for ${entry.componentPath}:`, error);
-        //   }
-        // }
-        // componentInformationを作成する
-        // for (const entry of entries) {
-        //   this.componentInformation.push({
-        //     id: entry.id,
-        //     name: entry.name,
-        //     title: entry.title,
-        //     importPath: entry.importPath,
-        //     componentPath: entry.componentPath,
-        //     docgenInfo: docgenInfos[entry.componentPath] || [],
-        //   });
-        // }
+        this.loadStorybookEntries(entries);
         console.debug("Component information loaded successfully.");
     }
-    // npx -y @react-docgen/cli --resolver find-all-exported-components を実行して標準出力からコンポーネントの情報を取得する
-    async getComponentInfo(importPath) {
+    //
+    async loadStorybookEntries(entries) {
+        const componentPaths = Array.from(new Set(entries.map((entry) => entry.componentPath)));
+        const resolved = {};
         const regex = /\.[jt]sx$/;
-        const argImportPath = regex.test(importPath)
-            ? importPath
-            : `${importPath}/index.[jt]sx`;
-        return new Promise((resolve, reject) => {
-            console.debug(`Executing command to get component info for ${argImportPath}...`);
-            exec(`npx -y @react-docgen/cli --resolver find-all-exported-components '${argImportPath}'`, {
-                cwd: this.storybookRoot,
-                env: { ...process.env, NO_COLOR: "true" },
-            }, (error, stdout, _stderr) => {
-                if (error) {
-                    reject(error);
-                    return;
+        for await (const componentPath of componentPaths) {
+            if (regex.test(componentPath)) {
+                resolved[componentPath] = path.resolve(this.storybookRoot, componentPath);
+            }
+            else {
+                const paths = await glob(`${componentPath}/index.[jt]sx`, {
+                    cwd: this.storybookRoot,
+                    onlyFiles: true,
+                    absolute: true,
+                });
+                if (paths.length > 0) {
+                    resolved[componentPath] = path.resolve(this.storybookRoot, paths[0]);
                 }
-                if (stdout === "") {
-                    resolve([]);
-                    return;
+            }
+        }
+        const tasks = componentPaths.map((componentPath) => {
+            const filepath = resolved[componentPath];
+            return { filepath, componentPath };
+        });
+        const workers = [];
+        const processNext = () => {
+            const worker = workers.pop();
+            if (!worker) {
+                return;
+            }
+            const task = tasks.pop();
+            if (!task) {
+                worker.terminate();
+                return;
+            }
+            worker.postMessage(task);
+        };
+        for (let i = 0; i < this.AVAILABLE_PARALLELISM; i++) {
+            const worker = new Worker("./dist/parser.js");
+            worker.on("message", (event) => {
+                // console.log("message", event);
+                const { componentPath, data } = event;
+                if (event.type === "error") {
+                    console.error(`Failed to get component info for ${event.filepath}:`, event.error);
                 }
-                const data = JSON.parse(stdout);
-                resolve(Object.values(data).flat());
+                for (const entry of entries) {
+                    if (entry.componentPath === componentPath) {
+                        this.componentInformation.push({
+                            title: entry.title,
+                            id: entry.id,
+                            name: entry.name,
+                            importPath: entry.importPath,
+                            componentPath: entry.componentPath,
+                            docgenInfo: data || [],
+                        });
+                    }
+                }
+                console.log(`${this.componentInformation.length} components loaded.`);
+                workers.push(worker);
+                processNext();
             });
-        });
+            workers.push(worker);
+        }
+        for (let i = 0; i < Math.min(tasks.length, workers.length); i++) {
+            processNext();
+        }
     }
 }
 // --- サーバー起動 ---

package/dist/parser.js

@@ -0,0 +1,32 @@
+import { builtinHandlers, parse, builtinResolvers } from "react-docgen";
+import { parentPort } from "node:worker_threads";
+import { readFile } from "node:fs/promises";
+const resolver = new builtinResolvers.FindExportedDefinitionsResolver();
+const handlers = Object.values(builtinHandlers);
+parentPort?.on("message", async (message) => {
+    // console.log("message", message);
+    if (message.filepath) {
+        try {
+            const content = await readFile(message.filepath, "utf-8");
+            const result = parse(content, {
+                filename: message.filepath,
+                handlers,
+                resolver,
+            });
+            parentPort?.postMessage({
+                type: "result",
+                filepath: message.filepath,
+                componentPath: message.componentPath,
+                data: result,
+            });
+        }
+        catch (error) {
+            parentPort?.postMessage({
+                type: "error",
+                filepath: message.filepath,
+                componentPath: message.componentPath,
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miyucy/storybook-mcp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -19,6 +19,8 @@
   "type": "module",
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.10.1",
+    "fast-glob": "^3.3.3",
+    "react-docgen": "^7.1.1",
     "zod": "3.24.3"
   },
   "devDependencies": {