rsbuild-plugin-vue-mcp 0.1.0

package/dist/index.cjs

@@ -0,0 +1,428 @@
+"use strict";
+const __rslib_import_meta_url__ = /*#__PURE__*/ function() {
+    return "u" < typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
+}();
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    pluginVueMcp: ()=>pluginVueMcp
+});
+const external_node_url_namespaceObject = require("node:url");
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const promises_namespaceObject = require("node:fs/promises");
+var promises_default = /*#__PURE__*/ __webpack_require__.n(promises_namespaceObject);
+const external_ws_namespaceObject = require("ws");
+const external_hookable_namespaceObject = require("hookable");
+function createVueMcpContext() {
+    return {
+        hooks: (0, external_hookable_namespaceObject.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 external_birpc_namespaceObject = require("birpc");
+const channelCache = new WeakMap();
+function createRPCServer(ws, functions, options = {}) {
+    const group = (0, external_birpc_namespaceObject.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;
+}
+const mcp_js_namespaceObject = require("@modelcontextprotocol/sdk/server/mcp.js");
+var package_namespaceObject = {
+    rE: "0.1.0"
+};
+const external_nanoid_namespaceObject = require("nanoid");
+const external_zod_namespaceObject = require("zod");
+function stringify(value) {
+    return "string" == typeof value ? value : JSON.stringify(value);
+}
+function createMcpServerDefault(options, ctx) {
+    const server = new mcp_js_namespaceObject.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 = (0, external_nanoid_namespaceObject.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: external_zod_namespaceObject.z.string()
+        }
+    }, async ({ componentName })=>new Promise((resolve, reject)=>{
+            const eventName = (0, external_nanoid_namespaceObject.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: external_zod_namespaceObject.z.string(),
+            path: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string()),
+            value: external_zod_namespaceObject.z.string(),
+            valueType: external_zod_namespaceObject.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: external_zod_namespaceObject.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 = (0, external_nanoid_namespaceObject.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: external_zod_namespaceObject.z.string()
+        }
+    }, async ({ storeName })=>new Promise((resolve, reject)=>{
+            const eventName = (0, external_nanoid_namespaceObject.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 = (0, external_nanoid_namespaceObject.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;
+}
+const streamableHttp_js_namespaceObject = require("@modelcontextprotocol/sdk/server/streamableHttp.js");
+async function mcpHandlerStateless(server, req, res) {
+    try {
+        const transport = new streamableHttp_js_namespaceObject.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 getVueMcpPath() {
+    const pluginPath = external_node_path_default().dirname((0, external_node_url_namespaceObject.fileURLToPath)(__rslib_import_meta_url__));
+    return pluginPath.replaceAll('\\', '/');
+}
+function getOverlayBootstrapPath() {
+    const fileUrl = new URL('./overlay-bootstrap.js', __rslib_import_meta_url__);
+    return (0, external_node_url_namespaceObject.fileURLToPath)(fileUrl).replaceAll('\\', '/').replace('/src/', '/dist/');
+}
+const pluginVueMcp = (options = {})=>({
+        name: 'plugin-vue-mcp',
+        enforce: 'pre',
+        apply: 'serve',
+        async setup (api) {
+            const ctx = createVueMcpContext();
+            const vueMcpPath = getVueMcpPath();
+            const wsPath = '/__vue-devtools-mcp-ws';
+            if (options.appendTo) {
+                let firstInjected = false;
+                const reg = new RegExp(options.appendTo);
+                api.transform({
+                    test: {
+                        and: [
+                            /[\\/]src[\\/].+\.(js|jsx|mjs|ts|tsx|mts)$/,
+                            reg
+                        ],
+                        not: /[\\/]node_modules[\\/]/
+                    },
+                    targets: [
+                        'web'
+                    ],
+                    order: 'pre'
+                }, (context)=>{
+                    if ('dev' !== api.context.action || firstInjected) return context;
+                    let code = context.code;
+                    if ('string' != typeof code) return context;
+                    firstInjected = true;
+                    console.log('  ➜  VueDevtools MCP: injection `overlay.js` to:', context.resource);
+                    return `${code}\n import '${vueMcpPath}/overlay.js';\n`;
+                });
+            }
+            if (!options.appendTo) api.modifyHTMLTags(async (tags)=>{
+                const overlayPath = getOverlayBootstrapPath();
+                try {
+                    const js = await promises_default().readFile(overlayPath, {
+                        encoding: 'utf8'
+                    });
+                    tags.headTags.push({
+                        tag: "script",
+                        attrs: {
+                            id: 'overlay-bootstrap.js'
+                        },
+                        children: js
+                    });
+                    console.log('  ➜  VueDevtools MCP: injection html => overlay-bootstrap.js');
+                } catch (e) {}
+                return tags;
+            });
+            api.onBeforeStartDevServer(async ({ server })=>{
+                if (!server) return void console.error('❌ [vue-devtools-mcp] no rebuild devServer, requires Rsbuild >= 1.2.9');
+                const httpServer = server.httpServer;
+                if (!httpServer) return void console.warn('❌ [vue-devtools-mcp] HTTP Server not found, cannot start WebSocket server.');
+                const wss = new external_ws_namespaceObject.WebSocketServer({
+                    noServer: true
+                });
+                wss.on('connection', ()=>{
+                    console.debug('✅ Client connected to vue-devtools-mcp WebSocket!');
+                });
+                httpServer.on('upgrade', (request, socket, head)=>{
+                    const { pathname } = new URL(request.url || '', 'wss://base.url');
+                    if (pathname !== wsPath) return;
+                    wss.handleUpgrade(request, socket, head, (client)=>{
+                        wss.emit('connection', client, request);
+                    });
+                });
+                const rpc = createServerRpcFunc(ctx);
+                ctx.rpcServer = createRPCServer(wss, rpc, {
+                    timeout: 3000
+                });
+                ctx.rpc = rpc;
+                const { printUrl = true, mcpPath = '/__mcp' } = options;
+                setupRoutes(mcpPath, async ()=>{
+                    let mcp = createMcpServerDefault(options, ctx);
+                    mcp = await options.mcpServerSetup?.(mcp, api) || mcp;
+                    return mcp;
+                }, server);
+                if (printUrl) {
+                    const mcpUrl = `http://localhost:${server.port}${mcpPath}/mcp`;
+                    setTimeout(()=>{
+                        if (api.logger?.info) api.logger.info(`  ➜  MCP:     Server is running at ${mcpUrl}`);
+                        else console.log(`  ➜  MCP:     Server is running at ${mcpUrl}`);
+                    }, 300);
+                }
+            });
+        }
+    });
+exports.pluginVueMcp = __webpack_exports__.pluginVueMcp;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "pluginVueMcp"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/index.js

@@ -0,0 +1,101 @@
+import { fileURLToPath } from "node:url";
+import node_path from "node:path";
+import promises from "node:fs/promises";
+import { WebSocketServer } from "ws";
+import { createMcpServerDefault, createVueMcpContext, createRPCServer, setupRoutes, createServerRpcFunc } from "./551.js";
+function getVueMcpPath() {
+    const pluginPath = node_path.dirname(fileURLToPath(import.meta.url));
+    return pluginPath.replaceAll('\\', '/');
+}
+function getOverlayBootstrapPath() {
+    const fileUrl = new URL('./overlay-bootstrap.js', import.meta.url);
+    return fileURLToPath(fileUrl).replaceAll('\\', '/').replace('/src/', '/dist/');
+}
+const pluginVueMcp = (options = {})=>({
+        name: 'plugin-vue-mcp',
+        enforce: 'pre',
+        apply: 'serve',
+        async setup (api) {
+            const ctx = createVueMcpContext();
+            const vueMcpPath = getVueMcpPath();
+            const wsPath = '/__vue-devtools-mcp-ws';
+            if (options.appendTo) {
+                let firstInjected = false;
+                const reg = new RegExp(options.appendTo);
+                api.transform({
+                    test: {
+                        and: [
+                            /[\\/]src[\\/].+\.(js|jsx|mjs|ts|tsx|mts)$/,
+                            reg
+                        ],
+                        not: /[\\/]node_modules[\\/]/
+                    },
+                    targets: [
+                        'web'
+                    ],
+                    order: 'pre'
+                }, (context)=>{
+                    if ('dev' !== api.context.action || firstInjected) return context;
+                    let code = context.code;
+                    if ('string' != typeof code) return context;
+                    firstInjected = true;
+                    console.log('  ➜  VueDevtools MCP: injection `overlay.js` to:', context.resource);
+                    return `${code}\n import '${vueMcpPath}/overlay.js';\n`;
+                });
+            }
+            if (!options.appendTo) api.modifyHTMLTags(async (tags)=>{
+                const overlayPath = getOverlayBootstrapPath();
+                try {
+                    const js = await promises.readFile(overlayPath, {
+                        encoding: 'utf8'
+                    });
+                    tags.headTags.push({
+                        tag: "script",
+                        attrs: {
+                            id: 'overlay-bootstrap.js'
+                        },
+                        children: js
+                    });
+                    console.log('  ➜  VueDevtools MCP: injection html => overlay-bootstrap.js');
+                } catch (e) {}
+                return tags;
+            });
+            api.onBeforeStartDevServer(async ({ server })=>{
+                if (!server) return void console.error('❌ [vue-devtools-mcp] no rebuild devServer, requires Rsbuild >= 1.2.9');
+                const httpServer = server.httpServer;
+                if (!httpServer) return void console.warn('❌ [vue-devtools-mcp] HTTP Server not found, cannot start WebSocket server.');
+                const wss = new WebSocketServer({
+                    noServer: true
+                });
+                wss.on('connection', ()=>{
+                    console.debug('✅ Client connected to vue-devtools-mcp WebSocket!');
+                });
+                httpServer.on('upgrade', (request, socket, head)=>{
+                    const { pathname } = new URL(request.url || '', 'wss://base.url');
+                    if (pathname !== wsPath) return;
+                    wss.handleUpgrade(request, socket, head, (client)=>{
+                        wss.emit('connection', client, request);
+                    });
+                });
+                const rpc = createServerRpcFunc(ctx);
+                ctx.rpcServer = createRPCServer(wss, rpc, {
+                    timeout: 3000
+                });
+                ctx.rpc = rpc;
+                const { printUrl = true, mcpPath = '/__mcp' } = options;
+                setupRoutes(mcpPath, async ()=>{
+                    let mcp = createMcpServerDefault(options, ctx);
+                    mcp = await options.mcpServerSetup?.(mcp, api) || mcp;
+                    return mcp;
+                }, server);
+                if (printUrl) {
+                    const mcpUrl = `http://localhost:${server.port}${mcpPath}/mcp`;
+                    setTimeout(()=>{
+                        if (api.logger?.info) api.logger.info(`  ➜  MCP:     Server is running at ${mcpUrl}`);
+                        else console.log(`  ➜  MCP:     Server is running at ${mcpUrl}`);
+                    }, 300);
+                }
+            });
+        }
+    });
+export { pluginVueMcp };