rsbuild-plugin-vue-mcp 0.1.0

package/dist/551.js

@@ -0,0 +1,287 @@
+import { createHooks } from "hookable";
+import { createBirpcGroup } from "birpc";
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+function createVueMcpContext() {
+    return {
+        hooks: createHooks(),
+        rpc: null,
+        rpcServer: null
+    };
+}
+function createServerRpcFunc(ctx) {
+    return {
+        getInspectorTree: (_)=>({}),
+        onInspectorTreeUpdated: (event, data)=>{
+            ctx.hooks.callHook(event, data).finally();
+        },
+        getInspectorState: (_)=>({}),
+        onInspectorStateUpdated: (event, data)=>{
+            ctx.hooks.callHook(event, data).finally();
+        },
+        editComponentState (_) {},
+        highlightComponent (_) {},
+        getRouterInfo: (_)=>({}),
+        onRouterInfoUpdated: (event, data)=>{
+            ctx.hooks.callHook(event, data).finally();
+        },
+        getPiniaTree: (_)=>({}),
+        onPiniaTreeUpdated: (event, data)=>{
+            ctx.hooks.callHook(event, data).finally();
+        },
+        getPiniaState: (_)=>({}),
+        onPiniaInfoUpdated: (event, data)=>{
+            ctx.hooks.callHook(event, data).finally();
+        }
+    };
+}
+const channelCache = new WeakMap();
+function createRPCServer(ws, functions, options = {}) {
+    const group = createBirpcGroup(functions, ()=>Array.from(ws?.clients || []).map((channel)=>{
+            if (channel.readyState === channel.CLOSED) return;
+            const cached = channelCache.get(channel);
+            if (cached) return cached;
+            const options = {
+                on: (fn)=>channel.on('message', fn),
+                post: (data)=>channel.send(data),
+                serialize: (v)=>JSON.stringify(v),
+                deserialize: (v)=>JSON.parse(v)
+            };
+            channelCache.set(channel, options);
+            return options;
+        }).filter((c)=>!!c), options);
+    ws.on('connection', ()=>{
+        group.updateChannels();
+    });
+    return group.broadcast;
+}
+var package_namespaceObject = {
+    rE: "0.1.0"
+};
+function stringify(value) {
+    return "string" == typeof value ? value : JSON.stringify(value);
+}
+function createMcpServerDefault(options, ctx) {
+    const server = new McpServer({
+        name: "rsbuild-vue-mcp",
+        description: 'Rsbuild/Rspack MCP plugin based on Vue DevTools',
+        version: package_namespaceObject.rE,
+        ...options.mcpServerInfo
+    });
+    server.registerTool('get-component-tree', {
+        description: 'Get the Vue component tree in markdown tree syntax format.'
+    }, async ()=>new Promise((resolve, reject)=>{
+            const eventName = nanoid();
+            ctx.hooks.hookOnce(eventName, (res)=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: stringify(res)
+                        }
+                    ]
+                });
+            });
+            ctx.rpcServer.getInspectorTree({
+                event: eventName
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('get-component-state', {
+        description: 'Get the Vue component state in JSON structure format.',
+        inputSchema: {
+            componentName: z.string()
+        }
+    }, async ({ componentName })=>new Promise((resolve, reject)=>{
+            const eventName = nanoid();
+            ctx.hooks.hookOnce(eventName, (res)=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: stringify(res)
+                        }
+                    ]
+                });
+            });
+            ctx.rpcServer.getInspectorState({
+                event: eventName,
+                componentName
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('edit-component-state', {
+        description: 'Edit the Vue component state.',
+        inputSchema: {
+            componentName: z.string(),
+            path: z.array(z.string()),
+            value: z.string(),
+            valueType: z["enum"]([
+                'string',
+                'number',
+                'boolean',
+                'object',
+                'array'
+            ])
+        }
+    }, async ({ componentName, path, value, valueType })=>new Promise((resolve, reject)=>{
+            ctx.rpcServer.editComponentState({
+                componentName,
+                path,
+                value,
+                valueType
+            }).then(()=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'ok'
+                        }
+                    ]
+                });
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('highlight-component', {
+        description: 'Highlight the Vue component.',
+        inputSchema: {
+            componentName: z.string()
+        }
+    }, async ({ componentName })=>new Promise((resolve, reject)=>{
+            ctx.rpcServer.highlightComponent({
+                componentName
+            }).then(()=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'ok'
+                        }
+                    ]
+                });
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('get-router-info', {
+        description: 'Get the Vue router info in JSON structure format.'
+    }, async ()=>new Promise((resolve, reject)=>{
+            const eventName = nanoid();
+            ctx.hooks.hookOnce(eventName, (res)=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: stringify(res)
+                        }
+                    ]
+                });
+            });
+            ctx.rpcServer.getRouterInfo({
+                event: eventName
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('get-pinia-state', {
+        description: 'Get the Pinia state in JSON structure format.',
+        inputSchema: {
+            storeName: z.string()
+        }
+    }, async ({ storeName })=>new Promise((resolve, reject)=>{
+            const eventName = nanoid();
+            ctx.hooks.hookOnce(eventName, (res)=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: stringify(res)
+                        }
+                    ]
+                });
+            });
+            ctx.rpcServer.getPiniaState({
+                event: eventName,
+                storeName
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    server.registerTool('get-pinia-tree', {
+        description: 'Get the Pinia tree in JSON structure format.'
+    }, async ()=>new Promise((resolve, reject)=>{
+            const eventName = nanoid();
+            ctx.hooks.hookOnce(eventName, (res)=>{
+                resolve({
+                    content: [
+                        {
+                            type: 'text',
+                            text: stringify(res)
+                        }
+                    ]
+                });
+            });
+            ctx.rpcServer.getPiniaTree({
+                event: eventName
+            }).catch((e)=>{
+                console.error(e);
+                reject(e);
+            });
+        }));
+    return server;
+}
+async function mcpHandlerStateless(server, req, res) {
+    try {
+        const transport = new StreamableHTTPServerTransport({
+            sessionIdGenerator: void 0
+        });
+        await server.connect(transport);
+        await transport.handleRequest(req, res);
+        res.on('close', ()=>{
+            transport.close();
+            server.close();
+        });
+    } catch (error) {
+        console.error('Error handling MCP request:', error);
+        if (!res.headersSent) {
+            res.statusCode = 500;
+            res.setHeader('content-type', 'application/json');
+            res.end(JSON.stringify({
+                jsonrpc: '2.0',
+                error: {
+                    code: -32603,
+                    message: 'Internal server error'
+                },
+                id: null
+            }));
+        }
+    }
+}
+function setupRoutes(base, getServer, dev) {
+    dev.middlewares.use(`${base}/mcp`, async (req, res)=>{
+        const server = await getServer();
+        await mcpHandlerStateless(server, req, res);
+    });
+}
+function setupRspackRoutes(base, getServer, middlewares) {
+    middlewares.push({
+        name: 'vue-devtools-mcp',
+        path: `${base}/mcp`,
+        async middleware (req, res) {
+            const server = await getServer();
+            await mcpHandlerStateless(server, req, res);
+        }
+    });
+}
+export { createMcpServerDefault, createRPCServer, createServerRpcFunc, createVueMcpContext, setupRoutes, setupRspackRoutes };